/***********
 * Widgets *
 **********/

/*
   Contributor notes:
   Please use two space indentions.
   Stack all related and child selectors and selector states into a logical hierarchy to a readable degree.
*/

/* default */
* {
  -GtkHTML-link-color: @link_color;
  -GtkIMHtml-hyperlink-color: @link_color;
  -GtkMenu-horizontal-offset: 0px;
  -GtkScrollbar-has-backward-stepper: true;
  -GtkScrollbar-has-forward-stepper: true;
  -GtkScrolledWindow-scrollbar-spacing: 0;
  -GtkTextView-error-underline-color: @error_color;
  -GtkToolButton-icon-spacing: 6;
  -GtkToolItemGroup-expander-size: 8;
  -GtkTreeView-expander-size: 16;
  -GtkWindow-resize-grip-default: true;
  -GtkWindow-resize-grip-height: 16;
  -GtkWindow-resize-grip-width: 16;
  -WnckTasklist-fade-overlay-rect: 0;
  -GtkTreeView-horizontal-separator: 1;
  -GtkTreeView-grid-line-width: 1;
  -GtkTreeView-grid-line-pattern: '';
  -GtkTreeView-tree-line-width: 1;
  -GtkTreeView-tree-line-pattern: '';
  background-clip: padding-box;
  outline-width: 1px;
  outline-offset: 0px;
  outline-color: @selected_inactive_bg_color;
  outline-style: solid; }

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

iconview:selected,
/*iconview in nautilus breaks without this, but with it radio and check buttons background break in lists... */
:not(check):not(radio).view:selected, :selected, selection {
  background-color: @theme_selected_bg_color;
  color: @theme_selected_fg_color; }

:disabled, :disabled:disabled {
  color: @disabled_font;
  text-shadow: 1px 1px 0 @disabled_font_shadow;
  -gtk-icon-shadow: 1px 1px @border_bright;
  -gtk-icon-effect: dim; }

/* There appears to be a bug(?) in gtk treeviews on :focus with outlines that will cause a momentary displacement of the UI. Keep the treeview exclusion! */
:focus:not(treeview):not(view):not(checkbutton):not(radiobutton) {
  outline: 1px dotted @border_dark;
  -gtk-outline-radius: 0px;
  outline-offset: -4px; }

.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.5); }
  .gtkstyle-fallback:selected {
    background-color: @window_title_bg_color;
    color: @window_title_text_color; }

image,
image:disabled,
label,
label:disabled,
box,
box:disabled {
  background-color: transparent;
  min-width: 0px;
  min-height: 0px; }

/*Disabled below since it was setting a grey background on MATE desktops. (Affects Caja)*/
/*
grid,
grid:disabled  {
  background-color: @bg_color; }*/

stepper,
.stepper {
  min-width: 16px;
  min-height: 16px;
  margin: 0px; }

slider,
.slider {
  min-width: 10px;
  background-color: @bg_color;}

border.flat {
  border-style: none;
  box-shadow: none; }

/****************
 * drawing area *
 ****************/

/* FINDME */
GtkDrawingArea {
  background-color: @theme_base_color; }

GtkDrawingArea:disabled {
  background-color: shade(@theme_base_color, 0.9); }


/***********
 * gtkhtml *
 ***********/

/* FINDME */
GtkHTML {
  background-color: @theme_base_color;
  color: @theme_text_color; }

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

calendar {
  padding: 2px; }

/*Calendar content*/
calendar.view {
  padding: 2px;
  background-color: @bg_bright;
  border-style: solid;
  border-width: 2px;
  border-image: url("buttons/combobox_button_normal.png");
  border-image-slice: 2 2 2 2; }

/* Month and year */
calendar.header {
  border-style: solid;
  border-width: 1px;
  border-color: @border_color @border_dark @border_dark @border_color;
  box-shadow: inset 1px 1px @border_bright, inset -1px -1px @border_shade;
  border-radius: 0px;
  background-color: @bg_color; }

/* Calendar week, day label */
calendar.highlight {
  background-color: @bg_shade;
  color: @bg_color;
  font-weight: bold; }

/* day selected */
calendar:selected {
  background-color: @selected_bg_color; }


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

expander arrow {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 10px;
  min-height: 16px;
  min-width: 16px;
  -gtk-icon-source: none; }
  expander arrow {
    background-image: url("assets/arrow-right.png"); }
  expander arrow:hover {
    background-image: url("assets/arrow-right-selected.png"); }
  expander arrow:checked {
    background-image: url("assets/arrow-down.png"); }
  expander arrow:checked:hover {
    background-image: url("assets/arrow-down-selected.png"); }

treeview.view.expander {
  -gtk-icon-palette: default;
  -gtk-icon-source: -gtk-icontheme('pane-show-symbolic'); }
  treeview.view.expander:selected {
    color: @selected_fg_color;
    -gtk-icon-source: -gtk-icontheme('pane-show-symbolic'); }
  treeview.view.expander:checked {
    -gtk-icon-source: -gtk-icontheme('pane-hide-symbolic'); }
  treeview.view.expander:checked:selected {
    color: @selected_fg_color;
    -gtk-icon-source: -gtk-icontheme('pane-hide-symbolic'); }

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

iconview.view.cell {
  border: 0px solid @border_dark;
  border-radius: 0px; }

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

infobar {
  padding:2px;
  border: 1px solid @border_dark;
  border-radius: 1px; }

/* The Info bar uses the colors and button layout from clippy! */

.info {
  background-color: @info_bg_color;
  color: @info_fg_color; }

.warning {
  background-color:  @warning_bg_color;
  color: @warning_fg_color; }

.question {
  background-color:  @question_bg_color;
  color: @question_fg_color; }

.error {
  background-color:  @error_bg_color;
  color: @error_fg_color; }

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

/* FINDME */
.image {
  color: alpha(currentColor, 0.5); }

.image:hover {
  color: alpha(currentColor, 0.9); }

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

.view.image,
.view.image:hover {
  color: alpha(currentColor, 0.9); }

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

/*******************
 * slider / switch *
 *******************/

switch {
  color: @text_color; }

media_playpause {
  background-color: @bg_color; }

/****************
 * stacksidebar *
 ****************/

stacksidebar separator {
  padding: 0px;
  margin: 0px; }

stacksidebar list {
  margin: 0px;
  background-color: @bg_color; }

stacksidebar.sidebar list{
  margin: 0px; }

stacksidebar list row {
  padding: 3px;
  margin: 0px; }

stacksidebar list row label {
  padding: 3px; }

stacksidebar list row:selected,
stacksidebar list row:selected:focus,
stacksidebar list row:selected:hover {
  outline: 1px dotted @border_dark;
  -gtk-outline-radius: 0px;
  outline-offset: -6px; }

/***********
 * stack *
 ***********/

/* Some applications will use stacks in non-conventional ways. This should prevent theming of .view in gtk-viewports.css from affecting stack views. */
stack.view {
  background-color: @bg_color; }

stack overlay box box scrolledwindow viewport list row {
  border-bottom: 1px solid @border_shade; }

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

.sidebar {
  background-color: @bg_color;
  -gtk-icon-style: regular; }
  .sidebar viewport.frame {
    padding: 0px;
    border: 2px solid @border_dark;
    border-image: url("assets/frame_inset.png");
    border-image-slice: 2 2 2 2;
    border-radius: 0px;
    background-color: @theme_bg_color;
    box-shadow: none; }
  .sidebar list {
    color: @selected_fg_color;
    padding: 1px;
    background-color: @bg_shade; }
  .sidebar viewport list row {
    padding: 0px; }
    .sidebar viewport list row:selected {
      background-color: transparent;
      outline: 1px dotted @border_bright;
      outline-offset: -4px;
      box-shadow: inset 1px 1px @border_shade_dark, inset -1px -1px @border_light; }
  .sidebar.view,
  .sidebar .view {
    background-color: @bg_bright;
    color: @text_color;
    box-shadow: none;}
    .sidebar {
      background-color: @bg_color;
      color: @text_color;}

.sidebar-item {
  padding: 10px 4px; }
  .sidebar-item > Gtklabel {
    padding-left: 6px;
    padding-right: 6px; }
  .sidebar-item.needs-attention > Gtklabel {
    background-size: 6px 6px, 0 0; }

.sidebar-button.button.image-button {
  padding: 3px;
  border-radius: 0;
  box-shadow: 0px 0px 0px alpha(@dark_shadow,0); }

.sidebar-button.button:not(:hover):not(:active) > GtkImage {
  opacity: 0.5; }

.sidebar-item {
  padding: 5px; }

.sidebar-item.needs-attention > GtkLabel {
  background-size: 6px 6px, 0 0; }

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

switch {
  background-color: @base_color; }
  switch slider {
    margin: 1px;
    min-width: 18px;
    min-height: 12px; }

/***************
 * Colorswatch *
 ***************/

colorswatch {
  background-color: transparent;
  background-clip: border-box;
  padding: 2px; }

colorswatch:selected overlay {
  background-color: transparent; }

colorswatch:selected {
  background-color: transparent; }

/************************
 * overshoot undershoot *
 ************************/

/* get rid of these frekin overshoots, this isen't a phone! */
overshoot, undershoot {
  background-color: transparent; }

/************
 * Box Link *
 ************/
 
box label link {
  color: @link_color;
  text-shadow: 1px 1px @selected_inactive_bg_color; }
  box label link:hover {
    text-shadow: 1px 1px @link_color_shadow; }

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

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

.osd .trough {
  background-color: @osd_trough_bg;}

overlay.osd {
  background-color: transparent; }

overlay toolbar.osd {
  border-bottom: none;
  box-shadow: none; }

overlay frame {
  border: none;
  box-shadow: none; }

/**************
 * header-bar *
 **************/

headerbar .title {
  font-weight: bold; }

headerbar .subtitle {
  font-size: smaller; }

/**************
 * rubberband *
 **************/

.rubberband,
rubberband,
.view .rubberband,
flowbox rubberband,
treeview.view rubberband,
.content-view rubberband {
  border: 1px dotted @border_color;
  background: rgba(0,0,50.2,0.5);
  border-radius: 0px; }

/* Misc stuff */

flowboxchild {
  border: 1px solid transparent;
  box-shadow: none;
  padding: 4px; }
  flowbox checkbutton:checked {
    background-color: @bg_shade; }

textview text,
grid viewport box box textview {
  background-color: @bg_bright; }

/* dialog-vbox */

.dialog-vbox {
  -gtk-icon-style: regular; }
.dialog-vbox flowbox flowboxchild:focus {
  outline-color: @selected_fg_color; }

/*.dialog-vbox > grid {
  border: 2px solid @border_dark;
  border-image: url("assets/frame_inset.png");
  border-image-slice: 2 2 2 2;
  border-radius: 0px;
  box-shadow: none; }*/

/* Spinner */
@keyframes spin {
  0% { -gtk-icon-source: url("assets/hglass_f1.png"); }
  5% { -gtk-icon-source: url("assets/hglass_f2.png"); }
  10% { -gtk-icon-source: url("assets/hglass_f0.png"); }
  15% { -gtk-icon-source: url("assets/hglass_f2.png"); }
  20% { -gtk-icon-source: url("assets/hglass_f0.png"); }
  25% { -gtk-icon-source: url("assets/hglass_f2.png"); }
  30% { -gtk-icon-source: url("assets/hglass_f0.png"); }
  35% { -gtk-icon-source: url("assets/hglass_f2.png"); }
  40% { -gtk-icon-source: url("assets/hglass_f3.png"); }
  45% { -gtk-icon-source: url("assets/hglass_f4.png"); }
  50% { -gtk-icon-source: url("assets/hglass_f5.png"); }
  55% { -gtk-icon-source: url("assets/hglass_f6.png"); }
  60% { -gtk-icon-source: url("assets/hglass_f7.png"); }
  65% { -gtk-icon-source: url("assets/hglass_f8.png"); }
  70% { -gtk-icon-source: url("assets/hglass_f9.png"); }
  75% { -gtk-icon-source: url("assets/hglass_f10.png"); }
  80% { -gtk-icon-source: url("assets/hglass_f11.png"); }
  85% { -gtk-icon-source: url("assets/hglass_f12.png"); }
  90% { -gtk-icon-source: url("assets/hglass_f13.png"); }
  95% { -gtk-icon-source: url("assets/hglass_f14.png"); }
  100% { -gtk-icon-source: url("assets/hglass_f15.png"); }
  }

spinner {
  min-width: 24px;
  min-height: 24px;
  background: none;
  opacity: 0;
  -gtk-icon-source: url("assets/hglass_f1.png"); }
  spinner:backdrop {
    color: @bg_color; }
  spinner:checked {
    opacity: 1;
    animation: spin 2s steps(20) infinite; }
  spinner:checked:disabled {
    opacity: 0.5;
    -gtk-icon-shadow: none; }