//
// Scrollbar styles
//

scrollbar
{
    $_scrollbar_transition:    all 300ms $ease-out-quad;
    $_slider_min_length:       40px;
    $_slider_width:            8px;
    $_fine-tune_slider_border: $_slider_width - 3; //3672

    // Disable steppers
    //
    @at-root *
    {
        -GtkScrollbar-has-backward-stepper: false;
        -GtkScrollbar-has-forward-stepper:  false;
    }

    background-color: $scrollbar_bg_color;
    transition:       $_scrollbar_transition;
    
    // Scrollbar border
    //
    &.bottom { border-top:    1px solid $borders_color; }
    &.left   { border-right:  1px solid $borders_color; }
    &.right  { border-left:   1px solid $borders_color; }
    &.top    { border-bottom: 1px solid $borders_color; }
    
    &:backdrop
    {
        background-color: $backdrop_scrollbar_bg_color;
        border-color:     $backdrop_borders_color;
        transition:       $backdrop_transition;
    }
    
    // Slider
    //
    slider
    {
        background-clip:   padding-box;
        background-color:  $scrollbar_slider_color;
        border:            4px solid transparent;
        border-radius:     10px;
        margin:           -1px;
        min-width:         $_slider_width;
        min-height:        $_slider_width;
        transition:        $_scrollbar_transition;

        &:hover        { background-color: $scrollbar_slider_hover_color;    }
        &:hover:active { background-color: $scrollbar_slider_active_color;   }
        &:backdrop     { background-color: $backdrop_scrollbar_slider_color; }
        &:disabled     { background-color: transparent;                      }
    }
    
    &.fine-tune
    {
        slider
        {
            min-height: $_fine-tune_slider_border+1;
            min-width:  $_fine-tune_slider_border+1;
            transition: none;
        }
        
        &.horizontal slider { border-width: $_fine-tune_slider_border 4px; }
        &.vertical   slider { border-width: 4px $_fine-tune_slider_border; }
    }
    
    &.overlay-indicator
    {
        &:not(.dragging):not(.hovering)
        {
            background-color: transparent;
            border-color:     transparent;
            opacity:          0.4;
            
            slider
            {
                background-color: $fg_color;
                border:           1px solid if($variant == 'light', #FFFFFF, #000000);
                margin:           0;
                min-width:        3px;
                min-height:       3px;
            }
            
            button
            {
                background-clip:  padding-box;
                background-color: $fg_color;
                border:           1px solid if($variant == 'light', #FFFFFF, #000000);
                border-radius:    100%;
                min-height:       5px;
                min-width:        5px;
                -gtk-icon-source: none;
            }
            
            &.horizontal
            {
                slider
                {
                    margin:    0 2px;
                    min-width: $_slider_min_length;
                }
                
                button
                {
                    margin:    1px 2px;
                    min-width: 5px;
                }
            }
            
            &.vertical
            {
                slider
                {
                    margin:     2px 0;
                    min-height: $_slider_min_length;
                }
                
                button
                {
                    margin:     2px 1px;
                    min-height: 5px;
                }
            }
        }
        
        &.dragging,
        &.hovering
        {
            opacity: 0.8;
        }
    }
    
    &.horizontal slider { min-width:  $_slider_min_length; }
    &.vertical   slider { min-height: $_slider_min_length; }
    
    // Button styling
    //
    button
    {
        border-radius: 0;
        border-style:  none;
        min-width:     12px;
        min-height:    12px;
        padding:       0;
        transition-property: min-height, min-width, color;
        
        // Import and override button styles
        //
        @include button(undecorated);

        color: $scrollbar_slider_color;
        
        &:hover
        {
            @include button(undecorated);
            
            color: $scrollbar_slider_hover_color;
        }
        
        &:active, &:checked
        {
            @include button(undecorated);
            
            color: $scrollbar_slider_active_color;
        }
        
        &:disabled 
        {
            @include button(undecorated);
            
            color: transparentize($scrollbar_slider_color, 0.8);
        }
        
        &:backdrop
        {
            @include button(undecorated);
            
            color: $backdrop_scrollbar_slider_color;
            
            &:disabled
            {
                @include button(undecorated);
                
                color: transparentize($backdrop_scrollbar_slider_color, 0.8);
            }
        }
    }
    
    // Button icons
    //
    &.vertical
    {
        button
        {
            &.up   { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic');   }
            &.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
        }
    }
    
    &.horizontal
    {
        button
        {
            &.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');   }
            &.up   { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
        }
    }
}

treeview ~ scrollbar.vertical
{
    border-top:  1px solid $borders_color;
    margin-top: -1px;
}
