@import "button";


/**********
 ! Notebook
***********/

@include exports("notebook") {

    $tab_border_width: 1px;
    $tab_marker_width: 3px;
    $max_single_tab_roundness: 6px;
    $max_tab_bar_roundness: 13px;
    $vertical_tab_spacing: $spacing + if($roundness <= $max_tab_bar_roundness,
         if($roundness > 8px, $roundness, 8px),
         8px
    );

    notebook {
        padding: 0;

        &.frame {
            border: 1px solid $borders_color;

            > header {
                // ugly hack to hide the borders around the header
                margin: -1px;

                &.top { margin-bottom: 0; }

                &.bottom { margin-top: 0; }

                &.left { margin-right: 0; }

                &.right { margin-left: 0; }

                &.top, &.bottom { padding-left: 0; padding-right: 0; }

                &.left, &.right { padding-top: 0; padding-bottom: 0; }
            }
        }

        > stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
            background-color: $bg_color;
        }

        > header {
            padding: $spacing;
            background-color: $bg_color;

            &.top {
                box-shadow: inset  0  -1px $borders_color;
            }

            &.bottom {
                box-shadow: inset  0   1px $borders_color;
            }

            &.right {
                box-shadow: inset  1px 0   $borders_color;
            }

            &.left {
                box-shadow: inset -1px 0   $borders_color;
            }


            // overflow arrows
            &.top, &.bottom {
                > tabs > arrow.up {
                    -gtk-icon-source: -gtk-icontheme("pan-end-symbolic");

                    &:last-child { margin-left: 2px; }
                }

                > tabs > arrow.down {
                    -gtk-icon-source: -gtk-icontheme("pan-start-symbolic");

                    &:first-child { margin-right: 2px; }
                }
            }

            &.left, &.right {
                > tabs > arrow.up {
                    -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");

                    &:last-child { margin-top: 2px; }
                }

                > tabs > arrow.down {
                    -gtk-icon-source: -gtk-icontheme("pan-up-symbolic");

                    &:first-child { margin-bottom: 2px; }
                }
            }

            > tabs > arrow {
                @extend %close_button;
                color: $insensitive_fg_color;

                &:hover { color: mix($fg_color, $insensitive_fg_color, .5); }

                &:active { color: $fg_color; }

                &:disabled { color: alpha($insensitive_fg_color, .3); }
            }

            > tabs > tab {
                @include linear-gradient(alpha(mix($bg_color, $fg_color, .1), .7));
                border-color: mix($borders_color, $insensitive_fg_color, .15);
                color: alpha($fg_color, .8);

                padding: $spacing $vertical_tab_spacing;
                min-width: 20px;
                min-height: 20px;
                outline-offset: -4px;
                border-width: $tab_border_width;
                border-style: solid;

                &:hover:not(:checked) {
                    //@include linear-gradient(mix($bg_color, $fg_color, .12));
                    @include linear-gradient(mix($bg_color, $fg_color, .04));
                    color: mix($fg_color, $insensitive_fg_color, .5);
                }

                &:checked, &:checked:hover {
                    background: $bg_color;
                    border-color: $borders_color;
                    color: $fg_color;
                }

                // close button
                button.flat {
                    min-height: 22px;
                    min-width: 22px;
                    padding: 0;
                    color: mix($bg_color, $fg_color, .35);

                    &:hover {
                        @extend %undecorated_button;
                        color: lighten($error_color, 15%);
                    }

                    &:active, &:active:hover {
                        @extend %undecorated_button;
                        color: $selected_bg_color;
                    }
                }
            }

            // tab colors

            &.top > tabs > tab:hover:not(:checked) { box-shadow: inset 0 -1px $borders_color; }

            &.bottom > tabs > tab:hover:not(:checked) { box-shadow: inset 0 1px $borders_color; }

            &.left > tabs > tab:hover:not(:checked) { box-shadow: inset -1px 0 $borders_color; }

            &.right > tabs > tab:hover:not(:checked) { box-shadow: inset 1px 0 $borders_color; }

            @each $_pos, $_bpos in (top, bottom), (bottom, top), (right, left), (left, right) {
                // sizing and borders
                &.#{$_pos} {
                    padding-#{$_bpos}: 0;

                    > tabs > tab {
                        border-#{$_bpos}: none;
                        //border-#{$_pos}-color: $bg_color;
                        -gtk-outline-radius: 0;

                        @if $roundness <= $max_single_tab_roundness {
                            margin-#{$_pos}: $roundness;
                        }
                        // tab overlap
                        + tab {
                            @if $_pos==top or $_pos==bottom { margin-left: -1px; }
                            @else { margin-top: -1px; }
                        }

                        // tab border radius
                        &:first-child {
                            @if $roundness <= $max_tab_bar_roundness {
                                @if $_pos==top {
                                    border-radius: $roundness 0 0;
                                    -gtk-outline-radius: $roundness 0 0;
                                } @else if $_pos==bottom {
                                    border-radius: 0 0 0 $roundness;
                                    -gtk-outline-radius: 0 0 0 $roundness;
                                } @else if $_pos==left {
                                    border-radius: $roundness 0 0;
                                    -gtk-outline-radius: $roundness 0 0;
                                } @else if $_pos==right {
                                    border-radius: 0 $roundness 0 0;
                                    -gtk-outline-radius: 0 $roundness 0 0;
                                }
                            } @else {
                                border-radius: 0;
                            }
                        }

                        &:last-child {
                            @if $roundness <= $max_tab_bar_roundness {
                                @if $_pos==top {
                                    border-radius: 0 $roundness 0 0;
                                    -gtk-outline-radius: 0 $roundness 0 0;
                                } @else if $_pos==bottom {
                                    border-radius: 0 0 $roundness;
                                    -gtk-outline-radius: 0 0 $roundness;
                                } @else if $_pos==left {
                                    border-radius: 0 0 0 $roundness;
                                    -gtk-outline-radius: 0 0 0 $roundness;
                                } @else if $_pos==right {
                                    border-radius: 0 0 $roundness;
                                    -gtk-outline-radius: 0 0 $roundness;
                                }
                            } @else {
                                border-radius: 0;
                            }
                        }

                        &:hover:not(:checked),
                        &:checked {
                            $compensate_tab_marker_padding: $tab_marker_width - $tab_border_width - if(
                                $roundness <= $max_single_tab_roundness, $roundness, 0
                            );
                            border-#{$_pos}-width: $tab_marker_width;
                            border-#{$_pos}-color: $selected_bg_color;
                            margin-#{$_pos}: 0;

                            @if $roundness <= $max_single_tab_roundness {
                                -gtk-outline-radius: $roundness;
                                @if $_pos==top {
                                    border-radius: $roundness $roundness 0 0;
                                } @else if $_pos==bottom {
                                    border-radius: 0 0 $roundness $roundness;
                                } @else if $_pos==left {
                                    border-radius: $roundness 0 0 $roundness;
                                } @else if $_pos==right {
                                    border-radius: 0 $roundness $roundness 0;
                                }
                            }
                            @if $_pos==top or $_pos==bottom {
                                padding-#{$_pos}: $spacing - $compensate_tab_marker_padding;
                            } @else if $_pos==left or $_pos==right {
                                padding-#{$_pos}: $vertical_tab_spacing - $compensate_tab_marker_padding;
                            }
                        }

                        &:hover:not(:checked) {
                            border-#{$_pos}-color: mix($selected_bg_color, mix($bg_color, $fg_color, .2), .66);
                        }
                    }
                }
            }

        }
    }

}
