/* Diehard4 — widget rules for the GTK 3.20+ node model. */

/**********
 * basics *
 **********/
* {
    outline-color: alpha(@selected_bg_color, 0.8);
    outline-style: dashed;
    outline-width: 1px;
    outline-offset: -3px;
    -gtk-outline-radius: 2px;
    -GtkWidget-text-handle-width: 20;
    -GtkWidget-text-handle-height: 20;
    -GtkScrolledWindow-scrollbar-spacing: 0;
}

/* GtkDialog and GtkAssistant have their own CSS node names in 3.20+ — they
 * are NOT `window`. Miss them and every dialog, About box and file chooser
 * gets a fully transparent body. */
window,
window.background,
dialog,
dialog.background,
messagedialog,
assistant,
assistant.background {
    background-color: @bg_color;
    color: @fg_color;
}

window.background:backdrop,
dialog:backdrop,
assistant:backdrop { color: @menu_color; }

.dim-label,
label.separator { color: @menu_color; }

label:disabled,
label:backdrop:disabled { color: @insensitive_fg_color; }

image:disabled,
icon:disabled { -gtk-icon-effect: dim; }

*:link { color: @link_color; }
*:visited { color: @link_color; }

.view,
iconview,
textview text {
    background-color: @bg_color;
    color: @fg_color;
}

.view:selected,
iconview:selected,
textview text selection,
label selection,
flowbox flowboxchild:selected {
    background-color: @selected_bg_color;
    color: @selected_fg_color;
}

separator {
    background-color: @light_color;
    min-width: 1px;
    min-height: 1px;
    border: none;
}

/***********
 * buttons *
 ***********/
button {
    min-height: 20px;
    min-width: 16px;
    padding: 5px 8px;
    border: 1px solid transparent;
    border-radius: 3px;
    background-color: @light_color;
    background-image: none;
    box-shadow: none;
    text-shadow: none;
    color: @fg_color;
    transition: background-color 120ms ease-out;
}

button:hover,
button:active,
button:checked {
    background-color: @selected_bg_color;
    color: @selected_fg_color;
}

button:checked:hover,
button:active:hover { background-color: shade(@selected_bg_color, 1.12); }

button:disabled {
    background-color: @light_color;
    color: @insensitive_fg_color;
}

button:disabled label,
button:disabled image { color: @insensitive_fg_color; }

button:backdrop { background-color: @light_color; color: @menu_color; }

button.flat,
button.close,
button.titlebutton,
toolbar button,
toolbutton button {
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
}

button.flat:hover,
button.close:hover,
button.titlebutton:hover,
toolbar button:hover,
toolbutton button:hover {
    background-color: @selected_bg_color;
    color: @selected_fg_color;
}

button.flat:checked,
button.titlebutton:checked,
toolbar button:checked,
toolbutton button:checked {
    background-color: @selected_bg_color;
    color: @selected_fg_color;
}

button.flat:disabled,
toolbar button:disabled {
    background-color: transparent;
    color: @insensitive_fg_color;
}

button.suggested-action,
button.default {
    background-color: @selected_bg_color;
    color: @selected_fg_color;
    font-weight: normal;
}

button.suggested-action:hover,
button.default:hover { background-color: shade(@selected_bg_color, 1.12); }

button.suggested-action:disabled,
button.default:disabled {
    background-color: shade(@selected_bg_color, 0.55);
    color: @insensitive_fg_color;
}

button.destructive-action {
    background-color: @error_color;
    color: @bright_fg_color;
}

button.destructive-action:hover { background-color: shade(@error_color, 1.12); }

button.destructive-action:disabled {
    background-color: shade(@error_color, 0.55);
    color: @insensitive_fg_color;
}

button.circular { border-radius: 9999px; -gtk-outline-radius: 9999px; }

button separator { background-color: transparent; }

buttonbox button { min-height: 22px; }

/* linked groups */
.linked > button,
.linked > entry,
.linked > combobox > box > button,
.linked > spinbutton { border-radius: 0; }

.linked > button:first-child,
.linked > entry:first-child,
.linked > spinbutton:first-child {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

.linked > button:last-child,
.linked > entry:last-child,
.linked > spinbutton:last-child {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

.linked > button:only-child,
.linked > entry:only-child { border-radius: 3px; }

.linked > button:not(:first-child),
.linked > entry:not(:first-child) { border-left: 1px solid @bg_color; }

.linked.vertical > button,
.linked.vertical > entry { border-radius: 0; }

.linked.vertical > button:first-child,
.linked.vertical > entry:first-child {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.linked.vertical > button:last-child,
.linked.vertical > entry:last-child {
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

.linked.vertical > button:not(:first-child),
.linked.vertical > entry:not(:first-child) { border-top: 1px solid @bg_color; }

/***********
 * entries *
 ***********/
entry,
spinbutton:not(.vertical) {
    min-height: 22px;
    padding: 5px;
    border: 1px solid @light_color;
    border-radius: 3px;
    background-color: @dark_color;
    background-image: none;
    box-shadow: none;
    color: @fg_color;
    caret-color: @selected_bg_color;
    transition: border-color 120ms ease-out;
}

entry:focus,
entry:focus-within,
spinbutton:not(.vertical):focus,
spinbutton:not(.vertical):focus-within {
    border-color: @selected_bg_color;
    outline: none;
}

entry:disabled,
spinbutton:disabled {
    background-color: @bg_color;
    border-color: @light_color;
    color: @insensitive_fg_color;
}

entry:backdrop { background-color: @dark_color; color: @menu_color; }

entry selection,
entry selection:focus {
    background-color: @selected_bg_color;
    color: @selected_fg_color;
}

entry image { color: @menu_color; }
entry image:hover { color: @fg_color; }

entry.flat,
entry.flat:focus {
    padding: 2px;
    border-width: 0;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
}

entry progress {
    border: none;
    border-radius: 0;
    background-color: @selected_bg_color;
    background-image: none;
}

entry.error { border-color: @error_color; }
entry.warning { border-color: @warning_color; }

entry.search { border-radius: 3px; }

/* the placeholder */
entry placeholder { color: @placeholder_text_color; }

/***************
 * spinbuttons *
 ***************/
spinbutton:not(.vertical) button {
    min-width: 16px;
    min-height: 16px;
    padding: 2px 4px;
    margin: 0;
    border: none;
    border-radius: 0;
    background-color: transparent;
    color: @fg_color;
    box-shadow: none;
}

spinbutton:not(.vertical) button:hover,
spinbutton:not(.vertical) button:active {
    background-color: @selected_bg_color;
    color: @selected_fg_color;
}

spinbutton:not(.vertical) button:disabled { color: @insensitive_fg_color; }

spinbutton:not(.vertical) button.up { border-radius: 0 2px 2px 0; }
spinbutton:not(.vertical) button.down { border-radius: 0; }

spinbutton.vertical { border: none; background: none; }

spinbutton.vertical entry {
    border-radius: 0;
    border-left-width: 1px;
    border-right-width: 1px;
}

spinbutton.vertical button {
    min-width: 28px;
    min-height: 20px;
    padding: 2px;
    border: 1px solid @light_color;
    background-color: @light_color;
    color: @fg_color;
}

spinbutton.vertical button:hover {
    background-color: @selected_bg_color;
    color: @selected_fg_color;
}

spinbutton.vertical button.up { border-radius: 3px 3px 0 0; border-bottom-width: 0; }
spinbutton.vertical button.down { border-radius: 0 0 3px 3px; border-top-width: 0; }

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

combobox button.combo { padding: 4px 6px; }

combobox entry.combo {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right-width: 0;
}

combobox button.combo:not(:only-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

combobox window.popup,
combobox window.popup .view { background-color: @dark_color; }

combobox > .linked > button:not(:first-child) { border-left-color: @bg_color; }

/*******************
 * check and radio *
 *******************/
check,
radio {
    min-width: 14px;
    min-height: 14px;
    margin: 0 4px;
    padding: 1px;
    border: 1px solid @trough_border_color;
    background-color: @light_color;
    background-image: none;
    color: @bright_fg_color;
    box-shadow: none;
    -gtk-icon-source: none;
}

check { border-radius: 2px; }
radio { border-radius: 9999px; -gtk-outline-radius: 9999px; }

check:hover,
radio:hover { background-color: shade(@light_color, 1.25); }

check:checked,
check:indeterminate,
radio:checked,
radio:indeterminate {
    background-color: @light_color;
    border-color: @selected_bg_color;
}

check:checked { -gtk-icon-source: -gtk-icontheme("object-select-symbolic"); }
check:indeterminate { -gtk-icon-source: -gtk-icontheme("list-remove-symbolic"); }

radio:checked {
    background-image: -gtk-gradient(radial, center center, 0, center center, 0.26,
                                    to(@bright_fg_color), to(transparent));
}

radio:indeterminate {
    background-image: linear-gradient(to bottom, @bright_fg_color, @bright_fg_color);
    background-size: 8px 2px;
    background-position: center center;
    background-repeat: no-repeat;
}

check:disabled,
radio:disabled {
    background-color: @bg_color;
    border-color: @light_color;
    color: @insensitive_fg_color;
}

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

radio:checked:disabled {
    background-image: -gtk-gradient(radial, center center, 0, center center, 0.26,
                                    to(@insensitive_fg_color), to(transparent));
}

/* in menus and lists the indicator sits flush */
menuitem check,
menuitem radio {
    min-width: 12px;
    min-height: 12px;
    margin: 0 6px 0 0;
}

menuitem:hover check,
menuitem:hover radio { border-color: @bright_fg_color; }

treeview.view check,
treeview.view radio { margin: 0; }

/***********
 * switches *
 ***********/
switch {
    min-width: 46px;
    min-height: 20px;
    padding: 2px;
    border: 1px solid @trough_border_color;
    border-radius: 3px;
    background-color: @dark_color;
    background-image: none;
    color: transparent;
    box-shadow: none;
    transition: background-color 150ms ease-out;
}

switch:checked {
    background-color: @selected_bg_color;
    border-color: shade(@selected_bg_color, 0.8);
}

switch:disabled { background-color: @bg_color; }

switch slider {
    min-width: 20px;
    min-height: 16px;
    border: none;
    border-radius: 2px;
    background-color: @menu_color;
    background-image: none;
    box-shadow: none;
}

switch:checked slider { background-color: @bright_fg_color; }
switch:disabled slider { background-color: @light_color; }

/* the on/off glyphs GTK draws inside the trough */
switch image { color: transparent; }

/**********
 * scales *
 **********/
scale { min-height: 16px; min-width: 16px; padding: 3px; }

scale trough {
    border: 1px solid @trough_border_color;
    border-radius: 2px;
    background-color: @dark_color;
    background-image: none;
    box-shadow: none;
    outline: none;
}

scale.horizontal trough { min-height: 8px; }
scale.vertical trough { min-width: 8px; }

/* the original theme leaves the filled section unhighlighted */
scale highlight {
    border-radius: 2px;
    background-color: @dark_color;
    background-image: none;
}

scale slider {
    border: none;
    border-radius: 2px;
    background-color: @selected_bg_color;
    background-image: none;
    box-shadow: none;
    margin: -1px;
    transition: background-color 120ms ease-out;
}

scale.horizontal slider { min-width: 19px; min-height: 10px; }
scale.vertical slider { min-height: 19px; min-width: 10px; }

scale slider:hover { background-color: shade(@selected_bg_color, 1.2); }
scale slider:disabled { background-color: @light_color; }

scale trough:disabled,
scale highlight:disabled { background-color: @dark_color; }

scale marks,
scale value { color: @menu_color; }

scale indicator {
    background-color: @light_color;
    min-width: 1px;
    min-height: 4px;
}

scale.horizontal marks.top indicator,
scale.horizontal marks.bottom indicator { min-height: 4px; min-width: 1px; }
scale.vertical marks.left indicator,
scale.vertical marks.right indicator { min-width: 4px; min-height: 1px; }

/**************
 * scrollbars *
 **************/
scrollbar {
    border: none;
    background-color: @bg_color;
    background-image: none;
    transition: background-color 150ms ease-out;
}

scrollbar trough {
    border: none;
    border-radius: 2px;
    background-color: @dark_color;
    margin: 0;
}

scrollbar slider {
    border: none;
    border-radius: 2px;
    background-color: @scrollbar_slider;
    background-image: none;
    transition: background-color 120ms ease-out;
}

scrollbar.vertical slider { min-width: 8px; min-height: 42px; }
scrollbar.horizontal slider { min-height: 8px; min-width: 42px; }

scrollbar slider:hover { background-color: shade(@scrollbar_slider, 1.35); }
scrollbar slider:active { background-color: shade(@scrollbar_slider, 1.6); }
scrollbar slider:disabled { background-color: shade(@scrollbar_slider, 0.7); }

/* the original theme hides the stepper buttons */
scrollbar button {
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: none;
    background-color: transparent;
    -gtk-icon-source: none;
}

scrollbar.overlay-indicator:not(.dragging):not(.hovering) {
    background-color: transparent;
    border-color: transparent;
}

scrollbar.overlay-indicator:not(.dragging):not(.hovering) trough {
    background-color: transparent;
}

scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider { min-width: 4px; }
scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider { min-height: 4px; }

junction,
scrollbar junction { background-color: @dark_color; border: none; }

/*****************
 * progress bars *
 *****************/
progressbar {
    color: @fg_color;
    font-size: 90%;
}

progressbar trough {
    border: 1px solid @trough_border_color;
    border-radius: 2px;
    background-color: @dark_color;
    background-image: none;
}

progressbar progress {
    border: none;
    border-radius: 2px;
    background-color: @selected_bg_color;
    background-image: none;
}

progressbar.horizontal trough,
progressbar.horizontal progress { min-height: 10px; }
progressbar.vertical trough,
progressbar.vertical progress { min-width: 10px; }

progressbar trough:disabled { background-color: @dark_color; }
progressbar progress:disabled { background-color: @light_color; }

progressbar.osd { min-width: 3px; min-height: 3px; background-color: transparent; }
progressbar.osd trough { background-color: transparent; }

/*************
 * levelbars *
 *************/
levelbar trough {
    border: 1px solid @trough_border_color;
    border-radius: 2px;
    background-color: @dark_color;
    padding: 2px;
}

levelbar.horizontal block { min-height: 8px; }
levelbar.vertical block { min-width: 8px; }

levelbar.horizontal.discrete block { min-width: 28px; margin: 0 1px; }
levelbar.vertical.discrete block { min-height: 28px; margin: 1px 0; }

levelbar block {
    border: none;
    border-radius: 1px;
    background-color: @selected_bg_color;
}

levelbar block.low { background-color: @warning_color; }
levelbar block.high { background-color: @selected_bg_color; }
levelbar block.full { background-color: @success_color; }
levelbar block.empty { background-color: transparent; }

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

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

spinner:checked {
    opacity: 1;
    animation: diehard-spin 1s linear infinite;
}

spinner:disabled { opacity: 0.4; }

/***********
 * menubar *
 ***********/
menubar,
.menubar {
    padding: 0;
    border: none;
    background-color: @bg_color;
    color: @menu_color;
    box-shadow: none;
}

menubar > menuitem,
.menubar > menuitem {
    padding: 5px 8px;
    border: none;
    background-color: transparent;
    color: @menu_color;
    min-height: 16px;
    transition: background-color 100ms ease-out;
}

menubar > menuitem:hover,
menubar > menuitem:selected,
menubar > menuitem:active,
.menubar > menuitem:hover {
    background-color: @selected_bg_color;
    color: @selected_fg_color;
    box-shadow: none;
}

menubar > menuitem:disabled { color: @insensitive_fg_color; }

/*********
 * menus *
 *********/
menu,
.menu,
popover.background.menu {
    padding: 2px 0;
    border: 1px solid @light_color;
    border-radius: 3px;
    background-color: @dark_color;
    color: @fg_color;
}

menu menuitem,
.menu menuitem {
    padding: 5px 8px;
    min-height: 16px;
    border: none;
    background-color: transparent;
    color: @fg_color;
    text-shadow: none;
    transition: background-color 100ms ease-out;
}

menu menuitem:hover,
menu menuitem:selected,
.menu menuitem:hover {
    background-color: @selected_bg_color;
    color: @selected_fg_color;
}

menu menuitem:disabled,
.menu menuitem:disabled { color: @insensitive_fg_color; }

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

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

menu separator,
.menu separator {
    margin: 2px 0;
    background-color: @light_color;
    min-height: 1px;
}

menu > arrow {
    min-height: 16px;
    padding: 2px;
    background-color: @dark_color;
    border-radius: 0;
    color: @fg_color;
}

menu > arrow.top { -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); }
menu > arrow.bottom { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); }
menu > arrow:hover { background-color: @selected_bg_color; color: @selected_fg_color; }
menu > arrow:disabled { color: @insensitive_fg_color; }

menuitem accelerator { color: @menu_color; }
menuitem:hover accelerator { color: @selected_fg_color; }

/************
 * notebook *
 ************/
notebook { background-color: @bg_color; }

notebook > stack {
    background-color: @bg_color;
    border: none;
}

notebook > header {
    padding: 0;
    border: none;
    background-color: @light_color;
    box-shadow: none;
}

notebook > header.top { border-bottom: 1px solid @bg_color; }
notebook > header.bottom { border-top: 1px solid @bg_color; }
notebook > header.left { border-right: 1px solid @bg_color; }
notebook > header.right { border-left: 1px solid @bg_color; }

notebook > header > tabs { margin: 0; }

notebook > header > tabs > tab {
    min-height: 22px;
    min-width: 24px;
    padding: 3px 10px;
    border: none;
    border-radius: 0;
    background-color: @light_color;
    color: @menu_color;
    font-weight: normal;
    transition: background-color 120ms ease-out, color 120ms ease-out;
}

notebook > header > tabs > tab:hover {
    background-color: shade(@selected_bg_color, 0.75);
    color: @selected_fg_color;
}

notebook > header > tabs > tab:checked {
    background-color: @selected_bg_color;
    color: @selected_fg_color;
}

notebook > header > tabs > tab:disabled { color: @insensitive_fg_color; }

notebook > header.top > tabs > tab:first-child { border-top-left-radius: 3px; }
notebook > header.top > tabs > tab:last-child { border-top-right-radius: 3px; }
notebook > header.bottom > tabs > tab:first-child { border-bottom-left-radius: 3px; }
notebook > header.bottom > tabs > tab:last-child { border-bottom-right-radius: 3px; }

notebook > header > tabs > tab button.flat {
    min-width: 16px;
    min-height: 16px;
    padding: 0;
    margin-left: 4px;
    border-radius: 2px;
    color: inherit;
}

notebook > header > tabs > tab button.flat:hover {
    background-color: shade(@selected_bg_color, 1.3);
    color: @bright_fg_color;
}

notebook > header > arrow {
    min-width: 16px;
    min-height: 16px;
    color: @menu_color;
    border-radius: 0;
}

notebook > header > arrow:hover { color: @selected_bg_color; }
notebook > header > arrow:disabled { color: @insensitive_fg_color; }

/************
 * toolbars *
 ************/
toolbar,
.toolbar {
    padding: 2px;
    border: none;
    background-color: @bg_color;
    color: @fg_color;
}

toolbar.horizontal separator { margin: 2px 4px; }
toolbar.vertical separator { margin: 4px 2px; }

toolbar.osd,
.osd {
    border: 1px solid @light_color;
    border-radius: 3px;
    background-color: @dark_color;
    color: @fg_color;
}

searchbar,
.search-bar,
actionbar > revealer > box,
.location-bar {
    padding: 4px;
    border-bottom: 1px solid @light_color;
    background-color: @bg_color;
}

actionbar > revealer > box {
    border-bottom: none;
    border-top: 1px solid @light_color;
}

/**************
 * headerbars *
 **************/
headerbar,
.titlebar {
    min-height: 40px;
    padding: 5px;
    border: none;
    border-bottom: 1px solid @light_color;
    border-radius: 3px 3px 0 0;
    background-color: @bg_color;
    background-image: none;
    box-shadow: none;
    color: @fg_color;
}

headerbar:backdrop,
.titlebar:backdrop { color: @menu_color; }

.tiled headerbar,
.maximized headerbar,
.fullscreen headerbar,
.tiled .titlebar,
.maximized .titlebar { border-radius: 0; }

headerbar .title,
.titlebar .title {
    padding: 0 6px;
    font-weight: bold;
    color: @bright_fg_color;
}

headerbar .subtitle,
.titlebar .subtitle {
    padding: 0 6px;
    font-size: 80%;
    color: @menu_color;
}

headerbar button.titlebutton {
    min-width: 22px;
    min-height: 22px;
    padding: 2px;
    border-radius: 2px;
    color: @menu_color;
}

headerbar button.titlebutton:hover {
    background-color: @selected_bg_color;
    color: @selected_fg_color;
}

headerbar button.titlebutton.close:hover { background-color: @error_color; }

headerbar entry,
headerbar spinbutton { min-height: 24px; }

/***************
 * tree views  *
 ***************/
treeview.view {
    border: none;
    background-color: @bg_color;
    color: @fg_color;
    -GtkTreeView-grid-line-width: 0;
    -GtkTreeView-tree-line-width: 0;
}

treeview.view:hover { background-color: shade(@bg_color, 1.25); }

treeview.view:selected,
treeview.view:selected:focus {
    border-radius: 0;
    background-color: @light_color;
    color: @bright_fg_color;
}

treeview.view:selected:hover { background-color: shade(@light_color, 1.2); }

treeview.view:disabled { color: @insensitive_fg_color; }

treeview.view.separator { min-height: 2px; color: @light_color; }

treeview.view:drop(active) { border-color: @selected_bg_color; }

treeview.view.expander {
    min-width: 12px;
    min-height: 12px;
    color: @menu_color;
    -gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
}

treeview.view.expander:dir(rtl) { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); }
treeview.view.expander:checked { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); }
treeview.view.expander:hover { color: @selected_bg_color; }

treeview.view header button {
    min-height: 22px;
    padding: 3px 6px;
    border: none;
    border-right: 1px solid @bg_color;
    border-bottom: 1px solid @bg_color;
    border-radius: 0;
    background-color: @light_color;
    color: @menu_color;
    font-weight: normal;
    text-shadow: none;
}

treeview.view header button:hover {
    background-color: @selected_bg_color;
    color: @selected_fg_color;
}

treeview.view header button:last-child { border-right: none; }

treeview.view header button:disabled { color: @insensitive_fg_color; }

/* CellRendererProgress puts .trough / .progressbar on the treeview's own
 * node rather than creating child nodes, so these must be classes. */
treeview.view.progressbar,
treeview.view.progressbar:selected,
treeview.view progressbar progress {
    border: none;
    border-radius: 2px;
    background-color: @selected_bg_color;
    background-image: none;
    color: @bright_fg_color;
}

treeview.view.trough,
treeview.view.trough:selected,
treeview.view progressbar trough {
    border: 1px solid @trough_border_color;
    border-radius: 2px;
    background-color: @dark_color;
    background-image: none;
}

treeview.view.dnd { border: 1px solid @selected_bg_color; }

/*********************
 * lists and sidebars *
 *********************/
list {
    border: none;
    background-color: @bg_color;
    color: @fg_color;
}

list row,
row.activatable {
    padding: 2px;
    border: none;
    background-color: transparent;
    transition: background-color 100ms ease-out;
}

list row:hover,
row.activatable:hover { background-color: @light_color; }

list row:selected,
row:selected {
    background-color: @selected_bg_color;
    color: @selected_fg_color;
}

list row:selected:hover { background-color: shade(@selected_bg_color, 1.15); }

list row:disabled,
row:disabled { color: @insensitive_fg_color; }

list.horizontal row:not(:last-child) { border-right: 1px solid @light_color; }
list:not(.horizontal) row:not(:last-child) { border-bottom: 1px solid transparent; }

.sidebar,
placessidebar,
stacksidebar {
    border: none;
    background-color: @bg_color;
    color: @fg_color;
}

.sidebar list,
placessidebar list,
stacksidebar list { background-color: @bg_color; }

.sidebar row:hover,
placessidebar row:hover,
stacksidebar row:hover { background-color: @light_color; color: @fg_color; }

.sidebar row:selected,
.sidebar row:selected:focus,
placessidebar row:selected,
stacksidebar row:selected {
    background-color: @light_color;
    color: @bright_fg_color;
}

.sidebar row:selected:hover { background-color: shade(@light_color, 1.25); }

placessidebar row image { color: @menu_color; }
placessidebar row:selected image { color: @selected_bg_color; }
placessidebar row.sidebar-new-bookmark-row { color: @selected_bg_color; }

/* separator between the sidebar and the content */
paned > separator,
.pane-separator {
    min-width: 3px;
    min-height: 3px;
    padding: 0;
    border: none;
    background-color: @light_color;
    background-image: url("assets/handle-vertical.png");
    background-repeat: no-repeat;
    background-position: center center;
}

paned.horizontal > separator {
    background-image: url("assets/handle-vertical.png");
}

paned.vertical > separator {
    background-image: url("assets/handle-horizontal.png");
}

paned > separator:hover,
paned > separator:selected { background-color: @selected_bg_color; }

paned > separator.wide {
    min-width: 5px;
    min-height: 5px;
    background-color: @bg_color;
}

/***********************
 * frames and viewports *
 ***********************/
frame > border,
.frame {
    border: 1px solid @light_color;
    border-radius: 0;
    box-shadow: none;
}

frame.flat > border,
.frame.flat { border: none; }

frame > label { color: @menu_color; padding: 0 4px; }

scrolledwindow viewport.frame { border: none; }

scrolledwindow overshoot.top {
    background-image: -gtk-gradient(radial, center top, 0, center top, 0.5,
                                    to(alpha(@selected_bg_color, 0.25)), to(transparent));
    background-size: 100% 60%;
    background-repeat: no-repeat;
    background-position: center top;
}

scrolledwindow overshoot.bottom {
    background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5,
                                    to(alpha(@selected_bg_color, 0.25)), to(transparent));
    background-size: 100% 60%;
    background-repeat: no-repeat;
    background-position: center bottom;
}

scrolledwindow undershoot.top,
scrolledwindow undershoot.bottom,
scrolledwindow undershoot.left,
scrolledwindow undershoot.right { background-image: none; }

/*************
 * expanders *
 *************/
expander title > arrow,
expander arrow {
    min-width: 12px;
    min-height: 12px;
    color: @menu_color;
    -gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
}

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

expander title > arrow:checked,
expander arrow:checked { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); }

expander title > arrow:hover,
expander arrow:hover { color: @selected_bg_color; }

/************
 * tooltips *
 ************/
tooltip,
tooltip.background {
    padding: 4px;
    border: 1px solid @light_color;
    border-radius: 3px;
    background-color: @dark_color;
    background-image: none;
    color: @bright_fg_color;
    box-shadow: none;
    text-shadow: none;
}

tooltip label,
tooltip * { background-color: transparent; color: @bright_fg_color; }

tooltip decoration { background-color: transparent; box-shadow: none; }

/************
 * popovers *
 ************/
popover.background {
    padding: 2px;
    border: 1px solid @light_color;
    border-radius: 3px;
    background-color: @dark_color;
    background-image: none;
    color: @fg_color;
    box-shadow: 0 1px 4px alpha(black, 0.5);
}

popover.background > arrow {
    border: 1px solid @light_color;
    background-color: @dark_color;
}

popover.background separator { background-color: @light_color; }

popover.background list,
popover.background .view { background-color: @dark_color; }

modelbutton.flat,
popover.background button.flat {
    min-height: 22px;
    padding: 4px 8px;
    border-radius: 2px;
    background-color: transparent;
    color: @fg_color;
}

modelbutton.flat:hover,
popover.background button.flat:hover {
    background-color: @selected_bg_color;
    color: @selected_fg_color;
}

modelbutton.flat arrow.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
modelbutton.flat arrow.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }

/************
 * infobars *
 ************/
infobar { border: none; background-color: transparent; }

infobar > revealer > box {
    padding: 6px;
    border-bottom: 1px solid @light_color;
    background-color: @light_color;
    color: @bright_fg_color;
}

infobar.info > revealer > box { background-color: @light_color; }
infobar.question > revealer > box { background-color: @light_color; }
infobar.warning > revealer > box { background-color: @warning_color; color: #1A1206; }
infobar.error > revealer > box { background-color: @error_color; color: @bright_fg_color; }

infobar.warning button,
infobar.error button {
    background-color: alpha(black, 0.22);
    color: inherit;
}

infobar.warning button:hover,
infobar.error button:hover { background-color: alpha(black, 0.38); }

.app-notification {
    padding: 6px;
    border: 1px solid @light_color;
    border-top-width: 0;
    border-radius: 0 0 3px 3px;
    background-color: @dark_color;
    color: @fg_color;
}

/*************
 * calendars *
 *************/
calendar {
    padding: 2px;
    border: 1px solid @light_color;
    border-radius: 3px;
    background-color: @dark_color;
    color: @fg_color;
}

calendar:selected {
    border-radius: 2px;
    background-color: @selected_bg_color;
    color: @selected_fg_color;
}

calendar.header {
    border: none;
    border-bottom: 1px solid @light_color;
    border-radius: 0;
    background-color: @dark_color;
    color: @bright_fg_color;
}

calendar.button {
    padding: 2px;
    background-color: transparent;
    color: @menu_color;
}

calendar.button:hover { color: @selected_bg_color; background-color: transparent; }

calendar.highlight { color: @menu_color; font-weight: normal; }
calendar:indeterminate { color: @insensitive_fg_color; }

/**************
 * statusbars *
 **************/
statusbar {
    padding: 4px 8px;
    border: none;
    background-color: @bg_color;
    color: @menu_color;
}

statusbar frame > border { border: none; }

/***********
 * dialogs *
 ***********/
messagedialog,
messagedialog.background {
    background-color: @bg_color;
    border-radius: 3px;
}

messagedialog .titlebar {
    border: none;
    background-color: @bg_color;
    min-height: 24px;
}

messagedialog .dialog-action-area button {
    padding: 8px 12px;
    border-radius: 0;
    background-color: @bg_color;
    border-top: 1px solid @light_color;
    border-right: 1px solid @light_color;
}

messagedialog .dialog-action-area button:last-child { border-right: none; }
messagedialog .dialog-action-area button:hover { background-color: @selected_bg_color; }

.dialog-vbox { padding: 4px; }

assistant .sidebar { border: none; background-color: @dark_color; }
assistant .sidebar label { padding: 6px 12px; color: @menu_color; }
assistant .sidebar label.highlight { color: @bright_fg_color; font-weight: normal; }

filechooser .dialog-action-box { border-top: 1px solid @light_color; }
filechooser #pathbarbox { border-bottom: 1px solid @light_color; background-color: @bg_color; }

/***************
 * decorations *
 ***************/
decoration {
    border-radius: 3px 3px 0 0;
    border: 1px solid @light_color;
    box-shadow: 0 2px 6px 1px alpha(black, 0.6);
    margin: 4px;
}

decoration:backdrop { box-shadow: 0 1px 3px 1px alpha(black, 0.4); }

.tiled decoration,
.maximized decoration,
.fullscreen decoration,
.solid-csd decoration {
    border-radius: 0;
    margin: 0;
    box-shadow: none;
}

decoration-overlay { background: none; }

/*********
 * misc  *
 *********/
stackswitcher button {
    border-radius: 0;
    border-right: 1px solid @bg_color;
}

stackswitcher button:first-child { border-radius: 3px 0 0 3px; }
stackswitcher button:last-child { border-radius: 0 3px 3px 0; border-right: none; }

iconview.view:selected,
iconview.view:selected:focus,
.nautilus-canvas-item:selected,
.caja-canvas-item:selected {
    border-radius: 2px;
    background-color: @selected_bg_color;
    color: @selected_fg_color;
}

flowbox flowboxchild { padding: 2px; border-radius: 2px; }
flowbox flowboxchild:selected { background-color: @selected_bg_color; color: @selected_fg_color; }

.rubberband,
rubberband {
    border: 1px solid @selected_bg_color;
    background-color: alpha(@selected_bg_color, 0.25);
}

.selection-mode headerbar,
.selection-mode .titlebar {
    background-color: @selected_bg_color;
    color: @selected_fg_color;
}

colorswatch { border-radius: 2px; }
colorswatch overlay { border: 1px solid @light_color; border-radius: 2px; }
colorswatch:selected overlay { border-color: @selected_bg_color; }

.monospace { font-family: monospace; }

.keycap {
    padding: 2px 6px;
    border: 1px solid @light_color;
    border-radius: 3px;
    background-color: @light_color;
    color: @bright_fg_color;
}

.circular-button { border-radius: 9999px; }

.osd .scale slider { background-color: @selected_bg_color; }

.needs-attention > label,
.needs-attention > image { color: @selected_bg_color; }

/* drag-and-drop feedback */
*:drop(active) { border-color: @selected_bg_color; }