//
// Sidebar styles
//

.sidebar
{
    background-color: mix($bg_color, $base_color, 50%);
    border-style:     none;
    
    &:not(separator)
    {
        @at-root %sidebar_left,
        &:dir(ltr),
        &.left,
        &.left:dir(rtl)
        {
            border-left-style: none;
            border-right:      1px solid $borders_color;
        }
        
        @at-root %sidebar_right,
        &:dir(rtl),
        &.right
        {
            border-left:        1px solid $borders_color;
            border-right-style: none;
        }
    }
    
    &:backdrop
    {
        background-color: $backdrop_sidebar_bg_color;
        border-color:     $backdrop_borders_color;
        transition:       $backdrop_transition;
    }
    
    list
    {
        background-color: transparent;
    }
    
    paned &
    {
        &.left,
        &.right,
        &.left:dir(rtl),
        &:dir(rtl),
        &:dir(ltr),
        &
        {
            border-style: none; 
        }
    }
}

stacksidebar
{
    &.sidebar
    {
        &:dir(ltr),
        &.left,
        &.left:dir(rtl) { list { @extend %sidebar_left; }}
        
        &:dir(rtl),
        &.right { list { @extend %sidebar_right; }}
    }
    
    row
    {
        padding: 10px 4px;
        
        > label
        {
            padding-left:  6px;
            padding-right: 6px;
        }
        
        &.needs-attention > label
        {
            @extend %needs_attention;
            
            background-size: 6px 6px, 0 0;
        }
    }
}

separator.sidebar
{
    background-color: $borders_color;
    
    &:backdrop
    {
        background-color: $backdrop_borders_color;
    }
    
    &.selection-mode,
    .selection-mode &
    {
        background-color: darken($suggested_bg_color, 20%);
    }
}
