//
// Notebook styles
//

notebook
{
    > header
    {
        background-color: $dark_fill;
        border-color:     $borders_color;
        border-width:     1px;
        padding:          1px;

        &:backdrop
        {
            background-color: $backdrop_dark_fill;
            border-color:     $backdrop_borders_color;
        }

        tabs
        {
            margin: -1px;
        }

        &.top
        {
            border-bottom-style: solid;

            > tabs
            {
                margin-bottom: -2px;

                > tab
                {
                    &:hover    { box-shadow: inset 0 -4px $borders_color;     }
                    &:backdrop { box-shadow: none;                            }
                    &:checked  { box-shadow: inset 0 -4px $selected_bg_color; }
                }
            }
        }

        &.bottom
        {
            border-top-style: solid;

            > tabs
            {
                margin-top: -2px;

                > tab
                {
                    &:hover    { box-shadow: inset 0 4px $borders_color;     }
                    &:backdrop { box-shadow: none;                           }
                    &:checked  { box-shadow: inset 0 4px $selected_bg_color; }
                }
            }
        }

        &.left
        {
            border-right-style: solid;

            > tabs
            {
                margin-right: -2px;
                
                > tab
                {
                    &:hover    { box-shadow: inset -4px 0 $borders_color;     }
                    &:backdrop { box-shadow: none;                            }
                    &:checked  { box-shadow: inset -4px 0 $selected_bg_color; }
                }
            }
        }

        &.right
        {
            border-left-style: solid;
            
            > tabs
            {
                margin-left: -2px;
                
                > tab
                {
                    &:hover    { box-shadow: inset 4px 0 $borders_color;     }
                    &:backdrop { box-shadow: none;                           }
                    &:checked  { box-shadow: inset 4px 0 $selected_bg_color; }
                }
            }
        }

        &.top > tabs > arrow
        {
            @extend %notebook_vert_arrows;

            border-top-style: none;
        }

        &.bottom > tabs > arrow
        {
            @extend %notebook_vert_arrows;

            border-bottom-style: none;
        }

        @at-root %notebook_vert_arrows
        {
            margin-left:   -5px;
            margin-right:  -5px;
            padding-left:   4px;
            padding-right:  4px;
            
            &.down { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
            &.up   { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');   }
        }

        &.left > tabs > arrow
        {
            @extend %notebook_horz_arrows;

            border-left-style: none;
        }

        &.right > tabs > arrow
        {
            @extend %notebook_horz_arrows;
            
            border-right-style: none;
        }

        @at-root %notebook_horz_arrows
        {
            margin-bottom:  -5px;
            margin-top:     -5px;
            padding-bottom:  4px;
            padding-top:     4px;

            &.down { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic');   }
            &.up   { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
        }

        > tabs > arrow
        {
            @extend %button_basic;

            @extend %button_basic_flat;

            border-radius: 0;
            min-height:    16px;
            min-width:     16px;

            &:hover:not(:active):not(:backdrop)
            {
                background-clip:  padding-box;
                background-color: transparentize(white, 0.7);
                background-image: none;
                border-color:     transparent;
                box-shadow:       none;
            }

            &:disabled
            {
                @include button(undecorated);
            }
        }

        tab
        {
            border-color:    transparent; // For reorderable tabs
            border-width:    1px;         //
            color:           $fg_color;
            font-weight:     normal;
            min-height:      30px;
            min-width:       30px;
            outline-offset: -5px;
            padding:         3px 12px;

            &:hover
            {
                background-color: darken($bg_color,4%);
                color:            $fg_color;

                &.reorderable-page
                {
                    background-color: transparentize($bg_color,      0.8);
                    border-color:     transparentize($borders_color, 0.7);
                }
            }

            &:backdrop
            {
                color: mix($backdrop_fg_color, $backdrop_bg_color, 60%);
                
                &.reorderable-page
                {
                    background-color: transparent;
                    border-color:     transparent;
                }
            }

            &:checked
            {
                color: $fg_color;
                
                &.reorderable-page
                {
                    background-color: transparentize($bg_color,      0.5);
                    border-color:     transparentize($borders_color, 0.5);

                    &:hover
                    {
                        background-color: transparentize($bg_color, 0.3);
                    }
                }
            }

            &:backdrop:checked
            {
                color: $backdrop_fg_color;
                
                &.reorderable-page
                {
                    background-color: $backdrop_bg_color;
                    border-color:     $backdrop_borders_color;
                }
            }

            // Colors the button like the label, overridden otherwise
            //
            button.flat
            {
                padding: 0;
                margin-top: 4px;
                margin-bottom: 4px;

                // FIXME: generalize .small-button?
                min-width: 20px;
                min-height: 20px;


                &:hover
                {
                    color: currentColor;
                }
                
                &,
                &:backdrop
                {
                    color: gtkalpha(currentColor, 0.3);
                }

                &:last-child
                {
                    margin-left:   4px;
                    margin-right: -4px;
                }

                &:first-child
                {
                    margin-left:  -4px;
                    margin-right:  4px;
                }
            }
        }

        &.bottom,
        &.top
        {
            tabs
            {
                padding-left:  4px;
                padding-right: 4px;

                &:not(:only-child)
                {
                    margin-left:  3px;
                    margin-right: 3px;

                    &:first-child { margin-left:  -1px; }
                    &:last-child  { margin-right: -1px; }
                }

                tab
                {
                    margin-left:  4px;
                    margin-right: 4px;

                    &.reorderable-page
                    {
                        border-style: none solid;
                    }
                }
            }
        }
        
        &.left,
        &.right
        {
            tabs
            {
                padding-bottom: 4px;
                padding-top:    4px;
                
                &:not(:only-child)
                {
                    margin-bottom: 3px;
                    margin-top:    3px;
                    
                    &:first-child { margin-top:    -1px; }
                    &:last-child  { margin-bottom: -1px; }
                }
                
                tab
                {
                    margin-bottom: 4px;
                    margin-top:    4px;
                    
                    &.reorderable-page
                    {
                        border-style: solid none;
                    }
                }
            }
        }
        
        &.top    tab { padding-bottom: 4px; }
        &.bottom tab { padding-top:    4px; }
    }

    // The :not(:only-child) is for "hidden" notebooks
    //
    > stack:not(:only-child)
    { 
        background-color: $base_color;
        
        &:backdrop
        {
            background-color: $backdrop_base_color;
        }
    }
}
