//
// Various toolbar styles
//

%toolbar
{
    -GtkWidget-window-dragging: true;
    padding: 4px;
    background-color: $bg_color;
}

toolbar
{
    @extend %toolbar;

    padding: 4px 3px 3px 4px;

    // On OSD
    //
    .osd &
    {
        background-color: transparent;
    }

    // Stand-alone OSD toolbars
    //
    &.osd
    {
        padding: 13px;
        border: none;
        border-radius: 5px;
        background-color: $osd_bg_color;

        &.left,
        &.right,
        &.top,
        &.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
    }

    // Toolbar separators
    //
    &.horizontal separator { margin: 0 7px 1px 6px; }
    &.vertical   separator { margin: 6px 1px 7px 0; }

    &:not(.inline-toolbar):not(.osd)
    {
        // Workaround: add margins to the children of tool items to simulate
        // spacing, ignore the overflow button (.toggle) and the overflow menu
        // (.popup)
        > *:not(.toggle):not(.popup) > *
        {
            margin-right:  1px;
            margin-bottom: 1px;
        }
    }
}

// searchbar, location-bar & inline-toolbar
//
.inline-toolbar
{
    @extend %toolbar;

    @extend %darkbar;

    border-radius: 0  0 5px 5px;
    border-width:  0 1px 1px;
    padding:       3px;
}

searchbar > revealer > box,
.location-bar
{
    @extend %toolbar;

    @extend %darkbar;

    border-width: 0 0 1px;
    padding:      3px;
}

searchbar > revealer > box
{
    // Workaround: undo the GtkContainer:border-width and use CSS padding instead
    //
    margin:  -6px;
    padding: 6px;
}

%darkbar
{
    $_bg: mix($bg_color, $borders_color, 70%);

    background-color: $_bg;
    border-color:     $borders_color;
    border-style:     solid;

    &:backdrop
    {
        border-color:     $backdrop_borders_color;
        background-color: $backdrop_dark_fill;
        box-shadow:       none;
        transition:       $backdrop_transition;
    }
}
