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

@include exports("sidebar") {
    .sidebar {
        &, &.view, .view, view, scrolledwindow {
            background-color: $bg_color;
            color: mix($fg_color, $bg_color, .1);

            &.separator, separator {
                &, &:hover, &:focus {
                    border-width: 1px;
                    border-style: solid;
                    border-color: shade($bg_color, .9);
                    color: shade($bg_color, .9);
                }
            }
        }

        row, .view row, view row {
            &:selected {
                &, &:hover, &:focus {
                    border: 0;
                    background-image: none;
                    background-color: $selected_bg_color;
                    color: $selected_fg_color;
                }

                &:hover {
                    border: 0;
                    background-image: none;
                    background-color: shade($selected_bg_color, 1.05);
                    color: $selected_fg_color;
                }
            }

            &:hover {
                border: 0;
                background-image: none;
                background-color: shade($bg_color, 1.05);
            }
        }

        .sidebar-label {
            padding-left: $spacing;
            padding-right: $spacing;
        }

        .frame, frame { border-width: 0; }
        .sidebar-icon {
              padding-left: $spacing * 2;
              padding-right: $spacing * 2;
        }

        assistant & {
            padding: $spacing;
            border-width: 0 1px 0 0;
            border-style: solid;
            border-right-color: border_normal($bg_color);
            border-radius: 0;
            background-color: $bg_color;
            color: mix($fg_color, $bg_color, .1);

            &:dir(ltr) { border-width: 0 1px 0 0; }

            &:dir(rtl) { border-width: 0 0 0 1px; }

            label {
                padding: $spacing ($spacing * 2);

                &.highlight { background-color: mix($bg_color, $fg_color, .8); }
            }

            &.csd .sidebar { border-top-style: none; }

            .highlight { font: bold; }
        }
    }
}


/******
! 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;

            &: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;

            &:dir(ltr) {
                margin: 0 -8px 0 0;
                padding: 0 8px 0 0;
                background-position: left;
            }

            &:dir(rtl) {
                margin: 0 0 0 -8px;
                padding: 0 0 0 8px;
                background-position: right;
            }

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

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

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