/* Copyright 2011-2015 elementary LLC.
*
* This file is part of the elementary GTK theme.
*
* The elementary GTK theme is free software: you can redistribute it
* and/or modify it under the terms of the GNU General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* The elementary GTK theme is distributed in the hope that it will be
* useful, but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General
* Public License for more details.
*
* You should have received a copy of the GNU General Public License along
* with the elementary GTK theme. If not, see http://www.gnu.org/licenses/.
*/

* {
    background-clip: padding-box;
    -GtkTextView-error-underline-color: @error_color;
    -GtkIMHtml-hyperlink-color: @link_color;
    -GtkHTML-link-color: @link_color;

    /* -gtk-icon-palette: needs-attention @attention_color, success @success_color, warning @warning_color, error @error_color; FIXME: Uncomment for 3.19 */
}

*:link {
    color: @link_color;
}

*:visited {
    color: @GRAPE_500;
}

/***************
 * Base States *
 **************/

.background {
    color: @text_color;
    background-color: @bg_color;
}

*:selected {
    background-color: shade (@base_color, 0.8);
    color: @text_color;
}

*:selected:focus {
    background-color: alpha (@colorAccent, 0.9);
    color: @selected_fg_color;
    text-shadow: none;
}

*:disabled {
    color: @insensitive_color;
    -gtk-icon-effect: dim;
}

*:hover {
    -gtk-icon-effect: none;
}

.gtkstyle-fallback {
    background-color: @bg_color;
    color: @fg_color;
}

image,
image:disabled,
label,
label:disabled,
box,
box:disabled,
grid,
grid:disabled {
    background-color: transparent;
}

/************
 * Tooltips *
 ************/

tooltip,
tooltip.background,
.overlay-bar {
    background-color: alpha (#222, 0.9);
    border-radius: 3px;
    border-width: 0;
    box-shadow:
        0 1px 3px alpha (#000, 0.12),
        0 1px 2px alpha (#000, 0.24);
    color: #fff;
    padding: 3px 6px;
    margin: 6px;
    text-shadow: 0 1px 2px alpha (#000, 0.6);
}

.overlay-bar {
    margin: 3px;
}

tooltip label,
.overlay-bar label {
    color: #fff;
    text-shadow: 0 1px 2px alpha (#000, 0.6);
}

/*****************
 * Miscellaneous *
 ****************/

spinner {
    background-image: none;
    opacity: 0;
    -gtk-icon-source: -gtk-icontheme("process-working-symbolic");
}

spinner:checked {
    opacity: 0.8;
    animation: spin 600ms linear infinite;
}

spinner:checked:disabled {
    opacity: 0.4;
}

rubberband,
.view.rubberband,
.rubberband {
    background-color: alpha (@colorAccent, 0.35);
    border: 1px solid @colorAccent;
    transition: all 600ms ease-out;
}

.dnd {
    background-color: alpha (@colorAccent, 0.4);
    background-image: none;
    border: 1px solid @colorAccent;
    border-radius: 3px;
    margin: 3px;
}

.monospace {
    font-family: monospace;
}

.keycap {
    background-image:
        linear-gradient(
            to bottom,
            shade (
                @bg_color,
                0.97
            ),
            @bg_color
        );
    border: 1px solid @border_color;
    border-radius: 2.5px;
    box-shadow:
        inset 0 0 0 1px alpha (@bg_highlight_color, 0.05),
        inset 0 1px 0 0 alpha (@bg_highlight_color, 0.45),
        inset 0 -2px 0 0 alpha (@bg_highlight_color, 0.15),
        inset 0 -1px 0 0 shade (@bg_color, 0.85),
        0 1px 2px alpha (#000, 0.05);
    color: @text_color;
    font-size: 85%;
    min-width: 12px;
    padding: 3px 6px 4px;
    text-shadow: 0 1px @text_shadow_color;
}

menuitem .keycap,
modelbutton .keycap {
    background: alpha (#000, 0.08);
    border: none;
    box-shadow: 0 1px 0 0 alpha (#000, 0.15);
    color: alpha(@text_color, 0.78);
    margin: 0 0 1px;
    padding: 1px 6px 0;
    text-shadow: none;
}

modelbutton .keycap {
    padding: 3px 6px;
}

menuitem:disabled .keycap,
modelbutton:disabled .keycap {
    opacity: 0.7;
}

/**************
 * Separators *
 *************/

menu separator,
separator.horizontal {
    border-top: 1px solid @menu_separator;
    border-bottom: 1px solid @menu_separator_shadow;
    margin-bottom: -1px;
}

menu separator {
    margin: 4px 0;
}

separator.vertical {
    border-left: 1px solid @menu_separator;
    border-right: 1px solid @menu_separator_shadow;
    margin-right: -1px;
}

paned.vertical > separator {
    background-image:
        linear-gradient(
            to bottom,
            @menu_separator 1px,
            @menu_separator_shadow 1px,
            @menu_separator_shadow 2px,
            transparent 2px
        );
    margin-bottom: -7px;
    min-height: 8px;
}

paned.horizontal > separator {
    background-image:
        linear-gradient(
            to right,
            @menu_separator 1px,
            @menu_separator_shadow 1px,
            @menu_separator_shadow 2px,
            transparent 2px
        );
    margin-right: -7px;
    min-width: 8px;
}

paned > separator.wide {
    margin: 0;
    min-width: 6px;
    min-height: 6px;
    padding: 0;
    background-image:
        linear-gradient(
            to right,
            @border_color,
            @bg_color 1px,
            shade (
                @bg_color,
                0.96
            ) calc(100% - 1px),
            @border_color
        );
    box-shadow:
        inset 0 0 0 1px alpha (@bg_highlight_color, 0.05),
        inset 0 1px 0 0 alpha (@bg_highlight_color, 0.45),
        inset 0 -1px 0 0 alpha (@bg_highlight_color, 0.15);
}

paned.vertical > separator.wide {
    background-image:
        linear-gradient(
            to bottom,
            @border_color,
            @bg_color 1px,
            shade (
                @bg_color,
                0.96
            ) calc(100% - 1px),
            @border_color
        );
}

.titlebar separator:first-child,
.titlebar separator:last-child {
    margin: 0 4px;
}

toolbar separator,
.titlebar separator {
    background: none;
    margin: 0 18px;
}

.titlebar separator:first-child,
.titlebar separator:last-child {
    margin: 0;
    min-width: 0;
    padding: 0;
}

toolbar paned separator,
.toolbar .pane-separator,
.titlebar .pane-separator {
    background-color: transparent;
    background-image: url("assets/pane-handle.svg");
    box-shadow: none;
}

/*************
* Text Entry *
*************/

entry,
spinbutton,
.entry {
    background-image:
        linear-gradient(
            to bottom,
            shade (
                @base_color,
                0.93
            ),
            shade (
                @base_color,
                0.97
            )
        );
    border: 1px solid @border_color;
    border-radius: 2.5px;
    box-shadow:
        inset 0 1px 0 0 alpha (@inset_dark_color, 0.7),
        inset 0 0 0 1px alpha (@inset_dark_color, 0.3),
        0 1px 0 0 alpha (@bg_highlight_color, 0.3);
    color: @text_color;
    text-shadow: 0 1px @text_shadow_color;
    padding: 3px;
    transition: all 200ms ease-out;
    -gtk-icon-shadow: 0 1px @text_shadow_color;
}

selection {
    background-color: alpha (@accent_color_100, 0.3);
    color: @accent_color_900;
    text-shadow: none;
}

toolbar entry,
toolbar spinbutton,
.titlebar entry,
.titlebar spinbutton,
.titlebar .entry,
.toolbar .entry {
    background-image:
        linear-gradient(
            to bottom,
            alpha (
                #000,
                0.05
            ),
            transparent 3px
        ),
        linear-gradient(
            to bottom,
            shade (
                @base_color,
                0.93
            ),
            @base_color
        );
    border-color: alpha (#000, 0.24);
    box-shadow:
        inset 0 0 0 1px @inset_dark_color,
        0 1px 0 0 alpha (@bg_highlight_color, 0.3);
}

toolbar entry:backdrop,
toolbar spinbutton:backdrop,
.titlebar entry:backdrop,
.titlebar spinbutton:backdrop,
.titlebar .entry:backdrop,
.toolbar .entry:backdrop {
    background-image:
        linear-gradient(
            to bottom,
            alpha (
                #000,
                0.02
            ),
            transparent 5px
        ),
        linear-gradient(
            to bottom,
            shade (
                @base_color,
                0.94
            ),
            shade (
                @base_color,
                0.96
            )
        );
    border-color: alpha (#000, 0.18);
    color: @insensitive_fg_color;
    box-shadow:
        inset 0 1px 0 0 alpha (@inset_dark_color, 0.7),
        inset 0 0 0 1px alpha (@inset_dark_color, 0.3),
        0 1px 0 0 alpha (@bg_highlight_color, 0.3);
}

entry:focus,
spinbutton:focus,
.entry:focus {
    border-color: alpha (@colorAccent, 0.8);
    box-shadow:
        inset 0 0 0 1px alpha (@colorAccent, 0.23),
        0 1px 0 0 alpha (@bg_highlight_color, 0.3);
    transition: all 200ms ease-in;
}

entry.error,
entry.error:focus,
spinbutton.error,
spinbutton.error:focus,
.entry.error,
.entry.error:focus {
    border-color: alpha (@error_color, 0.8);
    box-shadow:
        inset 0 0 0 1px alpha (@error_color, 0.23),
        0 1px 0 0 alpha (@bg_highlight_color, 0.3);
    transition: all 200ms ease-in;
}

entry:disabled,
spinbutton:disabled,
.entry:disabled {
    background-image: none;
    border-color: alpha(@border_color, 0.75);
    box-shadow:
        inset 0 1px 0 0 alpha (@inset_dark_color, 0.5),
        inset 0 0 0 1px alpha (@inset_dark_color, 0.2),
        0 1px 0 0 alpha (@bg_highlight_color, 0.3);
    color: @insensitive_color;
}

toolbar entry:disabled,
toolbar spinbutton:disabled,
.titlebar entry:disabled,
.titlebar spinbutton:disabled,
.titlebar .entry:disabled,
.toolbar .entry:disabled {
    background: transparent;
    border-color: alpha (#000, 0.2);
    box-shadow: inset 0  0 0 1px alpha (@inset_dark_color, 0.25), 0 1px 0 0 alpha (@bg_highlight_color, 0.3);
}

toolbar entry:disabled:backdrop,
toolbar spinbutton:disabled:backdrop,
.titlebar entry:disabled:backdrop,
.titlebar spinbutton:disabled:backdrop,
.titlebar .entry:disabled:backdrop,
.toolbar .entry:disabled:backdrop {
    background-image: none;
    border-color: alpha (#000, 0.2);
    box-shadow: 0 1px 0 0 alpha (@bg_highlight_color, 0.3);
}

entry image {
    color: @internal_element_color;
    transition: all 200ms ease-in-out;
    -gtk-icon-palette: needs-attention @attention_color, success @LIME_500, warning shade (@BANANA_700, 1.25), error @error_color;
}

entry image:backdrop {
    color: @insensitive_color;
}

entry image.left {
    margin-right: 6px;
}

entry image.right:dir(ltr):hover,
entry image.left:dir(rtl):hover {
    color: @text_color;
}

entry.flat,
.entry.flat {
    border-width: 0 0 1px;
    border-radius: 0;
    background-color: @base_color;
    background-image: none;
    box-shadow: none;
}

/*************
 * Text view *
 *************/

textview,
textview text {
    color: @text_color;
    background-color: @base_color;
}

/*******************
* Symbolic images *
*******************/

image {
    color: inherit;
}

/****************
 * Progress bar *
 ****************/

progressbar progress,
treeview .progressbar {
    background-image:
        linear-gradient(
            to bottom,
            shade (
                @colorAccent,
                1.3
            ),
            shade (
                @colorAccent,
                1.08
            )
        );
    border: 1px solid shade (@colorAccent, 0.9);
    box-shadow:
        inset 0 0 0 1px alpha (#fff, 0.05),
        inset 0 1px 0 0 alpha (#fff, 0.35),
        inset 0 -1px 0 0 alpha (#fff, 0.15);
    margin-left: -1px;
    margin-right: -1px;
}

progressbar.vertical progress {
    background-image:
        linear-gradient(
            to right,
            shade (
                @colorAccent,
                1.25
            ),
            shade (
                @colorAccent,
                1.18
            )
        );
    margin: -1px 0;
}

progressbar progress:backdrop,
treeview .progressbar:backdrop {
    background-image: none;
    background-color: shade (@bg_color, 0.85);
    border-color: shade (@bg_color, 0.68);
    box-shadow:
        inset 0 0 0 1px alpha (@bg_highlight_color, 0.05),
        inset 0 1px 0 0 alpha (@bg_highlight_color, 0.35),
        inset 0 -1px 0 0 alpha (@bg_highlight_color, 0.15);
}

progressbar trough,
treeview .trough {
    padding: 0;
    border: 1px solid alpha (#000, 0.25);
    background-image:
        linear-gradient(
            to bottom,
            @bg_color,
            shade (
                @bg_color,
                0.9
            )
        );
    box-shadow:
        inset 0 0 0 1px alpha (@bg_highlight_color, 0.1),
        inset 0 1px 0 0 @bg_highlight_color,
        inset 0 -1px 0 0 alpha (@bg_highlight_color, 0.5),
        0 1px 0 0 alpha (@bg_highlight_color, 0.5);
}

progressbar.vertical trough {
    background-image:
        linear-gradient(
            to right,
            @bg_color,
            shade (
                @bg_color,
                0.93
            )
        );
}

progressbar trough:backdrop,
treeview .trough:backdrop {
    background-image: none;
    background-color: @bg_color;
    border-color: shade (@bg_color, 0.75);
}

treeview .progressbar:selected:focus,
treeview .trough:selected:focus {
    border: 1px solid shade (@colorAccent, 0.8);
}

entry progress,
spinbutton progress {
    background-image:
        linear-gradient(
            to top,
            @colorAccent,
            alpha (
                @colorAccent,
                0.5
            ) 1px,
            alpha (
                @base_color,
                0
            ) 7px
        );
    border-radius: 2.5px;
    margin: -4px;
}

entry progress:not(.pulse):dir(ltr) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

entry progress:not(.pulse):dir(rtl) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

spinbutton progress {
    margin: -4px -6px;
}

progressbar.osd progress,
progressbar.osd trough {
    border: none;
    box-shadow: none;
    min-height: 2px;
    min-width: 2px;
}

progressbar.osd progress {
    background: @colorAccent;
    border-radius: 99px;
}

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

progressbar.osd trough {
    background: none;
}

/************
* Level Bar *
************/

levelbar block {
    background-color: @selected_bg_color;
    background-image:
        linear-gradient(
            to bottom,
            shade (
                @selected_bg_color,
                1.3
            ),
            @selected_bg_color
        );
    border: 1px solid shade (@selected_bg_color, 0.9);
    border-radius: 3px;
    box-shadow:
        inset 0 0 0 1px alpha (#fff, 0.05),
        inset 0 1px 0 0 alpha (#fff, 0.35),
        inset 0 -1px 0 0 alpha (#fff, 0.15),
        0 1px 0 0 alpha (@bg_highlight_color, 0.15);
    min-height: 6px;
    min-width: 24px;
    transition: all 100ms ease-in;
}

levelbar.vertical block {
    min-height: 34px;
    min-width: 6px;
}

levelbar block.filled.low {
    background-image:
        linear-gradient(
            to bottom,
            shade (
                @error_color,
                1.3
            ),
            @error_color
        );
    box-shadow:
        inset 0 0 0 1px alpha (#fff, 0.05),
        inset 0 1px 0 0 alpha (#fff, 0.25),
        inset 0 -1px 0 0 alpha (#fff, 0.1),
        0 1px 0 0 alpha (@bg_highlight_color, 0.15);
    border-color: shade (@error_color, 0.9);
}

levelbar block.filled.middle {
    background-image:
        linear-gradient(
            to bottom,
            shade (
                @warning_color,
                1.3
            ),
            @warning_color
        );
    box-shadow:
        inset 0 0 0 1px alpha (#fff, 0.05),
        inset 0 1px 0 0 alpha (#fff, 0.45),
        inset 0 -1px 0 0 alpha (#fff, 0.15),
        0 1px 0 0 alpha (@bg_highlight_color, 0.15);
    border-color: shade (@warning_color, 0.9);
}

levelbar block.filled.high {
    background-image:
        linear-gradient(
            to bottom,
            shade (
                @LIME_300,
                1.1
            ),
            @LIME_300
        );
    border-color: shade (@LIME_300, 0.8);
}

levelbar block.empty {
    background-color: shade (@bg_color, 0.95);
    background-image:
        linear-gradient(
            to bottom,
            @bg_color,
            shade (
                @bg_color,
                0.9
            )
        );
    border-color: alpha (#000, 0.25);
    box-shadow:
        inset 0 0 0 1px alpha (@bg_highlight_color, 0.1),
        inset 0 1px 0 0 alpha (@bg_highlight_color, 0.9),
        inset 0 -1px 0 0 alpha (@bg_highlight_color, 0.3);
}

levelbar.vertical block.empty {
    background-image:
        linear-gradient(
            to bottom,
            @bg_color,
            shade (
                @bg_color,
                0.95
            )
        );
}

levelbar block:backdrop {
    background-image: none;
    background-color: shade (@bg_color, 0.85);
    border-color: shade (@bg_color, 0.68);
    box-shadow:
        inset 0 0 0 1px alpha (@bg_highlight_color, 0.05),
        inset 0 1px 0 0 alpha (@bg_highlight_color, 0.35),
        inset 0 -1px 0 0 alpha (@bg_highlight_color, 0.15),
        0 1px 0 0 alpha (@bg_highlight_color, 0.15);
}

levelbar block.empty:backdrop {
    background-color: shade (@bg_color, 0.95);
    border-color: shade (@bg_color, 0.75);
}

levelbar.discrete.horizontal block {
    margin: 0 2px;
}

levelbar.discrete.vertical block {
    margin: 2px 0;
}

levelbar.discrete.horizontal block:first-child {
    margin-left: 0;
}

levelbar.discrete.horizontal block:last-child {
    margin-right: -2px;
}

levelbar trough {
    background: transparent;
    box-shadow: none;
}

/********
* Scale *
********/

scale slider {
    background-image:
        linear-gradient(
            to bottom,
            shade (
                @SILVER_100,
                1.05
            ),
            shade (
                @SILVER_100,
                0.95
            )
        );
    border-radius: 12px;
    box-shadow:
        inset 0 0 0 1px alpha (#fff, 0.05),
        inset 0 1px 0 0 alpha (#fff, 0.45),
        inset 0 -1px 0 0 alpha (#fff, 0.15),
        0 0 0 1px alpha (#000, 0.25),
        0 1px 1px 1px alpha (#000, 0.1);
    margin: -7px 0;
    min-height: 14px;
    min-width: 14px;
}

scale slider:focus {
    background-image:
        linear-gradient(
            to bottom,
            shade (
                @SILVER_100,
                1.05
            ),
            shade (
                mix (
                    @SILVER_100,
                    @colorAccent,
                    0.1
                ),
                0.95
            )
        );
    box-shadow:
        inset 0 0 0 1px alpha (#fff, 0.05),
        inset 0 1px 0 0 alpha (#fff, 0.45),
        inset 0 -1px 0 0 alpha (#fff, 0.15),
        0 0 0 1px alpha (shade (@colorAccent, 0.5), 0.25),
        0 1px 1px 1px alpha (@colorAccent, 0.35),
        0 1px 2px 1px alpha (@colorAccent, 0.16);
}

scale slider:backdrop {
    background-image:
        linear-gradient(
            to bottom,
            shade (
                @SILVER_100,
                1.03
            ),
            shade (
                @SILVER_100,
                0.97
            )
        );
    box-shadow:
        inset 0 0 0 1px alpha (#fff, 0.1),
        inset 0 1px 0 0 alpha (#fff, 0.9),
        inset 0 -1px 0 0 alpha (#fff, 0.3),
        0 0 0 1px alpha (#000, 0.2),
        0 1px 1px 1px alpha (#000, 0.08);
}

scale slider:disabled {
    background-color: transparent;
    background-image: none;
    border: none;
    box-shadow: none;
}

scale trough {
    border-radius: 12px;
    background-color: alpha (#000, 0.05);
    box-shadow:
        inset 0 0 0 1px alpha (#000, 0.3),
        inset 0 0 0 2px alpha (#000, 0.03),
        0 1px 0 0 alpha (@bg_highlight_color, 0.3);
    margin: 7px 0;
    min-height: 5px;
    min-width: 5px;
    padding: 0 6px;
}

.titlebar scale trough {
    border-radius: 0 12px 12px 0;
}

scale.vertical slider {
    margin: 0 -7px;
}

scale.vertical trough {
    margin: 0 7px;
    padding: 6px 0;
}

scale mark indicator {
    color: mix (@bg_color, @text_color, 0.3);
}

scale.horizontal mark indicator {
    min-height: 6px;
    min-width: 1px;
}

scale.vertical mark indicator {
    min-height: 1px;
    min-width: 6px;
}

scale highlight {
    background-color: alpha (@BLACK_900, 0.45);
}

scale.accent highlight {
    background-color: alpha (@colorAccent, 0.67);
}

scale highlight:disabled {
    background-color: alpha (#000, 0.25);
}

scale fill {
    background-color: alpha(@BLACK_900, 0.25);
}

scale.accent fill {
    background-color: alpha(@colorAccent, 0.33);
}

scale.horizontal highlight.top,
scale.horizontal fill.top {
    border-radius: 12px 0 0 12px;
    margin: 0 0 0 -6px;
}

scale.horizontal highlight.bottom,
scale.horizontal fill.bottom {
    border-radius: 0 12px 12px 0;
    margin: 0 -6px 0 0;
}

scale.vertical highlight.top,
scale.vertical fill.top {
    border-radius: 12px 12px 0 0;
    margin: -6px 0 0 0;
}

scale.vertical highlight.bottom,
scale.vertical fill.bottom {
    border-radius: 0 0 12px 12px;
    margin: 0 0 -6px 0;
}

/*********
* Frames *
*********/

frame,
.frame {
    border: 1px solid @border_color;
    color: lighter (@fg_color);
}

scrolledwindow.frame {
    border: 1px solid @border_color;
}

frame.flat,
scrolledwindow viewport.frame,
.frame.flat {
    border: none;
}

/**********
* Buttons *
**********/

button,
.button,
.button.menuitem.menubar {
    padding: 3px 6px;
}

button,
.button,
.titlebar .stack-switcher .button.image-button {
    text-shadow: 0 1px @text_shadow_color;
    background-image:
        linear-gradient(
            to bottom,
            transparent,
            transparent 50%,
            alpha (
                #000,
                0.04
            )
        );
    border: 1px solid @border_color;
    border-radius: 2.5px;
    box-shadow:
        inset 0 0 0 1px alpha (@bg_highlight_color, 0.05),
        inset 0 1px 0 0 alpha (@bg_highlight_color, 0.45),
        inset 0 -1px 0 0 alpha (@bg_highlight_color, 0.15),
        0 1px 0 0 alpha (@bg_highlight_color, 0.15);
    color: @text_color;
    transition: all 100ms ease-in;
    -gtk-icon-shadow: 0 1px @text_shadow_color;
}

button label {
    padding: 0 6px;
}

.titlebar button,
.titlebar .button {
    border-color: shade (@colorPrimary, 0.75);
    color: @textColorPrimary;
    text-shadow: 0 1px @textColorPrimaryShadow;
    box-shadow:
        inset 0 0 0 1px alpha (shade (@colorPrimary, 1.4), 0.05),
        inset 0 1px 0 0 alpha (shade (@colorPrimary, 1.4), 0.45),
        inset 0 -1px 0 0 alpha (shade (@colorPrimary, 1.4), 0.15),
        0 1px 0 0 alpha (shade (@colorPrimary, 1.4), 0.3);
    -gtk-icon-shadow: 0 1px @textColorPrimaryShadow;
}

button.color {
    padding: 3px;
}

button.color colorswatch {
    border-radius: 2px;
    box-shadow: 0 1px 0 0 alpha (@bg_highlight_color, 0.15);
}

button.color overlay {
    border-radius: 2px;
    box-shadow: inset 0 0 1px 1px alpha (#000, 0.2);
}

button:backdrop,
.button:backdrop {
    background-image: none;
    border-color: alpha (#000, 0.2);
}

toolbar button,
.titlebar button,
.titlebar .button,
.toolbar .button {
    padding: 3px;
}

button:focus,
popover actionbar button:focus,
.button:focus,
.popover actionbar .button:focus,
.titlebar .stack-switcher .button.image-button:focus {
    color: @text_color;
    border-color: @colorAccent;
    box-shadow:
        inset 0 0 0 1px alpha (@bg_highlight_color, 0.05),
        inset 0 1px 0 0 alpha (@bg_highlight_color, 0.45),
        inset 0 -1px 0 0 alpha (@bg_highlight_color, 0.15),
        0 0 0 1px alpha (@colorAccent, 0.25);
    transition: all 100ms ease-out;
}

button.flat,
button.flat:backdrop,
.button.flat,
.button.flat:backdrop {
    border-color: transparent;
    box-shadow: none;
    background-image: none;
    background-color: transparent;
}

button.flat:focus,
button.flat:focus:hover,
.button.flat:focus,
.button.flat:focus:hover {
    background-color: alpha (@text_color, 0.15);
}

/* FIXME: style for checked image buttons
.button:checked GtkImage {
    color: #08c;
    -gtk-icon-shadow: 0 1px 4px alpha (@colorAccent, 0.5),
                                 0 1px 0 alpha (#fff, 0.3);
} */

button.circular.flat.image-button,
button.circular.flat.image-button:backdrop,
button.circular.flat.image-button:disabled,
button.circular.flat.image-button:hover,
button.circular.flat.image-button:focus:active,
.button.circular.flat.image-button,
.button.circular.flat.image-button:backdrop,
.button.circular.flat.image-button:disabled,
.button.circular.flat.image-button:hover,
.button.circular.flat.image-button:focus:active {
    background-color: alpha (@text_color, 0.5);
    border-radius: 50%;
    padding: 2px;
    color: @bg_color;
    box-shadow: none;
    -gtk-icon-shadow: none;
}

dialog .inline-toolbar button {
    background-color: transparent;
}

button:active,
button:hover:active,
button:focus:active,
button:checked,
button:hover:checked,
button:focus:checked,
.button:active,
.button:hover:active,
.button:focus:active,
.button:checked,
.button:hover:checked,
.button:focus:checked,
.titlebar .titlebutton:active, /* Mutter needs this exact match*/
.titlebar button:active,
.titlebar .button:active,
.titlebar button:checked,
.titlebar .button:checked {
    background-color: alpha (#000, 0.05);
    background-image: none;
    border-color: alpha (#000, 0.27);
    box-shadow:
        inset 0 0 0 1px alpha (#000, 0.05),
        0 1px 0 0 alpha (@bg_highlight_color, 0.3);
}

button.flat:active,
.button.flat:active {
    border-color: transparent;
    box-shadow: none;
}

button.link {
    padding: 0;
}

button.link:focus {
    background-color: transparent;
}

button.link > label {
    color: @link_color;
    padding: 0;
}

button.link:focus > label {
    text-decoration: underline;
}

button.file {
    padding: 3px;
}

button.file label {
    padding: 0;
}

/***************************
* Overlay Button *
***************************/

GtkOverlay > .button,
GtkOverlay > .button:hover,
GtkOverlay > .button:backdrop,
GtkOverlay > .button:focus {
    background-image: none;
    background-color: transparent;
    border: 2px solid #fff;
    color: #fff;
    box-shadow: 0 1px 0 1px alpha (#000, 0.3);
    text-shadow: 0 1px 0 alpha (#000, 0.3);
    background-clip: border-box;
}

GtkOverlay > button.suggested-action,
GtkOverlay > .button.suggested-action {
    background-image: none;
    background-color: @selected_bg_color;
    border-color: @selected_bg_color;
}

GtkOverlay > .button:active,
GtkOverlay > .button:hover:active {
    background-color: #fff;
    color: @text_color;
    border-color: #fff;
    text-shadow: none;
}

GtkOverlay > .button:focus,
GtkOverlay > .button:focus:active {
    border-color: @colorAccent;
}

GtkOverlay > .button:focus:active {
    background-color: @colorAccent;
}

/***************************
* Secondary Toolbar Button *
***************************/

toolbar.secondary-toolbar button,
.secondary-toolbar.toolbar .button {
    padding: 0 3px;
}

toolbar.secondary-toolbar button.flat,
toolbar.secondary-toolbar button.flat:backdrop,
toolbar.secondary-toolbar button.flat:disabled,
.secondary-toolbar.toolbar .button.flat,
.secondary-toolbar.toolbar .button.flat:backdrop,
.secondary-toolbar.toolbar .button.flat:disabled {
    border-color: transparent;
    box-shadow: none;
    background-image: none;
    background-color: transparent;
}

.secondary-toolbar.toolbar .button:hover {
    padding: 0 3px;
    border-color: transparent;
    background-image: none;
    background-color: transparent;
    box-shadow: none;
    color: shade (@colorAccent, 0.65);
}

.secondary-toolbar.toolbar .button:active,
.secondary-toolbar.toolbar .button:hover:active {
    background-image: none;
    background-color: alpha (#000, 0.1);
    box-shadow:
        inset 0 0 0 1px alpha (#000, 0.05),
        inset 0 1px 0 0 alpha (#000, 0.25),
        inset 0 -1px 0 0 alpha (#fff, 0.4);
    padding: 0 3px;
}

/******************
* Circular Button *
******************/

button.circular,
.button.circular {
    border-radius: 50%;
    padding: 4px;
}

button.circular label {
    padding: 0 3px;
}

button.circular.image-button {
    padding: 0;
    min-height: 24px;
    min-width: 24px;
}

/*****************
 * Spinbutton *
 *****************/

spinbutton {
    padding: 0;
}

spinbutton.horizontal button {
    color: @internal_element_color;
    background: none;
    border-color: alpha (#000, 0.1);
    border-radius: 0;
    box-shadow: none;
}

spinbutton.horizontal button:disabled {
    color: @insensitive_color;
}

spinbutton.horizontal button.down {
    border-width: 0 1px;
}

spinbutton.horizontal button.up {
    border-width: 0;
}

spinbutton.vertical button {
    padding-top: 0;
    padding-bottom: 0;
}

spinbutton.vertical button.up {
    border-radius: 2.5px 2.5px 0 0;
    border-width: 0 0 1px;
}

spinbutton.vertical button.down {
    border-radius: 0 0 2.5px 2.5px;
    border-width: 1px 0 0;
}

spinbutton entry,
spinbutton entry:disabled,
spinbutton entry:focus {
    background: none;
    border: none;
    box-shadow: none;
}

spinbutton.horizontal entry {
    margin: 0 3px;
}

/*****************
 * Color Chooser *
 *****************/

colorchooser colorswatch {
    margin: -1px 3px;
}

colorchooser colorswatch.top {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

colorchooser colorswatch.bottom {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

colorchooser grid:nth-child(2) colorswatch,
colorchooser box box colorswatch {
    border-radius: 4px;
}

colorchooser colorswatch overlay,
colorchooser colorswatch overlay:selected,
colorchooser colorswatch overlay:selected:focus {
    background: none;
    border-radius: 4px;
    margin: -1px 2px;
}

colorswatch:not(#add-color-button):not(#editor-color-sample) overlay:hover {
    background-image:
        linear-gradient(
            160deg,
            alpha (
                #fff,
                0.7
            ),
            alpha (
                #fff,
                0
            ) 50%
        );
    box-shadow: inset 0 0 alpha (#fff, 0.4);
}

colorswatch.dark overlay {
    color: #fff;
    -gtk-icon-shadow: 0 1px 2px alpha(#000, 0.3);
}

colorswatch.light overlay {
    color: alpha(#000, 0.6);
    -gtk-icon-shadow: 0 1px 1px alpha(#fff, 0.2);
}

#add-color-button {
    text-shadow: 0 1px @text_shadow_color;
    background-image:
        linear-gradient(
            to bottom,
            transparent,
            transparent 50%,
            alpha (
                #000,
                0.04
            )
        );
    border: 1px solid alpha (#000, 0.2);
    box-shadow:
        inset 0 0 0 1px alpha (#fff, 0.05),
        inset 0 1px 0 0 alpha (#fff, 0.45),
        inset 0 -1px 0 0 alpha (#fff, 0.15),
        0 1px 0 0 alpha (#fff, 0.15);
    color: @text_color;
    transition: all 100ms ease-in;
    -gtk-icon-shadow: 0 1px @text_shadow_color;
}

scale.color slider {
    background-image: none;
    border: 2px solid @bg_color;
    box-shadow:
        inset 0 0 0 1px alpha (@bg_highlight_color, 0.05),
        inset 0 1px 0 0 alpha (@bg_highlight_color, 0.45),
        inset 0 -1px 0 0 alpha (@bg_highlight_color, 0.15),
        inset 0 0 0 1px alpha (#000, 0.25),
        inset 0 1px 1px 1px alpha (#000, 0.1),
        0 0 0 1px alpha (#000, 0.25),
        0 1px 1px 1px alpha (#000, 0.1);
    min-height: 10px;
    min-width: 10px;
}

/*************
* ComboBoxes *
*************/

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

combobox button {
    padding: 2px 3px;
}

combobox entry:first-child,
combobox button:first-child:not(:only-child) {
    border-radius: 2.5px 0 0 2.5px;
    border-right-width: 0;
}

combobox entry:last-child,
combobox button:last-child:not(:only-child) {
    border-radius: 0 2.5px 2.5px 0;
    border-left-width: 0;
    background-image:
        linear-gradient(
            to bottom,
            shade (
                @base_color,
                0.93
            ),
            shade (
                @base_color,
                0.97
            )
        );
    box-shadow:
        inset 0 1px 0 0 alpha (@inset_dark_color, 0.7),
        inset 0 0 0 1px alpha (@inset_dark_color, 0.3),
        0 1px 0 0 alpha (@bg_highlight_color, 0.3);
}

.toolbar GtkComboBox.combobox-entry .entry:last-child,
.toolbar GtkComboBox.combobox-entry .button:last-child {
    background-image:
        linear-gradient(
            to bottom,
            alpha (
                #000,
                0.1
            ),
            transparent 5px
        ),
        linear-gradient(
            to bottom,
            shade (
                @base_color,
                0.9
            ),
            @base_color
        );
    box-shadow:
        inset 0 0 0 1px @inset_dark_color,
        0 1px 0 0 alpha (@bg_highlight_color, 0.3);
}

/*********
* Linked *
*********/

/* Middle button */
.linked entry,
.linked button,
.linked > combobox button.combo,
.linked spinbutton,
.titlebar .stack-switcher .button.image-button {
    border-left-width: 0;
    border-radius: 0;
}

/* Leftmost button */
.linked entry:first-child,
.linked button:first-child,
.linked > combobox:first-child button.combo,
.linked spinbutton:first-child,
.titlebar .stack-switcher .button.image-button:first-child,
.linked:not(box):dir(rtl) entry:last-child,
.linked:not(box):dir(rtl) button:last-child,
.linked:not(box):dir(rtl) > combobox:last-child button.combo,
.linked:not(box):dir(rtl) spinbutton:last-child,
.titlebar:dir(rtl) .stack-switcher .button.image-button:last-child {
    border-width: 1px;
    border-radius: 2.5px 0 0 2.5px;
}

/* Rightmost button */
.linked entry:last-child,
.linked button:last-child,
.linked > combobox:last-child button.combo,
.linked spinbutton:last-child,
.titlebar .stack-switcher .button.image-button:last-child,
.linked:not(box):dir(rtl) entry:first-child,
.linked:not(box):dir(rtl) button:first-child,
.linked:not(box):dir(rtl) > combobox:first-child button.combo,
.linked:not(box):dir(rtl) spinbutton:first-child,
.titlebar:dir(rtl) .stack-switcher .button.image-button:first-child {
    border-left-width: 0;
    border-radius: 0 2.5px 2.5px 0;
}

/* Linked single button */
.linked entry:only-child,
.linked button:only-child,
.linked > combobox:only-child button.combo,
.linked spinbutton:only-child,
.titlebar .stack-switcher .button.image-button:only-child,
.linked:not(box):dir(rtl) entry:only-child,
.linked:not(box):dir(rtl) button:only-child,
.linked:not(box):dir(rtl) > combobox:only-child button.combo,
.linked:not(box):dir(rtl) spinbutton:only-child,
.titlebar .stack-switcher .button.image-button:only-child {
    border-right-width: 1px;
    border-left-width: 1px;
    border-radius: 2.5px;
}

/* Middle button (vertical) */
.linked.vertical entry,
.linked.vertical button,
.linked.vertical .entry,
.linked.vertical .button {
    border-left-width: 1px;
    border-bottom-width: 0;
    border-radius: 0;
}

/* Top button (vertical) */
.linked.vertical entry:first-child,
.linked.vertical button:first-child,
.linked.vertical .entry:first-child,
.linked.vertical .button:first-child {
    border-radius: 2.5px 2.5px 0 0;
}

.linked.vertical entry,
.linked.vertical .entry {
    background-color: shade (@base_color, 0.97);
    background-image: none;
    border-top-width: 0;
}

.linked.vertical entry:first-child,
.linked.vertical .entry:first-child {
    background-image:
        linear-gradient(
            to bottom,
            shade (
                @base_color,
                0.93
            ),
            shade (
                @base_color,
                0.97
            )
        );
    border-top-width: 1px;
}

/* Bottom button (vertical) */
.linked.vertical entry:last-child,
.linked.vertical button:last-child,
.linked.vertical .entry:last-child,
.linked.vertical .button:last-child {
    border-bottom-width: 1px;
    border-radius: 0 0 2.5px 2.5px;
}

/* Linked single button (vertical) */
.linked.vertical entry:only-child,
.linked.vertical button:only-child,
.linked.vertical .entry:only-child,
.linked.vertical .button:only-child {
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-radius: 2.5px;
}

/* Linked vertical and horizontal entries */
.vertical.linked .horizontal.linked:last-child entry:first-child {
    border-top: 0;
    border-bottom-width: 1px;
    background-image: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 3px;
    border-right-color: alpha(@text_color, 0.08);
}

.vertical.linked .horizontal.linked:last-child entry:last-child {
    border-left: 0;
    border-bottom-left-radius: 0;
}

/********************
* Notebook and Tabs *
********************/

notebook {
    border: none;
    text-shadow: 0 1px @text_shadow_color;
    -gtk-icon-shadow: 0 1px @text_shadow_color;
}

notebook.frame {
    border: 1px solid shade (@titlebar_color, 0.6);
    border-radius: 0 0 2.5px 2.5px;
    background-color: shade (@titlebar_color, 1.06);
    background-clip: border-box;
}

notebook header {
    background-color: @bg_color;
    background-image:
        linear-gradient(
            to bottom,
            alpha (
                #000,
                0.1
            ),
            alpha (
                #000,
                0
            ) 3px
        ),
        linear-gradient(
            to bottom,
            shade (
                @titlebar_color,
                0.91
            ),
            shade (
                @titlebar_color,
                0.96
            )
        );
    border-style: solid;
    border-width: 0 0 1px;
    border-color: shade (@titlebar_color, 0.62);
    border-radius: 0;
}

notebook header:backdrop {
    background-color: shade (@titlebar_color, 1.02);
    background-image:
        linear-gradient(
            to bottom,
            alpha (
                #000,
                0.08
            ),
            alpha (
                #000,
                0
            ) 3px
        );
    border-color: shade (@titlebar_color, 0.76);
}

notebook header button {
    min-width: 20px;
}

.header separator.vertical {
    border-right-color: alpha (#fff, 0.2);
}

notebook image {
    color: shade (@title_color, 0.75);
}

notebook image:disabled {
    color: @insensitive_color;
}

notebook tab {
    background-image: none;
    background-color: transparent;
    border-image:
        linear-gradient(
            to bottom,
            transparent,
            alpha (
                #000,
                0.2
            )
        ) 0 1 0 0;
    border-radius: 0;
    border-style: solid;
    border-width: 0 1px;
    color: shade (@text_color, 1.12);
    margin-right: -1px;
    padding: 3px;
}

notebook tab:first-child {
    border-width: 0 1px;
    border-image:
        linear-gradient(
            to bottom,
            transparent,
            alpha (
                #000,
                0.2
            )
        ) 0 1 0 1;
}

notebook tab:checked {
    background-image:
        linear-gradient(
            to bottom,
            shade (
                @titlebar_color,
                0.94
            ),
            shade (
                @titlebar_color,
                0.9
            )
        );
    border-color: shade (@titlebar_color, 0.62);
    border-image: none;
    border-radius: 4px 4px 0 0;
    border-style: solid;
    box-shadow:
        inset 0 0 0 1px alpha (@bg_highlight_color, 0.2),
        0 0 1px 1px alpha (#000, 0.1);
    text-shadow: 0 1px @text_shadow_color;
    color: @text_color;
    -gtk-icon-shadow: 0 1px @text_shadow_color;
}

notebook tab:checked:backdrop {
    background-image:
        linear-gradient(
            to bottom,
            shade (
                @titlebar_color,
                1.04
            ),
            shade (
                @titlebar_color,
                1.02
            )
        );
    border-color: shade (@titlebar_color, 0.76);
    box-shadow:
        inset 0 0 0 1px alpha (@bg_highlight_color, 0.2),
        0 0 0 1px alpha (#000, 0.1);
}

notebook tab > image {
    color: shade (@titlebar_color, 0.35);
}

notebook viewport {
    background-color: @base_color;
    border-width: 0;
}

notebook tab button {
    padding: 0;
}

notebook tab > entry {
    border-radius: 2px;
    padding: 1px 5px;
}

/* Label Trickery */

notebook tab label {
    color: alpha(@text_color, 0.75);
    padding: 3px 6px;
}

notebook tab:active label,
notebook .active-page,
notebook tab .active-page label {
    color: @text_color;
}

notebook tab:backdrop label,
notebook tab label:backdrop {
    color: alpha(@text_color, 0.75);
}

.inline-toolbar notebook header {
    background-color: shade (@tab_base_color, 0.95);
    background-image:
        linear-gradient(
            to bottom,
            alpha (
                #000,
                0.12
            ),
            alpha (
                #000,
                0
            ) 2px,
            alpha (
                #000,
                0
            ) calc(100% - 1px),
            alpha (
                #000,
                0.05
            )
        );
    border-color: shade (@tab_base_color, 0.78);
}

.inline-toolbar notebook tab {
    margin-bottom: -1px;
    margin-top: 1px;
}

.inline-toolbar notebook tab:checked {
    background-color: @tab_base_color;
    background-image: none;
    border-color: shade (@tab_base_color, 0.78);
    box-shadow:
        -1px 0 1px alpha (#000, 0.05),
        1px 0 1px alpha (#000, 0.05);
}

/*************
* Scrollbars *
*************/

scrolledwindow {
    -GtkScrolledWindow-scrollbar-spacing: 0;
}

scrollbar {
    background-color: transparent;
    transition: all 600ms ease-out;
    -GtkScrollbar-has-backward-stepper: false;
    -GtkScrollbar-has-forward-stepper: false;
}

scrollbar:hover,
scrollbar.hovering {
    transition: all 200ms ease-in-out;
}

scrollbar button {
    border: none;
    background-image: none;
    background-color: transparent;
}

scrollbar.horizontal slider {
    min-width: 30px;
    min-height: 3px;
}

scrollbar.horizontal:hover slider,
scrollbar.horizontal.hovering slider {
    min-height: 8px;
}

scrollbar.vertical slider {
    min-height: 30px;
    min-width: 3px;
}

scrollbar.vertical:hover slider,
scrollbar.vertical.hovering slider {
    min-width: 8px;
}

scrollbar slider {
    background-color: alpha (@text_color, 0.6);
    border: 1px solid alpha (@bg_highlight_color, 0.25);
    border-radius: 10px;
    margin: 1px;
    transition: all 200ms ease-in-out;
}

scrollbar.overlay-indicator slider:hover {
    border-radius: 20px;
}

scrollbar trough {
    padding: 0;
}

scrollbar.overlay-indicator trough {
    background-color: transparent;
}

scrollbar.overlay-indicator:hover trough,
scrollbar.overlay-indicator.hovering trough {
    background-color: alpha (#000, 0.1);
}

scrollbar:hover trough,
scrollbar.hovering trough {
    background-color: transparent;
    border-radius: 0;
}

trough {
    background-color: @base_color;
}

/********
* Menus *
********/

GtkTreeMenu .menuitem {
    padding: 2px;
}

.context-menu {
    font: initial;
    text-shadow: none;
}

menu,
.content-view .menu,
window.menu,
window.popup {
    padding: 4px 0;
    border-radius: 3px;
    background-color: @bg_color;
    box-shadow:
        inset 0 0 0 1px alpha (@bg_highlight_color, 0.1),
        inset 0 1px 0 0 alpha (@bg_highlight_color, 0.9),
        inset 0 -1px 0 0 alpha (@bg_highlight_color, 0.3);
}

.menu.button {
    background-image: none;
}

menubar,
.menubar {
    color: @text_color;
    background-color: shade (@titlebar_color, 0.94);
    border: 1px solid shade (@titlebar_color, 0.68);
    border-width: 0 0 1px;
    box-shadow:
        inset 0 1px 0 0 alpha (@bg_highlight_color, 0.2),
        inset 0 -1px 0 0 alpha (@bg_highlight_color, 0.2);
    -GtkWidget-window-dragging: true;
}

menubar:backdrop,
.menubar:backdrop {
    background-color: shade (@titlebar_color, 0.98);
    border-color: shade (@titlebar_color, 0.78);
}

.titlebar .menubar {
    background-color: transparent;
}

menuitem,
.menuitem {
    padding: 3px 6px;
}

menuitem,
menuitem:focus,
modelbutton,
modelbutton:focus,
.menuitem,
.menuitem:focus {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    text-shadow: none;
    -gtk-icon-shadow: none;
}

menuitem:active,
menuitem:hover,
modelbutton:active,
modelbutton:hover,
.menuitem:active,
.menuitem:focus:active,
.menuitem:hover {
    box-shadow: none;
    background-color: alpha (@text_color, 0.15);
}

menuitem *:disabled,
modelbutton *:disabled,
.menuitem *:disabled {
    color: @insensitive_color;
}

menuitem accelerator,
.accelerator {
    color: alpha (@text_color, 0.5);
}

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

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

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

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

arrow.left,
notebook header > tabs > arrow.down {
    -gtk-icon-source: -gtk-icontheme("pan-start-symbolic");
}

arrow.right,
notebook header > tabs > arrow.up {
    -gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
}

menuitem image,
menuitem label,
modelbutton > *,
.menuitem image,
.menuitem label {
    padding: 3px;
}

menu:dir(ltr) menuitem image:first-child {
    margin-left: -17px;
    padding-left: 0;
    padding-right: 2px;
}

menu:dir(rtl) menuitem image:first-child {
    margin-right: -17px;
    padding-left: 2px;
    padding-right: 0;
}

modelbutton {
    min-width: 150px;
    padding: 3px 12px;
}

/* Moved titlebar sep here to fix seps in titlebar menus */

.titlebar separator {
    color: transparent;
    border: none;
}

/*******************************
 * Check and Radio, and Switch *
 ******************************/

check,
radio,
switch {
    transition: all 200ms ease-in;
}

check,
radio {
    background-image:
        linear-gradient(
            to bottom,
            shade (
                @base_color,
                0.99
            ),
            shade (
                @base_color,
                0.97
            )
        );
    border: 1px solid @border_color;
    box-shadow:
        inset 0 1px 0 0 alpha (@bg_highlight_color, 0.5),
        inset 0 0 0 1px alpha (@bg_highlight_color, 0.2),
        0 1px 1px 0 shade (@bg_color, 0.95);
    min-height: 12px;
    min-width: 12px;
    -gtk-icon-source: none;
}

switch {
    background-color: alpha (#000, 0.1);
    background-image: none;
    border: 1px solid alpha (#000, 0.25);
    border-radius: 16px;
    box-shadow:
        inset 0 0 0 1px alpha (#000, 0.05),
        0 1px 0 0 alpha (@bg_highlight_color, 0.3);
    color: transparent;
    font-size: 0.1px;
}

/* FIXME: treeview .cell needs to be more specific to avoid this */
treeview check.cell,
treeview radio.cell {
    border-width: 1px;
}

menuitem check {
    background: none;
    border-color: transparent;
    box-shadow: none;
    transition: none;
}

menuitem check:dir(ltr),
menuitem radio:dir(ltr) {
    margin-right: 3px;
}

menuitem check:dir(rtl),
menuitem radio:dir(rtl) {
    margin-left: 3px;
}

switch:focus slider {
    background-image:
        linear-gradient(
            to bottom,
            shade(@SILVER_100, 1.05),
            shade(mix(@SILVER_100, @colorAccent, 0.1), 0.95)
        );
    border-color: @colorAccent;
    box-shadow:
        inset 0 0 0 1px alpha(#fff, 0.05),
        inset 0 1px 0 0 alpha(#fff, 0.45),
        inset 0 -1px 0 0 alpha(#fff, 0.15),
        0 1px 1px alpha(@colorAccent, 0.35),
        0 1px 2px alpha(@colorAccent, 0.16);
}

switch:checked {
    background-color: @colorAccent;
    background-image:
        linear-gradient(
            to bottom,
            alpha (
                #fff,
                0.3
            ),
            alpha (
                #fff,
                0
            )
        );
    border-color: shade(@colorAccent, 0.85);
}

check:checked,
radio:checked {
    background-image:
        linear-gradient(
            to bottom,
            shade (
                @colorAccent,
                1.2
            ),
            @colorAccent
        );
    border-color: shade (@colorAccent, 0.9);
    box-shadow:
        inset 0 0 0 1px shade (@colorAccent, 1.15),
        inset 0 1px 0 0 shade (@colorAccent, 1.3),
        0 1px 1px 0 shade (@bg_color, 0.85);
    color: #fff;
    -gtk-icon-source: -gtk-icontheme("check-active-symbolic");
    -gtk-icon-shadow: 0 1px 1px shade (@colorAccent, 0.85);
}

check:indeterminate,
radio:indeterminate {
    -gtk-icon-source: -gtk-icontheme("check-mixed-symbolic");
}

check:focus,
radio:focus {
    border-color: @colorAccent;
    box-shadow:
        inset 0 1px 0 0 alpha (@inset_dark_color, 0.7),
        inset 0 0 0 1px alpha (@inset_dark_color, 0.3),
        0 0 2px 1px alpha (@colorAccent, 0.5);
    transition: all 100ms ease-out;
}

check:checked:focus,
radio:checked:focus {
    border-color: shade (@colorAccent, 0.8);
    box-shadow:
        inset 0 0 0 1px shade (@colorAccent, 1.15),
        inset 0 1px 0 0 shade (@colorAccent, 1.3),
        0 0 2px 1px alpha (@colorAccent, 0.5),
        0 1px 1px 0 shade (@bg_color, 0.85);
}

check:disabled,
radio:disabled {
    background: shade (@bg_color, 0.95);
    border-color: shade (@bg_color, 0.8);
    box-shadow: 0 1px 0 0 alpha (@bg_highlight_color, 0.3);
}

switch:disabled {
    background-color: alpha (#000, 0.02);
}

check:checked:disabled,
radio:checked:disabled {
    color: shade (@bg_color, 0.75);
    -gtk-icon-shadow: 0 1px 1px alpha (@bg_highlight_color, 0.3);
}

switch:checked:disabled {
    background-image: none;
    background-color: mix (@bg_color, @colorAccent, 0.5);
    border-color: shade (mix (@bg_color, @colorAccent, 0.5), 0.75);
}

check:checked:backdrop:not(:disabled),
radio:checked:backdrop:not(:disabled) {
    box-shadow:
        inset 0 1px 0 0 alpha (@bg_highlight_color, 0.3),
        inset 0 0 0 1px alpha (@bg_highlight_color, 0.1),
        0 1px 1px 0 shade (@bg_color, 0.95);
}

check:checked:backdrop:not(:disabled),
radio:checked:backdrop:not(:disabled),
switch:checked:backdrop {
    background-image: none;
    background-color: shade (@bg_color, 0.8);
    border-color: shade (@bg_color, 0.65);
    -gtk-icon-shadow: 0 1px 1px shade (@bg_color, 0.65);
}

check {
    border-radius: 2.5px;
}

radio {
    border-radius: 50%;
}

radiobutton image:dir(ltr),
checkbutton image:dir(ltr),
radiobutton label:dir(ltr),
checkbutton label:dir(ltr) {
    margin-left: 6px;
}

radiobutton image:dir(rtl),
checkbutton image:dir(rtl),
radiobutton label:dir(rtl),
checkbutton label:dir(rtl) {
    margin-right: 6px;
}

switch image {
    color: transparent;
    -gtk-icon-shadow: none;
}

switch slider {
    background-image:
        linear-gradient(
            to bottom,
            shade(@SILVER_100, 1.05),
            shade(@SILVER_100, 0.95)
        );
    border: 1px solid alpha(#000, 0.2);
    border-radius: 50%;
    box-shadow:
        inset 0 0 0 1px alpha(#fff, 0.05),
        inset 0 1px 0 0 alpha(#fff, 0.45),
        inset 0 -1px 0 0 alpha(#fff, 0.15),
        0 1px 1px alpha(#000, 0.15),
        0 1px 2px alpha(#000, 0.16);
    margin: -1px;
    min-height: 24px;
    min-width: 24px;
}

switch slider:disabled,
switch slider:backdrop {
    background-image: none;
    background-color: @bg_color;
    box-shadow:
        inset 0 0 0 1px alpha (@bg_highlight_color, 0.05),
        inset 0 1px 0 0 alpha (@bg_highlight_color, 0.45),
        inset 0 -1px 0 0 alpha (@bg_highlight_color, 0.15),
        0 1px 1px alpha (#000, 0.15);
}

radiobutton.image-button {
    border: 1px solid transparent;
    border-radius: 3px;
    padding: 6px;
}

radiobutton.image-button:checked:not(:backdrop) {
    background-color: alpha (@colorAccent, 0.1);
    border-color: @colorAccent;
}

radiobutton.image-button:checked:not(:backdrop) image {
    color: mix (@colorAccent, @text_color, 0.3);
}

radiobutton.image-button:checked:backdrop {
    background-color: alpha (@text_color, 0.05);
    border-color: alpha (@text_color, 0.4);
}

/***********
* Toolbars *
***********/

toolbar,
.toolbar {
    -GtkWidget-window-dragging: true;
    padding: 3px;
    border: 1px solid shade (@titlebar_color, 0.62);
    border-width: 0 0 1px;
    box-shadow:
        inset 0 1px 0 0 alpha (@bg_highlight_color, 0.2),
        inset 0 -1px 0 0 alpha (@bg_highlight_color, 0.2);
    background-image:
        linear-gradient(
            to bottom,
            shade (
                @titlebar_color,
                0.94
            ),
            shade (
                @titlebar_color,
                0.9
            )
        );
    text-shadow: 0 1px alpha (@bg_highlight_color, 0.4);
    -gtk-icon-shadow: 0 1px alpha (@bg_highlight_color, 0.4);
}

toolbar:backdrop,
.toolbar:backdrop {
    background-color: shade (@titlebar_color, 1.04);
    background-image: none;
    border-color: shade (@titlebar_color, 0.7);
    box-shadow:
        inset 0 1px 0 0 alpha (@bg_highlight_color, 0.2),
        inset 0 -1px 0 0 alpha (@bg_highlight_color, 0.4);
    -gtk-icon-effect: dim;
}

toolbar image {
    color: mix (@titlebar_color, @text_color, 0.85);
    -gtk-icon-shadow: 0 1px @title_shadow_color;
}

toolbar image:disabled {
    color: @insensitive_color;
    -gtk-icon-effect: dim;
}

toolbar image:backdrop {
    color: mix (@titlebar_color, @text_color, 0.5);
    -gtk-icon-shadow: none;
}

/*********************
* Secondary Toolbars *
*********************/

toolbar.secondary-toolbar,
.secondary-toolbar.toolbar {
    border-width: 0 0 1px;
    border-style: solid;
    padding: 2px;
    background-image:
        linear-gradient(
            to bottom,
            shade (
                @titlebar_color,
                0.93
            ),
            shade (
                @titlebar_color,
                0.9
            )
        );
    box-shadow:
        inset 0 1px 0 0 alpha (@bg_highlight_color, 0.3),
        inset 0 -1px 0 0 alpha (@bg_highlight_color, 0.2);
    border-color: shade (@titlebar_color, 0.6);
    text-shadow: 0 1px alpha (@bg_highlight_color, 0.4);
    -gtk-icon-shadow: 0 1px alpha (@bg_highlight_color, 0.4);
}

toolbar.secondary-toolbar:backdrop,
.secondary-toolbar.toolbar:backdrop {
    background-image:
        linear-gradient(
            to bottom,
            shade (
                @titlebar_color,
                1.04
            ),
            @titlebar_color
        );
    border-color: shade (@titlebar_color, 0.76);
    color: @insensitive_color;
    -gtk-icon-effect: dim;
}

toolbar.secondary-toolbar button,
.secondary-toolbar.toolbar .button {
    border-color: alpha (#000, 0.3);
    text-shadow: 0 1px alpha (@bg_highlight_color, 0.4);
    -gtk-icon-shadow: 0 1px alpha (@bg_highlight_color, 0.4);
}

/******************
* Bottom Toolbars *
******************/

toolbar.bottom-toolbar,
.bottom-toolbar.toolbar {
    padding: 8px;
    border: 1px solid shade (@titlebar_color, 0.72);
    border-width: 1px 0 0;
    background-image:
        linear-gradient(
            to bottom,
            @titlebar_color,
            shade (
                @titlebar_color,
                0.94
            )
        );
    box-shadow:
        inset 0 1px 0 0 alpha (@bg_highlight_color, 0.5),
        inset 0 -1px 0 0 alpha (@bg_highlight_color, 0.2);
}

toolbar.bottom-toolbar button,
.bottom-toolbar.toolbar .button {
    padding: 2px 3px;
}

/***************
 * Header Bars *
 **************/

.titlebar button.image-button:not(.raised),
.titlebar .button.image-button:not(.raised) {
    padding: 3px;
    border: 1px solid transparent;
    background-image: none;
    box-shadow: none;
}

.titlebar button.flat,
.titlebar button.image-button:not(.raised),
.titlebar .button.flat,
.titlebar .button.image-button:not(.raised) {
    border-radius: 99px;
    background-color: transparent;
}

.titlebar button.image-button:not(.raised):active,
.titlebar button.image-button:not(.raised):hover:active,
.titlebar button.image-button:not(.raised):focus:active,
.titlebar button.image-button:not(.raised):checked,
.titlebar button.image-button:not(.raised):hover:checked,
.titlebar button.image-button:not(.raised):focus:checked,
.titlebar button.flat:active,
.titlebar button.flat:hover:active,
.titlebar button.flat:focus:active,
.titlebar button.flat:checked,
.titlebar button.flat:hover:checked,
.titlebar button.flat:focus:checked,
.titlebar .button.image-button:not(.raised):active,
.titlebar .button.image-button:not(.raised):hover:active,
.titlebar .button.image-button:not(.raised):focus:active,
.titlebar .button.image-button:not(.raised):checked,
.titlebar .button.image-button:not(.raised):hover:checked,
.titlebar .button.image-button:not(.raised):focus:checked,
.titlebar .button.flat:active,
.titlebar .button.flat:hover:active,
.titlebar .button.flat:focus:active,
.titlebar .button.flat:checked,
.titlebar .button.flat:hover:checked,
.titlebar .button.flat:focus:checked {
    background-color: alpha (@text_color, 0.15);
    border-color: transparent;
    box-shadow: none;
}

/***************
 * Action bars *
 ***************/

actionbar {
    padding: 1px 6px;
    text-shadow: 0 1px alpha (@bg_highlight_color, 0.4);
    background-image:
        linear-gradient(
            to bottom,
            @titlebar_color,
            shade (
                @titlebar_color,
                0.94
            )
        );
    border-style: solid;
    border-width: 1px 0 0;
    border-top-color: shade (@bg_color, 0.58);
    box-shadow:
        inset 0 0 0 1px alpha (@bg_highlight_color, 0.05),
        inset 0 1px 0 0 alpha (@bg_highlight_color, 0.45),
        inset 0 -1px 0 0 alpha (@bg_highlight_color, 0.15);
    -gtk-icon-shadow: 0 1px alpha (@bg_highlight_color, 0.4);
}

dialog actionbar {
    background-image: none;
    background-color: @bg_color;
    border-top-color: shade (@bg_color, 0.8);
    border-radius: 0 0 4px 4px;
}

actionbar button.image-button {
    background-color: transparent;
    background-image: none;
    border-radius: 0;
    border-width: 0;
    box-shadow: none;
    padding: 5px 5px 4px;
}

actionbar .title {
    font-size: 11pt;
    font-weight: bold;
    padding: 0 12px;
}

actionbar .subtitle {
    font-size: 9pt;
    padding: 0 12px;
}

/******************
* Inline Toolbars *
******************/

.inline-toolbar,
.inline-toolbar:backdrop {
    border-color: shade (@bg_color, 0.75);
    border-width: 0 1px 1px;
    box-shadow: none;
    background-color: @bg_color;
    background-image:
        linear-gradient(
            to bottom,
            alpha (
                #000,
                0.12
            ),
            alpha (
                #000,
                0
            ) 2px
        );
    padding: 0;
}

actionbar.inline-toolbar,
actionbar.inline-toolbar:backdrop,
paned .inline-toolbar,
paned .inline-toolbar:backdrop,
.sidebar.inline-toolbar,
.source-list.inline-toolbar {
    border-width: 1px 0 0;
}

.inline-toolbar button.image-button {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    color: shade (@text_color, 1.25);
    padding: 3px;
    text-shadow: 0 1px alpha (@bg_highlight_color, 0.4);
    -gtk-icon-shadow: 0 1px alpha (@bg_highlight_color, 0.4);
}

.inline-toolbar button.image-button:focus {
    background: alpha (@text_color, 0.15);
}

.inline-toolbar button.image-button:active {
    background: alpha (@text_color, 0.1);
}

.inline-toolbar button.image-button image:disabled,
.inline-toolbar button.image-button label:disabled,
.inline-toolbar button.image-button:disabled {
    background: none;
    color: @insensitive_color;
}

/***************
 * Search bars *
 ***************/

searchbar,
.location-bar,
.search-bar {
    border-width: 0 0 1px;
    border-style: solid;
    padding: 2px;
    background-image:
        linear-gradient(
            to bottom,
            shade (
                @titlebar_color,
                0.96
            ),
            shade (
                @titlebar_color,
                0.9
            )
        );
    box-shadow:
        inset 0 1px 0 0 alpha (@bg_highlight_color, 0.3),
        inset 0 -1px 0 0 alpha (@bg_highlight_color, 0.2);
    border-color: shade (@titlebar_color, 0.6);
    text-shadow: 0 1px alpha (@bg_highlight_color, 0.4);
    -gtk-icon-shadow: 0 1px alpha (@bg_highlight_color, 0.4);
}

searchbar:backdrop,
.location-bar:backdrop,
.search-bar:backdrop {
    background-image:
        linear-gradient(
            to bottom,
            shade (
                @titlebar_color,
                1.04
            ),
            @titlebar_color
        );
    border-color: shade (@titlebar_color, 0.76);
    color: @insensitive_color;
    -gtk-icon-effect: dim;
}

dialog searchbar,
dialog searchbar:backdrop,
dialog .location-bar,
dialog .search-bar,
dialog .search-bar:backdrop {
    background-image: none;
    background-color: @bg_color;
    border-color: shade (@bg_color, 0.6);
    box-shadow: none;
}

.search-bar .button.close-button {
    padding: 5px 4px 5px 5px;
}

/**************************
* Suggested Action Button *
**************************/

button.suggested-action,
.suggested-action.button {
    background-image:
        linear-gradient(
            to bottom,
            shade (
                @selected_bg_color,
                1.1
            ),
            shade (
                @selected_bg_color,
                0.9
            )
        );
    border-color: shade (@selected_bg_color, 0.8);
    box-shadow:
        inset 0 0 0 1px alpha (#fff, 0.05),
        inset 0 1px 0 0 alpha (#fff, 0.25),
        inset 0 -1px 0 0 alpha (#fff, 0.1),
        0 1px 0 0 alpha (#fff, 0.15);
}

button.suggested-action:not(:disabled),
.titlebar button.suggested-action:not(:disabled) > label,
.titlebar button.suggested-action:not(:disabled) > image {
    color: @selected_fg_color;
    text-shadow: 0 1px alpha (#000, 0.3);
    -gtk-icon-shadow: 0 1px alpha (#000, 0.3);
}

button.suggested-action:active,
button.suggested-action:active:hover,
button.suggested-action:checked,
.suggested-action.button:active,
.suggested-action.button:active:hover,
.suggested-action.button:checked {
    background-image:
        linear-gradient(
            to bottom,
            shade (
                @selected_bg_color,
                1.05
            ),
            shade (
                @selected_bg_color,
                0.95
            )
        );
    border-color: shade (@selected_bg_color, 0.8);
    box-shadow:
        inset 0 0 0 1px alpha (#000, 0.05),
        0 1px 0 0 alpha (@bg_highlight_color, 0.3);
}

.titlebar button.suggested-action:not(:disabled) label:backdrop,
.titlebar button.suggested-action:not(:disabled) image:backdrop {
    color: mix (@selected_bg_color, @selected_fg_color, 0.8);
    text-shadow: none;
    -gtk-icon-shadow: none;
}

/****************************
* Destructive Action Button *
****************************/

button.destructive-action,
.destructive-action.button {
    background-image:
        linear-gradient(
            to bottom,
            shade (
                @error_color,
                1.3
            ),
            @error_color
        );
    box-shadow:
        inset 0 0 0 1px alpha (#fff, 0.05),
        inset 0 1px 0 0 alpha (#fff, 0.25),
        inset 0 -1px 0 0 alpha (#fff, 0.1),
        0 1px 0 0 alpha (#fff, 0.15);
    border-color: shade (@error_color, 0.9);
}

button.destructive-action:backdrop:not(:disabled),
.titlebar button.destructive-action:backdrop:not(:disabled),
.destructive-action.button:backdrop:not(:disabled),
.titlebar .destructive-action.button:backdrop:not(:disabled) {
    background-image:
        linear-gradient(
            to bottom,
            shade (
                @error_color,
                1.4
            ),
            shade (
                @error_color,
                1.3
            )
        );
    box-shadow:
        inset 0 0 0 1px alpha (#fff, 0.05),
        inset 0 1px 0 0 alpha (#fff, 0.25),
        inset 0 -1px 0 0 alpha (#fff, 0.1);
}

button.destructive-action:not(:disabled) label,
button.destructive-action:not(:disabled) label:hover,
button.destructive-action:not(:disabled) image,
button.destructive-action:not(:disabled) image:hover,
.titlebar button.destructive-action:not(:disabled) label,
.titlebar button.destructive-action:not(:disabled) label:hover,
.titlebar button.destructive-action:not(:disabled) image {
    color: @selected_fg_color;
    text-shadow: 0 1px alpha (#000, 0.2);
    -gtk-icon-shadow: 0 1px alpha (#000, 0.2);
}

.titlebar button.destructive-action:not(:disabled) label:backdrop,
.titlebar button.destructive-action:not(:disabled) image:backdrop {
    color: shade (@error_color, 1.9);
    text-shadow: none;
    -gtk-icon-shadow: none;
}

button.destructive-action:active,
button.destructive-action:active:hover,
.titlebar button.destructive-action:active,
.titlebar button.destructive-action:active:hover,
.destructive-action.button:active,
.destructive-action.button:active:hover,
.titlebar .destructive-action.button:active,
.titlebar .destructive-action.button:active:hover {
    background-image:
        linear-gradient(
            to bottom,
            shade (
                @error_color,
                1.2
            ),
            @error_color
        );
    border-color: shade (@error_color, 0.85);
}

button.destructive-action:focus,
.titlebar button.destructive-action:focus,
.destructive-action.button:focus,
.titlebar .destructive-action.button:focus {
    background-image:
        linear-gradient(
            to bottom,
            shade (
                @error_color,
                1.4
            ),
            shade (
                @error_color,
                1.1
            )
        );
    box-shadow:
        inset 0 1px 0 0 alpha (#fff, 0.3),
        inset 0 -1px 0 0 alpha (#fff, 0.2),
        0 1px 0 0 alpha (#fff, 0.25),
        0 1px 2px 0 alpha (@error_color, 0.05);
    transition: all 100ms ease-out;
    border-color: @error_color;
}

button.flat.destructive-action,
button.flat.destructive-action:backdrop,
button.flat.destructive-action:hover,
actionbar button.image-button.destructive-action,
actionbar button.image-button.destructive-action:backdrop,
actionbar button.image-button.destructive-action:hover {
    background: none;
    border: none;
    box-shadow: none;
}

button.flat.destructive-action:focus,
actionbar button.image-button.destructive-action:focus {
    background: alpha (@error_color, 0.3);
    border: none;
}

button.flat.destructive-action image,
button.flat.destructive-action label,
actionbar button.image-button.destructive-action image,
actionbar button.image-button.destructive-action label {
    color: @text_color;
    transition: all 320ms cubic-bezier(0.4, 0, 0.2, 1);
    -gtk-icon-shadow: none;
}

button.flat.destructive-action:focus image,
button.flat.destructive-action:focus label,
button.flat.destructive-action:hover image,
button.flat.destructive-action:hover label,
actionbar button.image-button.destructive-action:focus image,
actionbar button.destructive-action:focus label,
actionbar button.image-button.destructive-action:hover image,
actionbar button.destructive-action:hover label {
    color: @error_color;
}

button.flat.destructive-action image:backdrop,
button.flat.destructive-action label:backdrop,
actionbar button..image-button.destructive-action image:backdrop,
actionbar button.destructive-action label:backdrop {
    color: @insensitive_fg_color;
}

/*********************
* Insensitive Button *
**********************/

button:disabled,
.button:disabled,
.destructive-action.button:disabled,
.suggested-action.button:disabled {
    background-image: none;
    background-color: transparent;
    border-color: alpha (#000, 0.2);
    box-shadow:
        inset 0 0 0 1px alpha (@bg_highlight_color, 0.05),
        inset 0 1px 0 0 alpha (@bg_highlight_color, 0.45),
        inset 0 -1px 0 0 alpha (@bg_highlight_color, 0.15),
        0 1px 0 0 alpha (@bg_highlight_color, 0.15);
    color: @insensitive_color;
}

toolbar button:disabled,
.titlebar button.destructive-action.image-button image:backdrop,
.toolbar .button:disabled,
.toolbar .destructive-action.button:disabled,
.titlebar .destructive-action.button:disabled {
    background-image:
        linear-gradient(
            to bottom,
            alpha (
                #fff,
                0.05
            ),
            alpha (
                #000,
                0.05
            )
        );
    border-color: alpha (#000, 0.2);
    color: @insensitive_color;
}

button:disabled image,
button:disabled label,
button.destructive-action:disabled image,
button.suggested-action:disabled image {
    color: @insensitive_color;
}

button:active:disabled,
.button:active:disabled {
    background-image:
        linear-gradient(
            to bottom,
            shade (
                @bg_color,
                0.85
            ),
            shade (
                @bg_color,
                0.94
            ) 20%,
            @bg_color
        );
    box-shadow:
        inset 0 0 0 1px alpha (#000, 0.02),
        0 1px 0 0 alpha (#fff, 0.3);
}

button.flat:disabled,
.button.flat:disabled {
    border-color: transparent;
    box-shadow: none;
    background-image: none;
    background-color: transparent;
}

/***************
* GtkAssistant *
***************/

GtkAssistant .sidebar .highlight {
    color: @fg_color;
    font-weight: bold;
}

GtkAssistant .sidebar {
    background-color: shade (@bg_color, 0.97);
    border-color: shade (@bg_color, 0.8);
    border-style: solid;
    border-width: 0 1px 0 0;
    color: mix (@fg_color, @bg_color, 0.4);
    padding: 12px;
    text-shadow: 0 1px shade (@bg_color, 1.04);
}

/*****************************
* Tree, List, and Icon Views *
*****************************/

treeview {
    -GtkTreeView-vertical-separator: 5px;
    -GtkTreeView-horizontal-separator: 6px;
    -GtkTreeView-expander-size: 16;
    -GtkTreeView-grid-line-pattern: "\000\000";
    border-top-color: @border_color;
}

treeview row:nth-child(even) {
    background-color: @bg_color;
}

treeview row:nth-child(odd) {
    background-color: @base_color;
}

treeview entry,
treeview .entry {
    border-radius: 0;
    padding-bottom: 0;
    padding-top: 0;
}

iconview.view.cell {
    border-radius: 3px;
}

iconview.view.cell:selected {
    background: alpha(@text_color, 0.2);
}

.view {
    background-color: @base_color;
}

.cell {
    border-width: 0;
    color: @text_color;
    text-shadow: none;
}

popover treeview.view row:selected,
.cell:selected,
.view:selected,
treeview row:focus,
.popover treeview.view row:selected {
    background-color: shade (@base_color, 0.8);
    color: @text_color;
}

.cell:selected:focus,
.view:selected:focus {
    background-color: @colorAccent;
    color: @selected_fg_color;
}

.cell:disabled {
    color: @insensitive_color;
}

/* FIXME: This doesn't work with only-child

GtkListBoxRow:only-child {
    border-bottom: none;
    box-shadow: none;
}

GtkListBoxRow:first-child {
    border-bottom: solid 1px alpha(#fff, 0.04);
    box-shadow: inset 0 -1px shade(@base_color, 0.85);
}
*/

/***********
 * FlowBox *
 ***********/

flowboxchild {
    border-radius: 3px;
}

flowboxchild:focus {
    background-color: alpha (#000, 0.2);
    color: @text_color;
}

/*********************
 * App Notifications *
 *********************/

.app-notification,
.app-notification.frame {
    background-color: alpha (@text_color, 0.85);
    border-radius: 4px;
    border: none;
    padding: 6px;
    text-shadow: 0 1px 2px alpha (@text_color, 0.6);
    background-clip: padding-box;
}

.app-notification label {
    color: @bg_color;
    text-shadow: 0 1px 2px alpha (@text_color, 0.6);
}

.app-notification button,
.app-notification button.flat.image-button,
.app-notification .button,
.app-notification .button.flat.image-button {
    background-color: alpha (@bg_color, 0.9);
    color: @text_color;
    box-shadow: none;
    border-width: 0;
    -gtk-icon-shadow: none;
}

.app-notification button label {
    color: @text_color;
    text-shadow: none;
    -gtk-icon-shadow: none;
}

.app-notification button.close-button,
.app-notification .button.close-button {
    background-color: @text_color;
    border-radius: 50%;
    padding: 4px;
    color: alpha (@bg_color, 0.9);
}

.app-notification button:active,
.app-notification .button:active {
    background-color: @bg_color;
    box-shadow:
        0 3px 6px alpha (@text_color, 0.16),
        0 3px 6px alpha (@text_color, 0.23);
}

.app-notification button.close-button:active,
.app-notification .button.close-button:active {
    background-color: alpha (@text_color, 0.7);
    color: alpha (@bg_color, 0.7);
}

/******************
 * Column Headers *
 *****************/

treeview header button,
column-header .button {
    border-left-width: 0;
    border-top-width: 0;
    border-radius: 0;
    background-color: @bg_color;
    background-image:
        linear-gradient(
            to bottom,
            shade (
                @base_color,
                0.88
            ),
            @base_color
        );
    font-weight: bold;
    padding: 4px 2px;
}

treeview header button:last-child,
column-header:last-child .button {
    border-right-width: 0;
}

treeview header button:hover,
column-header .button:hover {
    background-image:
        linear-gradient(
            to bottom,
            shade (
                @base_color,
                0.8
            ),
            @base_color
        );
}

treeview header button:backdrop,
column-header .button:backdrop {
    background-image: none;
}

treeview header button:backdrop:hover,
column-header .button:backdrop:hover {
    background-image:
        linear-gradient(
            to bottom,
            shade (
                @bg_color,
                0.92
            ),
            @bg_color
        );
}

treeview header button label {
    padding-left: 3px;
    color: shade (@text_color, 1.8);
}

treeview header button:backdrop label {
    color: shade (@text_color, 2.8);
}

/*************
* List Boxes *
*************/

list,
.list {
    background-color: @base_color;
}

popover list,
.popover GtkListBox,
.popover .list {
    background-color: transparent;
}

row,
.list-row {
    border-color: @border_color;
}

row,
.list-row.button {
    background-image: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

row:selected button,
.list-row:selected:focus .button {
    background-color: @bg_color;
    transition: none;
}

row:selected button.flat,
.list-row:selected:focus .button.flat {
    background-color: alpha (@text_color, 0.3);
    text-shadow: 0 1px 1px alpha (@text_color, 0.15);
    -gtk-icon-shadow: 0 1px 1px alpha (@text_color, 0.15);
}

row:selected,
row:selected:backdrop,
.list-row:selected,
.list-row:selected:backdrop {
    background-color: shade (@base_color, 0.8);
    color: @text_color;
    text-shadow: none;
    -gtk-icon-shadow: none;
}

row:selected image:disabled,
row:selected label:disabled {
    opacity: 0.5;
}

row:selected:focus,
.list-row:selected:focus {
    background-color: @colorAccent;
    color: @selected_fg_color;
}

row:selected:focus image {
    color: @selected_fg_color;
}

.list-row GtkTextView {
    background-color: transparent;
}

/***************
* Content View *
***************/

.content-view-window {
    border: 1px solid alpha (#000, 0.25);
    border-radius: 5px;
}

.content-view,
.content-view viewport {
    background-color: transparent;
    background-image: none;
}

.content-view column-header .button {
    border-width: 0 0 1px 1px;
    background-image:
        linear-gradient(
            to bottom,
            @bg_color,
            shade (
                @bg_color,
                0.94
            )
        );
    border-image:
        linear-gradient(
            to bottom,
            shade (
                @base_color,
                0.86
            ),
            shade (
                @base_color,
                0.7
            )
        ) 1 0 1 0;
}

.content-view .title,
.content-view .option-title {
    color: @text_color;
    text-shadow: 0 1px alpha (#fff, 0.3);
}

.content-view .subtitle,
.content-view .option-description {
    color: alpha (@text_color, 0.5);
    text-shadow: 0 1px @text_shadow_color;
}

.content-view .toolbar {
    padding: 1px;
    background-image:
        linear-gradient(
            to bottom,
            alpha (
                #000,
                0.1
            ),
            alpha (
                #000,
                0.03
            )
        );
    border-color: alpha (#000, 0.05);
}

/************************
* Sidebar & Source List *
************************/

.sidebar,
.sidebar.view,
.sidebar list,
.source-list,
.source-list.view {
    background-color: shade (@bg_color, 0.92);
    color: mix (@bg_color, @text_color, 0.77);
    -gtk-icon-style: regular;
    -GtkTreeView-horizontal-separator: 1px;
    -GtkTreeView-vertical-separator: 6px;
}

.sidebar .inline-toolbar,
.source-list .inline-toolbar {
    -gtk-icon-style: requested;
}

dialog .sidebar,
dialog .sidebar list,
dialog .source-list {
    background-color: shade (@titlebar_color, 1.07);
}

.sidebar row,
.sidebar .list-row,
.sidebar-item,
.sidebar-row {
    border-color: transparent;
    border-style: solid;
    border-width: 1px 0;
    padding: 0 6px;
}

.sidebar button {
    padding: 3px;
}

.sidebar label,
.sidebar-item label {
    padding: 4px;
}

.sidebar-item image,
.sidebar-row image {
    padding-right: 6px;
}

.sidebar row label,
.sidebar .list-row,
.sidebar .view,
.sidebar-item,
.sidebar-row,
.source-list .view {
    text-shadow: 0 1px @text_shadow_color;
}

.sidebar row:hover,
.sidebar .list-row:hover,
.sidebar .view:hover,
.sidebar-item:hover,
.sidebar-row:hover,
.source-list .view:hover {
    background-color: shade (@titlebar_color, 1.1);
}

.popover .sidebar.view:selected,
.sidebar row:selected,
.sidebar .list-row:selected,
.sidebar .view:selected,
.sidebar-item.list-row:selected,
.sidebar-row:selected,
.source-list .view:selected,
.source-list.category-expander:hover {
    color: mix (@titlebar_color, @text_color, 0.6);
    background-color: transparent;
    background-image:
        linear-gradient(
            to bottom,
            alpha (
                #000,
                0.11
            ),
            alpha (
                #000,
                0.07
            )
        );
    border-image:
        linear-gradient(
            to bottom,
            alpha (
                #000,
                0.25
            ),
            alpha (
                @bg_highlight_color,
                0.3
            )
        ) 1 1 1 1;
    border-style: solid;
    border-width: 1px 0;
    box-shadow:
        inset 0 1px 0 0 alpha (#000, 0.03),
        inset 0 -1px 0 0 alpha (#000, 0.1);
}

dialog .sidebar .view:selected,
dialog .sidebar row:selected,
dialog .sidebar row:selected:focus,
dialog .source-list .view:selected {
    color: mix (@titlebar_color, @text_color, 0.6);
    background-image: none;
    background-color: alpha (#000, 0.05);
    border-image:
        linear-gradient(
            to bottom,
            alpha (
                #000,
                0.15
            ),
            alpha (
                @bg_highlight_color,
                0.3
            )
        ) 1 1 1 1;
    box-shadow:
        inset 0 1px 0 0 alpha (#000, 0.02),
        inset 0 -1px 0 0 alpha (#000, 0.1);
}

dialog .sidebar-row:selected:focus image {
    background-color: transparent;
}

.sidebar .list-row:backdrop,
.sidebar:backdrop,
.sidebar-item:backdrop,
.sidebar-row:backdrop,
.sidebar .view:backdrop,
.source-list:backdrop,
.source-list .view:backdrop {
    color: mix (@titlebar_color, @text_color, 0.4);
    -gtk-icon-effect: dim;
}

.sidebar .list-row:selected:backdrop,
.sidebar .view:selected:backdrop,
.sidebar-item:selected:backdrop,
.sidebar-row:selected:backdrop,
.source-list .view:selected:backdrop {
    color: mix (@titlebar_color, @text_color, 0.4);
    background-image:
        linear-gradient(
            to bottom,
            alpha (
                #000,
                0.04
            ),
            alpha (
                #000,
                0.03
            )
        );
    border-image:
        linear-gradient(
            to bottom,
            alpha (
                #000,
                0.15
            ),
            alpha (
                #fff,
                0.25
            )
        ) 1 1 1 1;
}

dialog .sidebar .view:selected:backdrop,
dialog .sidebar-row:selected:backdrop,
dialog .source-list .view:selected:backdrop {
    background-color: alpha (#000, 0.05);
    background-image: none;
    border-image:
        linear-gradient(
            to bottom,
            alpha (
                #000,
                0.15
            ),
            alpha (
                #fff,
                0.25
            )
        ) 1 1 1 1;
}

.sidebar.frame {
    border-width: 0 1px 0 0;
}

.sidebar .frame {
    border: none;
}

.sidebar .stack-switcher button {
    -gtk-icon-style: symbolic;
    border-radius: 0;
    border-top-width: 0;
    min-height: 23px;
}

.sidebar .stack-switcher button:first-child {
    border-left-width: 0;
}

.sidebar .stack-switcher button:last-child {
    border-right-width: 0;
}

.sidebar list separator {
    border: none;
}

/***********
* Expander *
***********/

expander arrow,
.expander,
.category-expander {
    min-height: 16px;
    min-width: 16px;
    transition: all 150ms ease-in-out;
    -gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
}

expander arrow:dir(rtl),
.expander:dir(rtl),
.category-expander:dir(rtl) {
    -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl");
}

.source-list.category-expander,
.source-list.category-expander:backdrop {
    color: transparent;
    border: none;
}

expander arrow:checked,
.expander:checked,
.category-expander:checked {
    -gtk-icon-transform: rotate(90deg);
}

expander arrow:checked:dir(rtl),
.expander:checked:dir(rtl),
.category-expander:checked:dir(rtl) {
    -gtk-icon-transform: rotate(-90deg);
}

/**************
* GtkCalendar *
**************/

calendar {
    border-radius: 2px;
}

calendar button,
calendar button:disabled,
calendar header,
calendar .view {
    background-color: transparent;
    background-image: none;
}

.highlight {
    color: #777;
}

/*************
* GtkInfoBar *
*************/

infobar revealer > box {
    background-color: @bg_color;
    background-image: -gtk-icontheme("dialog-information-symbolic");
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: 9px 1em;
    border-color: shade (@bg_color, 0.8);
    border-style: solid;
    border-width: 0 0 1px;
    box-shadow:
        inset 0 1px 0 0 shade (@bg_color, 0.92),
        inset 0 -1px 0 0 shade (@bg_color, 1.2);
    padding-left: 24px;
}

infobar:dir(rtl) revealer > box {
    background-position: calc(100% - 9px) center;
    padding-right: 24px;
}

infobar label {
    color: @text_color;
    padding: 3px;
}

infobar.error revealer > box {
    background-color: shade (@error_color, 1.2);
    background-image: -gtk-icontheme("process-error-symbolic");
    border-color: @error_color;
    box-shadow:
        inset 0 1px 0 0 alpha (@error_color, 0.3),
        inset 0 -1px 0 0 alpha (#fff, 0.3);
    color: #fff;
    -gtk-icon-palette: error #fff;
}

infobar.error label,
infobar.error .close {
    color: #fff;
    text-shadow: 0 1px 1px @error_color;
    -gtk-icon-shadow: 0 1px 1px @error_color;
}

infobar.question revealer > box {
    background-color: shade (@selected_bg_color, 1.2);
    background-image: -gtk-icontheme("dialog-question-symbolic");
    border-color: shade (@selected_bg_color, 0.9);
    box-shadow:
        inset 0 1px 0 0 alpha (@selected_bg_color, 0.3),
        inset 0 -1px 0 0 alpha (#fff, 0.3);
    color: shade (@selected_bg_color, 0.25);
}

infobar.question label {
    color: shade (@selected_bg_color, 0.25);
}

infobar.warning revealer > box {
    background-color: shade (@warning_color, 1.2);
    background-image: -gtk-icontheme("dialog-warning-symbolic");
    border-color: shade (@warning_color, 0.9);
    box-shadow:
        inset 0 1px 0 0 @warning_color,
        inset 0 -1px 0 0 alpha (#fff, 0.4);
    color: shade (@warning_color, 0.25);
    -gtk-icon-palette: warning shade (@warning_color, 0.4);
}

infobar.warning button {
    border-color: shade (@warning_color, 0.8);
}

infobar.warning button:backdrop {
    border-color: shade (@warning_color, 0.9);
}

infobar.warning label {
    color: shade (@warning_color, 0.25);
}

infobar.frame {
    border: none;
}

infobar.frame revealer > box {
    border-width: 1px;
    border-radius: 3px;
    box-shadow:
        inset 0 0 0 1px alpha (#fff, 0.05),
        inset 0 1px 0 0 alpha (#fff, 0.45),
        inset 0 -1px 0 0 alpha (#fff, 0.15),
        0 1px 1px alpha (#000, 0.03),
        0 1px 2px alpha (#000, 0.1);
    margin: 3px;
}

infobar entry,
infobar menu {
    color: @text_color;
}

infobar label:disabled {
    color: @insensitive_color;
}

infobar button,
infobar button:focus,
notebook infobar button {
    border: 1px solid alpha (#000, 0.3);
    text-shadow: none;
}

infobar button label {
    padding: 0 6px;
}

infobar button:disabled,
infobar button:hover:disabled {
    opacity: 0.7;
}

/***********
 * Popover *
 **********/

popover,
popover.osd,
.popover,
.popover.osd {
    border-radius: 4px;
    border: 1px solid alpha (#000, 0.3);
    background-color: @bg_color;
    box-shadow:
        inset 0 -1px 0 0 alpha (@bg_highlight_color, 0.5),
        0 3px 4px alpha (#000, 0.15),
        0 3px 3px -3px alpha (#000, 0.35);
    margin: 6px;
    text-shadow: none;
}

popover image {
    color: alpha (@text_color, 0.8);
}

popover image:disabled {
    color: @insensitive_color;
}

popover .view,
popover .sidebar.view,
.popover .view {
    background-color: transparent;
}

popover.menu,
.popover.menu {
    background-image: none;
}

popover undershoot.top {
    background:
        linear-gradient(
            @bg_color 0%,
            alpha(@bg_color, 0) 50%
        );
}

popover undershoot.bottom {
    background:
        linear-gradient(
            alpha(@bg_color, 0) 50%,
            @bg_color 100%
        );
}

.popover > .location-bar,
.popover.osd > .toolbar,
.popover.osd > .inline-toolbar,
.popover.osd > .search-bar,
.popover.osd > .location-bar {
    border-style: none;
    background-image: none;
    background-color: transparent;
}

.popover actionbar {
    background-image: none;
    padding: 6px;
    border-color: shade(@base_color, 0.8);
}

.popover actionbar .button {
    padding: 3px 6px;
}

GcrCertificateWidget .frame {
    border: none;
}

/*******
 * CSD *
 ******/

.titlebar {
    background-image:
        linear-gradient(
            to bottom,
            shade (
                @colorPrimary,
                1.04
            ),
            shade (
                @colorPrimary,
                0.94
            )
        );
    border-color: shade (@colorPrimary, 0.68);
    border-radius: 4px 4px 0 0;
    border-style: solid;
    border-width: 0 0 1px;
    text-shadow: 0 1px alpha (shade (@colorPrimary, 1.4), 0.4);
    box-shadow:
        inset 0 0 0 1px alpha (shade (@colorPrimary, 1.4), 0.2),
        inset 0 1px 0 0 alpha (shade (@colorPrimary, 1.4), 0.6);
    padding: 8px 6px 6px;
    -gtk-icon-shadow: 0 1px alpha (shade (@colorPrimary, 1.4), 0.4);
}

.titlebar:backdrop {
    background-image:
        linear-gradient(
            to bottom,
            shade (
                @colorPrimary,
                1.08
            ),
            shade (
                @colorPrimary,
                1.04
            )
        );
    background-color: shade (@colorPrimary, 1.1);
    border-color: shade (@colorPrimary, 0.82);
    box-shadow: inset 0 0 0 1px alpha (shade (@colorPrimary, 1.4), 0.4);
    -gtk-icon-effect: dim;
}

.titlebar .titlebar {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
}

.titlebar.compact {
    padding: 0 3px;
}

.maximized .titlebar,
.tiled .titlebar {
    padding: 4px 6px 3px;
}

.tiled-left.tiled-top:not(.maximized) .titlebar {
    border-top-right-radius: 0;
}

.tiled-right.tiled-top:not(.maximized) .titlebar {
    border-top-left-radius: 0;
}

.tiled-left.tiled-bottom:not(.maximized) actionbar {
    border-bottom-right-radius: 0;
}

.tiled-right.tiled-bottom:not(.maximized) actionbar {
    border-bottom-left-radius: 0;
}

.titlebar.default-decoration {
    padding: 0 3px;
    min-height: 32px;
}

.titlebar.default-decoration:backdrop {
    border-color: shade (@titlebar_color, 0.78);
}

.titlebar.flat,
dialog .titlebar.default-decoration,
messagedialog .titlebar,
messagedialog .titlebar.default-decoration {
    border: none;
    background-image: none;
    background-color: @bg_color;
    box-shadow:
        inset 1px 0 0 0 alpha (@bg_highlight_color, 0.2),
        inset -1px 0 0 0 alpha (@bg_highlight_color, 0.2),
        inset 0 1px 0 0 @bg_highlight_color;
}

dialog .titlebar.default-decoration,
messagedialog .titlebar,
messagedialog .titlebar.default-decoration {
    min-height: 0;
    padding: 3px;
}

.titlebar.flat:backdrop,
dialog .titlebar:backdrop,
messagedialog .titlebar:backdrop,
dialog .titlebar.default-decoration:backdrop,
messagedialog .titlebar.default-decoration:backdrop {
    border: none;
    background-image: none;
    background-color: @bg_color;
    box-shadow:
        inset 1px 0 0 0 alpha (@bg_highlight_color, 0.2),
        inset -1px 0 0 0 alpha (@bg_highlight_color, 0.2),
        inset 0 1px 0 0 @bg_highlight_color;
    color: shade (@titlebar_color, 1.2);
}

.titlebar .title,
.titlebar .subtitle,
.titlebar .titlebutton,
.titlebar *:not(entry) image {
    color: @textColorPrimary;
    text-shadow: 0 1px @textColorPrimaryShadow;
    -gtk-icon-shadow: 0 1px @textColorPrimaryShadow;
}

.titlebar .title {
    font-size: 9pt;
    font-weight: bold;
}

.titlebar .subtitle {
    font-size: 80%;
}

.titlebar .titlebutton {
    background: none;
    padding: 3px;
    border-radius: 3px;
    border-width: 1px;
    border-color: transparent;
    border-style: solid;
    border-image: none;
    box-shadow: none;
}

.titlebar .titlebutton image {
    -gtk-icon-style: symbolic;
}

.titlebar .title:disabled,
.titlebar .subtitle:disabled,
.titlebar .titlebutton:disabled,
.titlebar *:not(entry) image:disabled {
    color: mix (@textColorPrimary, @colorPrimary, 0.35);
    text-shadow: 0 1px @textColorPrimaryShadow;
    -gtk-icon-shadow: 0 1px @textColorPrimaryShadow;
}

.titlebar .title:backdrop,
.titlebar .subtitle:backdrop,
.titlebar .titlebutton:backdrop,
.titlebar *:not(entry) image:backdrop {
    color: mix (@textColorPrimary, @colorPrimary, 0.3);
    text-shadow: none;
    -gtk-icon-shadow: none;
}

decoration {
    border-radius: 4px 4px 0 0;
    box-shadow:
        0 0 0 1px @decoration_border_color,
        0 14px 28px rgba(0, 0, 0, 0.35),
        0 10px 10px rgba(0, 0, 0, 0.22);
    margin: 12px;
}

window.popup decoration,
.csd.popup decoration {
    border-radius: 3px;
    box-shadow:
        0 0 0 1px alpha (#000, 0.2),
        0 3px 6px alpha (#000, 0.16),
        0 3px 6px alpha (#000, 0.23);
    margin: 0;
}

menu window.popup decoration,
menu .csd.popup decoration {
    box-shadow:
        0 0 0 1px alpha (#000, 0.2),
        0 10px 20px alpha (#000, 0.19),
        0 6px 6px alpha (#000, 0.23);
}

tooltip decoration {
    border-radius: 3px;
    box-shadow:
        0 1px 3px alpha (#000, 0.12),
        0 1px 2px alpha (#000, 0.24);
    margin: 0;
}

.tooltip.csd decoration {
    border-radius: 3px;
    box-shadow: none;
    margin: 0;
}

decoration:backdrop {
    box-shadow:
        0 0 0 1px alpha (#000, 0.2),
        0 3px 6px alpha (#000, 0.16),
        0 3px 6px alpha (#000, 0.23),
        0 14px 28px transparent;
}

.maximized decoration {
    background-color: #000;
    box-shadow: none;
    border-radius: 0;
}

.tiled decoration {
    border-radius: 0;
    box-shadow:
        0 0 0 1px alpha (#000, 0.2),
        0 1px 3px alpha (#000, 0.12),
        0 1px 2px alpha (#000, 0.24);
}

.ssd decoration,
.ssd decoration:backdrop {
    box-shadow: 0 0 0 1px @decoration_border_color;
}

/**********
 * Dialog *
 **********/

dialog decoration,
messagedialog decoration {
    border-radius: 4px;
    box-shadow:
        0 0 0 1px alpha (#000, 0.2),
        0 8px 10px 1px alpha (#000, 0.14),
        0 3px 14px 2px alpha (#000, 0.12),
        0 5px 5px -3px alpha (#000, 0.4),
        0 14px 28px transparent;
}

dialog,
messagedialog {
    border-radius: 0 0 4px 4px;
    box-shadow:
        inset 1px 0 0 0 alpha (@bg_highlight_color, 0.2),
        inset -1px 0 0 0 alpha (@bg_highlight_color, 0.2),
        inset 0 -1px 0 0 alpha (@bg_highlight_color, 0.3);
}

messagedialog,
.prompt {
    -GtkDialog-button-spacing: 0;
    -GtkDialog-content-area-border: 12px;
    -gtk-icon-style: regular;
}

messagedialog button {
    padding: 6px;
}

messagedialog .titlebar,
dialog .titlebar {
    border: none;
    background-image: none;
    background-color: @bg_color;
    box-shadow:
        inset 1px 0 0 0 alpha (@bg_highlight_color, 0.2),
        inset -1px 0 0 0 alpha (@bg_highlight_color, 0.2),
        inset 0 1px 0 0 @bg_highlight_color;
}

dialog .titlebar:backdrop,
messagedialog .titlebar:backdrop {
    border: none;
    background-image: none;
    background-color: @bg_color;
    box-shadow:
        inset 1px 0 0 0 alpha (@bg_highlight_color, 0.2),
        inset -1px 0 0 0 alpha (@bg_highlight_color, 0.2),
        inset 0 1px 0 0 @bg_highlight_color;
}

dialog .titlebar :not(.suggested-action):not(.destructive-action) image,
dialog .titlebar :not(.suggested-action):not(.destructive-action) label {
    color: @title_color;
    text-shadow: 0 1px @title_shadow_color;
    -gtk-icon-shadow: 0 1px @title_shadow_color;
}

dialog .titlebar .title {
    color: transparent;
    font-size: 0.1px;
    text-shadow: none;
    -gtk-icon-shadow: none;
}

dialog notebook,
dialog toolbar {
    background-image: none;
    background-color: @bg_color;
}

/***************
* Emoji Picker *
***************/

.emoji-picker entry {
    margin: 12px;
    margin-bottom: 0;
}

.emoji-picker box > label {
    color: alpha (@text_color, 0.7);
    font-weight: bold;
    margin-left: 7px;
    margin-right: 7px;
}

.emoji-picker .emoji {
    min-height: 48px;
    min-width: 48px;
    font-size: 16px;
}

.emoji-picker stack box > box {
    border-top: 1px solid @border_color;
    border-radius: 0 0 3px 3px;
    box-shadow: none;
    background-color: @bg_color;
    background-image:
        linear-gradient(
            to bottom,
            alpha (
                #000,
                0.12
            ),
            alpha (
                #000,
                0
            ) 2px
        );
}

.emoji-picker .emoji-section,
.emoji-picker .emoji-section:checked {
    background-size: 16px 16px;
    background-repeat: no-repeat;
    background-position: center center;
    border: none;
    border-radius: 0;
    box-shadow: none;
    font-size: 0.1px;
    min-height: 24px;
    min-width: 24px;
    opacity: 0.6;
}

.emoji-picker .emoji-section:hover {
    opacity: 0.8;
}

.emoji-picker .emoji-section:checked {
    opacity: 1;
}

.emoji-picker .emoji-section:first-child {
    border-radius: 0 0 0 3px;
}

.emoji-picker .emoji-section:last-child {
    border-radius: 0 0 3px;
}

.emoji-picker:dir(ltr) .emoji-section:nth-child(1),
.emoji-picker:dir(rtl) .emoji-section:nth-child(10) {
    background-image: -gtk-icontheme("document-open-recent-symbolic");
}

.emoji-picker:dir(ltr) .emoji-section:nth-child(2),
.emoji-picker:dir(rtl) .emoji-section:nth-child(9) {
    background-image: -gtk-icontheme("face-smile-big-symbolic");
}

.emoji-picker:dir(ltr) .emoji-section:nth-child(3),
.emoji-picker:dir(rtl) .emoji-section:nth-child(8) {
    background-image: -gtk-icontheme("emoji-body-symbolic");
}

.emoji-picker:dir(ltr) .emoji-section:nth-child(4),
.emoji-picker:dir(rtl) .emoji-section:nth-child(7) {
    background-image: -gtk-icontheme("emoji-nature-symbolic");
}

.emoji-picker:dir(ltr) .emoji-section:nth-child(5),
.emoji-picker:dir(rtl) .emoji-section:nth-child(6) {
    background-image: -gtk-icontheme("emoji-food-symbolic");
}

.emoji-picker:dir(ltr) .emoji-section:nth-child(6),
.emoji-picker:dir(rtl) .emoji-section:nth-child(5) {
    background-image: -gtk-icontheme("emoji-travel-symbolic");
}

.emoji-picker:dir(ltr) .emoji-section:nth-child(7),
.emoji-picker:dir(rtl) .emoji-section:nth-child(4) {
    background-image: -gtk-icontheme("emoji-activity-symbolic");
}

.emoji-picker:dir(ltr) .emoji-section:nth-child(8),
.emoji-picker:dir(rtl) .emoji-section:nth-child(3) {
    background-image: -gtk-icontheme("emoji-objects-symbolic");
}

.emoji-picker:dir(ltr) .emoji-section:nth-child(9),
.emoji-picker:dir(rtl) .emoji-section:nth-child(2) {
    background-image: -gtk-icontheme("face-heart-symbolic");
}

.emoji-picker:dir(ltr) .emoji-section:nth-child(10),
.emoji-picker:dir(rtl) .emoji-section:nth-child(1) {
    background-image: -gtk-icontheme("edit-flag-symbolic");
}

/**************
* Text Styles *
**************/

.dim-label,
.greyed-label {
    opacity: 0.75;
}

.small-label {
    /* NOTE: Intended to match the Pango size of `<small>` and `size='smaller'` */
    font-size: 0.85em;
}

.attention {
    color: @attention_color;
}

image.error,
.error {
    color: @error_color;
}

image.warning,
.warning {
    color: @warning_color;
}

label.warning {
    color: @BANANA_900;
}

image.success,
.success {
    color: @success_color;
}

label.success {
    color: @LIME_900;
}

link {
    color: @link_color;
}

/***************************
* Overshoot and Undershoot *
***************************/

overshoot.left,
overshoot.right,
overshoot.top,
overshoot.bottom,
undershoot.left,
undershoot.right,
undershoot.top,
undershoot.bottom {
    background-image: none;
    background-color: transparent;
    border: none;
    box-shadow: none;
}

overshoot.top {
    background:
        linear-gradient(
            to top,
            alpha(@colorAccent, 0) 80%,
            alpha(@colorAccent, 0.25) 100%
        );
}

overshoot.right {
    background:
        linear-gradient(
            to right,
            alpha(@colorAccent, 0) 80%,
            alpha(@colorAccent, 0.25) 100%
        );
}

overshoot.bottom {
    background:
        linear-gradient(
            to bottom,
            alpha(@colorAccent, 0) 80%,
            alpha(@colorAccent, 0.25) 100%
        );
}

overshoot.left {
    background:
        linear-gradient(
            to left,
            alpha(@colorAccent, 0) 80%,
            alpha(@colorAccent, 0.25) 100%
        );
}

:backdrop overshoot.top {
    background:
        linear-gradient(
            to top,
            alpha(@colorAccent, 0) 80%,
            alpha(@colorAccent, 0.075) 100%
        );
}

:backdrop overshoot.right {
    background:
        linear-gradient(
            to right,
            alpha(@colorAccent, 0) 80%,
            alpha(@colorAccent, 0.075) 100%
        );
}

:backdrop overshoot.bottom {
    background:
        linear-gradient(
            to bottom,
            alpha(@colorAccent, 0) 80%,
            alpha(@colorAccent, 0.075) 100%
        );
}

:backdrop overshoot.left {
    background:
        linear-gradient(
            to left,
            alpha(@colorAccent, 0) 80%,
            alpha(@colorAccent, 0.075) 100%
        );
}
