/*********
 ! Sidebar
**********/

@include exports("sidebar") {
    .sidebar {
        border-style: none;
        background-color: mix($bg_color, $base_color, .5);

        @at-root %sidebar_left,
        &:dir(ltr),
        &.left,
        &.left:dir(rtl) {
            border-right: 1px solid $borders_color;
            border-left-style: none;
        }

        @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: 200ms ease-out;
        }

        .frame, frame { border-width: 0; }

        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: $spacing * 2 $spacing;

            > label {
                padding-left: $spacing;
                padding-right: $spacing;
            }

            &.needs-attention > label {
                @extend %needs_attention;

                background-size: 6px 6px, 0 0;
            }
        }
    }

    $_placesidebar_icons_opacity: .7;

    placessidebar {
        > viewport.frame { border-style: none; }

        row {
            // Needs overriding of the GtkListBoxRow padding
            min-height: 32px;
            padding: 0;

            // Using margins/padding directly in the SidebarRow
            // will make the animation of the new bookmark row jump
            > revealer { padding: 0 $spacing * 2; }

            &:selected { color: $selected_fg_color; }

            &:disabled { color: $insensitive_fg_color; }

            &:backdrop {
                color: $backdrop_fg_color;

                &:selected { color: $backdrop_selected_fg_color; }

                &:disabled { color: $backdrop_insensitive_color; }
            }

            image.sidebar-icon {
                opacity: $_placesidebar_icons_opacity; // dim the device icons

                &:dir(ltr) {
                    padding-right: $spacing*2 + 2;
                    padding-left: $spacing;
                }

                &:dir(rtl) {
                    padding-left: $spacing*2 + 2;
                    padding-right: $spacing;
                }
            }

            label.sidebar-label {
                &:dir(ltr) { padding-right: 2px; }

                &:dir(rtl) { padding-left: 2px; }
            }

            @at-root button.sidebar-button {
                //@extend %button_basic.flat;

                //@extend %button_selected.flat;

                min-height: 20px;
                min-width: 20px;
                margin-top: 2px;
                margin-bottom: 2px;
                padding: 0;
                border-radius: 100%;
                -gtk-outline-radius: 100%;

                &:not(:hover):not(:active),
                &:backdrop {
                    > image { opacity: $_placesidebar_icons_opacity; }
                }
            }

            // in the sidebar case it makes no sense to click the selected row
            &:selected:active { box-shadow: none; }

            &.sidebar-placeholder-row {
                padding: 0 8px;
                min-height: 2px;
                background-image: image($drop_target_color);
                background-clip: content-box;
            }

            &.sidebar-new-bookmark-row { color: $selected_bg_color; }

            &:drop(active):not(:disabled) {
                color: $drop_target_color;
                box-shadow: inset 0 1px $drop_target_color,
                            inset 0 -1px $drop_target_color;

                &:selected {
                    color: $selected_fg_color;
                    background-color: $drop_target_color;
                }
            }
        }
    }
}


/******
! Paned
*******/

@include exports("paned") {
    paned {
        > separator {
            min-width: 1px;
            min-height: 1px;
            -gtk-icon-source: none; // defeats the ugly default handle decoration
            border-style: none; // just to be sure
            background-color: transparent;
            // workaround, using background istead of a border since the border will get rendered twice (?)
            background-image: image(shade($bg_color, .9));
            background-size: 1px 1px;
            background-position: center center;

            &:selected { background-image: image($selected_bg_color); } // FIXME is this needed?

            &:backdrop { background-image: image($backdrop_borders_color); }

            &.wide {
                min-width: 5px;
                min-height: 5px;
                background-color: $bg_color;
                background-image: image(border_normal($bg_color)), image(border_normal($bg_color));
                background-size: 1px 1px, 1px 1px;

                &:backdrop {
                    background-color: $backdrop_bg_color;
                    background-image: image($backdrop_borders_color),
                                      image($backdrop_borders_color);
              }
           }
        }

        &.horizontal > separator {
            background-repeat: repeat-y;
            padding: 0 2px;
            margin: 0 -2px;

            &.wide {
                margin: 0;
                padding: 0;
                background-repeat: repeat-y, repeat-y;
                background-position: left, right;
            }
        }

        &.vertical > separator {
            background-repeat: repeat-x;
            padding: 2px 0;
            margin: -2px 0;

            &.wide {
                margin: 0;
                padding: 0;
                background-repeat: repeat-x, repeat-x;
                background-position: bottom, top;
            }
        }

        &.titlebar > separator {
            background-image: image(shade($titlebar_bg_color, ($contrast + .1)));
        }
    }
}