@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: 0;
    -GtkWidget-text-handle-width: 20;
    -GtkWidget-text-handle-height: 20;
    -GtkDialog-button-spacing: 5;
    -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 {
    background-color: $bg_color;
    color: $fg_color;

    box-shadow: none;
    &:backdrop {
        color: $backdrop_fg_color;
        -gtk-icon-shadow: none;
	}
}
.background.rubberband {
    background-color: transparent;
}

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

.gtkstyle-fallback {
    color: $fg_color;
    background-color: $bg_color;
    &:hover {
        color: $active_fg_color;
        background-color: $active_bg_color;
    }

    &:active {
        color: $active_fg_color;
        background-color: $active_bg_color;
    }

    &:disabled {
        color: $disable_fg_color;
        background-color: $disable_bg_color;
    }

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

.view,
%view {
    color: $fg_color;
    background-color: $bg_color;
    &:backdrop {
        color: $backdrop_text_color;
        background-color: $backdrop_base_color;

        &:disabled {
            color: $disable_fg_color;
        }
    }

    &:disabled {
        color: $disable_fg_color;
        background-color: $disable_bg_color;
    }

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

.view,
textview {
    text {
        @extend %view;
        selection {
            &:focus, & {
                @extend %selected_items;
            }
        }
    }
}

textview border {
    background-color: mix($bg_color, $bg_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);
    background-image: linear-gradient(to bottom,
                                  transparentize($base_selected_bg_color, 0.65),
                                  transparentize($base_selected_bg_color, 0.65));
}

flowbox {
    rubberband {
        @extend rubberband;
    }
    flowboxchild {
        padding: 3px;
        &:selected {
            @extend %selected_items;
            outline-offset: -2px;
        }
    }
}

.content-view .tile {
    margin: 2px;
    background-color: transparent;
    padding: 0;
    &:backdrop {
        background-color: transparent;
    }
    &:active, &:selected {
        background-color: transparent;
    }
    &:disabled {
        background-color: $disable_bg_color;
    }
}

label {
    caret-color: currentColor;
    &.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: #C0C0C0;
        selection {
        	@extend %selected_items, :disabled;
        }
        &:backdrop {
            color: $disable_fg_color;
        }
    }
    &:backdrop {
        color: $backdrop_fg_color;

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

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

assistant {
    .sidebar {
        background-color: $bg_color;
        //border-top: 1px solid $bg_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;
	border-radius: 4px;
    background-color: $osd_bg_color;
    background-clip: padding-box;
    text-shadow: none;
    -gtk-icon-shadow: none;
    &: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;
		border-radius: 4px;
		border-color: $bd_color;
        transition: all 200ms $ease-out-quad;
        background-color: $text_bg_color;
        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: $disable_bg_color;
                border-color: transparent;
                border-radius: 0;
            }
        }
		&:hover{
			border-color: $active_bd_color;
		}
        &:focus {
            @include entry(focus);
        }
        &:disabled {
            @include entry(insensitive);
        }
        &:backdrop {
            @include entry(backdrop);
	        background-color: $text_bg_color;
            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, $bg_color, 80%);
            &:hover {
                color: $active_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($bg_color, $bg_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($bg_color, $bg_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: $bg_color;
            transition-property: color, background;
        }
    }
    &.flat, & {
        border-radius: 0;
        background-image: none;
        background-color: $bg_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*
 *************/

$_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($_dot_color), to(transparent));
    }
}


%button,
button {
    @at-root %button_basic, & {
        min-height: 24px;
        min-width: 16px;
        padding: 4px 8px;
        border-radius: 4px;
        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 & {

            &.flat:not(:active):not(:checked):not(:hover):not(disabled) {
                color: $disable_fg_color;

                &: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;
        border: none;
        box-shadow: none;

        &:hover {
            border: none;
            box-shadow: none;
        }

        &:active,
        &:checked {
            border: none;
            box-shadow: none;
        }

        &:disabled {
            &:backdrop, & {
                border: none;
            }
        }

        &: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, black);

            &.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%, $bg_color 50%);

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

        &:hover:not(:checked):not(:active):not(:disabled):not(:backdrop) {
            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...
   		box-shadow: none;
		border-radius: 4px;
		color: $button_fg_color;
        background: $toolbar_button_bg_color;
		&:hover {
			color: $bt_hover_fg_color;
		    background: $bt_hover_bg_color;
		}
		&:disabled {
			color: $bt_disable_fg_color;
		    background: $toolbar_button_bg_color;
		}

		&:backdrop {
			color: $bt_backdrop_fg_color;
		    background: $toolbar_button_bg_color;
		}

		&:backdrop:disabled {
			color: $bt_disable_fg_color;
		    background: $toolbar_button_bg_color;
		}
}

// 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-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 {
		color:$active_fg_color;
        background-color: $active_bg_color;
    }

    &:selected {
        @extend %selected_items;
    }

    &:backdrop{
        @extend %undecorated_button;
		background-color: $bg_color;
    }
    &:backdrop:hover {
        @extend %undecorated_button;
		color: $active_fg_color;
		background-color: $active_bg_color;
    }

}

modelbutton.flat arrow {
	background-color: $change_bg_color;
    &:hover {
		color: $active_fg_color;
		background-color: $active_bg_color;
    }

    &.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;
            }
        }
    }
}



/*****************
 * 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: $text_bg_color;
            border: none;
            border-radius: 3px 0 0 3px;
            box-shadow: none;

            &:backdrop:disabled {
                background-color: $disable_bg_color;
            }
        }

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

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

            &:hover {
                color: $active_fg_color;
                background-color: $base_prelight_bg_color;
            }

            &:disabled {
                color: $disable_fg_color;
                background-color: $disable_bg_color;
            }

            &: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: $disable_fg_color;
                background-color: $disable_bg_color;
                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: $active_fg_color;
                border-color: transparentize(opacify($osd_borders_color, 1), 0.5);
                background-color: $active_bg_color,;
                -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: $disable_fg_color;
                border-color: $disable_bg_color;
                -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: $disable_fg_color;
        }

        &:backdrop:disabled {
            color: $disable_fg_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;
}



/********************
 * Header bars *
 ********************/
%titlebar,
headerbar {
    padding: 0 6px;
    min-height: 46px;
    border-radius: 0;
    @include headerbar_fill;
	border-style: none;
	box-shadow: none;
    &:backdrop {
		border-style: none;
        background-image: none;
        box-shadow: inset 0 1px $top_hilight;
        transition: $backdrop_transition;
    }

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

    .subtitle {
        font-size: smaller;
        padding-left: 12px;
        padding-right: 12px;
        @extend .dim-label;
		border-style: none;
    }
    &.selection-mode {
        $_hc: mix($top_hilight, $selected_bg_color, 50%);
        // hilight color
        color: $selected_fg_color;
        text-shadow: none;
        @include headerbar_fill($selected_bg_color, $_hc);
		border-style: none;

        &:backdrop {
            background-color: $selected_bg_color;
            background-image: none;
			border-style: none;
        }

        .subtitle:link {
            @extend *, :link, :selected;
			border-style: none;
        }
        button {
            @include button(normal, $selected_bg_color, $selected_fg_color);
			border-style: none;
            &.flat {
                @include button(undecorated);
				border-style: none;
            }
            &:hover {
                @include button(hover, $selected_bg_color, $selected_fg_color);
				border-style: none;
				color: $active_fg_color;
				background-color: $active_bg_color;
            }
            &:active,
            &:checked {
                @include button(active, $selected_bg_color, $selected_fg_color);
				border-style: none;
				color: $active_fg_color;
				background-color: $active_bg_color;
            }
            &:backdrop {
                &.flat, & {
                    @include button(backdrop, $selected_bg_color, $selected_fg_color);
                    -gtk-icon-effect: none;
                    border-color: $selected_borders_color;
					border-style: none;
                    &:active,
                    &:checked {
                        @include button(backdrop-active, $selected_bg_color, $selected_fg_color);
						color: $active_fg_color;
						background-color: $active_bg_color;
                        border-color: $selected_borders_color;
						border-style:none;
                    }
                    &:disabled {
                        @include button(backdrop-insensitive, $selected_bg_color, $selected_fg_color);
                        border-color: $disable_bg_color;
						border-style: none;
                        &:active, &:checked {
                            @include button(backdrop-insensitive-active, $selected_bg_color, $selected_fg_color);
							color: $active_fg_color;
							background-color: $active_bg_color;
                            border-color: $selected_borders_color;
							border-style: none;
                        }
                    }
                }
            }
            &.flat {
                &:backdrop, &:disabled, &:backdrop:disabled {
                    @include button(undecorated);
					border-style: none;
                }
            }
            &: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: $disable_bg_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($menu_color, 1);
                background-color: transparentize($menu_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;
        border-radius: 0;
        box-shadow: none;
    }

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


.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;
		border-style: none;
		box-shadow: none;
    }
}

headerbar {
    // headerbar border rounding
    window separator:first-child + &,
    window &:first-child {
        &:backdrop, & {
            border-top-left-radius: 0;
			border-style: none;
			box-shadow: none;
        }
    }

    window &:last-child {
        &:backdrop, & {
            border-top-right-radius: 0;
			border-style: none;
			box-shadow: none;
        }
    }

    window stack & {
        // tackles the stacked headerbars case
        &:first-child, &:last-child {
            &:backdrop, & {
                border-top-left-radius: 0;
                border-top-right-radius: 0;
				border-style: none;
				box-shadow: none;
            }
        }
    }

    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;
				border-style: none;
				box-shadow: none;
            }
        }
    }
}

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


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

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

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

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

    &:backdrop {
        background-color: $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-bottom: 2px;
        background-color: $notebook_tab_normal_bg_color;
        &:backdrop {
            border-color: $bd_color;
            background-color: $notebook_tab_normal_bg_color;
        }

        tabs {
            margin: 0px;
        }

        &.top {
            > tabs {
                margin-bottom: -2px;
                > tab {
                    &:hover {
                        box-shadow: none;
                    }
                    &:backdrop {
                        box-shadow: none;
                    }
                    &:checked {
                        box-shadow: none;
                    }
                }
            }
        }

        &.bottom {
            > tabs {
                margin-top: -2px;
                > tab {
                    &:hover {
                        box-shadow: none;
                    }
                    &:backdrop {
                        box-shadow: none;
                    }
                    &:checked {
                        box-shadow: none;
                    }
                }
            }
        }

        &.left {
            > tabs {
                margin-right: -2px;
                > tab {
                    &:hover {
                        box-shadow: none;
                    }
                    &:backdrop {
                        box-shadow: none;
                    }
                    &:checked {
                        box-shadow: none;
                    }
                }
            }
        }

        &.right {
            > 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;
            }
        }

        tab {
			margin-top: 4px;
			border-radius: 6px 6px 0 0;
            min-height: 30px;
            min-width: 30px;
            padding: 3px 12px;
            outline-offset: -5px;
            color: $base_normal_fg_color;
            background-color: $notebook_tab_normal_bg_color;

            // for reorderable
            border-color: $base_normal_border_color;
            &:hover {
                color: $base_normal_fg_color;
                &, &.reorderable-page {
                    background-color: $notebook_tab_normal_bg_color;
                }
            }

            &:backdrop {
                color: $base_backdrop_fg_color;
                &, &.reorderable-page {
                    border-color: $base_backdrop_border_color;
                    background-color: $notebook_tab_normal_bg_color;
                }
            }

            &:checked {
                color: $base_checked_fg_color;
                &, &.reorderable-page {
                    border-color: $base_normal_border_color;
                    background-color: $bg_color;
                    &:hover {
                        background-color: $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: $bg_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;
    }

    transition: 300ms $ease-out-quad;
	min-width: 10px;
	min-height: 10px;

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

    // slider
    slider {
        min-width: 8px;
		min-height: 8px;
        margin: -1px;
        border-style:none;
        border-radius: 6px;
        background-clip: padding-box;
        background-color: $scrollbar_slider_normal_color;

        &:hover {
            background-color: $scrollbar_slider_prelight_color;
			min-width: 6px;
			min-height: 6px;
        }

        &:hover:active {
            background-color: $scrollbar_slider_active_color;
			min-width: 6px;
        }

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

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

    &.horizontal slider {
        min-width: $_slider_min_length;
    }

    &.vertical slider {
        min-height: $_slider_min_length;
    }
}


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

    // similar to the .scale
    border: 1px solid $bg_color;
    border-radius: 0px;
    color: $fg_color;
    background-color: $dark_fill;
    text-shadow: none;

    &:checked {
        color: $selected_fg_color;
        border-color: $selected_borders_color;
        background-color: $selected_bg_color;
        text-shadow: none;
    }

    &:disabled {
        color: $disable_fg_color;
        border-color: $disable_bd_color;
        background-color: $disable_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: $disable_fg_color;
            border-color: $disable_bd_color;
            background-color: $disable_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: $bg_color;
        }

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

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



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

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

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

        &:disabled {
            background-color: $disable_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: $disable_bg_color;
        }
    }
}

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

    &:disabled {
        background-color: $disable_bg_color;
        border-color: $disable_bd_color;
    }

    &:backdrop {
        border-color: $selected_bg_color;

        &:disabled {
            background-color: $disable_bg_color;
            border-color: $disable_bd_color;
        }
    }

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

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

        &:disabled {
            border-color: $disable_bd_color;
        }
    }
}

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: 0;
        }
    }

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

        &:disabled {
            &:backdrop, & {
                border-color: $disable_bd_color;
                background-color: $disable_bg_color;
            }
        }

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

            &:disabled {
                &:backdrop, & {
                    border-color: $disable_bd_color;
                    background-color: $disable_bg_color;
                }
            }
        }
    }

    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);
        }

        // ...on selected list rows
        row:selected & {
            &:disabled, & {
                border-color: $disable_bd_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: $disable_bg_color;
                // 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: $disable_bg_color;
                    // 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($bg_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 $bg_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 $bg_color;

    &.flat {
        border-style: none;
    }

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

actionbar > revealer >  box {
    padding: 6px;
    border-top: 1px solid $bg_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, $bg_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: $fg_color;
    background-color: $bg_color;
    border-color: $bg_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: $fg_color;
    border: 1px solid $bg_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: $disable_fg_color;
        }
    }

    &.highlight {
        color: $disable_fg_color;

        &:backdrop {
            color: $disable_fg_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 $bg_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, $bg_color, 50%);

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

    @at-root %sidebar_right
    &:dir(rtl),
    &.right {
        border-left: 1px solid $bg_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: $disable_fg_color;
        }

        &:backdrop {
            color: $backdrop_fg_color;

            &:selected {
                color: $backdrop_selected_fg_color;
            }

            &:disabled {
                color: $disable_fg_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: $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: $bg_color;
        background-size: 1px 1px;

        &:selected {
            background: $selected_bg_color;
        }

        // FIXME is this needed?

        &:backdrop {
            background: $backdrop_borders_color;
        }

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

            &:backdrop {
                background-color: $backdrop_bg_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: $fg_color;
            }

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

        text-shadow:none;

        &:backdrop {
            text-shadow: none;
        }

        button {
			box-shadow: none;
			border-radius: 4px;
			color: $button_fg_color;
			background: $button_bg_color;
			border-style:none;
			 &:hover {
				color: $bt_hover_fg_color;
				background: $bt_hover_bg_color;
			}

			&:active {
				color: $bt_active_fg_color;
				background: $bt_active_bg_color;
			}

			&:checked {
				color: $bt_active_fg_color;
				background: $bt_active_bg_color;
			}

			&:disabled {
				color: $bt_disable_fg_color;
				background: $bt_disable_bg_color;
			}

			&:backdrop {
				color: $bt_backdrop_fg_color;
				background: $bt_backdrop_bg_color;
			}

			&:backdrop:disabled {
				color: $bt_disable_fg_color;
				background: $bt_disable_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 rgba($color: $fg_color, $alpha: 0.3);
    border-radius: 4px;

    // 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.
	background-color: transparent;
    &: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: $disable_bd_color;
            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: transparent;

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

    &:backdrop {
        background-color: transparent;
    }

    rubberband, .rubberband {
        @extend rubberband;
    }
}

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

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

    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 {
	box-shadow: 0 0 5px #888;
    // this needs to be transparent
    // see bug #722563
    $_wm_border: transparentize(black, 0.77);
    $_wm_border_backdrop: transparentize(black, 0.82);
    .maximized &,
    .fullscreen &,
    .tiled &,
    .tiled-top &,
    .tiled-right &,
    .tiled-bottom &,
    .tiled-left & {
        border-radius: 0px;
    }
    .popup & {
        box-shadow: none;
    }
    // server-side decorations as used by mutter
    .ssd & {
	    box-shadow: 0 0 0 1px $_wm_border;
        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: 6px;
        box-shadow: 0 0 4px $menu_bd_color;
        // border: 1px solid $menu_bd_color;
    }

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

    messagedialog.csd & {
        border-radius: 0px;
        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: $bg_color;
        //border: solid 1px $bg_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: $disable_fg_color;
        }
        &:backdrop {
            color: $backdrop_selected_fg_color;
            &:disabled {
                color: $disable_fg_color;
            }
        }
    }
}

.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: $bg_color;
    border: 1px solid;
    border-color: mix($bg_color, $bg_color, 50%);
    border-radius: 5px;
    box-shadow: inset 0 -3px mix($bg_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;
}
