/* NOTES to contributors:
 * use 4 spaces indents, and keep code ALIGNED and ORDERED */

/* default */
* {
    padding: 0;

    -GtkDialog-button-spacing: 6;
    -GtkDialog-content-area-border: 6;
    -GtkDialog-action-area-border: 6;

    -GtkScrolledWindow-scrollbar-spacing: 0;

    -GtkTextView-error-underline-color: @error_color;

    -GtkToolButton-icon-spacing: 6;

    -WnckTasklist-fade-overlay-rect: 0;
}

.background {
    background-color: @theme_bg_color;
    color: @theme_fg_color;
}

*:disabled {
    color: @insensitive_fg_color;
    text-shadow: 0 1px alpha(white, 0.4);
}

/* Apply Effects to insensitive and Prelit Images */

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

.monospace {
    font-family: Monospace;
}

/**************
 * action bar *
 **************/

actionbar {
    padding: 4px;
    border-top: 1px solid @border;
    background-color: @theme_bg_color;
    background-image: none;
}

/*************
 * assistant *
 *************/

assistant .sidebar {
    border-top: 1px solid @border;
    background-color: @theme_base_color;
    color: @theme_fg_color;
}

assistant .sidebar:dir(ltr) {
    border-right: 1px solid @border;
}

assistant .sidebar:dir(rtl) {
    border-left: 1px solid @border;
}

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

assistant .sidebar label.highlight {
    background-color: @theme_selected_bg_color;
    color: @theme_selected_fg_color;
}

/**********
 * button *
 **********/
button,
button.menuitem.menubar {
    min-height: 18px;
    min-width: 14px;
    padding: 4px 7px;
}

button.image-button {
    padding: 4px;
}

.dialog-action-area button.text-button {
    padding: 6px 16px;
}

button.text-button {
    padding: 4px 16px;
}

button.text-button.image-button {
    padding: 4px 7px;
}

headerbar button,
headerbar button.image-button,
headerbar button.titlebutton.appmenu {
    padding: 8px;
}

headerbar button.titlebutton {
    padding: 8px 1px 8px 1px;
}

headerbar button.text-button {
    padding: 6px 16px;
}

.primary-toolbar button {
    padding: 6px;
}

.primary-toolbar button.image-button {
    padding: 6px;
}

.primary-toolbar button.text-button {
    padding: 6px 16px;
}

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

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

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

.path-bar button label:first-child,
.path-bar button.text-button.image-button label:first-child {
    padding-left: 8px;
}

.path-bar button image {
    padding-left: 4px;
    padding-right: 4px;
}

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

.stack-switcher > button.text-button {
      padding: 6px 10px 6px;
}

toolbar.inline-toolbar .button.image-button {
    padding: 4px;
}

button,
.header-bar.titlebar GtkMenuButton.button.titlebutton {
    color: @button_fg;
    text-shadow: 0 1px @button_text_shadow;
    -gtk-icon-shadow: 0 1px @button_text_shadow;
}

.primary-toolbar button.image-button.flat {
    /*color: @theme_fg_color;*/
    -gtk-icon-shadow: 0 1px alpha(white, 0.4);
    text-shadow: 0 1px alpha(white, 0.2);
}

.primary-toolbar button.image-button.flat label {
    color: @theme_fg_color;
}

.primary-toolbar button.image-button,
.primary-toolbar button image {
    color: #505050;
    -gtk-icon-shadow: 0 1px alpha(white, 0.9);
}

.primary-toolbar button.image-button:active,
.primary-toolbar button.image-button:active:hover,
.primary-toolbar button.image-button:checked,
.primary-toolbar button.image-button:checked:hover {
    -gtk-icon-shadow: 0 1px alpha(white, 0.4);
}

.primary-toolbar button.image-button:disabled,
.primary-toolbar button.image-button:disabled label,
.primary-toolbar button.image-button:disabled image {
    color: @insensitive_fg_color;
    -gtk-icon-shadow: none;
}

headerbar button.titlebutton,
.titlebar button.titlebutton,
headerbar button.titlebutton:active:hover,
.titlebar button.titlebutton:active:hover,
headerbar button.titlebutton:checked,
.titlebar button.titlebutton:checked {
    color: #999999;
    -gtk-icon-shadow: 0 1px shade(@theme_bg_color, 1.3);
}

headerbar button.titlebutton:backdrop,
.titlebar button.titlebutton:backdrop {
    color: #b2b2b2;
    -gtk-icon-shadow: none;
}

headerbar button.titlebutton:hover,
.titlebar button.titlebutton:hover {
    color: #666666;
    -gtk-icon-shadow: 0 1px shade(@theme_bg_color, 1.3);
}

button:disabled {
    color: @insensitive_fg_color;
    text-shadow: none;
    -gtk-icon-shadow: none;
}

button.font separator,
button.file separator {
    background-color: transparent;
    border: none;
}

/***********
* calendar *
************/

calendar {
    color: @theme_fg_color;
    background-color: @theme_bg_color;
    border: 1px solid @border;
    border-radius: 3px;
    padding: 2px;
}

calendar:selected {
    background-color: @theme_selected_bg_color;
    color: @theme_selected_fg_color;
    border-radius: 1.5px;
}

calendar.header {
    color: @theme_fg_color;
    border: none;
}

calendar.button,
calendar.button:focus {
    color: alpha(@theme_fg_color, 0.45);
    border: none;
    background-image: none;
    background-color: transparent;
}

calendar.button:hover {
    color: @theme_fg_color;
}

calendar.button:disabled {
    color: @insensitive_fg_color;
}

calendar.button:indeterminate {
    color: alpha(currentcolor, 0.55);
}

calendar.button.highlight {
    color: @theme_fg_color;
}

/*******************
 * check and radio *
 *******************/

check,
.check,
radio
.radio {
    min-width: 16px;
    min-height: 16px;
    margin: 0;
    background-color: transparent;
}

checkbutton.text-button,
radiobutton.text-button {
    padding: 2px 0;
}

checkbutton label,
radiobutton label {
    padding-bottom: 1px;
}

checkbutton label:not(:only-child):last-child,
radiobutton label:not(:only-child):last-child,
checkbutton label:not(:only-child):first-child,
radiobutton label:not(:only-child):first-child {
    margin-left: 4px;
    margin-right: 4px;
}

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

colorswatch {
    border: 1px solid alpha(@theme_fg_color, 0.75);
    border-radius: 0;
    box-shadow: none;
}

colorswatch overlay {
    border: none;
    background-color: transparent;
    background-image: none;
}

colorswatch:hover,
colorswatch:selected:hover {
    background-color: transparent;
    background-image: none;
}

colorswatch.dark overlay{
    color: @theme_selected_fg_color;
}

colorswatch.light overlay{
    color: @theme_fg_color;
}

colorswatch.dark overlay:hover {
    background-image: linear-gradient(to bottom,
                                      alpha(white, 0) 40%,
                                      alpha(white, 0.3)
                                      );
}

colorswatch.light overlay:hover {
    background-image: linear-gradient(to top,
                                      alpha(black, 0) 40%,
                                      alpha(black, 0.1)
                                      );
}

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

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

colorswatch.left,
colorswatch:first-child,
colorswatch:first-child  overlay {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

colorswatch.right,
colorswatch:last-child,
colorswatch:last-child  overlay {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

colorswatch:only-child {
    border-radius: 3px;
}

colorswatch#add-color-button {
    background-color: mix(@border, @theme_bg_color, 0.3);
}

colorswatch#add-color-button overlay:hover {
    background-image: linear-gradient(to bottom,
                                      alpha(white, 0) 40%,
                                      alpha(white, 0.3)
                                      );
}

/*****************
 * column-header *
 *****************/

treeview .view header button {
    padding: 4px 6px;
    color: @theme_fg_color;
    text-shadow: none;
    -gtk-icon-shadow: none;
}

header button:disabled {
}

header button.dnd {
}

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

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

/****************
 * content view *
 ****************/

.content-view {
    background-color: @theme_base_color;
}

.content-view:hover {
    -gtk-icon-effect: highlight;
}

/*******
 * csd *
 *******/

 decoration {
    border-width: 0;
    border-radius: 6px 6px 0 0;
    box-shadow: 0 2px 8px 3px alpha(black, 0.5),
                0 0 0 1px darker(@theme_bg_color);

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

 decoration:backdrop {
    box-shadow: 0 2px 8px 3px transparent,
                0 2px 5px 3px alpha(black, 0.3),
                0 0 0 1px darker(@theme_bg_color);
 }

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

 .popup decoration {
    box-shadow: none;
 }

 .ssd decoration {
    box-shadow: 0 0 0 1px darker(@theme_bg_color);
 }

 .csd.popup decoration {
    box-shadow: 0 2px 3px alpha(black, 0.3),
                0 0 0 1px darker(@theme_bg_color);
 }

 tooltip.csd decoration {
    box-shadow: 0 2px 3px alpha(black, 0.3);
 }

 .solid-csd decoration {
    margin: 0;
    padding: 4px;
    background-color: @border;
    border: 1px solid @border;
    border-radius: 0;
    box-shadow: inset 0 0 0 3px red;
 }

/***********
 * Dialogs *
 ***********/

/*********
 * entry *
 *********/

entry {
    background-clip: padding-box;
    min-height: 28px;
    padding-left: 4px;
    padding-right: 4px;
    color: @theme_text_color;
}

treeview entry {
    padding: 0;
}

entry:focus {
}

entry:disabled {
    color: @insensitive_fg_color;
}

entry selection {
    background-color: @theme_selected_bg_color;
    color: @theme_selected_fg_color;
}

entry image {
    color: shade(@theme_fg_color, 1.05);
}

entry image:hover {
    color: @theme_fg_color;
}

entry image:active {
    color: @theme_selected_bg_color;
}

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

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

entry progress,
entry progress:focus {
    margin-left: 2px;
    margin-right: 2px;
    border-image: none;
    border-style: none;
    background-color: transparent;
    background-image: linear-gradient(to top,
                                      transparent 2px,
                                      white 2px,
                                      white 3px,
                                      shade(@theme_selected_bg_color, 0.9) 3px,
                                      shade(@theme_selected_bg_color, 0.9) 5px,
                                      transparent 5px);
    background-size: auto;
    box-shadow: none;
}

.entry progress.pulse,
.entry progress.pulse:focus {
    background-image: linear-gradient(to top,
                                      transparent 2px,
                                      white 2px,
                                      white 3px,
                                      @border 3px,
                                      @border 5px,
                                      transparent 5px);
}

.cursor-handle.top,
.cursor-handle.bottom {
}

/************
 * expander *
 ************/

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

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

expander arrow:hover {
    color: @theme_fg_color;
}

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

/****************
 * floating bar *
 ****************/

.floating-bar {
    border: 1px solid @border;
    border-radius: 3px;
    background-image: linear-gradient(to bottom,
                            @floating_bar_a,
                            @floating_bar_b);
}

.floating-bar.top {
    border-top-width: 0;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}

.floating-bar.right {
    border-right-width: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.floating-bar.bottom {
    border-bottom-width: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.floating-bar.left {
    border-left-width: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.floating-bar .button {
    border: 1px solid @border;
    background-color: transparent;
    background-image: none;
}

/************
 * flow box *
 ************/

flowbox flowboxchild {
    padding: 3px;
    border-radius: 3px;
}

/*********
 * frame *
 *********/

frame > border,
.frame {
    padding: 0;
    border: 1px solid @border;
    border-radius: 0;
}

viewport.frame {
    border-width: 0;
}

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

actionbar > revealer > box {
    padding: 4px;
    border-width: 1px 0 0;
}

/************
 * gtkstyle *
 ************/

.gtkstyle-fallback {
    background-color: @theme_bg_color;
    color: @theme_fg_color;
}

.gtkstyle-fallback:hover {
    background-color: shade(@theme_bg_color, 1.1);
    color: @theme_fg_color;
}

.gtkstyle-fallback:active {
    background-color: shade(@theme_bg_color, 0.9);
    color: @theme_fg_color;
}

.gtkstyle-fallback:disabled {
    background-color: shade(shade(@theme_bg_color, 0.95), 1.05);
    color: mix(@theme_fg_color, @theme_bg_color, 0.4);
}

.gtkstyle-fallback:selected {
    background-color: @theme_selected_bg_color;
    color: @theme_selected_fg_color;
}

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

window > .titlebar:not(headerbar),
window > .titlebar:not(headerbar):backdrop,
window.csd > .titlebar:not(headerbar),
window.csd > .titlebar:not(headerbar):backdrop {
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
}

headerbar,
.titlebar:not(headerbar) {
    min-height: 42px;
    padding: 0 7px;
    border-style: solid;
    border-width: 0 0 1px 0;
    border-radius: 0;
    border-color: @border;
    background-color: transparent;
    background-image: linear-gradient(to bottom,
                                      shade(@theme_bg_color, 1.08),
                                      @theme_bg_color 50%,
                                      shade(@theme_bg_color, 0.95));
    box-shadow: inset 0 2px alpha(white, 0.3),
                inset 0 1px alpha(white, 0.8);
}

headerbar:backdrop,
.titlebar:not(headerbar):backdrop {
    background-image: linear-gradient(to bottom,
                                      @theme_bg_color,
                                      @theme_bg_color 50%,
                                      shade(@theme_bg_color, 0.95));
    box-shadow: none;
}

/* Fix split headerbar */
separator:first-child + headerbar,
separator:first-child + headerbar:backdrop,
headerbar:first-child,
headerbar:first-child:backdrop {
    border-top-left-radius: 6px;
}

.maximized separator:first-child + headerbar,
.tiled separator:first-child + headerbar,
.maximized separator:first-child + headerbar:backdrop,
.tiled separator:first-child + headerbar:backdrop,
.maximized headerbar:first-child,
.tiled headerbar:first-child,
.maximized headerbar:first-child:backdrop,
.tiled headerbar:first-child:backdrop {
    border-radius: 0;
}

headerbar:last-child,
headerbar:last-child:backdrop {
    border-top-right-radius: 6px;
}

.maximized headerbar:last-child,
.tiled headerbar:last-child,
.maximized headerbar:last-child:backdrop,
.tiled headerbar:last-child:backdrop {
    border-radius: 0;
}

headerbar entry,
headerbar button,
headerbar separator {
    margin-top: 6px;
    margin-bottom: 6px;
}

/* Make sure the headerbars are rounded to match our window decorations */
.background .titlebar,
.background .titlebar:backdrop {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

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

.titlebar .title,
headerbar .title {
    color: shade(@theme_bg_color, 0.5);
    font-weight: bold;
    padding: 0 12px;
    text-shadow: 0 1px shade(@theme_bg_color, 1.3);
}

.titlebar .subtitle,
headerbar .subtitle {
    color: shade(@theme_bg_color, 0.5);
    font-size: smaller;
    padding: 0 12px;
}

.titlebar .title:backdrop,
.titlebar .subtitle:backdrop {
    color: shade(@theme_bg_color, 0.8);
    text-shadow: none;
}

.tiled .titlebar,
.maximized .titlebar,
.tiled .header-bar,
.maximized .header-bar {
    border-radius: 0;
}

.titlebar.default-decoration,
.csd .titlebar.default-decoration,
.titlebar.default-decoration:backdrop,
.csd .titlebar.default-decoration:backdrop {
    background-image: linear-gradient(to bottom,
                                      shade(@theme_bg_color, 1.08),
                                      @theme_bg_color);
    min-height: 28px;
    padding: 0 6px;
    border-bottom-width: 0;
}

/* Fix the height of titlebars in window manager decorations */
.titlebar.default-decoration button.titlebutton {
    padding-top: 0;
    padding-bottom: 0;
    min-width: 0;
    min-height: 0;
    margin: 0;
}

/* Workaround for header bars that are moved out of position in apps like
 * gnome-system-monitor in non gnome destkops */
window.background:not(.csd) headerbar {
    box-shadow: none;
    background-color: transparent;
    background-image: linear-gradient(to bottom,
                                      @toolbar_bg_a,
                                      @toolbar_bg_b);
}

window.background:not(.csd) headerbar:backdrop {
    background-color: transparent;
    background-image: linear-gradient(to bottom,
                                      @toolbar_bg_a,
                                      @toolbar_bg_b);
}

/************
 * iconview *
 ************/

iconview.cell {
    padding: 0;
}

iconview.cell:selected,
iconview.cell:selected:focus {
    border: 1px solid @border;
    border-radius: 3px;
    background-image: linear-gradient(to bottom,
                            @iconview_selected_a,
                            @iconview_selected_b);
}

/*******************
 * image and label *
 *******************/

.view.dim-label,
.dim-label {
    color: alpha(@theme_fg_color, 0.6);
}

.dim-label:selected,
.dim-label:selected:focus {
    color: alpha(@theme_selected_fg_color, 0.6);
}

/***********
 * infobar *
 ***********/

infobar {
    border: none;
}

infobar.info {
    background-color: @info_color;
}

infobar.question {
    background-color: @question_color;
}

infobar.warning {
    background-color: @warning_color;
}

infobar.error {
    background-color: @error_color;
}

infobar.info label,
infobar.info image,
infobar.question label,
infobar.question image,
infobar.warning label,
infobar.warning image,
infobar.error label,
infobar.error image {

    color: #ffffff;
}

infobar.info button label,
infobar.question button label,
infobar.warning button label,
infobor.error button label {
    color: @button_fg;
}

infobar.info button:disabled label,
infobar.question button:disabled label,
infobar.warning button:disabled label,
infobor.error button:disabled label {
    color: @insensitive_fg_color;
}

/*************
 * level bar *
 *************/

levelbar block {
    min-width: 34px;
    min-height: 3px;
}

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

levelbar trough {
    border: 1px solid @border;
    border-radius: 3px;
    padding: 3px;
    background-color: @theme_base_color;
}

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

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

levelbar block {
    border: 1px solid alpha(@theme_fg_color, 0.2);
    border-radius: 2px;
}

levelbar block:not(.empty) {
    border-color: @theme_selected_bg_color;
    background-color: @theme_selected_bg_color;
}

levelbar block.low {
    border-color: @warning_color;
    background-color: @warning_color;
}

levelbar block.high {
    border-color: @theme_selected_bg_color;
    background-color: @theme_selected_bg_color;
}

levelbar block.full {
    border-color: @success_color;
    background-color: @success_color;
}

levelbar block.empty {
    border-color: alpha(@theme_fg_color, 0.2);
    background-color: transparent;
}

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

*:link,
.button:link {
    color: #2a76c6;
}

*:link:visited,
.button:visited {
    color: #215d9c;
}

/**************
 * list boxes *
 **************/
list {
    background-color: @theme_base_color;
}

row.activatable:hover {
    background-color: shade(@theme_base_color, 0.95);
}

row:selected,
row:selected:hover {
    background-color: @theme_selected_bg_color;
    color: @theme_selected_fg_color;
}

row:selected label:disabled {
    color: mix(@theme_selected_fg_color, @theme_selected_bg_color, 0.3);
    text-shadow: none;
}

/*****************
 * miscellaneous *
 *****************/

*:drop(active):focus,
*:drop(active) {
    box-shadow: inset 0 0 0 1px @theme_selected_bg_color;
}

rubberband,
flowbox rubberband,
treeview.view rubberband,
.content-view rubberband,
.view.rubberband,
.rubberband {
    border: 1px solid @theme_selected_bg_color;
    border-radius: 0;
    background-color: alpha(@theme_selected_bg_color, 0.3);
}

/********
 * menu *
 ********/

.context-menu {
    font: initial;
}

menu,
.menu,
.context-menu {
    margin: 4px;
    padding: 0;
    border: 1px solid @border;
    border-radius: 0;
    background-color: @menu_bg;
}

/* remove some really ugly borders in composited environments */
.csd menu,
.csd .menu,
.csd .context-menu {
    border: none;
}

.menu.button {
    border: 1px solid @border;
    border-radius: 0;
    border-image: none;
    background-color: shade(@menu_bg, 0.9);
    background-image: none;
    color: @menu_fg;
}

.menu.button:hover {
    border: 1px solid @border;
    border-radius: 0;
    border-image: none;
    background-color: mix(shade(@menu_bg, 0.9), @theme_selected_bg_color, 0.4);
    background-image: none;
    color: @menu_fg;
}

.menu.button:disabled {
    border: 1px solid @border;
    border-radius: 0;
    border-image: none;
    background-color: @menu_bg;
    background-image: none;
    color: @insensitive_fg_color;
}

.popup decoration {
    border-radius: 0;
}

/***********
 * menubar *
 ***********/

menubar,
.menubar {
    -GtkWidget-window-dragging: true;
    border: none;
    background-color: @theme_bg_color;
}

/***************
 * menubaritem *
 ***************/

menubar > menuitem,
.menubar > menuitem {
    padding: 4px 6px;
    border: 1px solid transparent;
    text-shadow: 0 1px alpha(white, 0.4);
}

menubar > menuitem:hover,
.menubar > menuitem:hover {
    border-color: @border;
    border-radius: 3px 3px 0 0;
    background-color: transparent;
    background-image: linear-gradient(to bottom,
                            @theme_selected_bg_color,
                            shade(@theme_selected_bg_color, 0.85));
    color: @theme_selected_fg_color;
    text-shadow: none;
}

/************
 * menuitem *
 ************/

menu menuitem,
.menu menuitem,
.context-menu menuitem {
    min-height: 16px;
    min-width: 40px;
    padding: 4px;
    border: 1px solid transparent;
    text-shadow: none;
}

menu menuitem:hover,
.menu menuitem:hover,
.context-menu menuitem:hover {
    color: @theme_selected_fg_color;
    border-color: shade(@border, 0.9);
    background-image: linear-gradient(to bottom,
                                      @theme_selected_bg_color,
                                      shade(@theme_selected_bg_color, 0.85));
}

menu menuitem:disabled,
.menu menuitem:disabled,
.context-menu menuitem:disabled {
    color: mix(@menu_fg, @menu_bg, 0.6);;
}

menu menuitem arrow,
.menu menuitem arrow,
.context-menu menuitem arrow {
    min-height: 16px;
    min-width: 16px;
}

menu menuitem arrow:dir(ltr),
.menu menuitem arrow:dir(ltr),
.context-menu menuitem arrow:dir(ltr) {
    -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
    margin-left: 10px;
}

menu menuitem arrow:dir(rtl),
.menu menuitem arrow:dir(rtl),
.context-menu menuitem arrow:dir(rtl) {
    -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl');
    margin-right: 10px;
}

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

menuitem accelerator {
    color: alpha(currentcolor, 0.70);
}

menuitem check,
menuitem radio {
    min-height: 12px;
    min-width: 12px;
}

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

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

menu > arrow,
.menu > arrow,
.context-menu > arrow {
    min-height: 16px;
    min-width: 16px;
    padding: 2px;
    border-image: none;
    background-color: shade(@menu_bg, 0.9);
    background-image: none;
    color: @menu_fg;
}

menu > arrow.top,
.menu > arrow.top,
.context-menu > arrow.top {
    margin-top: -6px;
    border-bottom: 1px solid @border;
    -gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
}

menu > arrow.bottom,
.menu > arrow.bottom,
.context-menu > arrow.bottom {
    margin-bottom: -6px;
    border-top: 1px solid @border;
    -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
}

menu > arrow:hover,
.menu > arrow:hover,
.context-menu > arrow:hover {
    background-color: @menu_bg;
}

menu > arrow:disabled,
.menu > arrow:disabled,
.context-menu > arrow:disabled {
    color: @insensitive_fg_color;
}

/***************
 * modelbutton *
 ***************/

modelbutton.flat {
    min-height: 24px;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 3px;
}

modelbutton.flat:hover {
    background-color: @theme_selected_bg_color;
    color: @theme_selected_fg_color;
}

modelbutton.flat check:last-child,
modelbutton.flat radio:last-child {
    margin-left: 8px;
}

modelbutton.flat check:first-child,
modelbutton.flat radio:first-child {
    margin-right: 8px;
}

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

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

/************
 * notebook *
 ************/

notebook {
    padding: 0;
}

notebook.frame {
    border: 1px solid @border;
}

notebook.frame > header {
    margin: -1px;
}

notebook.frame > header.top > tabs {
    margin: 0px;
    margin-right: -2px;
}

notebook.frame > header.top {
    margin-bottom: 0;
    padding-left: 0;
    padding-right: 0;
}

notebook.frame > header.top:dir(rtl) {
    margin-bottom: 0;
    padding-left: 0px;
    padding-right: 2px;
}

notebook.frame > header.bottom {
    margin-top: 0;
    padding-left: 0;
    padding-right: 0;
}

notebook.frame > header.left {
    margin-right: 0;
    padding-top: 0;
    padding-bottom: 0;
}

notebook.frame > header.right {
    margin-left: 0;
    padding-top: 0;
    padding-bottom: 0;
}

notebook > stack:not(:only-child) { /* the :not(:only-child) is for "hidden" notebooks */
    background-color: @notebook_bg;
}

notebook > header {
    padding: 0px;
    background-color: @theme_bg_color;
}

notebook > header.top {
    box-shadow: inset 0 -1px @border;
    padding-bottom: 0;
}

notebook > header.bottom {
    box-shadow: inset 0 1px @border;
    padding-top: 0;
}

notebook > header.left {
    box-shadow: inset -1px 0 @border;
    padding-right: 0;
}

notebook > header.right {
    box-shadow: inset 1px 0 @border;
    padding-left: 0;
}

notebook > header.top > tabs > tab {
    padding: 2px 10px;
    min-width: 20px;
    min-height: 20px;
    margin-right: 2px;
    border: 1px solid @border;
    border-radius: 4px 4px 0 0;
    color: @theme_fg_color;
    background-color: transparent;
    background-image: linear-gradient(to bottom,
                                      @notebook_tab_bg_a,
                                      @notebook_tab_bg_b);
}

notebook > header.bottom > tabs > tab {
    padding: 2px 10px;
    min-width: 20px;
    min-height: 20px;
    margin-right: 2px;
    border: 1px solid @border;
    border-radius: 0 0 4px 4px;
    color: @theme_fg_color;
    background-color: transparent;
    background-image: linear-gradient(to top,
                                      @notebook_tab_bg_a,
                                      @notebook_tab_bg_b);
}

notebook > header.top > tabs > tab:dir(rtl),
notebook > header.bottom > tabs > tab:dir(rtl) {
    margin-right: 0;
    margin-left: 2px;
}

notebook > header.left > tabs > tab {
    padding: 2px 10px;
    min-width: 20px;
    min-height: 20px;
    margin-bottom: 2px;
    border: 1px solid @border;
    border-radius: 4px 0 0 4px;
    color: @theme_fg_color;
    background-color: transparent;
    background-image: linear-gradient(to bottom,
                                      @notebook_tab_bg_a,
                                      @notebook_tab_bg_b);
}

notebook > header.right > tabs > tab {
    padding: 2px 10px;
    min-width: 20px;
    min-height: 20px;
    margin-bottom: 2px;
    border: 1px solid @border;
    border-radius: 0 4px 4px 0;
    color: @theme_fg_color;
    background-color: transparent;
    background-image: linear-gradient(to bottom,
                                      @notebook_tab_bg_a,
                                      @notebook_tab_bg_b);
}

notebook > header.top > tabs > tab:checked {
    border-bottom: transparent;
}

notebook > header.bottom > tabs > tab:checked {
    border-top: transparent;
}

notebook > header.left > tabs > tab:checked {
    border-right: transparent;
}

notebook > header.right > tabs > tab:checked {
    border-left: transparent;
}

notebook > header > tabs> tab:checked {
    background-color: @notebook_bg;
    background-image: none;
}

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

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

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

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

/* TODO */
notebook > header > tabs > arrow {

}

notebook > header > tabs > arrow:hover {

}

notebook > header > tabs > arrow:active {

}

notebook > header > tabs > arrow:disabled {

}

notebook > header > tabs > tab button.flat,
notebook > header > tabs > tab button.sidebar-button {
    min-height: 22px;
    min-width: 16px;
    padding: 1px;
    border: 1px solid transparent;
    border-radius: 3px;
    border-image: none;
    background-color: transparent;
    background-image: none;
    color: shade(@theme_fg_color, 0.85);
    -gtk-icon-shadow: none;
    box-shadow: none;
}

notebook > header > tabs > tab button.flat:hover,
notebook > header > tabs > tab button.sidebar-button:hover {
    padding: 1px;
    border: 1px solid @border;
    border-image: none;
    background-color: transparent;
    background-image: none;
    box-shadow: none;
}

notebook > header > tabs > tab button.flat:active,
notebook > header > tabs > tab button.flat:active:hover,
notebook > header > tabs > tab button.sidebar-button:active,
notebook > header > tabs > tab button.sidebar-button:active:hover {
    padding: 1px;
    border: 1px solid @border;
    border-image: none;
    background-color: shade(@theme_bg_color, 0.85);
    background-image: none;
    box-shadow: none;
}

/* closable page */

paned.horizontal > notebook > header > tabs {
    margin-right: -2px;
}

paned.horizontal > notebook > header > tabs:dir(rtl) {
    margin-left: -2px;
    padding-right: 2px;
}

/******
* osd *
*******/

.background.osd {
    background-color: @osd_bg;
    color: @osd_fg;
}

GtkOverlay.osd {
    background-color: transparent;
}

.osd.trough,
.osd .trough {
    background-color: alpha(@osd_bg, 0.6);
}

.osd.progressbar,
.osd .progressbar {
    background-color: @osd_fg;
}

/******************
 * pane separator *
 ******************/

paned > separator {
    min-width: 1px;
    min-height: 1px;
    -gtk-icon-source: none;
    border-style: none;
    background-color: transparent;
    background-image: linear-gradient(to bottom, @border, @border);
    background-size: 1px 1px;
}

paned > separator.wide {
    min-width: 5px;
    min-height: 5px;
    margin: 0;
    padding: 0;
    background-color: transparent;
}

paned.horizontal > separator.wide {
    background-size: 2px 24px;
}

paned.vertical > separator.wide {
    background-size: 24px 2px;
}

paned.horizontal > separator {
    margin: 0 -3px 0 -3px;
    padding: 0 3px 0 3px;
    background-repeat: repeat-y;
    background-position: center;
}

paned.vertical > separator {
    margin: -3px 0 -3px 0;
    padding: 3px 0 3px 0;
    background-repeat: repeat-x;
    background-position: center;
}

/************
 * popovers *
 ************/

.popover,
popover.background {
    padding: 2px;
    border-radius: 5px;
    border: 1px solid @border;
    background-color: @menu_bg;
    box-shadow: 0 1px 3px 2px alpha(black, 0.2);
 }

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

/***************
 * progressbar *
 ***************/

progressbar {
    padding: 0;
    color: @theme_fg_color;
}

progressbar progress {
    border: 1px solid @progressbar_border;
    border-radius: 3px;
    background-image: linear-gradient(to bottom,
                                      @progressbar_a,
                                      @progressbar_b);
    box-shadow: 0 1px alpha(white, 0.15);
}

progressbar.vertical progress {
    background-image: linear-gradient(to right,
                                      @progressbar_a,
                                      @progressbar_b);
    box-shadow: 1px 0 alpha(white, 0.15);
}

progressbar trough {
    padding: 0;
    border: 1px solid @border;
    border-radius: 3px;
    background-image: linear-gradient(to bottom,
                                      @progressbar_trough_a,
                                      @progressbar_trough_b);
}

progressbar.vertical trough {
    background-image: linear-gradient(to right,
                                      @progressbar_trough_a,
                                      @progressbar_trough_b);
}

treeview.view.progressbar,
treeview.view.progressbar:selected {
    color: @theme_selected_fg_color;
    border: 1px solid @progressbar_border;
    border-radius: 3px;
    background-image: linear-gradient(to bottom,
                            @progressbar_a,
                            @progressbar_b);
    box-shadow: 0 1px alpha(white, 0.15);
}

treeview.view.trough,
treeview.view.trough:selected {
    color: @theme_fg_color;
    padding: 0;
    border: 1px solid @border;
    border-radius: 3px;
    background-image: linear-gradient(to bottom,
                            @progressbar_trough_a,
                            @progressbar_trough_b);
}

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

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

scale slider {
    min-height: 16px;
    min-width: 16px;
    margin: -7px;
}

scale slider {
    border: 1px solid @border;
    border-radius: 50%;
    background-image: linear-gradient(to bottom,
                                      shade(@button_bg_a, 1.1),
                                      shade(@button_bg_b, 1.1));
}

scale slider:disabled {
    border-color: shade(@border, 1.1);
    background-image: linear-gradient(to bottom,
                                      shade(@theme_bg_color, 1.05),
                                      @theme_bg_color);
}

scale.fine-tune slider {
    margin: -5px;
}

scale.fine-tune trough {
    border-radius: 5px;
}

scale trough {
    border: 1px solid @border;
    border-radius: 3px;
    background-color: shade(@theme_bg_color, 0.95);
    background-image: none;
    box-shadow: inset 1px 1px alpha(black, 0.1),
                      0 1px alpha(white, 0.5);
}

.primary-toolbar  scale trough,
headerbar  scale trough {
    background-color: shade(@theme_bg_color, 0.85);
}

scale.vertical trough {
    background-color: shade(@theme_bg_color, 0.95);
    background-image: none;
    box-shadow: inset 1px 1px alpha(black, 0.1),
                      1px 0 alpha(white, 0.5);
}

.primary-toolbar scale.vertical trough {
    background-color: shade(@theme_bg_color, 0.95);
    background-image: none;
}

scale highlight {
    border-radius: 3px;
    background-image: linear-gradient(to bottom,
                                      @scale_fill_a,
                                      @scale_fill_b);
    box-shadow: 0 1px alpha(white, 0.05);
}

scale.vertical highlight {
    background-image: linear-gradient(to right,
                                      @scale_fill_a,
                                      @scale_fill_b);
    box-shadow: 1px 0 alpha(white, 0.05);
}

/* TODO - scale fill used to show cached amount in video players */

scale:disabled trough,
scale:disabled highlight,
scale.vertical:disabled trough,
scale.vertical:disabled highlight {
    border-color: shade(@border, 1.1);
    background-color: shade(@theme_bg_color, 0.98);
    background-image: none;
    box-shadow: none;
}

.primary-toolbar scale:disabled trough,
.primary-toolbar scale:disabled highlight,
.primary-toolbar scale.vertical:disabled trough,
.primary-toolbar scale.vertical:disabled highlight {
    border-color: @border;
    background-color: shade(@theme_bg_color, 0.9);
    background-image: none;
    box-shadow: none;
}

scale marks {
    color: @border;
}

scale marks.bottom {
    margin-top: 4px;
    margin-bottom: -4px;
}

scale marks.top {
    margin-top: -4px;
    margin-bottom: 4px;
}

scale marks.left {
    margin-left: -4px;
    margin-right: 4px;
}

scale marks.right {
    margin-left: 4px;
    margin-right: -4px;
}

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

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

/*************
 * scrollbar *
 *************/

scrollbar {
    -GtkScrollbar-has-backward-stepper: 0;
    -GtkScrollbar-has-forward-stepper: 0;
}

scrollbar.vertical {
    border-style: solid;
    border-color: alpha(@border, 0.5);
    border-width: 0 0 0 1px;
    background-image: linear-gradient(to right,
                                      @theme_bg_color,
                                      @theme_base_color);
}

scrollbar.horizontal {
    border-style: solid;
    border-color: alpha(@border, 0.5);
    border-width: 1px 0 0 0;
    background-image: linear-gradient(to bottom,
                                      @theme_bg_color,
                                      @theme_base_color);
}

scrollbar.right {
    border-left: 1px solid alpha(@border, 0.5);;
}

scrollbar.left {
    border-right: 1px solid alpha(@border, 0.5);;
}

scrollbar.top {
    border-bottom: 1px solid alpha(@border, 0.5);;
}

scrollbar.bottom {
    border-top: 1px solid alpha(@border, 0.5);;
}

scrollbar slider {
    min-width: 10px;
    min-height: 10px;
    margin: -1px;
    margin-top: 2px;
    margin-bottom: 2px;
    border: 1px solid @border;
    border-radius: 8px;
    background-clip: padding-box;
    background-color: transparent;
    background-image: linear-gradient(to right,
                                      shade(@theme_bg_color, 1.12),
                                      shade(@theme_bg_color, 0.95));
    box-shadow: 1px 0 alpha(white, 0.5);
}

scrollbar.horizontal slider {
    margin: -1px;
    margin-left: 2px;
    margin-right: 2px;
    background-image: linear-gradient(to bottom,
                                      shade(@theme_bg_color, 1.12),
                                      shade(@theme_bg_color, 0.95));
}

scrollbar slider.fine-tune {
    min-width: 4px;
    min-height: 4px;
}

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

scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider {
    margin: 0;
    min-width: 4px;
    min-height: 4px;
    background-color: shade(@theme_bg_color, 0.6);
    background-image: none;
}

scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider {
    margin: 2px 0;
    min-height: 40px;
}

scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider {
    margin: 0 2px;
    min-width: 40px;
}

scrollbar.vertical slider {
    min-height: 40px;
}

scrollbar.horizontal slider {
    min-width: 40px;
}

scrollbar.vertical.fine-tune slider {
    min-width: 4px;
    margin-left: 3px;
    margin-right: 3px;
}

/* Adding support for scrollbar buttons so it's easier for users who really want
 *  them to enable them. */

scrollbar button {
    min-width: 10px;
    min-height: 10px;
    padding: 2px;
    border-radius: 0;
}

scrollbar.vertical button {
    padding-top: 4px;
    padding-bottom: 4px;
}

scrollbar.horizontal button {
    padding-left: 4px;
    padding-right: 4px;
}

scrollbar.vertical button.up {
    border-width: 0 0 1px 0;
    -gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
}

scrollbar.vertical button.down {
    border-width: 1px 0 0 0;
    -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
}

scrollbar.horizontal button.down {
    border-width: 0 0 0 1px;
    -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
}

scrollbar.horizontal button.up {
    border-width: 0 1px 0 0;
    -gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
}

scrollbar.overlay-indicator:not(.dragging):not(.hovering) button {
    color: transparent;
    border-color: transparent;
    border-image: none;
    background-color: transparent;
    background-image: none;
    -gtk-icon-source: none;
}

/*******************
* scrolled windows *
********************/

overshoot.top {
  background-image: -gtk-gradient(radial, center top, 0, center top, 0.6, from(alpha(@theme_selected_bg_color, 0.2)), to(alpha(@theme_selected_bg_color, 0)));
  background-size: 100% 60%;
  background-repeat: no-repeat;
  background-position: center top;
  background-color: transparent;
  border: none;
  box-shadow: none; }

overshoot.bottom {
  background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.6, from(alpha(@theme_selected_bg_color, 0.2)), to(alpha(@theme_selected_bg_color, 0)));
  background-size: 100% 60%;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-color: transparent;
  border: none;
  box-shadow: none; }

overshoot.left {
  background-image: -gtk-gradient(radial, left center, 0, left center, 0.6, from(alpha(@theme_selected_bg_color, 0.2)), to(alpha(@theme_selected_bg_color, 0)));
  background-size: 60% 100%;
  background-repeat: no-repeat;
  background-position: left center;
  background-color: transparent;
  border: none;
  box-shadow: none; }

overshoot.right {
  background-image: -gtk-gradient(radial, right center, 0, right center, 0.6, from(alpha(@theme_selected_bg_color, 0.2)), to(alpha(@theme_selected_bg_color, 0)));
  background-size: 60% 100%;
  background-repeat: no-repeat;
  background-position: right center;
  background-color: transparent;
  border: none;
  box-shadow: none; }

undershoot.top {
  background-color: transparent;
  background-image: linear-gradient(to left, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
  padding-top: 1px;
  background-size: 10px 1px;
  background-repeat: repeat-x;
  background-origin: content-box;
  background-position: center top; }

undershoot.bottom {
  background-color: transparent;
  background-image: linear-gradient(to left, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
  padding-bottom: 1px;
  background-size: 10px 1px;
  background-repeat: repeat-x;
  background-origin: content-box;
  background-position: center bottom; }

undershoot.left {
  background-color: transparent;
  background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
  padding-left: 1px;
  background-size: 1px 10px;
  background-repeat: repeat-y;
  background-origin: content-box;
  background-position: left center; }

undershoot.right {
  background-color: transparent;
  background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
  padding-right: 1px;
  background-size: 1px 10px;
  background-repeat: repeat-y;
  background-origin: content-box;
  background-position: right center; }

/*************
* separators *
**************/

separator {
    min-height: 0;
    min-width: 0;
    border: 1px solid transparent;
    border-top-color: alpha(black, 0.08);
    border-bottom-color: alpha(white, 0.35);
}

separator.vertical {
    border: 1px solid transparent;
    border-left-color: alpha(black, 0.08);
    border-right-color: alpha(white, 0.35);
}

GtkComboBox .separator {
    /* always disable separators */
    -GtkWidget-horizontal-separator: 0;
    -GtkWidget-vertical-separator: 0;
}

menu separator,
.csd menu separator,
.menu separator,
.csd .menu separator {
    border: none;
    background-color: alpha(black, 0.1);
}

.menuitem.separator,
GtkMenuButton .menuitem.separator {
    color: alpha(black, 0.08);
}

toolbar separator {
    border-color: transparent;
    border-left-color: alpha(black, 0.2);
    border-right-color: alpha(white, 0.3);
}

.button .separator,
.titlebar .separator {
    border-color: transparent;
}

/**************
 * search bar *
 **************/

searchbar {
    background-color: transparent;
    background-image: linear-gradient(to bottom,
                                      shade(@theme_bg_color, 0.85),
                                      shade(@theme_bg_color, 0.95));
    box-shadow: inset 0 1px alpha(black, 0.3),
                inset 0 -1px alpha(black, 0.2);
}

/***********
 * sidebar *
 ***********/

.sidebar {
    background-color: @theme_base_color;
    border-style: none;
}

.sidebar:dir(ltr),
.sidebar.left,
.sidebar.left:dir(rtl) {
    border-right: 1px solid @border;
    border-left-style: none;
}

.sidebar:dir(rtl),
.sidebar.right {
    border-left: 1px solid @border;
    border-right-style: none;
}

.sidebar list {
    background-color: @theme_base_color;
}

stacksidebar.sidebar:dir(ltr) list,
stacksidebar.sidebar.left list,
stacksidebar.sidebar.left:dir(rtl) list {
    border-right: 1px solid @border;
    border-left-style: none;
}

stacksidebar.sidebar:dir(rtl) list,
stacksidebar.sidebar.right list {
    border-left: 1px solid @border;
    border-right-style: none;
}

stacksidebar row {
    padding: 10px 4px;
}

stacksidebar row > label {
    padding-left: 6px;
    padding-right: 6px;
}

stacksidebar row.needs-attention {
    background-image: radial-gradient(circle closest-side at 5% 25%, @error_color 0%, @error_color 100%, transparent 100%);
    background-size: 70px;
    background-position: 4px;
    background-repeat: no-repeat;
}

stacksidebar row:selected.needs-attention {
    background-image: radial-gradient(circle closest-side at 5% 25%, @theme_selected_fg_color 0%, @theme_selected_fg_color 100%, transparent 100%);
    background-size: 70px;
    background-position: 4px;
    background-repeat: no-repeat;
}

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

placessidebar row {
    min-height: 30px;
    padding: 0;
}

placessidebar row > revealer {
    padding: 0 10px;
}

placessidebar row image.sidebar-icon:dir(ltr) {
    padding-right: 8px;
}

placessidebar row image.sidebar-icon:dir(rtl) {
    padding-left: 8px;
}

placessidebar row label.sidebar-label:dir(ltr) {
    padding-right: 2px;
}

placessidebar row label.sidebar-label:dir(rtl) {
    padding-left: 2px;
}

placessidebar row button.sidebar-button {
    min-width: 22px;
    min-height: 22px;
    margin-top: 2px;
    margin-bottom: 2px;
    padding: 0;
}

paned .sidebar,
paned .sidebar:dir(ltr),
paned .sidebar:dir(rtl),
paned .sidebar.left,
paned .sidebar.right,
paned .sidebar.left:dir(rtl) {
    border-style: none;
}

/********************
 * Shortcuts window *
 ********************/

.keycap {
    min-width: 16px;
    min-height: 20px;
    padding: 3px 6px 4px 6px;
    color: @theme_fg_color;
    background-color: shade(@theme_bg_color, 1.1);
    border: 1px solid @border;
    border-radius: 3px;
    box-shadow: inset 0 -2px 0 alpha(black, 0.1);
}

/**************
 * spinbutton *
 **************/

spinbutton button {
    padding: 2px 5px;
    border-width: 0;
    border-radius: 0;
    border-image: none;
    box-shadow: inset 0 1px alpha(white, 1.0),
                inset 2px 0 alpha(white, 0.5),
                inset 1px 0 alpha(black, 0.4),
                inset -1px 0 alpha(white, 0.5),
                inset 0 -1px alpha(black, 0.04);
}

spinbutton button:active {
    border-width: 0;
    border-radius: 0;
    border-image: none;
    box-shadow: inset 0 2px alpha(black, 0.05),
                inset 1px 0 alpha(black, 0.3),
                inset 0 -1px alpha(black, 0.04);
}

spinbutton button:disabled {
    border-width: 0;
    border-radius: 0;
    border-image: none;
    box-shadow: inset 1px 0 alpha(black, 0.2),
                inset -1px 0 alpha(white, 0.2),
                inset 0 1px alpha(white, 0.3);
}

spinbutton button.up {
    border-style: solid;
    border-width: 1px 1px 1px 0;
    border-radius: 0 3px 3px 0;
    border-image: none;
    border-color: @button_border;
}

spinbutton button.down {
    border-style: solid;
    border-width: 1px 0 1px 0;
    border-radius: 0;
    border-color: @button_border;
}

spinbutton entry {
    min-width: 28px;
    border-width: 1px 0 1px 1px;
    border-radius: 3px 0 0 3px;
}

spinbutton:disabled entry {
    border-width: 1px 0 1px 1px;
}

spinbutton.vertical button {
    border: 1px solid @border;
    border-image: none;
    box-shadow: none;
    border-color: @button_border;
}

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

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

spinbutton.vertical entry {
    border-style: solid;
    border-width: 1px;
    border-radius: 0;
    border-color: @border;
    border-image: none;
    box-shadow: 0 1px alpha(black, 0.1);
}

spinbutton.vertical button:disabled,
spinbutton.vertical entry:disabled {
    box-shadow: none;
    border-color: shade(@border, 1.1);
}

/***********
 * spinner *
 ***********/

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

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

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

spinner:checked:disabled {
    opacity: 0.5;
}

/*************
 * statusbar *
 *************/

statusbar {
    padding: 1px;
    color: @theme_fg_color;
}

/**********
 * switch *
 **********/

switch {
    font-weight: bold;
    font-size: smaller;
    min-width: 52px;
    min-height: 24px;
}

switch {
    color: @button_fg;
    text-shadow: 0 1px @button_text_shadow;
}

switch:checked {
    color: @theme_selected_fg_color;
    text-shadow: 1px 1px alpha(black, 0.2);
}

switch:disabled,
switch:disabled:checked {
    color: @insensitive_fg_color;
    text-shadow: none;
}

/*******************
 * symbolic images *
 *******************/

.image {
    color: @internal_element_color;
}

.image:hover {
    color: @internal_element_prelight;
}

.image:selected,
.image:selected:hover {
    color: @theme_selected_fg_color;
}

.view.image,
.view.image:hover {
}

/***********
 * toolbar *
 ***********/

toolbar {
    padding: 6px;
    border-style: none;
    background-color: @theme_bg_color;
}

.primary-toolbar,
.primary-toolbar.toolbar {
    -GtkWidget-window-dragging: true;
    padding: 6px;
    padding-top: 4px;
    padding-bottom: 5px;
    border-style: solid;
    border-width: 0 0 1px 0;
    border-color: @border;
    color: @theme_fg_color;
    text-shadow: 0 1px @button_text_shadow;
}

.primary-toolbar:disabled,
.primary-toolbar.toolbar:disabled,
.header-bar:disabled {
    text-shadow: none;
}

.primary-toolbar .entry.progressbar,
.primary-toolbar.toolbar .entry.progressbar {
}

toolbar.inline-toolbar {
    padding: 2px;
    border: 1px solid @border;
}

toolbar.inline-toolbar:last-child {
    border-top-width: 0;
    border-radius: 0 0 3px 3px;
}

toolbar.vertical.inline-toolbar:last-child {
    border-left-width: 0;
    border-radius: 0;
}

/***********
 * tooltip *
 ***********/

.tooltip.background,
tooltip.background {
    border: 1px solid @border;
    background-color: @theme_tooltip_bg_color;
    background-clip: padding-box;
}

.tooltip,
tooltip {
    padding: 3px;
    border-radius: 4px;
    box-shadow: none;
}

tooltip * {
    background-color: transparent;
    color: @theme_tooltip_fg_color;
}

/************
 * treeview *
 ************/

treeview.view {
    -GtkTreeView-horizontal-separator: 2;
    -GtkTreeView-vertical-separator: 0;
    -GtkTreeView-grid-line-width: 1;
    -GtkTreeView-grid-line-pattern: '';
    -GtkTreeView-tree-line-width: 1;
    -GtkTreeView-tree-line-pattern: '';
    -GtkTreeView-expander-size: 12;

    border-left-color: @border;
    border-top-color: @border;
    padding: 1px;
}

treeview.view:selected {
    border-style: solid;
    border-width: 1px 0 1px 0;
    border-radius: 0;
    border-color: shade(@border, 0.9);
    background-color: transparent;
    background-image: linear-gradient(to bottom,
                                      @theme_selected_bg_color,
                                      shade(@theme_selected_bg_color, 0.85));
    color: @theme_selected_fg_color;
}

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

treeview.view:drop(active) {
    border-style: solid none;
    border-width: 1px;
    border-color: @theme_selected_bg_color;
}

treeview.view:drop(active).after {
    border-top-style: none;
}

treeview.view:drop(active).before {
    border-bottom-style: none;
}

/************
 * viewport *
 ************/

viewport {
    background-color: transparent;
}

.view:selected,
iconview:selected,
.view:selected:focus,
iconview:selected:focus,
.view text:selected,
iconview text:selected,
textview text:selected,
.view text:selected:focus,
iconview text:selected:focus,
textview text:selected:focus,
.view text selection:focus,
iconview text selection:focus,
.view text selection,
iconview text selection,
textview text selection:focus,
textview text selection,
entry selection:focus,
entry selection {
    background-color: @theme_selected_bg_color;
}

flowbox flowboxchild:selected,
flowbox flowboxchild:selected:focus,
row:selected label,
label:selected,
label selection,
.view:selected,
iconview:selected,
.view:selected:focus,
iconview:selected:focus,
.view text:selected,
iconview text:selected,
textview text:selected,
.view text:selected:focus,
iconview text:selected:focus,
textview text:selected:focus,
.view text selection:focus,
iconview text selection:focus,
.view text selection,
iconview text selection,
textview text selection:focus,
textview text selection,
entry selection:focus,
entry selection {
    color: @theme_selected_fg_color;
    background-color: @theme_selected_bg_color;
}

label:disabled:selected,
.view:disabled:selected,
iconview:disabled:selected,
iconview:disabled:selected:focus,
.view text:disabled:selected,
iconview text:disabled:selected,
textview text:disabled:selected,
iconview text:disabled:selected:focus,
textview text:disabled:selected:focus,
iconview text selection:disabled:focus,
.view text selection:disabled,
iconview text selection:disabled,
textview text selection:disabled,
label:disabled selection,
entry selection:disabled {
    color: @insensitive_fg_color;
}

.view,
.view text,
iconview,
iconview text,
textview text {
    background-color: @theme_base_color;
    color: @theme_text_color;
}

.view:disabled,
textview:disabled {
    background-color: shade(@theme_base_color, 0.95);
}