@function gtkalpha($c, $a) {
    @return unquote("alpha(#{$c},#{$a})");
}

$ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
$asset_suffix: "";
$backdrop_transition: 200ms ease-out;
$button_transition: all 200ms $ease-out-quad;

* {
    padding: 0;
    -GtkToolButton-icon-spacing: 4;
    -GtkTextView-error-underline-color: $error_color;

    // The size for scrollbars. The slider is 2px smaller, but we keep it
    // up so that the whole area is sensitive to button presses for the
    // slider. The stepper button is larger in both directions, the slider
    // only in the width

    -GtkScrolledWindow-scrollbar-spacing: 0;
    -GtkToolItemGroup-expander-size: 11;
    -GtkWidget-text-handle-width: 20;
    -GtkWidget-text-handle-height: 24;
    -GtkDialog-button-spacing: 4;
    -GtkDialog-action-area-border: 0;

    // We use the outline properties to signal the focus properties
    // to the adwaita engine: using real CSS properties is faster,
    // and we don't use any outlines for now.

    outline-color: gtkalpha(currentColor, 0.3);
    outline-style: dashed;
    outline-offset: -3px;
    outline-width: 0px;
    -gtk-outline-radius: 2px;
    -gtk-secondary-caret-color: $selected_bg_color;
}

/***************
 * Base States *
 ***************/
.background {
    color: $fg_color;
    background-color: $base_normal_bg_color;

    &:backdrop {
        color: $backdrop_fg_color;
        background-color: $base_backdrop_bg_color;
        text-shadow: none;
        -gtk-icon-shadow: none;
    }
}

/*
   These wildcard seems unavoidable, need to investigate.
   Wildcards are bad and troublesome, use them with care,
   or better, just don't.
   Everytime a wildcard is used a kitten dies, painfully.
*/

*:disabled {
    -gtk-icon-effect: dim;
}

.gtkstyle-fallback {
    color: $fg_color;
    background-color: $bg_color;

    &:hover {
        color: $fg_color;
        background-color: lighten($bg_color, 10%);
    }

    &:active {
        color: $fg_color;
        background-color: darken($bg_color, 10%);
    }

    &:disabled {
        color: $insensitive_fg_color;
        background-color: $insensitive_bg_color;
    }

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

.view,
%view {
    color: $text_color;
    background-color: $base_color;

    &:backdrop {
        color: $backdrop_text_color;
        background-color: $backdrop_base_color;

        &:disabled {
            color: $backdrop_insensitive_color;
        }
    }

    &:disabled {
        color: $insensitive_fg_color;
        background-color: $insensitive_bg_color;
    }

    &:selected {
        &:focus, & {
            @extend %selected_items;

            border-radius: 3px;
        }
    }
}

.view,
textview {
    text {
        @extend %view;

        selection {
            &:focus, & {
                @extend %selected_items;
            }
        }
    }
}

textview border {
    background-color: mix($bg_color, $base_color, 50%);
}

iconview {
    @extend .view;
}

.rubberband,
rubberband {
    border: 1px solid darken($selected_bg_color, 10%);
    background-color: transparentize(darken($selected_bg_color, 10%), 0.8);
}

flowbox {
    rubberband {
        @extend rubberband;
    }

    flowboxchild {
        padding: 3px;

        &:selected {
            @extend %selected_items;

            outline-offset: -2px;
        }
    }
}

.content-view .tile {
    margin: 2px;
    background-color: transparent;
    border-radius: 0;
    padding: 0;

    &:backdrop {
        background-color: transparent;
    }

    &:active, &:selected {
        background-color: transparent;
    }

    &:disabled {
        background-color: transparent;
    }
}

label {
    caret-color: currentColor;

    // this shouldn't be needed.

    &.separator {
        @extend .dim-label;

        color: $fg_color;

        &:backdrop {
            color: $backdrop_fg_color;
        }
    }

    row:selected &,
    &:selected {
        @extend %nobg_selected_items;
    }

    selection {
        background-color: $selected_bg_color;
        color: $selected_fg_color;
    }

    &:disabled {
        color: $insensitive_fg_color;

        selection {
            @extend %selected_items:disabled;
        }

        &:backdrop {
            color: $backdrop_insensitive_color;
        }
    }

    &:backdrop {
        color: $backdrop_fg_color;

        selection {
            @extend %selected_items:backdrop;
        }
    }
}

.dim-label {
    opacity: 0.55;
    text-shadow: none;
}

assistant {
    .sidebar {
        background-color: $base_color;
        border-top: 1px solid $borders_color;

        &:backdrop {
            background-color: $backdrop_base_color;
            border-color: $backdrop_borders_color;
        }
    }

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

    .sidebar label {
        padding: 6px 12px;
    }

    .sidebar label.highlight {
        background-color: mix($bg_color, $fg_color, 80%);
    }
}

%osd,
.osd {
    color: $osd_fg_color;
    border: none;
    background-color: $osd_bg_color;
    background-clip: padding-box;
    text-shadow: 0 1px black;
    -gtk-icon-shadow: 0 1px black;

    &:backdrop {
        text-shadow: none;
        -gtk-icon-shadow: none;
    }
}

/*********************
 * Spinner Animation *
 *********************/
@keyframes spin {
    to {
        -gtk-icon-transform: rotate(1turn);
    }
}

spinner {
    background: none;
    opacity: 0;

    // non spinning spinner makes no sense
    -gtk-icon-source: -gtk-icontheme("process-working-symbolic");

    &:checked {
        opacity: 1;
        animation: spin 1s linear infinite;

        &:disabled {
            opacity: 0.5;
        }
    }
}

/****************
 * Text Entries *
 ****************/

%entry,
entry {
    %entry_basic, & {
        min-height: 32px;
        padding-left: 8px;
        padding-right: 8px;
        border: 1px solid;
        border-radius: 0px;
        transition: all 200ms $ease-out-quad;

        @include entry(normal);

        image {
            // icons inside the entry
            &.left {
                margin-right: 6px;
            }

            &.right {
                margin-left: 6px;
            }
        }

        undershoot {
            &.left {
                @include undershoot(left);
            }

            &.right {
                @include undershoot(right);
            }
        }

        &.flat {
            &:focus, &:backdrop, &:disabled, &:backdrop:disabled, & {
                min-height: 0;
                padding: 2px;
                background-color: transparent;
                border-color: transparent;
                border-radius: 0;
            }
        }

        &:focus {
            @include entry(focus);
        }

        &:disabled {
            @include entry(insensitive);
        }

        &:backdrop {
            @include entry(backdrop);

            transition: $backdrop_transition;
        }

        &:backdrop:disabled {
            @include entry(backdrop-insensitive);
        }

        selection {
            @extend %selected_items;
        }

        // entry error and warning style
        @each $e_type, $e_color in (error, $error_color), (warning, $warning_color) {
            &.#{$e_type} {
                color: $e_color;
                border-color: entry_focus_border($e_color);

                &:focus {
                    @include entry(focus, $e_color);
                }

                selection {
                    background-color: $e_color;
                }
            }
        }

        image {
            // entry icons colors
            color: mix($fg_color, $base_color, 80%);

            &:hover {
                color: $fg_color;
            }

            &:active {
                color: $selected_bg_color;
            }

            &:backdrop {
                color: mix($backdrop_fg_color, $backdrop_base_color, 80%);
            }
        }

        &:drop(active) {
            &:focus, & {
                border-color: $drop_target_color;
                box-shadow: inset 0 0 0 1px $drop_target_color;
            }
        }

        .osd & {
            @include entry(osd);

            &:focus {
                @include entry(osd-focus);
            }

            &:backdrop {
                @include entry(osd-backdrop);
            }

            &:disabled {
                @include entry(osd-insensitive);
            }
        }
    }

    progress {
        margin: 2px -6px;
        background-color: transparent;
        background-image: none;
        border-radius: 0;
        border-width: 0 0 2px;
        border-color: $selected_bg_color;
        border-style: solid;
        box-shadow: none;

        &:backdrop {
            background-color: transparent;
        }
    }

    // linked entries
    .linked:not(.vertical) > & {
        @extend %linked;
    }

    .linked:not(.vertical) > &:focus + &,
    .linked:not(.vertical) > &:focus + button,
    .linked:not(.vertical) > &:focus + combobox > box > button.combo {
        border-left-color: entry_focus_border();
    }

    .linked:not(.vertical) > &:drop(active) + &,
    .linked:not(.vertical) > &:drop(active) + button,
    .linked:not(.vertical) > &:drop(active) + combobox > box > button.combo {
        border-left-color: $drop_target_color;
    }

    // Vertically linked entries
    // FIXME: take care of "colored" entries
    .linked.vertical > & {
        @extend %linked_vertical;

        // brighter border between linked entries
        &:not(:disabled) + entry:not(:disabled),
        &:not(:disabled) + %entry:not(:disabled) {
            border-top-color: mix($borders_color, $base_color, 30%);

            &:backdrop {
                border-top-color: mix($backdrop_borders_color, $backdrop_base_color, 30%);
            }
        }

        // brighter border between linked insensitive entries
        &:disabled + %entry:disabled,
        &:disabled + entry:disabled {
            border-top-color: mix($borders_color, $base_color, 30%);
        }

        // color back the top border of a linked focused entry following another entry.
        // :not(:only-child) is a specificity bump hack.
        + %entry:focus:not(:only-child),
        + entry:focus:not(:only-child) {
            border-top-color: entry_focus_border();
        }

        + %entry:drop(active):not(:only-child),
        + entry:drop(active):not(:only-child) {
            border-top-color: $drop_target_color;
        }

        // this takes care of coloring the top border of the focused entry subsequent widget.
        // :not(:only-child) is a specificity bump hack.
        &:focus:not(:only-child) {
            + %entry,
            + entry,
            + button,
            + combobox > box > button.combo {
                border-top-color: entry_focus_border();
            }
        }

        &:drop(active):not(:only-child) {
            + %entry,
            + entry,
            + button,
            + combobox > box > button.combo {
                border-top-color: $drop_target_color;
            }
        }
    }
}

treeview entry {
    &:focus {
        &:dir(rtl), &:dir(ltr) {
            // specificity bump hack
            background-color: $base_color;
            transition-property: color, background;
        }
    }

    &.flat, & {
        border-radius: 0;
        background-image: none;
        background-color: $base_color;

        &:focus {
            border-color: $selected_bg_color;
        }
    }
}

.entry-tag {
    // sizing
    padding: 5px;
    margin-top: 2px;
    margin-bottom: 2px;

    // side margins: compensate the entry padding with a negative margin
    // then the negative margin itself
    :dir(ltr) & {
        margin-left: 8px;
        margin-right: -5px;
    }

    :dir(rtl) & {
        margin-left: -5px;
        margin-right: 8px;
    }

    border-style: none;

    $_entry_tag_color: $selected_fg_color;

    color: $_entry_tag_color;

    $_entry_tag_bg: $selected_bg_color;

    background-color: $_entry_tag_bg;

    &:hover {
        background-color: lighten($_entry_tag_bg, 10%);
    }

    :backdrop & {
        color: $backdrop_base_color;
        background-color: $selected_bg_color;
    }

    &.button {
        background-color: transparent;
        color: transparentize($_entry_tag_color, 0.3);
    }

    :not(:backdrop) &.button {
        &:hover {
            border: 1px solid $_entry_tag_bg;
            color: $_entry_tag_color;
        }

        &:active {
            background-color: $_entry_tag_bg;
            color: transparentize($_entry_tag_color, 0.3);
        }
    }
}

/***********
 * Buttons *
 ***********/
// stuff for .needs-attention
$_dot_color: $selected_bg_color;

@keyframes needs_attention {
    from {
        background-image: -gtk-gradient(radial, center center, 0, center center, 0.01, to($_dot_color), to(transparent));
    }

    to {
        background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to($selected_bg_color), to(transparent));
    }
}

%button,
button {
    @at-root %button_basic, & {
        min-height: 24px;
        min-width: 16px;
        padding: 4px 8px;
        border: 1px solid;
        border-radius: 0px;
        transition: $button_transition;

        @include button(normal);

        &.flat {
            @include button(undecorated);

            // to avoid adiacent buttons borders clashing when transitioning, the transition on the normal state is set
            // to none, while it's added back in the hover state, so the button decoration will fade in on hover, but
            // it won't fade out when the pointer leave the button allocation area. To make the transition more evident
            // in this case the duration is increased.
            transition: none;

            &:hover {
                transition: $button_transition;
                transition-duration: 500ms;

                &:active {
                    transition: $button_transition;
                }
            }
        }

        &:hover {
            @include button(hover);

            -gtk-icon-effect: highlight;
        }

        &:active,
        &:checked {
            @include button(active);

            transition-duration: 50ms;
        }

        &:backdrop {
            &.flat, & {
                @include button(backdrop);

                transition: $backdrop_transition;
                -gtk-icon-effect: none;

                &:active,
                &:checked {
                    @include button(backdrop-active);
                }

                &:disabled {
                    @include button(backdrop-insensitive);

                    &:active,
                    &:checked {
                        @include button(backdrop-insensitive-active);
                    }
                }
            }
        }

        &.flat {
            &:backdrop, &:disabled, &:backdrop:disabled {
                @include button(undecorated);
            }
        }

        &:disabled {
            @include button(insensitive);

            &:active,
            &:checked {
                @include button(insensitive-active);
            }
        }

        &.image-button {
            min-width: 24px;
            padding-left: 4px;
            padding-right: 4px;
        }

        &.text-button {
            padding-left: 16px;
            padding-right: 16px;
        }

        &.text-button.image-button {
            padding-left: 8px;
            padding-right: 8px;

            label {
                padding-left: 8px;
                padding-right: 8px;
            }
        }

        &:drop(active) {
            color: $drop_target_color;
            border-color: $drop_target_color;
            box-shadow: inset 0 0 0 1px $drop_target_color;
        }
    }

    @at-root %button_selected, & {
        row:selected & {
            border-color: $selected_borders_color;

            &.flat:not(:active):not(:checked):not(:hover):not(disabled) {
                color: $selected_fg_color;
                border-color: transparent;

                &:backdrop {
                    color: $backdrop_base_color;
                }
            }
        }
    }

    // big standalone buttons like in Documents pager
    &.osd {
        min-width: 24px;
        min-height: 32px;

        &.image-button {
            min-width: 32px;
        }

        color: $osd_fg_color;
        border-radius: 5px;

        @include button(osd);

        border: none;
        box-shadow: none;

        &:hover {
            @include button(osd-hover);

            border: none;
            box-shadow: none;
        }

        &:active,
        &:checked {
            @include button(osd-active);

            border: none;
            box-shadow: none;
        }

        &:disabled {
            &:backdrop, & {
                @include button(osd-insensitive);

                border: none;
            }
        }

        &:backdrop {
            @include button(osd-backdrop);

            border: none;
        }
    }

    //overlay / OSD style
    @at-root %osd_button,
    .osd & {
        @include button(osd);

        &:hover {
            @include button(osd-hover);
        }

        &:active,
        &:checked {
            &:backdrop, & {
                @include button(osd-active);
            }
        }

        &:disabled {
            &:backdrop, & {
                @include button(osd-insensitive);
            }
        }

        &:backdrop {
            @include button(osd-backdrop);
        }

        &.flat {
            @include button(undecorated);

            box-shadow: none;

            //FIXME respect no edge on the button mixin
            text-shadow: 0 1px black;
            -gtk-icon-shadow: 0 1px black;

            &:hover {
                @include button(osd-hover);
            }

            &:disabled {
                @include button(osd-insensitive);

                background-image: none;
                border-color: transparent;
                box-shadow: none;
            }

            &:backdrop {
                @include button(undecorated);
            }

            &:active,
            &:checked {
                @include button(osd-active);
            }
        }
    }

    // Suggested and Destructive Action buttons
    @each $b_type, $b_color in (suggested-action, $selected_bg_color), (destructive-action, $destructive_color) {
        &.#{$b_type} {
            @include button(normal, $b_color, white);

            &.flat {
                @include button(undecorated);

                color: $b_color;

                //FIXME: does it work on the dark variant?

            }

            &:hover {
                @include button(hover, $b_color, white);
            }

            &:active,
            &:checked {
                @include button(active, $b_color, white);
            }

            &:backdrop,
            &.flat:backdrop {
                @include button(backdrop, $b_color, white);

                &:active,
                &:checked {
                    @include button(backdrop-active, $b_color, white);
                }

                &:disabled {
                    @include button(backdrop-insensitive);

                    &:active,
                    &:checked {
                        @include button(backdrop-insensitive-active, $b_color, white);
                    }
                }
            }

            &.flat {
                &:backdrop, &:disabled, &:backdrop:disabled {
                    @include button(undecorated);

                    color: transparentize($b_color, 0.2);
                }
            }

            &:disabled {
                @include button(insensitive);

                &:active,
                &:checked {
                    @include button(insensitive-active, $b_color, white);
                }
            }

            .osd & {
                @include button(osd, $b_color);

                &:hover {
                    @include button(osd-hover, $b_color);
                }

                &:active,
                &:checked {
                    &:backdrop, & {
                        @include button(osd-active, $b_color);
                    }
                }

                &:disabled {
                    &:backdrop, & {
                        @include button(osd-insensitive, $b_color);
                    }
                }

                &:backdrop {
                    @include button(osd-backdrop, $b_color);
                }
            }
        }
    }

    .stack-switcher > & {
        // to position the needs attention dot, padding is added to the button
        // child, a label needs just lateral padding while an icon needs vertical
        // padding added too.

        outline-offset: -3px;

        // needs to be set or it gets overriden by GtkRadioButton outline-offset

        > label {
            padding-left: 6px;

            // label padding
            padding-right: 6px;

            //

        }

        > image {
            padding-left: 6px;

            // image padding
            padding-right: 6px;

            //
            padding-top: 3px;

            //
            padding-bottom: 3px;

            //

        }

        &.text-button {
            // compensate text-button paddings
            padding-left: 10px;
            padding-right: 10px;
        }

        &.image-button {
            // we want image buttons to have a 1:1 aspect ratio, so compensation
            // of the padding added to the GtkImage is needed
            padding-left: 2px;
            padding-right: 2px;
        }

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

            &:active,
            &:checked {
                > label,
                > image {
                    animation: none;
                    background-image: none;
                }
            }
        }
    }

    // hide separators
    &.font,
    &.file {
        separator {
            background-color: transparent;
        }
    }

    &.font {
        > box > box > label {
            font-weight: bold;
        }
    }

    // inline-toolbar buttons
    .inline-toolbar &, .inline-toolbar &:backdrop {
        border-radius: 2px;
        border-width: 1px;

        @extend %linked;
    }

    .primary-toolbar & {
        -gtk-icon-shadow: none;
    }

    // tango icons don't need shadows

    .linked > &,
    .linked > &:hover,
    .linked > &:active,
    .linked > &:checked,
    .linked > &:backdrop {
        @extend %linked;
    }

    .linked.vertical > &,
    .linked.vertical > &:hover,
    .linked.vertical > &:active,
    .linked.vertical > &:checked,
    .linked.vertical > &:backdrop {
        @extend %linked_vertical;
    }

    &.circular {
        // The Bloody Circul Button
        border-radius: 9999px;
        -gtk-outline-radius: 9999px;

        label {
            padding: 0;
        }

        // the followind code is needed since we use a darker bottom border on buttons, which looks pretty
        // bad with a 100% border radius (see https://bugzilla.gnome.org/show_bug.cgi?id=771205 for details),
        // so on relevant states we an additional background-image with a gradient clipped on the border-box,
        // so setting a transparent border would reveal it.
        // FIXME: take care of colored circular button.
        $_border_bg: linear-gradient(to top, $alt-borders-color 25%, $borders-color 50%);

        &:not(.flat):not(:checked):not(:active):not(:disabled):not(:backdrop) {
            @include button(normal);

            background-image: $button_fill, $_border_bg;
            border-color: transparent;
        }

        &:hover:not(:checked):not(:active):not(:disabled):not(:backdrop) {
            @include button(hover);

            background-image: $button_fill, $_border_bg;
            border-color: transparent;
        }

        background-origin: padding-box, border-box;
        background-clip: padding-box, border-box;
    }
}

%needs_attention {
    animation: needs_attention 150ms ease-in;

    $_dot_shadow: _text_shadow_color();
    $_dot_shadow_r: 0.5;

    background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to($_dot_color), to(transparent)), -gtk-gradient(radial, center center, 0, center center, $_dot_shadow_r, to($_dot_shadow), to(transparent));
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    background-position: right 3px, right 4px;

    &:backdrop {
        background-size: 6px 6px, 0 0;
    }

    &:dir(rtl) {
        background-position: left 3px, left 4px;
    }
}

// all the following is for the +|- buttons on inline toolbars, that way
// should really be deprecated...
.inline-toolbar toolbutton > button {
    // redefining the button look is
    // needed since those are flat...
    @include button(normal);

    &:hover {
        @include button(hover);
    }

    &:active,
    &:checked {
        @include button(active);
    }

    &:disabled {
        @include button(insensitive);

        &:active,
        &:checked {
            @include button(insensitive-active);
        }
    }

    &:backdrop {
        @include button(backdrop);

        &:active,
        &:checked {
            @include button(backdrop-active);
        }

        &:disabled {
            @include button(backdrop-insensitive);

            &:active,
            &:checked {
                @include button(backdrop-insensitive-active);
            }
        }
    }
}

// More inline toolbar buttons
toolbar.inline-toolbar toolbutton,
toolbar.inline-toolbar toolbutton:backdrop {
    > button.flat {
        @extend %linked_middle;
    }

    &:first-child > button.flat {
        @extend %linked:first-child;
    }

    &:last-child > button.flat {
        @extend %linked:last-child;
    }

    &:only-child > button.flat {
        @extend %linked:only-child;
    }
}

%linked_middle {
    border-radius: 0;
    border-right-style: none;
}

%linked {
    @extend %linked_middle;

    &:first-child {
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
    }

    &:last-child {
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
        border-right-style: solid;
    }

    &:only-child {
        border-radius: 0px;
        border-style: solid;
    }
}

%linked_vertical_middle {
    border-style: solid solid none solid;
    border-radius: 0;
}

%linked_vertical {
    @extend %linked_vertical_middle;

    &:first-child {
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
    }

    &:last-child {
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
        border-style: solid;
    }

    &:only-child {
        border-radius: 0px;
        border-style: solid;
    }
}

%undecorated_button {
    background-color: transparent;
    background-image: none;
    border-color: transparent;
    box-shadow: inset 0 1px transparentize(white, 1), 0 1px transparentize(white, 1);
    text-shadow: none;
    -gtk-icon-shadow: none;
}

/* menu buttons */
modelbutton.flat,
.menuitem.button.flat {
    min-height: 26px;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 3px;
    outline-offset: -2px;

    @extend %undecorated_button;

    &:hover {
        background-color: $popover_hover_color;
    }

    &:selected {
        @extend %selected_items;
    }

    &:backdrop,
    &:backdrop:hover {
        @extend %undecorated_button;
    }
}

modelbutton.flat arrow {
    background: none;

    &:hover {
        background: none;
    }

    &.left {
        -gtk-icon-source: -gtk-icontheme("pan-start-symbolic");
    }

    &.right {
        -gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
    }
}

button.color {
    padding: 4px;

    colorswatch:only-child {
        &, overlay {
            border-radius: 0;
        }

        box-shadow: 0 1px _text_shadow_color();

        .osd & {
            box-shadow: none;
        }
    }

    .osd &, & {
        &:disabled,
        &:backdrop,
        &:active,
        &:checked {
            colorswatch:only-child {
                box-shadow: none;
            }
        }
    }
}

/*********
 * Links *
 *********/

%link,
*:link {
    color: $link_color;

    &:visited {
        color: $link_visited_color;

        *:selected & {
            color: mix($selected_fg_color, $selected_bg_color, 60%);
        }
    }

    &:hover {
        color: lighten($link_color, 10%);

        *:selected & {
            color: mix($selected_fg_color, $selected_bg_color, 90%);
        }
    }

    &:active {
        color: $link_color;

        *:selected & {
            color: mix($selected_fg_color, $selected_bg_color, 80%);
        }
    }

    &:backdrop {
        &:backdrop:hover, &:backdrop:hover:selected, & {
            color: $selected_bg_color;
        }
    }

    @at-root %link_selected,
    &:selected,
    *:selected & {
        color: mix($selected_fg_color, $selected_bg_color, 80%);
    }
}

button:link,
button:visited {
    @extend %undecorated_button;

    @extend *:link;

    text-shadow: none;

    &:hover,
    &:active,
    &:checked {
        @extend %undecorated_button;

        text-shadow: none;
    }

    > label {
        @extend %link;

        text-decoration-line: underline;
    }
}

/*****************
 * GtkSpinButton *
 *****************/
spinbutton {
    &:not(.vertical) {
        // in this horizontal configuration, the whole spinbutton
        // behaves as the entry, so we extend the entry styling
        // and nuke the style on the internal entry
        @extend %entry;

        padding: 0;

        entry {
            min-width: 28px;

            // reset all the other props since the spinbutton node is styled here
            margin: 0;
            background: none;
            background-color: transparent;
            border: none;
            border-radius: 0;
            box-shadow: none;

            &:backdrop:disabled {
                background-color: transparent;
            }
        }

        button {
            min-height: 16px;
            margin: 0;
            padding-bottom: 0;
            padding-top: 0;
            color: mix($fg_color, $base_color, 90%);
            background-image: none;
            border-style: none none none solid;
            border-color: transparentize($borders_color, 0.7);
            border-radius: 0;
            box-shadow: none;

            &:dir(rtl) {
                border-style: none solid none none;
            }

            &:hover {
                color: $fg_color;
                background-color: $base_hover_color;
            }

            &:disabled {
                color: transparentize($insensitive_fg_color, 0.7);
                background-color: transparent;
            }

            &:active {
                background-color: transparentize(black, 0.9);
                box-shadow: inset 0 2px 3px -1px transparentize(black, 0.8);
            }

            &:backdrop {
                color: mix($backdrop_fg_color, $backdrop_base_color, 90%);
                background-color: transparent;
                border-color: transparentize($backdrop_borders_color, 0.7);
                transition: $backdrop_transition;
            }

            &:backdrop:disabled {
                color: transparentize($backdrop_insensitive_color, 0.7);
                background-color: transparent;
                border-style: none none none solid;

                // It is needed or it gets overridden

                &:dir(rtl) {
                    border-style: none solid none none;
                }
            }

            &:dir(ltr):last-child {
                border-radius: 0 3px 3px 0;
            }

            &:dir(rtl):first-child {
                border-radius: 3px 0 0 3px;
            }
        }
    }

    // OSD horizontal
    .osd &:not(.vertical) {
        button {
            @include button(undecorated);

            color: $osd_fg_color;
            border-style: none none none solid;
            border-color: transparentize($osd_borders_color, 0.3);
            border-radius: 0;
            box-shadow: none;
            -gtk-icon-shadow: 0 1px black;

            &:dir(rtl) {
                border-style: none solid none none;
            }

            &:hover {
                @include button(undecorated);

                color: $osd_fg_color;
                border-color: transparentize(opacify($osd_borders_color, 1), 0.5);
                background-color: transparentize($osd_fg_color, 0.9);
                -gtk-icon-shadow: 0 1px black;
                box-shadow: none;
            }

            &:backdrop {
                @include button(undecorated);

                color: $osd_fg_color;
                border-color: transparentize(opacify($osd_borders_color, 1), 0.5);
                -gtk-icon-shadow: none;
                box-shadow: none;
            }

            &:disabled {
                @include button(undecorated);

                color: $osd_insensitive_fg_color;
                border-color: transparentize(opacify($osd_borders_color, 1), 0.5);
                -gtk-icon-shadow: none;
                box-shadow: none;
            }

            &:dir(ltr):last-child {
                border-radius: 0 3px 3px 0;
            }

            &:dir(rtl):first-child {
                border-radius: 3px 0 0 3px;
            }
        }
    }

    // Vertical
    &.vertical {
        // in the vertical configuration, we treat the spinbutton
        // as a box, and tweak the style of the entry in the middle
        // so that it's linked

        // FIXME: this should not be set at all, but otherwise it gets the wrong
        // color
        &:disabled {
            color: $insensitive_fg_color;
        }

        &:backdrop:disabled {
            color: $backdrop_insensitive_color;
        }

        &:drop(active) {
            border-color: transparent;
            box-shadow: none;
        }

        entry {
            min-height: 32px;
            min-width: 32px;
            padding: 0;
            border-radius: 0;
        }

        button {
            min-height: 32px;
            min-width: 32px;
            padding: 0;

            &.up {
                @extend %top_button;
            }

            &.down {
                @extend %bottom_button;
            }
        }

        %top_button {
            border-radius: 3px 3px 0 0;
            border-style: solid solid none solid;
        }

        %bottom_button {
            border-radius: 0 0 3px 3px;
            border-style: none solid solid solid;
        }
    }

    // OSD vertical
    .osd &.vertical button:first-child {
        @include button(osd);

        &:hover {
            @include button(osd-hover);
        }

        &:active {
            @include button(osd-active);
        }

        &:disabled {
            @include button(osd-insensitive);
        }

        &:backdrop {
            @include button(osd-backdrop);
        }
    }

    // Misc
    treeview &:not(.vertical) {
        min-height: 0;
        border-style: none;
        border-radius: 0;

        entry {
            min-height: 0;
            padding: 1px 2px;
        }
    }
}

/**************
 * ComboBoxes *
 **************/
combobox {
    arrow {
        -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
        min-height: 16px;
        min-width: 16px;
    }

    &.linked {
        button:nth-child(2) {
            &:dir(ltr) {
                @extend %linked:last-child;
            }

            &:dir(rtl) {
                @extend %linked:first-child;
            }
        }
    }

    &:drop(active) {
        // FIXME: untested
        box-shadow: none;

        button.combo {
            @extend %button_basic:drop(active);
        }
    }
}

.linked > combobox > box > button.combo {
    // the combo is a composite widget so the way we do button linking doesn't
    // work, special case needed. See
    // https://bugzilla.gnome.org/show_bug.cgi?id=733979

    &:dir(ltr),
    &:dir(rtl) {
        @extend %linked_middle;
    }

    // specificity bump
}

.linked:not(.vertical) > combobox:first-child > box > button.combo {
    @extend %linked:first-child;
}

.linked:not(.vertical) > combobox:last-child > box > button.combo {
    @extend %linked:last-child;
}

.linked:not(.vertical) > combobox:only-child > box > button.combo {
    @extend %linked:only-child;
}

.linked.vertical > combobox > box > button.combo {
    @extend %linked_vertical_middle;
}

.linked.vertical > combobox:first-child > box > button.combo {
    @extend %linked_vertical:first-child;
}

.linked.vertical > combobox:last-child > box > button.combo {
    @extend %linked_vertical:last-child;
}

.linked.vertical > combobox:only-child > box > button.combo {
    @extend %linked_vertical:only-child;
}

/************
 * Toolbars *
 ************/
%toolbar {
    -GtkWidget-window-dragging: true;
    padding: 4px;
    background-color: $base_normal_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) {
        switch,
        scale,
        entry,
        spinbutton,
        button {
            margin-right: 1px;
            margin-bottom: 1px;
        }
    }
}

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

    @extend %darkbar;

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

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

    @extend %darkbar;

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

%darkbar {
    border-style: solid;
    border-color: $borders_color;

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

    background-color: $_bg;

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

/***************
 * Header bars *
 ***************/
%titlebar,
headerbar {
    padding: 0 6px;
    min-height: 46px;
    border-width: 1px 1px 0px 1px;
    border-style: solid;
    border-color: $headerbar_normal_border_color;
    border-radius: 0;

    @include headerbar_fill;

    &:backdrop {
        border-color: $headerbar_backdrop_border_color;
        background-color: $bg_color;
        background-image: none;
        box-shadow: inset 0 1px $top_hilight;
        transition: $backdrop_transition;
    }

    .title {
        padding-left: 12px;
        padding-right: 12px;
        font-weight: bold;
    }

    .subtitle {
        font-size: smaller;
        padding-left: 12px;
        padding-right: 12px;

        @extend .dim-label;
    }

    &.selection-mode {
        $_hc: mix($top_hilight, $selected_bg_color, 50%);

        // hilight color

        color: $selected_fg_color;
        border-color: $selected_borders_color;
        text-shadow: 0 -1px transparentize(black, 0.5);

        @include headerbar_fill($selected_bg_color, $_hc);

        &:backdrop {
            background-color: $selected_bg_color;
            background-image: none;
            box-shadow: inset 0 1px mix($top_hilight, $selected_bg_color, 60%);
        }

        .subtitle:link {
            @extend *:link:selected;
        }

        button {
            @include button(normal, $selected_bg_color, $selected_fg_color);

            &.flat {
                @include button(undecorated);
            }

            &:hover {
                @include button(hover, $selected_bg_color, $selected_fg_color);
            }

            &:active,
            &:checked {
                @include button(active, $selected_bg_color, $selected_fg_color);
            }

            &:backdrop {
                &.flat, & {
                    @include button(backdrop, $selected_bg_color, $selected_fg_color);

                    -gtk-icon-effect: none;
                    border-color: $selected_borders_color;

                    &:active,
                    &:checked {
                        @include button(backdrop-active, $selected_bg_color, $selected_fg_color);

                        border-color: $selected_borders_color;
                    }

                    &:disabled {
                        @include button(backdrop-insensitive, $selected_bg_color, $selected_fg_color);

                        border-color: $selected_borders_color;

                        &:active, &:checked {
                            @include button(backdrop-insensitive-active, $selected_bg_color, $selected_fg_color);

                            border-color: $selected_borders_color;
                        }
                    }
                }
            }

            &.flat {
                &:backdrop, &:disabled, &:backdrop:disabled {
                    @include button(undecorated);
                }
            }

            &:disabled {
                @include button(insensitive, $selected_bg_color, $selected_fg_color);

                &:active,
                &:checked {
                    @include button(insensitive-active, $selected_bg_color, $selected_fg_color);
                }
            }

            &.suggested-action {
                @include button(normal);

                border-color: $selected_borders_color;

                &:hover {
                    @include button(hover);

                    border-color: $selected_borders_color;
                }

                &:active {
                    @include button(active);

                    border-color: $selected_borders_color;
                }

                &:disabled {
                    @include button(insensitive);

                    border-color: $selected_borders_color;
                }

                &:backdrop {
                    @include button(backdrop);

                    border-color: $selected_borders_color;
                }

                &:backdrop:disabled {
                    @include button(backdrop-insensitive);

                    border-color: $selected_borders_color;
                }
            }
        }

        .selection-menu {
            &:backdrop, & {
                border-color: transparentize($selected_bg_color, 1);
                background-color: transparentize($selected_bg_color, 1);
                background-image: none;
                box-shadow: none;
                padding-left: 10px;
                padding-right: 10px;

                arrow {
                    -GtkArrow-arrow-scaling: 1;
                }

                .arrow {
                    -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
                    color: transparentize($selected_fg_color, 0.5);
                    -gtk-icon-shadow: none;
                }
            }
        }
    }

    // squared corners when the window is maximized, tiled, or fullscreen
    .tiled &,
    .tiled-top &,
    .tiled-right &,
    .tiled-bottom &,
    .tiled-left &,
    .maximized &,
    .fullscreen & {
        &:backdrop, & {
            border-radius: 0;
        }
    }

    &.default-decoration {
        min-height: 30px;
        padding: 0px;

        button.titlebutton {
            min-height: 30px;
            min-width: 45px;
            margin: 0;
            margin-right: -1px;
            padding: 0;
        }
    }

    .solid-csd & {
        &:backdrop, & {
            &:dir(rtl), &:dir(ltr) {
                // specificity bump
                margin-left: -1px;
                margin-right: -1px;
                margin-top: -1px;
                border-radius: 0;
                box-shadow: none;
            }
        }
    }
}

headerbar {
    // add vertical margins to common widget on the headerbar to avoid them spanning the whole height
    entry,
    spinbutton,
    separator,
    button {
        margin-top: 6px;
        margin-bottom: 6px;
    }

    switch {
        margin-top: 9px;
        margin-bottom: 9px;
    }
}

.background .titlebar {
    &, &:backdrop {
    }
}

.background.tiled .titlebar,
.background.tiled-top .titlebar,
.background.tiled-right .titlebar,
.background.tiled-bottom .titlebar,
.background.tiled-left .titlebar,
.background.maximized .titlebar,
.background.solid-csd .titlebar {
    &:backdrop, & {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
}

headerbar {
    // headerbar border rounding

    window separator:first-child + &,
    window &:first-child {
        &:backdrop, & {
            border-top-left-radius: 7px;
        }
    }

    window &:last-child {
        &:backdrop, & {
            border-top-right-radius: 7px;
        }
    }

    window stack & {
        // tackles the stacked headerbars case
        &:first-child, &:last-child {
            &:backdrop, & {
                border-top-left-radius: 7px;
                border-top-right-radius: 7px;
            }
        }
    }

    window.tiled &,
    window.tiled-top &,
    window.tiled-right &,
    window.tiled-bottom &,
    window.tiled-left &,
    window.maximized &,
    window.fullscreen &,
    window.solid-csd & {
        &, &:backdrop {
            &,
            &:first-child,
            &:last-child,
            &:only-child {
                border-top-left-radius: 0;
                border-top-right-radius: 0;
            }
        }
    }
}

.titlebar:not(headerbar) {
    window.csd > & {
        // in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
        padding: 0;
        background-color: transparent;
        background-image: none;
        border-style: none;
        border-color: transparent;
        box-shadow: none;
    }

    > separator {
        background-color: $borders_color;
    }

    // FIXME: use darker border?

    @extend %titlebar;
}

/************
 * Pathbars *
 ************/
.path-bar button {
    &.text-button, &.image-button, & {
        padding-left: 4px;
        padding-right: 4px;
    }

    &.text-button.image-button label {
        padding-left: 0;
        padding-right: 0;
    }

    &.text-button.image-button, & {
        label:last-child {
            padding-right: 8px;
        }

        label:first-child {
            padding-left: 8px;
        }
    }

    image {
        padding-left: 4px;
        padding-right: 4px;
    }

    &.slider-button {
        padding-left: 0;
        padding-right: 0;
    }
}

/**************
 * Tree Views *
 **************/
treeview.view {
    @at-root * {
        -GtkTreeView-horizontal-separator: 4;
        -GtkTreeView-grid-line-width: 1;
        -GtkTreeView-grid-line-pattern: '';
        -GtkTreeView-tree-line-width: 1;
        -GtkTreeView-tree-line-pattern: '';
        -GtkTreeView-expander-size: 16;
    }

    border-left-color: mix($fg_color, $base_color, 50%);

    // this is actually the tree lines color,
    border-top-color: $bg_color;

    // while this is the grid lines color, better then nothing

    rubberband {
        @extend rubberband;
    }

    // to avoid borders being overridden by the previously set props

    &:selected {
        &:focus, & {
            border-radius: 0;

            @extend %selected_items;
        }

        &:backdrop, & {
            border-left-color: mix($selected_fg_color, $selected_bg_color, 50%);
            border-top-color: transparentize($fg_color, 0.9);

            // doesn't work unfortunatelly

        }
    }

    &:disabled {
        color: $insensitive_fg_color;

        &:selected {
            color: mix($selected_fg_color, $selected_bg_color, 40%);

            &:backdrop {
                color: mix($backdrop_selected_fg_color, $selected_bg_color, 30%);
            }
        }

        &:backdrop {
            color: $backdrop_insensitive_color;
        }
    }

    &.separator {
        min-height: 2px;
        color: $bg_color;

        &:backdrop {
            color: transparentize($bg_color, 0.9);
        }
    }

    &:backdrop {
        border-left-color: mix($backdrop_fg_color, $backdrop_bg_color, 50%);
        border-top: $backdrop_bg_color;
    }

    &:drop(active) {
        border-style: solid none;
        border-width: 1px;
        border-color: $selected_borders_color;

        &.after {
            border-top-style: none;
        }

        &.before {
            border-bottom-style: none;
        }
    }

    &.expander {
        -gtk-icon-source: -gtk-icontheme("pan-end-symbolic");

        &:dir(rtl) {
            -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl");
        }

        color: $base_normal_fg_color;

        &:hover {
            color: $base_prelight_fg_color;
        }

        &:selected {
            color: $base_selected_fg_color;

            &:hover {
                color: $base_selected_fg_color;
            }

            &:backdrop {
                color: $base_backdrop_fg_color;
            }
        }

        &:checked {
            -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
        }

        &:backdrop {
            color: $base_backdrop_fg_color;
        }
    }

    &.progressbar {
        // progress bar in treeviews
        color: $base_color;
        border: 1px solid $selected_borders_color;
        border-radius: 4px;
        background-color: $selected_bg_color;
        background-image: linear-gradient(to bottom, $selected_bg_color, darken($selected_bg_color, 10%));
        box-shadow: inset 0 1px transparentize(white, 0.7), 0 1px transparentize(black, 0.8);

        &:selected {
            &:focus, & {
                border-radius: 4px;
                color: $selected_bg_color;
                box-shadow: none;
                background-image: linear-gradient(to bottom, $base_color, darken($base_color, 10%));

                &:backdrop {
                    color: $selected_bg_color;
                    border-color: $selected_borders_color;

                    // otherwise it gets inherited by .view(?!?)

                    background-color: $backdrop_base_color;
                }
            }
        }

        &:backdrop {
            color: $backdrop_base_color;
            background-image: none;
            box-shadow: none;
        }
    }

    &.trough {
        // progress bar trough in treeviews
        background-color: transparentize($fg_color, 0.9);
        border-radius: 4px;

        &:selected {
            &:focus, & {
                background-color: transparentize($selected_fg_color, 0.7);
                border-radius: 4px;
                border-width: 1px 0;
                border-style: solid;
                border-color: $selected_bg_color;
            }
        }
    }

    header {
        button {
            $_column_header_color: $base_normal_fg_color;

            @extend %column_header_button;

            color: $_column_header_color;
            background-color: $base_color;
            font-weight: bold;
            text-shadow: none;
            box-shadow: none;

            &:hover {
                @extend %column_header_button;

                color: mix($_column_header_color, $fg_color, 50%);
                box-shadow: none;
                transition: none;

                //I shouldn't need this

            }

            &:active {
                @extend %column_header_button;

                color: $fg_color;
                transition: none;

                //I shouldn't need this

            }
        }
    }

    button.dnd,
    header.button.dnd {
        // for treeview-like derive widgets
        &:active, &:selected, &:hover, & {
            padding: 0 6px;
            color: $base_color;
            background-image: none;
            background-color: $selected_bg_color;
            border-style: none;
            border-radius: 0;
            box-shadow: inset 0 0 0 1px $base_color;
            text-shadow: none;
            transition: none;
        }
    }

    acceleditor > label {
        background-color: $selected_bg_color;
    }

    // see tests/testaccel to test
}

%column_header_button {
    padding: 0 6px;
    background-image: none;
    border-style: none solid solid none;
    border-color: $bg_color;
    border-radius: 0;
    text-shadow: none;

    &:disabled {
        border-color: $bg_color;
        background-image: none;
    }

    &:backdrop {
        color: mix($backdrop_fg_color, $backdrop_bg_color, 50%);
        border-color: $backdrop_bg_color;
        border-style: none solid solid none;
        background-image: none;
        background-color: $backdrop_base_color;

        &:disabled {
            border-color: $backdrop_bg_color;
            background-image: none;
        }
    }

    &:last-child {
        &:backdrop, & {
            border-right-style: none;
        }
    }
}

/*********
 * Menus *
 *********/
menubar,
.menubar {
    -GtkWidget-window-dragging: true;
    padding: 0px;
    box-shadow: inset 0 -1px transparentize(black, 0.9);

    &:backdrop {
        background-color: $base_backdrop_bg_color;
    }

    > menuitem {
        min-height: 16px;
        padding: 4px 8px;

        &:hover {
            //Seems like it :hover even with keyboard focus
            box-shadow: none;
            color: $link_color;
        }

        &:disabled {
            color: $insensitive_fg_color;
            box-shadow: none;
        }
    }
}

menu,
.menu,
.context-menu {
    margin: 4px;

    // see https://bugzilla.gnome.org/show_bug.cgi?id=591258
    padding: 2px 0px;
    background-color: $menu_color;
    border: 1px solid $borders_color;

    // adds borders in a non composited env

    .csd & {
        border: none;
    }

    // axes borders in a composited env

    &:backdrop {
        background-color: $backdrop_menu_color;
    }

    menuitem {
        min-height: 16px;
        min-width: 40px;
        padding: 4px 6px;
        text-shadow: none;

        &:hover {
            color: $selected_fg_color;
            background-color: $selected_bg_color;
        }

        &:disabled {
            color: $insensitive_fg_color;

            &:backdrop {
                color: $backdrop_insensitive_color;
            }
        }

        &:backdrop,
        &:backdrop:hover {
            color: $backdrop_fg_color;
            background-color: transparent;
        }

        // submenu indicators
        arrow {
            min-height: 16px;
            min-width: 16px;

            &:dir(ltr) {
                -gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
                margin-left: 10px;
            }

            &:dir(rtl) {
                -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl");
                margin-right: 10px;
            }
        }

        // avoids labels color being overridden, see
        // https://bugzilla.gnome.org/show_bug.cgi?id=767058
        label {
            &:dir(rtl), &:dir(ltr) {
                color: inherit;
            }
        }
    }

    // overflow arrows
    > arrow {
        @include button(undecorated);

        min-height: 16px;
        min-width: 16px;
        padding: 4px;
        background-color: $menu_color;
        border-radius: 0;

        &.top {
            margin-top: -6px;
            border-bottom: 1px solid mix($fg_color, $base_color, 10%);
            -gtk-icon-source: -gtk-icontheme("pan-up-symbolic");
        }

        &.bottom {
            margin-bottom: -6px;
            border-top: 1px solid mix($fg_color, $base_color, 10%);
            -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
        }

        &:hover {
            background-color: mix($fg_color, $base_color, 10%);
        }

        &:backdrop {
            background-color: $backdrop_menu_color;
        }

        &:disabled {
            color: transparent;
            background-color: transparent;
            border-color: transparent;
        }
    }
}

menuitem {
    accelerator {
        color: gtkalpha(currentColor, 0.55);
    }

    check,
    radio {
        min-height: 16px;
        min-width: 16px;

        &:dir(ltr) {
            margin-right: 7px;
        }

        &:dir(rtl) {
            margin-left: 7px;
        }
    }
}

/***************
 * Popovers   *
 ***************/

popover.background {
    padding: 2px;
    border-radius: 5px;
    background-color: $base_normal_bg_color;

    .csd &, & {
        border: 1px solid $borders_color;
    }

    box-shadow: 0 1px 2px transparentize(black, 0.7);

    &:backdrop {
        background-color: $backdrop_bg_color;
        box-shadow: none;
    }

    > list,
    > .view,
    > toolbar {
        border-style: none;
        background-color: transparent;
    }

    .csd &, & {
        &.touch-selection,
        &.magnifier {
            @extend %osd;

            border: 1px solid transparentize(white, 0.9);

            button {
                @extend %osd_button;
            }
        }

        &.osd {
            @extend %osd;
        }
    }

    separator {
        margin: 3px;
    }

    list separator {
        margin: 0px;
    }
}

/*************
 * Notebooks *
 *************/
notebook {
    > header {
        padding: 1px;
        border-color: $base_normal_border_color;
        border-width: 1px;
        background-color: $base_normal_bg_color;

        &:backdrop {
            border-color: $backdrop_borders_color;
            background-color: $backdrop_dark_fill;
        }

        tabs {
            margin: -1px;
        }

        &.top {
            border-bottom-style: solid;

            > tabs {
                margin-bottom: -2px;

                > tab {
                    &:hover {
                        box-shadow: none;
                    }

                    &:backdrop {
                        box-shadow: none;
                    }

                    &:checked {
                        box-shadow: none;
                    }
                }
            }
        }

        &.bottom {
            border-top-style: solid;

            > tabs {
                margin-top: -2px;

                > tab {
                    &:hover {
                        box-shadow: none;
                    }

                    &:backdrop {
                        box-shadow: none;
                    }

                    &:checked {
                        box-shadow: none;
                    }
                }
            }
        }

        &.left {
            border-right-style: solid;

            > tabs {
                margin-right: -2px;

                > tab {
                    &:hover {
                        box-shadow: none;
                    }

                    &:backdrop {
                        box-shadow: none;
                    }

                    &:checked {
                        box-shadow: none;
                    }
                }
            }
        }

        &.right {
            border-left-style: solid;

            > tabs {
                margin-left: -2px;

                > tab {
                    &:hover {
                        box-shadow: none;
                    }

                    &:backdrop {
                        box-shadow: none;
                    }

                    &:checked {
                        box-shadow: none;
                    }
                }
            }
        }

        &.top > tabs > arrow {
            @extend %notebook_vert_arrows;

            border-top-style: none;
        }

        &.bottom > tabs > arrow {
            @extend %notebook_vert_arrows;

            border-bottom-style: none;
        }

        @at-root %notebook_vert_arrows {
            margin-left: -5px;
            margin-right: -5px;
            padding-left: 4px;
            padding-right: 4px;

            &.down {
                -gtk-icon-source: -gtk-icontheme("pan-start-symbolic");
            }

            &.up {
                -gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
            }
        }

        &.left > tabs > arrow {
            @extend %notebook_horz_arrows;

            border-left-style: none;
        }

        &.right > tabs > arrow {
            @extend %notebook_horz_arrows;

            border-right-style: none;
        }

        @at-root %notebook_horz_arrows {
            margin-top: -5px;
            margin-bottom: -5px;
            padding-top: 4px;
            padding-bottom: 4px;

            &.down {
                -gtk-icon-source: -gtk-icontheme("pan-up-symbolic");
            }

            &.up {
                -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
            }
        }

        > tabs > arrow {
            @extend %button_basic;

            @extend %button_basic.flat;

            min-height: 16px;
            min-width: 16px;
            border-radius: 0;

            &:hover:not(:active):not(:backdrop) {
                background-clip: padding-box;
                background-image: none;
                background-color: transparentize(white, 0.7);
                border-color: transparent;
                box-shadow: none;
            }

            &:disabled {
                @include button(undecorated);
            }
        }

        tab {
            min-height: 30px;
            min-width: 30px;
            padding: 3px 12px;
            outline-offset: -5px;
            color: $base_normal_fg_color;
            font-weight: bold;
            border-width: 1px;
            background-color: $notebook_tab_normal_bg_color;

            // for reorderable tabs
            border-color: $base_normal_border_color;

            //

            &:hover {
                color: $base_normal_fg_color;

                &, &.reorderable-page {
                    border-color: $base_normal_border_color;
                    background-color: $base_prelight_bg_color;
                }
            }

            &:backdrop {
                color: $base_backdrop_fg_color;

                &, &.reorderable-page {
                    border-color: $base_backdrop_border_color;
                    background-color: $base_backdrop_bg_color;
                }
            }

            &:checked {
                color: $base_checked_fg_color;

                &, &.reorderable-page {
                    border-color: $base_normal_border_color;
                    background-color: $base_normal_bg_color;

                    &:hover {
                        background-color: $base_normal_bg_color;
                    }
                }
            }

            &:backdrop:checked {
                color: $backdrop_fg_color;

                &, &.reorderable-page {
                    border-color: $backdrop_borders_color;
                    background-color: $backdrop_bg_color;
                }
            }

            // colors the button like the label, overridden otherwise
            button.flat {
                &:hover {
                    color: currentColor;
                }

                &, &:backdrop {
                    color: gtkalpha(currentColor, 0.3);
                }

                padding: 0;
                margin-top: 4px;
                margin-bottom: 4px;

                // FIXME: generalize .small-button?
                min-width: 20px;
                min-height: 20px;

                &:last-child {
                    margin-left: 4px;
                    margin-right: -4px;
                }

                &:first-child {
                    margin-left: -4px;
                    margin-right: 4px;
                }
            }
        }

        &.top,
        &.bottom {
            tabs {
                padding-left: 0px;
                padding-right: 0px;

                &:not(:only-child) {
                    margin-left: 3px;
                    margin-right: 3px;

                    &:first-child {
                        margin-left: -1px;
                    }

                    &:last-child {
                        margin-right: -1px;
                    }
                }

                tab {
                    margin-left: 0px;
                    margin-right: 0px;

                    &.reorderable-page {
                        border-style: none solid;
                    }
                }
            }
        }

        &.left,
        &.right {
            tabs {
                padding-top: 0px;
                padding-bottom: 0px;

                &:not(:only-child) {
                    margin-top: 3px;
                    margin-bottom: 3px;

                    &:first-child {
                        margin-top: -1px;
                    }

                    &:last-child {
                        margin-bottom: -1px;
                    }
                }

                tab {
                    margin-top: 0px;
                    margin-bottom: 0px;

                    &.reorderable-page {
                        border-style: solid none;
                    }
                }
            }
        }

        &.top tab {
            padding-bottom: 4px;
        }

        &.bottom tab {
            padding-top: 4px;
        }
    }

    > stack:not(:only-child) {
        // the :not(:only-child) is for "hidden" notebooks
        background-color: $base_color;

        &:backdrop {
            background-color: $backdrop_base_color;
        }
    }
}

/**************
 * Scrollbars *
 **************/
scrollbar {
    $_slider_min_length: 40px;

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

    background-color: $scrollbar_bg_color;
    transition: 300ms $ease-out-quad;

    // scrollbar border
    &.top {
        border-bottom: 1px solid $borders_color;
    }

    &.bottom {
        border-top: 1px solid $borders_color;
    }

    &.left {
        border-right: 1px solid $borders_color;
    }

    &.right {
        border-left: 1px solid $borders_color;
    }

    &:backdrop {
        background-color: $backdrop_scrollbar_bg_color;
        border-color: $backdrop_borders_color;
        transition: $backdrop_transition;
    }

    // slider
    slider {
        min-width: 6px;
        min-height: 6px;
        margin: -1px;
        border: 4px solid transparent;
        border-radius: 0px;
        background-clip: padding-box;
        background-color: $scrollbar_slider_color;

        &: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-width: 4px;
            min-height: 4px;
        }

        &.horizontal slider {
            border-width: 5px 4px;
        }

        &.vertical slider {
            border-width: 4px 5px;
        }
    }

    &.overlay-indicator {
        &:not(.dragging):not(.hovering) {
            border-color: transparent;
            opacity: 0.4;
            background-color: transparent;

            slider {
                margin: 0;
                min-width: 3px;
                min-height: 3px;
                background-color: $fg_color;
                border: 1px solid white;
            }

            button {
                min-width: 5px;
                min-height: 5px;
                background-color: $fg_color;
                background-clip: padding-box;
                border-radius: 100%;
                border: 1px solid white;
                -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 {
        padding: 0;
        min-width: 12px;
        min-height: 12px;
        border-style: none;
        border-radius: 0;
        transition-property: min-height, min-width, color;

        @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 {
            &.down {
                -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
            }

            &.up {
                -gtk-icon-source: -gtk-icontheme("pan-up-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;
}

/**********
 * Switch *
 **********/
switch {
    font-weight: bold;
    font-size: smaller;
    outline-offset: -4px;

    // similar to the .scale
    border: 1px solid $borders_color;
    border-radius: 0px;
    color: $fg_color;
    background-color: $dark_fill;
    text-shadow: 0 1px transparentize(black, 0.9);

    &:checked {
        color: $selected_fg_color;
        border-color: $selected_borders_color;
        background-color: $selected_bg_color;
        text-shadow: 0 1px transparentize($selected_borders_color, 0.5), 0 0 2px transparentize(white, 0.4);
    }

    &:disabled {
        color: $insensitive_fg_color;
        border-color: $borders_color;
        background-color: $insensitive_bg_color;
        text-shadow: none;
    }

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

        &:checked {
            color: $backdrop_bg_color;
            border-color: $selected_bg_color;
            background-color: $selected_bg_color;
        }

        &:disabled {
            color: $backdrop_insensitive_color;
            border-color: $backdrop_borders_color;
            background-color: $insensitive_bg_color;
        }
    }

    slider {
        margin: -1px;
        min-width: 44px;
        min-height: 26px;
        border: 1px solid;
        border-radius: 0px;
        transition: $button_transition;

        @include button(normal-alt, $edge: $shadow_color);
    }

    &:hover slider {
        @include button(hover-alt, $edge: $shadow_color);
    }

    &:checked slider {
        border: 1px solid $selected_borders_color;
    }

    &:disabled slider {
        @include button(insensitive);
    }

    &:backdrop {
        slider {
            transition: $backdrop_transition;

            @include button(backdrop);
        }

        &:checked slider {
            border-color: $selected_bg_color;
        }

        &:disabled slider {
            @include button(backdrop-insensitive);
        }
    }

    row:selected & {
        box-shadow: none;
        border-color: $selected_borders_color;

        &:backdrop {
            border-color: $selected_borders_color;
        }

        slider:dir(rtl) {
            border-left-color: $borders_color;
        }

        slider:dir(ltr) {
            border-right-color: $borders_color;
        }

        slider {
            &:checked, & {
                border-color: $selected_borders_color;
            }
        }
    }
}

/*************************
 * Check and Radio items *
 *************************/
// draw regular check and radio items using our PNG assets
// all assets are rendered from assets.svg. never add pngs directly

//selection-mode
@each $s, $as in ("", "-selectionmode"), (":hover", "-hover-selectionmode"), (":active", "-active-selectionmode"), (":backdrop", "-backdrop-selectionmode"), (":checked", "-checked-selectionmode"), (":checked:hover", "-checked-hover-selectionmode"), (":checked:active", "-checked-active-selectionmode"), (":backdrop:checked", "-checked-backdrop-selectionmode") {
    .view.content-view.check#{$s}:not(list),
    .content-view .tile check#{$s}:not(list) {
        -gtk-icon-shadow: none;
        -gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}.png"), url("assets/checkbox#{$as}@2.png"));
        background-color: transparent;
        min-width: 40px;
        min-height: 40px;
        background-image: none;
        transition: none;
        box-shadow: none;
        border-width: 0;
    }
}

checkbutton.text-button, radiobutton.text-button {
    // this is for a nice focus on check and radios text
    padding: 2px 0;
    outline-offset: 0;

    label:not(:only-child) {
        &:first-child {
            margin-left: 4px;
        }

        &:last-child {
            margin-right: 4px;
        }
    }
}

check,
radio {
    margin: 0 4px;

    &:only-child {
        margin: 0;
    }

    popover & {
        // when in a popover add more space between the label and the check, reset the other side margin.
        // See https://bugzilla.gnome.org/show_bug.cgi?id=779570 for details.
        &.left:dir(rtl) {
            margin-left: 0;
            margin-right: 12px;
        }

        &.right:dir(ltr) {
            margin-left: 12px;
            margin-right: 0;
        }
    }

    min-height: 14px;
    min-width: 14px;
    border: 1px solid;
    -gtk-icon-source: none;

    @include button(normal-alt, $edge: $shadow_color);

    &:hover {
        @include button(hover-alt, $edge: $shadow_color);
    }

    &:active {
        @include button(active);
    }

    &:disabled {
        @include button(insensitive);
    }

    &:backdrop {
        @include button(backdrop);

        transition: $backdrop_transition;

        &:disabled {
            @include button(backdrop-insensitive);
        }
    }

    // the borders of the light variant versions of checks and radios are too similar in luminosity to the selected background
    // color, hence we need special casing.
    row:selected & {
        border-color: $selected_borders_color;
    }

    .osd & {
        @include button(osd);

        &:hover {
            @include button(osd);
        }

        &:active {
            @include button(osd-active);
        }

        &:backdrop {
            @include button(osd-backdrop);
        }

        &:disabled {
            @include button(osd-insensitive);
        }
    }

    menu menuitem & {
        margin: 0;

        // this is a workaround for a menu check/radio size allocation issue

        &, &:hover, &:disabled {
            //FIXME use button reset mixin
            min-height: 14px;
            min-width: 14px;
            background-image: none;
            background-color: transparent;
            box-shadow: none;
            -gtk-icon-shadow: none;
            color: inherit;
        }
    }
}

%check,
check {
    border-radius: 0px;

    &:checked {
        -gtk-icon-source: image(-gtk-recolor(url("assets/check-symbolic.svg")), -gtk-recolor(url("assets/check-symbolic.symbolic.png")));
    }

    &:indeterminate {
        -gtk-icon-source: image(-gtk-recolor(url("assets/dash-symbolic.svg")), -gtk-recolor(url("assets/dash-symbolic.symbolic.png")));
    }
}

%radio,
radio {
    border-radius: 100%;

    &:checked {
        -gtk-icon-source: image(-gtk-recolor(url("assets/bullet-symbolic.svg")), -gtk-recolor(url("assets/bullet-symbolic.symbolic.png")));
    }

    &:indeterminate {
        -gtk-icon-source: image(-gtk-recolor(url("assets/dash-symbolic.svg")), -gtk-recolor(url("assets/dash-symbolic.symbolic.png")));
    }
}

// ANIMATION:
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
// the transformation is set on the active state and it get reset on the checked state.
radio:not(:indeterminate):not(:checked):active:not(:backdrop) {
    -gtk-icon-transform: scale(0);
}

check:not(:indeterminate):not(:checked):active:not(:backdrop) {
    -gtk-icon-transform: translate(6px, -3px) rotate(-45deg) scaleY(0.2) rotate(45deg) scaleX(0);
}

radio,
check {
    &:active {
        -gtk-icon-transform: scale(0, 1);
    }

    // should tackle the indeterminate state, untested

    &:checked:not(:backdrop), &:indeterminate:not(:backdrop) {
        -gtk-icon-transform: unset;
        transition: 400ms;
    }
}

menu menuitem {
    radio,
    check {
        &:checked:not(:backdrop), &:indeterminate:not(:backdrop) {
            transition: none;
        }
    }
}

treeview.view check,
treeview.view radio {
    &:selected {
        &:focus, & {
            color: $fg_color;
            border-color: $selected_borders_color;
        }

        &:disabled {
            color: $insensitive_fg_color;

            &:backdrop {
                color: $backdrop_insensitive_color;
            }
        }
    }

    &:backdrop {
        &:selected, & {
            color: $backdrop_fg_color;
        }
    }
}

treeview.view radio:selected {
    &:focus, & {
        @extend %radio;
    }
}

// This is a workaround

/************
 * GtkScale *
 ************/
%scale_trough {
    border: 1px solid $borders_color;
    border-radius: 0px;
    background-color: $dark_fill;

    &:disabled {
        background-color: $insensitive_bg_color;
    }

    &:backdrop {
        background-color: $backdrop_dark_fill;
        border-color: $backdrop_borders_color;
        transition: $backdrop_transition;

        &:disabled {
            background-color: $insensitive_bg_color;
        }
    }

    // ...on selected list rows
    row:selected & {
        &:disabled, & {
            border-color: $selected_borders_color;
        }
    }

    // OSD
    .osd & {
        border-color: $osd_borders_color;
        background-color: transparentize($osd_borders_color, 0.2);

        &:disabled {
            background-color: $osd_insensitive_bg_color;
        }
    }
}

%scale_highlight {
    border: 1px solid $selected_borders_color;
    border-radius: 0px;
    background-color: $selected_bg_color;

    &:disabled {
        background-color: transparent;
        border-color: transparent;
    }

    &:backdrop {
        border-color: $selected_bg_color;

        &:disabled {
            background-color: transparent;
            border-color: transparent;
        }
    }

    // ...on selected list rows
    row:selected & {
        &:disabled, & {
            border-color: $selected_borders_color;
        }
    }

    // OSD
    .osd & {
        border-color: $osd_borders_color;

        &:disabled {
            border-color: transparent;
        }
    }
}

scale {
    // sizing
    $_marks_lenght: 6px;
    $_marks_distance: 6px;

    min-height: 10px;
    min-width: 10px;
    padding: 12px;

    // those are inside the trough node, I need them to show their own border over the trough one, so negative margin
    fill,
    highlight {
        margin: -1px;
    }

    // the slider is inside the trough, so to have make it bigger there's a negative margin

    slider {
        min-height: 18px;
        min-width: 18px;
        margin: -9px;
    }

    // click-and-hold the slider to activate
    &.fine-tune {
        &.horizontal {
            padding-top: 9px;
            padding-bottom: 9px;
            min-height: 16px;
        }

        &.vertical {
            padding-left: 9px;
            padding-right: 9px;
            min-width: 16px;
        }

        // to make the trough grow in fine-tune mode
        slider {
            margin: -6px;
        }

        fill,
        highlight,
        trough {
            border-radius: 5px;
            -gtk-outline-radius: 7px;
        }
    }

    // the backing bit
    trough {
        @extend %scale_trough;

        outline-offset: 2px;
        -gtk-outline-radius: 5px;
    }

    // the colored part of the backing bit
    highlight {
        @extend %scale_highlight;
    }

    // this is another differently styled part of the backing bit, the most relevant use case is for example
    // in media player to indicate how much video stream as been cached
    fill {
        @extend %scale_trough;

        &:backdrop, & {
            background-color: $borders_color;
        }

        &:disabled {
            &:backdrop, & {
                border-color: transparent;
                background-color: transparent;
            }
        }

        // OSD
        .osd & {
            background-color: mix($osd_fg_color, $osd_borders_color, 25%);

            &:disabled {
                &:backdrop, & {
                    border-color: transparent;
                    background-color: transparent;
                }
            }
        }
    }

    slider {
        @include button(normal-alt, $edge: $shadow_color);

        border: 1px solid darken($alt_borders_color, 3%);
        border-radius: 100%;
        transition: $button_transition;
        transition-property: background, border, box-shadow;

        &:hover {
            @include button(hover-alt, $edge: $shadow_color);
        }

        &:active {
            border-color: $selected_borders_color;
        }

        &:disabled {
            @include button(insensitive);
        }

        &:backdrop {
            transition: $backdrop_transition;

            @include button(backdrop);

            &:disabled {
                @include button(backdrop-insensitive);
            }
        }

        // ...on selected list rows
        row:selected & {
            &:disabled, & {
                border-color: $selected_borders_color;
            }
        }

        // OSD
        .osd & {
            @include button(osd);

            border-color: darken($osd_borders_color, 3%);
            background-color: opacify($osd_bg_color, 1);

            // solid background needed here

            &:hover {
                @include button(osd-hover);

                background-color: opacify($osd_bg_color, 1);

                // solid background needed here

            }

            &:active {
                @include button(osd-active);

                background-color: opacify($osd_bg_color, 1);

                // solid background needed here

            }

            &:disabled {
                @include button(osd-insensitive);

                background-color: opacify($osd_bg_color, 1);

                // solid background needed here

            }

            &:backdrop {
                @include button(osd-backdrop);

                background-color: opacify($osd_bg_color, 1);

                // solid background needed here

                &:disabled {
                    @include button(osd-backdrop-insensitive);

                    background-color: opacify($osd_bg_color, 1);

                    // solid background needed here

                }
            }
        }
    }

    value {
        color: gtkalpha(currentColor, 0.55);
    }

    marks {
        color: gtkalpha(currentColor, 0.55);

        @each $marks_class, $marks_pos, $marks_margin in (top, top, bottom), (bottom, bottom, top), (top, left, right), (bottom, right, left) {
            &.#{$marks_class} {
                margin-#{$marks_margin}: $_marks_distance;
                margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght);
            }
        }
    }

    &.fine-tune marks {
        @each $marks_class, $marks_pos, $marks_margin in (top, top, bottom), (bottom, bottom, top), (top, left, right), (bottom, right, left) {
            &.#{$marks_class} {
                margin-#{$marks_margin}: $_marks_distance;
                margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght - 3px);
            }
        }
    }

    &.horizontal {
        indicator {
            min-height: $_marks_lenght;
            min-width: 1px;
        }

        &.fine-tune indicator {
            min-height: $_marks_lenght - 3px;
        }
    }

    &.vertical {
        indicator {
            min-height: 1px;
            min-width: $_marks_lenght;
        }

        &.fine-tune indicator {
            min-width: $_marks_lenght - 3px;
        }
    }

    // *WARNING* scale with marks madness following

    // FIXME: OSD and selected list rows missing, I don't feel like adding the other 144 assets needed for those...
    $suffix: "";

    @each $dir_class, $dir_infix in ("horizontal", "horz"), ("vertical", "vert") {
        @each $marks_infix, $marks_class in ("scale-has-marks-above", "marks-before:not(.marks-after)"), ("scale-has-marks-below", "marks-after:not(.marks-before)") {
            @each $state, $state_infix in ("", ""), (":hover", "-hover"), (":active", "-active"), (":disabled", "-insensitive"), (":backdrop", "-backdrop"), (":backdrop:disabled", "-backdrop-insensitive") {
                &.#{$dir_class}.#{$marks_class} {
                    slider {
                        &#{$state} {
                            // an asymmetric slider asset is used here, so the margins are uneven, the smaller
                            // margin is set on the point side.
                            margin: -10px;

                            $_scale_asset: "assets/slider-#{$dir_infix}-#{$marks_infix}#{$state_infix}#{$suffix}";

                            border-style: none;
                            border-radius: 0;
                            background-color: transparent;
                            background-image: -gtk-scaled(url("#{$_scale_asset}.png"), url("#{$_scale_asset}@2.png"));

                            $_scale_slider_bg_pos: bottom;

                            @if $dir_class == "horizontal" {
                                min-height: 26px;
                                min-width: 22px;

                                @if $marks_infix == "scale-has-marks-above" {
                                    margin-top: -14px;

                                    $_scale_slider_bg_pos: top;
                                }
                                @else {
                                    margin-bottom: -14px;
                                }
                            }
                            @else {
                                min-height: 22px;
                                min-width: 26px;

                                @if $marks_infix == "scale-has-marks-above" {
                                    margin-left: -14px;

                                    $_scale_slider_bg_pos: left bottom;
                                }
                                @else {
                                    margin-right: -14px;

                                    $_scale_slider_bg_pos: right bottom;
                                }
                            }

                            background-position: $_scale_slider_bg_pos;
                            background-repeat: no-repeat;
                            box-shadow: none;
                        }
                    }

                    &.fine-tune slider {
                        // bigger negative margins to make the trough grow here as well
                        margin: -7px;

                        @if $dir_class == "horizontal" {
                            @if $marks_infix == "scale-has-marks-above" {
                                margin-top: -11px;
                            }
                            @else {
                                margin-bottom: -11px;
                            }
                        }
                        @else {
                            @if $marks_infix == "scale-has-marks-above" {
                                margin-left: -11px;
                            }
                            @else {
                                margin-right: -11px;
                            }
                        }
                    }
                }
            }
        }
    }

    &.color {
        min-height: 0;
        min-width: 0;

        trough {
            background-image: image($borders_color);
            background-repeat: no-repeat;
        }

        &.horizontal {
            padding: 0 0 15px 0;

            trough {
                padding-bottom: 4px;
                background-position: 0 -3px;
                border-top-left-radius: 0;
                border-top-right-radius: 0;
            }

            slider {
                &:dir(ltr), &:dir(rtl) {
                    // specificity bumb
                    &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
                        margin-bottom: -15px;
                        margin-top: 6px;
                    }
                }
            }
        }

        &.vertical {
            &:dir(ltr) {
                padding: 0 0 0 15px;

                trough {
                    padding-left: 4px;
                    background-position: 3px 0;
                    border-bottom-right-radius: 0;
                    border-top-right-radius: 0;
                }

                slider {
                    &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
                        margin-left: -15px;
                        margin-right: 6px;
                    }
                }
            }

            &:dir(rtl) {
                padding: 0 15px 0 0;

                trough {
                    padding-right: 4px;
                    background-position: -3px 0;
                    border-bottom-left-radius: 0;
                    border-top-left-radius: 0;
                }

                slider {
                    &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
                        margin-right: -15px;
                        margin-left: 6px;
                    }
                }
            }
        }

        &.fine-tune {
            &.horizontal {
                &:dir(ltr), &:dir(rtl) {
                    // specificity bump
                    padding: 0 0 12px 0;

                    trough {
                        padding-bottom: 7px;
                        background-position: 0 -6px;
                    }

                    slider {
                        margin-bottom: -15px;
                        margin-top: 6px;
                    }
                }
            }

            &.vertical {
                &:dir(ltr) {
                    padding: 0 0 0 12px;

                    trough {
                        padding-left: 7px;
                        background-position: 6px 0;
                    }

                    slider {
                        margin-left: -15px;
                        margin-right: 6px;
                    }
                }

                &:dir(rtl) {
                    padding: 0 12px 0 0;

                    trough {
                        padding-right: 7px;
                        background-position: -6px 0;
                    }

                    slider {
                        margin-right: -15px;
                        margin-left: 6px;
                    }
                }
            }
        }
    }
}

/*****************
 * Progress bars *
 *****************/
progressbar {
    // sizing
    &.horizontal {
        trough,
        progress {
            min-height: 2px;
        }
    }

    &.vertical {
        trough,
        progress {
            min-width: 2px;
        }
    }

    &.horizontal progress {
        margin: 0 -1px;
    }

    // the progress node is positioned after the trough border
    &.vertical progress {
        margin: -1px 0;
    }

    // this moves it over it.

    // FIXME: insensitive state missing and some other state should be set probably
    font-size: smaller;
    color: transparentize($fg_color, 0.6);

    &:backdrop {
        box-shadow: none;
        transition: $backdrop_transition;
    }

    trough {
        @extend %scale_trough;
    }

    &:backdrop trough {
        @extend %scale_trough:backdrop;
    }

    // looks like states are not passed to the trough component here

    progress {
        @extend %scale_highlight;

        border-radius: 1.5px;

        &.left {
            border-top-left-radius: 2px;
            border-bottom-left-radius: 2px;
        }

        &.right {
            border-top-right-radius: 2px;
            border-bottom-right-radius: 2px;
        }

        &.top {
            border-top-right-radius: 2px;
            border-top-left-radius: 2px;
        }

        &.bottom {
            border-bottom-right-radius: 2px;
            border-bottom-left-radius: 2px;
        }
    }

    &:backdrop progress {
        @extend %scale_highlight:backdrop;
    }

    // states not passed here as well

    &.osd {
        // progressbar.osd used for epiphany page loading progress
        min-width: 3px;
        min-height: 3px;
        background-color: transparent;

        trough {
            border-style: none;
            border-radius: 0;
            background-color: transparent;
            box-shadow: none;
        }

        progress {
            border-style: none;
            border-radius: 0;
        }
    }

    trough.empty progress {
        all: unset;
    }

    // makes the progress indicator disappear, when the fraction is 0
}

/*************
 * Level Bar *
 *************/
levelbar {
    &.horizontal {
        block {
            min-height: 1px;
        }

        &.discrete block {
            margin: 0 1px;
            min-width: 32px;
        }
    }

    &.vertical {
        block {
            min-width: 1px;
        }

        &.discrete block {
            margin: 1px 0;
            min-height: 32px;
        }
    }

    &:backdrop {
        transition: $backdrop_transition;
    }

    trough {
        border: 1px solid;
        padding: 2px;
        border-radius: 0px;

        @include entry(normal);

        &:backdrop {
            @include entry(backdrop);
        }
    }

    block {
        border: 1px solid;
        border-radius: 1px;

        &.low {
            border-color: darken($warning_color, 20%);
            background-color: $warning_color;

            &:backdrop {
                border-color: $warning_color;
            }
        }

        &.high,
        &:not(.empty) {
            border-color: darken($selected_bg_color, 20%);
            background-color: $selected_bg_color;

            &:backdrop {
                border-color: $selected_bg_color;
            }
        }

        &.full {
            border-color: darken($success_color, 20%);
            background-color: $success_color;

            &:backdrop {
                border-color: $success_color;
            }
        }

        &.empty {
            background-color: transparent;
            border-color: transparentize($fg_color, 0.8);

            &:backdrop {
                border-color: transparentize($backdrop_fg_color, 0.85);
            }
        }
    }
}

/****************
 * Print dialog *
*****************/
printdialog {
    paper {
        color: $fg_color;
        border: 1px solid $borders_color;
        background: white;
        padding: 0;

        &:backdrop {
            color: $backdrop_fg_color;
            border-color: $backdrop_borders_color;
        }
    }

    .dialog-action-box {
        margin: 12px;
    }
}

/**********
 * Frames *
 **********/
frame > border,
.frame {
    box-shadow: none;
    margin: 0;
    padding: 0;
    border-radius: 0;
    border: 1px solid $borders_color;

    &.flat {
        border-style: none;
    }

    &:backdrop {
        border-color: $backdrop_borders_color;
    }
}

actionbar > revealer >  box {
    padding: 6px;
    border-top: 1px solid $borders_color;

    &:backdrop {
        border-color: $backdrop_borders_color;
    }
}

scrolledwindow {
    viewport.frame {
        // avoid double borders when viewport inside scrolled window
        border-style: none;
    }

    // This is used when content is touch-dragged past boundaries.
    // draws a box on top of the content, the size changes programmatically.
    overshoot {
        &.top {
            @include overshoot(top);

            &:backdrop {
                @include overshoot(top, backdrop);
            }
        }

        &.bottom {
            @include overshoot(bottom);

            &:backdrop {
                @include overshoot(bottom, backdrop);
            }
        }

        &.left {
            @include overshoot(left);

            &:backdrop {
                @include overshoot(left, backdrop);
            }
        }

        &.right {
            @include overshoot(right);

            &:backdrop {
                @include overshoot(right, backdrop);
            }
        }
    }

    // Overflow indication, works similarly to the overshoot, the size if fixed tho.
    undershoot {
        &.top, &.right, &.bottom, &.left {
            background-image: none;
        }
    }

    junction {
        // the small square between two scrollbars
        border-color: transparent;

        // the border image is used to add the missing dot between the borders, details, details, details...
        border-image: linear-gradient(to bottom, $borders_color 1px, transparent 1px) 0 0 0 1 / 0 1px stretch;
        background-color: $scrollbar_bg_color;

        &:dir(rtl) {
            border-image-slice: 0 1 0 0;
        }

        &:backdrop {
            border-image-source: linear-gradient(to bottom, $backdrop_borders_color 1px, transparent 1px);
            background-color: $backdrop_scrollbar_bg_color;
            transition: $backdrop_transition;
        }
    }
}

//vbox and hbox separators
separator {
    background-color: $base_normal_border_color;
    min-width: 1px;
    min-height: 1px;
}

/*********
 * Lists *
 *********/
list {
    color: $text_color;
    background-color: $base_color;
    border-color: $borders_color;

    &:backdrop {
        background-color: $backdrop_base_color;
        border-color: $backdrop_borders_color;
    }

    row {
        padding: 2px;
    }
}

row {
    transition: all 150ms $ease-out-quad;

    &:hover {
        transition: none;
    }

    &:backdrop {
        transition: $backdrop_transition;
    }

    &.activatable {
        &.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411

        &:hover {
            background-color: transparentize($fg_color, 0.9);
        }

        &:active {
            box-shadow: inset 0 2px 2px -2px transparentize(black, 0.8);
        }

        &:backdrop:hover {
            background-color: transparent;
        }

        &:selected {
            &:active {
                box-shadow: inset 0 2px 3px -1px transparentize(black, 0.5);
            }

            &.has-open-popup,
            &:hover {
                background-color: mix($fg_color, $selected_bg_color, 10%);
            }

            &:backdrop {
                background-color: $selected_bg_color;
            }
        }
    }

    &:selected {
        @extend %selected_items;
    }
}

/*********************
 * App Notifications *
 *********************/
.app-notification,
.app-notification.frame {
    @extend %osd;

    padding: 10px;
    border-radius: 0 0 5px 5px;
    background-color: $osd_bg_color;
    background-image: linear-gradient(to bottom, transparentize(black, 0.8), transparent 2px);
    background-clip: padding-box;

    &:backdrop {
        background-image: none;
        transition: $backdrop_transition;
    }

    button {
        @extend %osd_button;
    }

    border {
        border: none;
    }
}

/*************
 * Expanders *
 *************/
expander {
    arrow {
        min-width: 16px;
        min-height: 16px;
        -gtk-icon-source: -gtk-icontheme("pan-end-symbolic");

        &:dir(rtl) {
            -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl");
        }

        &:hover {
            color: lighten($fg_color, 30%);
        }

        //only lightens the arrow

        &:checked {
            -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
        }
    }
}

/************
 * Calendar *
 ***********/
calendar {
    color: $text_color;
    border: 1px solid $borders_color;

    &:selected {
        @extend %selected_items;

        border-radius: 3px;
    }

    &.header {
        border-bottom-color: transparentize(black, 0.9);

        &:backdrop {
            border-bottom-color: transparentize(black, 0.9);
        }
    }

    &.button {
        @extend %undecorated_button;

        color: transparentize($fg_color, 0.55);

        &:hover {
            color: $fg_color;
        }

        &:backdrop {
            color: transparentize($backdrop_fg_color, 0.55);
        }

        &:disabled {
            color: transparentize($insensitive_fg_color, 0.55);
        }
    }

    &.highlight {
        color: $insensitive_fg_color;

        &:backdrop {
            color: $backdrop_insensitive_color;
        }
    }

    &:backdrop {
        color: $backdrop_text_color;
        border-color: $backdrop_borders_color;
    }

    &:indeterminate {
        color: gtkalpha(currentColor, 0.1);
    }
}

/***********
 * Dialogs *
 ***********/
messagedialog {
    // Message Dialog styling
    .titlebar {
        min-height: 20px;
        background-image: none;
        background-color: $bg_color;
        border-style: none;
        border-top-left-radius: 7px;
        border-top-right-radius: 7px;
    }

    &.csd {
        // rounded bottom border styling for csd version
        &.background {
            // bigger radius for better antialiasing
            border-bottom-left-radius: 9px;
            border-bottom-right-radius: 9px;
        }

        .dialog-action-area button {
            padding: 10px 14px;

            // labels are not vertically centered on message dialog, this is a workaround
            border-radius: 0;
            border-left-style: solid;
            border-right-style: none;
            border-bottom-style: none;

            &:first-child {
                border-left-style: none;
                border-bottom-left-radius: 7px;
                -gtk-outline-bottom-left-radius: 5px;
            }

            &:last-child {
                border-bottom-right-radius: 7px;
                -gtk-outline-bottom-right-radius: 5px;
            }
        }
    }
}

filechooser {
    .dialog-action-box {
        border-top: 1px solid $borders_color;

        &:backdrop {
            border-top-color: $backdrop_borders_color;
        }
    }

    #pathbarbox {
        border-bottom: 1px solid $bg_color;
    }
}

filechooserbutton:drop(active) {
    box-shadow: none;
    border-color: transparent;
}

/***********
 * Sidebar *
 ***********/
.sidebar {
    border-style: none;
    background-color: mix($bg_color, $base_color, 50%);

    @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: $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;
        }
    }
}

/****************
 * File chooser *
 ****************/
$_placesidebar_icons_opacity: 0.7;

row image.sidebar-icon {
    opacity: $_placesidebar_icons_opacity;
}

// dim the sidebar icons
// see bug #786613 for details
// on this oddity

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

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

        // Using margins/padding directly in the SidebarRow
        // will make the animation of the new bookmark row jump
        > revealer {
            padding: 0 14px;
        }

        &: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 {
            &:dir(ltr) {
                padding-right: 8px;
            }

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

        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: 26px;
            min-width: 26px;
            margin-top: 3px;
            margin-bottom: 3px;
            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;
            }
        }
    }
}

placesview {
    .server-list-button > image {
        transition: 200ms $ease-out-quad;
        -gtk-icon-transform: rotate(0turn);
    }

    .server-list-button:checked > image {
        transition: 200ms $ease-out-quad;
        -gtk-icon-transform: rotate(-0.5turn);
    }

    row.activatable:hover {
        background-color: transparent;
    }

    // this selects the "connect to server" label
    > actionbar > revealer > box > label {
        padding-left: 8px;
        padding-right: 8px;
    }
}

/*********
 * 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($borders_color);
        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($borders_color), image($borders_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;
        }
    }
}

/**************
 * GtkInfoBar *
 **************/
infobar {
    border-style: none;

    &.info,
    &.question,
    &.warning,
    &.error {
        &:backdrop, & {
            label, & {
                color: $selected_fg_color;
            }

            background-color: $selected_bg_color;
            border-color: darken($selected_bg_color, 10%);
        }

        text-shadow: 0 1px darken($selected_bg_color, 10%);

        &:backdrop {
            text-shadow: none;
        }

        button {
            // FIXME: extend selection mode buttons
            @include button(normal, $selected_bg_color, $selected_fg_color, none);

            &:hover {
                @include button(hover, $selected_bg_color, $selected_fg_color, none);
            }

            &:active,
            &:checked {
                @include button(active, $selected_bg_color, $selected_fg_color, none);
            }

            &:disabled {
                @include button(insensitive, $selected_bg_color, $selected_fg_color, none);
            }

            &:backdrop {
                @include button(backdrop, $selected_bg_color, $selected_fg_color, none);

                border-color: _border_color($selected_bg_color);

                &:disabled {
                    @include button(backdrop-insensitive, $selected_bg_color, $selected_fg_color, none);

                    border-color: _border_color($selected_bg_color);
                }
            }
        }

        selection {
            background-color: darken($selected_bg_color, 10%);
        }

        *:link {
            @extend %link_selected;
        }
    }
}

/************
 * Tooltips *
 ************/
tooltip {
    background-color: $base_normal_bg_color;
    border: 1px solid $base_normal_border_color;

    label {
        color: $base_normal_fg_color;
        text-shadow: none;
        padding: 0px;
    }
}

/*****************
 * Color Chooser *
 *****************/
colorswatch {
    // This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
    // is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
    // applied to the overlay box.

    &:drop(active), & {
        border-style: none;
    }

    // FIXME: implement a proper drop(active) state

    $_colorswatch_radius: 5px;

    // base color corners rounding
    // to avoid the artifacts caused by rounded corner anti-aliasing the base color
    // sports a bigger radius.
    // nth-child is needed by the custom color strip.

    &.top {
        border-top-left-radius: $_colorswatch_radius + 0.5px;
        border-top-right-radius: $_colorswatch_radius + 0.5px;

        overlay {
            border-top-left-radius: $_colorswatch_radius;
            border-top-right-radius: $_colorswatch_radius;
        }
    }

    &.bottom {
        border-bottom-left-radius: $_colorswatch_radius + 0.5px;
        border-bottom-right-radius: $_colorswatch_radius + 0.5px;

        overlay {
            border-bottom-left-radius: $_colorswatch_radius;
            border-bottom-right-radius: $_colorswatch_radius;
        }
    }

    &.left,
    &:first-child:not(.top) {
        border-top-left-radius: $_colorswatch_radius + 0.5px;
        border-bottom-left-radius: $_colorswatch_radius + 0.5px;

        overlay {
            border-top-left-radius: $_colorswatch_radius;
            border-bottom-left-radius: $_colorswatch_radius;
        }
    }

    &.right,
    &:last-child:not(.bottom) {
        border-top-right-radius: $_colorswatch_radius + 0.5px;
        border-bottom-right-radius: $_colorswatch_radius + 0.5px;

        overlay {
            border-top-right-radius: $_colorswatch_radius;
            border-bottom-right-radius: $_colorswatch_radius;
        }
    }

    &.dark {
        outline-color: transparentize(white, 0.4);

        overlay {
            color: white;

            &:hover {
                border-color: transparentize(black, 0.2);
            }

            &:backdrop {
                color: transparentize(white, 0.5);
            }
        }
    }

    &.light {
        outline-color: transparentize(black, 0.4);

        overlay {
            color: black;

            &:hover {
                border-color: transparentize(black, 0.5);
            }

            &:backdrop {
                color: transparentize(black, 0.5);
            }
        }
    }

    &:drop(active) {
        box-shadow: none;

        &.light overlay {
            border-color: $drop_target_color;
            box-shadow: inset 0 0 0 2px darken($drop_target_color, 7%), inset 0 0 0 1px $drop_target_color;
        }

        &.dark overlay {
            border-color: $drop_target_color;
            box-shadow: inset 0 0 0 2px transparentize(black, 0.7), inset 0 0 0 1px $drop_target_color;
        }
    }

    overlay {
        border: 1px solid transparentize(black, 0.7);

        &:hover {
            box-shadow: inset 0 1px transparentize(white, 0.6), inset 0 -1px transparentize(black, 0.8);
        }

        &:backdrop, &:backdrop:hover {
            border-color: transparentize(black, 0.7);
            box-shadow: none;
        }
    }

    &#add-color-button {
        border-radius: $_colorswatch_radius $_colorswatch_radius 0 0;

        &:only-child {
            border-radius: $_colorswatch_radius;
        }

        overlay {
            @include button(normal);

            &:hover {
                @include button(hover);
            }

            &:backdrop {
                @include button(backdrop);
            }
        }
    }

    &:disabled {
        opacity: 0.5;

        overlay {
            border-color: transparentize(black, 0.4);
            box-shadow: none;
        }
    }

    row:selected & {
        box-shadow: 0 0 0 2px $selected_fg_color;
    }

    &#editor-color-sample {
        border-radius: 4px;

        overlay {
            border-radius: 4.5px;
        }
    }
}

// colorscale popup
colorchooser .popover.osd {
    border-radius: 5px;
}

/********
 * Misc *
 ********/
//content view (grid/list)
.content-view {
    background-color: darken($bg_color, 7%);

    &:hover {
        -gtk-icon-effect: highlight;
    }

    &:backdrop {
        background-color: darken($bg_color, 7%);
    }

    rubberband, .rubberband {
        @extend rubberband;
    }
}

.scale-popup {
    .osd & {
        @extend %osd;
    }

    .osd & button.flat {
        //FIXME: quick hack, redo properly
        border-style: none;
        border-radius: 5px;
    }

    button {
        // +/- buttons on GtkVolumeButton popup
        &:hover {
            @extend %undecorated_button;

            background-color: transparentize($fg_color, 0.9);
            border-radius: 5px;
        }

        &:backdrop {
            &:hover, &:disabled, & {
                @extend %undecorated_button;
            }
        }
    }
}

/**********************
 * Window Decorations *
 *********************/
decoration {
    border-radius: 0px;

    // this needs to be transparent
    // see bug #722563
    $_wm_border: transparentize(black, 0.77);
    $_wm_border_backdrop: transparentize(black, 0.82);

    box-shadow: 0 3px 9px 1px transparentize(black, 0.5), 0 0 0 1px $_wm_border;

    //doing borders with box-shadow

    // FIXME rationalize shadows

    // this is used for the resize cursor area
    margin: 10px;

    &:backdrop {
        // the transparent shadow here is to enforce that the shadow extents don't
        // change when we go to backdrop, to prevent jumping windows.
        // The biggest shadow should be in the same order then in the active state
        // or the jumping will happen during the transition.
        box-shadow: 0 3px 9px 1px transparent, 0 2px 6px 2px transparentize(black, 0.8), 0 0 0 1px $_wm_border_backdrop;
        transition: $backdrop_transition;
    }

    .maximized &,
    .fullscreen &,
    .tiled &,
    .tiled-top &,
    .tiled-right &,
    .tiled-bottom &,
    .tiled-left & {
        border-radius: 0;
    }

    .popup & {
        box-shadow: none;
    }

    // server-side decorations as used by mutter
    .ssd & {
        border-style: solid;
        border-width: 0px 1px 1px 1px;
        /* both border-color and background-color must be set to take effect */
        border-color: $headerbar_normal_border_color;
        background-color: $headerbar_normal_border_color;
        &:backdrop {
            border-color: $headerbar_backdrop_border_color;
            background-color: $headerbar_backdrop_border_color;
        }
    }

    //just doing borders, wm draws actual shadows

    .csd.popup & {
        border-radius: 0;
        box-shadow: 0 1px 2px transparentize(black, 0.8), 0 0 0 1px transparentize($_wm_border, 0.1);
    }

    tooltip.csd & {
        border-radius: 5px;
        box-shadow: none;
    }

    messagedialog.csd & {
        border-radius: 7px;
        box-shadow: 0 1px 2px transparentize(black, 0.8), 0 0 0 1px transparentize($_wm_border, 0.1);
    }

    .solid-csd & {
        margin: 0;
        padding: 4px;
        background-color: $borders_color;
        border: solid 1px $borders_color;
        border-radius: 0;
        box-shadow: inset 0 0 0 3px $headerbar_color, inset 0 1px $top_hilight;

        &:backdrop {
            box-shadow: inset 0 0 0 3px $backdrop_bg_color, inset 0 1px $top_hilight;
        }
    }
}

// Window Close button
button.titlebutton {
    @extend %button_basic;

    @extend %button_basic.flat;

    @include _button_text_shadow;

    .selection-mode & {
        @extend %button.flat.suggested-action;

        @extend %nobg_selected_items;
    }

    &:backdrop {
        -gtk-icon-shadow: none;
    }
}

headerbar.selection-mode button.titlebutton,
.titlebar.selection-mode button.titlebutton {
    @include _button_text_shadow(white, $selected_bg_color);

    &:backdrop {
        -gtk-icon-shadow: none;
    }
}

// catch all extend :)

%selected_items {
    background-color: $base_selected_bg_color;

    @at-root %nobg_selected_items, & {
        color: $base_selected_fg_color;

        &:disabled {
            color: mix($selected_fg_color, $selected_bg_color, 50%);
        }

        &:backdrop {
            color: $backdrop_selected_fg_color;

            &:disabled {
                color: mix($backdrop_selected_fg_color, $selected_bg_color, 30%);
            }
        }
    }
}

.monospace {
    font-family: monospace;
}

/**********************
 * Touch Copy & Paste *
 *********************/
//touch selection handlebars for the Popover.osd above
cursor-handle {
    background-color: transparent;
    background-image: none;
    box-shadow: none;
    border-style: none;

    @each $s, $as in ("", ""), (":hover", "-hover"), (":active", "-active") {
        //no need for insensitive and backdrop
        &.top#{$s}:dir(ltr), &.bottom#{$s}:dir(rtl) {
            $_url: "assets/text-select-start#{$as}#{$asset_suffix}";

            -gtk-icon-source: -gtk-scaled(url("#{$_url}.png"), url("#{$_url}@2.png"));
            padding-left: 10px;
        }

        &.bottom#{$s}:dir(ltr), &.top#{$s}:dir(rtl) {
            $_url: "assets/text-select-end#{$as}#{$asset_suffix}";

            -gtk-icon-source: -gtk-scaled(url("#{$_url}.png"), url("#{$_url}@2.png"));
            padding-right: 10px;
        }

        &.insertion-cursor#{$s}:dir(ltr), &.insertion-cursor#{$s}:dir(rtl) {
            $_url: "assets/slider-horz-scale-has-marks-above#{$as}#{$asset_suffix}";

            -gtk-icon-source: -gtk-scaled(url("#{$_url}.png"), url("#{$_url}@2.png"));
        }
    }
}

.context-menu {
    font: initial;
}

// Decouple the font of context menus from their entry/textview

// shortcut window keys
.keycap {
    min-width: 20px;
    min-height: 25px;
    margin-top: 2px;
    padding-bottom: 3px;
    padding-left: 6px;
    padding-right: 6px;
    color: $fg_color;
    background-color: $base_color;
    border: 1px solid;
    border-color: mix($borders_color, $bg_color, 50%);
    border-radius: 5px;
    box-shadow: inset 0 -3px mix($base_color, $bg_color, 20%);
    font-size: smaller;

    &:backdrop {
        background-color: $backdrop_base_color;
        color: $backdrop_fg_color;
        transition: $backdrop_transition;
    }
}

:not(decoration):not(window):drop(active):focus,
:not(decoration):not(window):drop(active) {
    // FIXME needs to be done widget by widget, this wildcard should really die
    border-color: $drop_target_color;
    box-shadow: inset 0 0 0 1px $drop_target_color;
    caret-color: $drop_target_color;
}

stackswitcher button.text-button {
    min-width: 100px;
}

// FIXME aggregate with buttons

stackswitcher button.circular,
stackswitcher button.text-button.circular {
    // FIXME aggregate with buttons
    min-width: 32px;
    min-height: 32px;
    padding: 0;
}

/*********
 * Emoji *
 ********/

popover.emoji-picker {
    padding-left: 0;
    padding-right: 0;
}

button.emoji-section {
    border-color: transparent;
    border-width: 3px;
    border-style: none none solid;
    border-radius: 0;
    margin: 2px 4px 2px 4px;
    padding: 3px 0 0;
    min-width: 32px;
    min-height: 28px;

    /* reset props inherited from the button style */
    background: none;
    box-shadow: none;
    text-shadow: none;
    outline-offset: -5px;

    &:backdrop:not(:checked) {
        border-color: transparent;
    }

    &:hover {
        border-color: $borders_color;
    }

    &:checked {
        border-color: $selected_bg_color;
    }

    label {
        padding: 0;
        opacity: 0.55;
    }

    &:hover label {
        opacity: 0.775;
    }

    &:checked label {
        opacity: 1;
    }
}

.emoji {
    font-size: x-large;
    padding: 6px;
    border-radius: 6px;

    :hover {
        background: $selected_bg_color;
    }
}