//
// This is the RIGHT PLACE to edit the stylesheet
//


// /***********
//  * Globals *
//  ***********/

* {
  transition-timing-function : cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 0.2s;
}

$font-family: Roboto, Sans-Serif;

stage {
  @include fontscaling($ref_size);
  color: $fg_color;
  font-family: $font-family;
  font-weight: 400;
}

.label-shadow {
  color: transparent;
}


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

%button {
  @include button(flat-normal);
  min-height: 2em;
  padding: 7px 16px 8px;
  border-width: 0;
  font-weight: 500;
  &:focus { @include button(flat-focus); }
  &:hover { @include button(flat-hover); }
  &:active { @include button(flat-active); }
  &:insensitive { @include button(flat-insensitive); }

  &,
  &:focus,
  &:hover,
  &:hover:focus,
  &:active,
  &:active:focus,
  &:insensitive { border-radius: 2px; }
}

%osd_button {
  @include button(osd-normal);
  min-height: 2.5em;
  padding: 9px 16px 10px;
  border-radius: 2px;
  &:focus { @include button(osd-focus); }
  &:hover { @include button(osd-hover); }
  &:active { @include button(osd-active); }
  &:insensitive { @include button(osd-insensitive); }
}


// /***********
//  * Entries *
//  ***********/

%entry {
  @include entry(normal);
  min-height: 1.2em;
  padding: 7px 8px 8px;
  border-radius: 0;
  border-width: 0;
  color: $fg_color;
  caret-size: 1px;
  transition: none;
  selection-background-color: $selected_bg_color;
  selected-color: $selected_fg_color;
  &:focus,
  &:focus:hover { @include entry(focus); }
  &:hover { @include entry(hover); }
  &:insensitive { @include entry(insensitive); }

  &,
  &:focus,
  &:hover,
  &:insensitive { // tweak fake background colours
    background-color: $menuentry_hidden_fill_color;
  }

  StIcon.capslock-warning {
    icon-size: 16px;
    padding: 0 2px;
    warning-color: $warning_color;
  }
}

%osd_entry {
  @include entry(osd-normal);
  min-height: 1.2em;
  padding: 7px 8px 8px;
  border-radius: 0;
  border-width: 0;
  color: $osd_fg_color;
  caret-size: 1px;
  caret-color: $osd_fg_color;
  selection-background-color: $selected_bg_color;
  selected-color: $selected_fg_color;
  &:hover { @include entry(osd-hover); }
  &:focus { @include entry(osd-focus); }
  &:insensitive { @include entry(osd-insensitive); }
}


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

StScrollView {
  &.vfade { -st-vfade-offset: 0; }
  &.hfade { -st-hfade-offset: 0; }
}

StScrollBar {
  padding: 0;

  StScrollView & {
    min-width: 0.45em;
    min-height: 0.45em;
  }

  StBin#trough {
    margin: 0;
    border-radius: 0;
    background-color: $base_color;
  }

  StButton#vhandle, StButton#hhandle {
    margin: 0;
    border-radius: 0;
    background-color: shellopacity($fg_color, 0.54 * 0.55);
    &:hover { background-color: shellopacity($fg_color, 0.87 * 0.55); }
    &:active { background-color: shellopacity($fg_color, 1); }
  }
}


// /*************
//  * Separator *
//  *************/

.separator {
  height: 1px; // not really the whole box
  margin: 0;
  padding: 0;
  border-color: $borders_color;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  background-color: transparent;
}


// /**********
//  * Slider *
//  **********/

.popup-slider-menu-item,
.slider {
  height: 16px;
  min-width: 15em;
  border: 0 solid transparent;
  border-right-width: 3px;
  border-left-width: 3px;
  color: $accent_color;
  -slider-height: 2px;
  -slider-background-color: $outline_fill_color; // background of the trough
  -slider-border-color: transparent; // trough border color
  -slider-active-background-color: $accent_color; // active trough fill
  -slider-active-border-color: transparent; // active trough border
  -slider-border-width: 0;
  -slider-handle-radius: 8px;
}


// /***************
//  * Check Boxes *
//  ***************/

.check-box {
  CinnamonGenericContainer {
    spacing: 0.2em;
    min-height: 30px;
    padding-top: 2px;
  }

  StLabel { font-weight: 500; }

  StBin {
    width: 16px;
    height: 16px;
    background-image: url("assets/checkbox/checkbox-unchecked.svg");
  }

  &:focus StBin {
  }

  &:checked StBin {
    background-image: url("assets/checkbox/checkbox-checked.svg");
  }

  &:focus:checked StBin {
  }
}


// /*****************
//  * Radio Buttons *
//  *****************/

.radiobutton {
  CinnamonGenericContainer {
    height: 26px;
    spacing: 0.2em;
    padding-top: 2px;
  }

  StLabel {
    @include fontscaling($ref_size * 0.9);
    padding-top: 4px;
  }

  StBin {
    width: 16px;
    height: 16px;
    background-image: url("assets/checkbox/radiobutton-unchecked.svg");
  }

  &:focus StBin {
  }

  &:checked StBin {
    background-image: url("assets/checkbox/radiobutton-checked.svg");
  }

  &:focus:checked StBin {
  }
}


// /************
//  * Switches *
//  ************/

.toggle-switch {
  width: 40px;
  height: 20px;
  background-size: contain;

  &-us, &-intl {
    background-image: url("assets/switch/switch-off.svg");

    &:checked { background-image: url("assets/switch/switch-on.svg"); }
  }
}


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

.cinnamon-link {
  border-radius: 2px;
  color: $link_label_color;
  text-decoration: underline;
  &:hover {
    color: $link_label_color;
    background-color: shellopacity($link_label_color, 0.12);
  }
  &:active {
    color: $link_label_color;
    background-color: shellopacity($link_label_color, 0.25);
  }
}


// /***********
//  * ToolTip *
//  ***********/

#Tooltip {
  @include fontscaling($ref_size * 1.0);
  padding: 7px 8px 8px;
  border-radius: 2px;
  background-color: shellopacity($osd_bg_color, 0.9);
  color: $osd_fg_color;
  box-shadow: $z-depth-2;
  font-weight: 400;
  text-align: center;
}


// /******************
//  * Popovers/Menus *
//  ******************/

// .popup-menu-boxpointer and .popup-menu are kept for compatibility
// with cinnamon version under 3.2. Use .menu in version 3.2 and above

.menu {
  padding: 0;
  background-color: $secondary_base_color;
  color: $secondary_fg_color;
}

.popup-menu,
.menu {
  min-width: 0;
  padding: 0;
  border-image: url("assets/menu/menu.svg") 9 9 9 9;
  color: $secondary_fg_color;

  &-arrow { icon-size: 16px; }

  .popup-sub-menu {
    min-width: 0;
    // 8 8 2 2 is the experimental values
    border-image: url("assets/menu/submenu.svg") 8 8 2 2;
    background-gradient-direction: none;
    box-shadow: $empty_shadow;

    StScrollBar {
      padding: 4px;

      StBin#trough,
      StBin#vhandle { border-width: 0; }
    }
  }

  .popup-menu-content {
    // embed parent border-image region as asymmetrical padding
    padding: 0.3em * 2 2px 0.33em * 2;
  }

  .popup-menu-item {  // FIXME: do not set min-width affected to fav-box
    padding: 0.4em 1.75em;
    spacing: 1em;
    border-width: 0 1px;
    color: $secondary_fg_color;
    &:active {
      border-image: url("assets/menu/menu-hover.svg") 9 9 0 0;
      color: $fg_color;
      background-color: transparent;
    }
    &:insensitive {
      color: $insensitive_fg_color;
      background: none;
    }

    StLabel { max-width: 45em; } // set horizontal limit
  }

  // all icons and other graphical elements
  .popup-inactive-menu-item {
    color: $secondary_fg_color;
    &:insensitive { color: $insensitive_fg_color; }
  }

  &-icon { icon-size: 16px; }
}

.popup {
  &-menu-boxpointer {
    -arrow-border-radius: 0;
    -arrow-background-color: transparent;
    -arrow-border-width: 0;
    -arrow-border-color: transparent;
    -arrow-base: 0;
    -arrow-rise: 0;
    -arrow-box-shadow: $empty_shadow; // dreaming. bug #689995
    margin: 0.4em 0.5em 0.5em;
    border-radius: 2px;
    border-top: 1px solid $base_color;
    background-color: $secondary_base_color;
    box-shadow: $z-depth-3;
  }

  &-combo-menu {
    padding: 1em;
    border: 1px solid $borders_color;
    border-radius: 2px;
    color: $osd_fg_color;
    background-color: shellopacity($osd_bg_color, 0.9);
  }

  &-image-menu-item {
  }

  &-combobox-item { spacing: 1em; }

  &-separator-menu-item {
    height: 1px; // not really the whole box
    margin: 0;
    padding: 0;
    border-color: $borders_color;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    background-color: transparent;
    // cinnamon always looked for these properties?
    // meaningless, useless dummy gradients
    -gradient-start: transparent;
    -gradient-end: transparent;
  }

  &-alternating-menu-item:alternate { font-weight: 500; }

  &-device-menu-item { spacing: 0.5em; }

  &-subtitle-menu-item { font-weight: 500; }
}

.nm-menu-item-icons { spacing: 0.5em; }


// /*********
//  * Panel *
//  *********/

$icon_size: 16px;

#panel {
  @include fontscaling($ref_size * 1.0);
  height: 28px;
  width: 32px; // setting under 32px causes blurred window-list icons
  color: $osd_fg_color;
  background-color: $panel_bg_color;
  font-weight: 700;

  &:highlight { background-color: $accent_fill_color; }
}

#panel,
.panel {
  &Left {
    spacing: 4px;

    &:dnd {
      background-gradient-direction: vertical;
      background-gradient-start: shellopacity($error_color, 0.4);
      background-gradient-end: shellopacity($error_color, 0.4);
    }
    &:ltr { padding-right: 4px; }
    &:rtl { padding-left: 4px; }

    &.vertical {
      padding: 0;
      spacing: 0;
    }
  }

  &Right {
    &:dnd {
      background-gradient-direction: vertical;
      background-gradient-start: shellopacity($link_color, 0.4);
      background-gradient-end: shellopacity($link_color, 0.4);
    }
    &:ltr {
      padding-left: 4px;
      spacing: 0;
    }
    &:rtl {
      padding-right: 4px;
      spacing: 0;
    }

    &.vertical {
      padding: 0;
      spacing: 0;
    }
  }

  &Center {
    spacing: 4px;

    &:dnd {
      background-gradient-direction: vertical;
      background-gradient-start: shellopacity($success_color, 0.4);
      background-gradient-end: shellopacity($success_color, 0.4);
    }

    &.vertical {
      padding: 0;
      spacing: 0;
    }
  }
}

.panel {
  padding: 0;

  &-dummy {
    // placeholder fill-area for 'Move Panels'
    background-color: shellopacity($panel_bg_color, 0.4);

    &:entered { background-color: $accent_fill_color; }
  }

  &-status-button {
    height: 22px;
    -natural-hpadding: 3px;
    -minimum-hpadding: 3px;
    border-width: 0;
    font-weight: 700;
    color: $osd_fg_color;
    &:hover { color: $selected_fg_color; }
  }

  &-button {
    -natural-hpadding: 6px;
    -minimum-hpadding: 3px;
    color: $osd_fg_color;
    font-weight: 700;
    transition-duration: 0.2s;
    &:hover,
    &:active {
      color: $selected_fg_color;
      background-color: $hidden_fill_color;
    }
  }

  &-top {
    .panel-button,
    .panel-status-button {
      &:hover { box-shadow: inset 0 2px 0 $osd_outline_fill_color; }
      &:active { box-shadow: inset 0 2px 0 $osd_indicator_color; }
    }
  }

  &-bottom {
    .panel-button,
    .panel-status-button {
      &:hover { box-shadow: inset 0 -2px 0 $osd_outline_fill_color; }
      &:active { box-shadow: inset 0 -2px 0 $osd_indicator_color; }
    }
  }

  &-left {
    .panel-button,
    .panel-status-button {
      -natural-hpadding: 0;
      -minimum-hpadding: 0;
      -natural-vpadding: 2px;
      -minimum-vpadding: 2px;
      &:hover { box-shadow: inset 2px 0 0 $osd_outline_fill_color; }
      &:active { box-shadow: inset 2px 0 0 $osd_indicator_color; }
    }
  }

  &-right {
    .panel-button,
    .panel-status-button {
      -natural-hpadding: 0;
      -minimum-hpadding: 0;
      -natural-vpadding: 2px;
      -minimum-vpadding: 2px;
      &:hover { box-shadow: inset -2px 0 0 $osd_outline_fill_color; }
      &:active { box-shadow: inset -2px 0 0 $osd_indicator_color; }
    }
  }

  StIcon { icon-size: $icon_size; }

  &-corner {
    &,
    &:active,
    &:overview,
    &:focus {
      -panel-corner-radius: 0;
      -panel-corner-background-color: $panel_bg_color;
      -panel-corner-inner-border-width: 0;
      -panel-corner-inner-border-color: transparent;
      -panel-corner-outer-border-width: 0;
      -panel-corner-outer-border-color: transparent;
    }
  }

  // &-menu { -boxpointer-gap: 4px }
}

.system-status-icon {
  icon-size: $icon_size;
  margin: 0;
  spacing: 0;
  padding-left: 0;
  padding-right: 0;

  &.warning { color: $warning_color; }

  &.error { color: $error_color; }
}


// /************
//  * Overview *
//  ************/

#overview { spacing: 12px; }

.window-caption {
  -cinnamon-caption-spacing: 12px;
  spacing: 25px;
  padding: 7px 8px 8px;
  border-radius: 2px;
  color: $osd_fg_color;
  background-color: shellopacity($osd_bg_color, 0.9);
  box-shadow: $z-depth-1;

  // FIXME: Cinnamon does not have 'window-clone-border'
  // and the name 'selected' looks incorrect, should be 'focused' instead
  &#selected {
    spacing: 25px;
    color: $selected_fg_color;
    background-color: $osd_indicator_color;
    box-shadow: $z-depth-2;
  }
}

$ws_thumb_spacing: 32px;

.workspace {
  &-controls { visible-height: $ws_thumb_spacing; }

  &-thumbnails {
    spacing: $ws_thumb_spacing;

    &-background,
    &-background:rtl { padding: 8px; }
  }

  &-thumbnail-indicator {
    outline: 0 none transparent;
    border: 2px solid $osd_indicator_color;
  }

  &-add-button {
    height: 200px;
    width: 35px;
    background-image: url("assets/misc/add-workspace.svg");
    transition-duration: 0.2s;
    &:hover {
      background-image: url("assets/misc/add-workspace-hover.svg");
      transition-duration: 0.2s;
    }
    &:active {
      background-image: url("assets/misc/add-workspace-active.svg");
      transition-duration: 0.2s;
    }
  }

  &-overview-background-shade { background-color: rgba(0, 0, 0, 0.54); }
}

.workspace-close-button,
.window-close {
  height: 36px;
  width: 36px;
  -cinnamon-close-overlap: 24px;
  background-image: url("assets/misc/close.svg");
  background-size: 36px;
  &:hover {
    height: 36px;
    width: 36px;
    background-image: url("assets/misc/close-hover.svg");
    background-size: 36px;
  }
  &:active {
    height: 36px;
    width: 36px;
    background-image: url("assets/misc/close-active.svg");
    background-size: 36px;
  }
}

.window-close:rtl {
}

.window-close-area {
  width: 400px;
  height: 120px;
  background-image: url("assets/misc/trash-icon.svg");
}

.overview-icon {
  padding: 9px;
  border: none;
  border-radius: 2px;
  color: $osd_fg_color;
  transition-duration: 0.2s;
  text-align: center;

  StLabel { padding-top: 6px; }
}


// /*****************
//  * Looking Glass *
//  *****************/

#LookingGlassDialog {
  spacing: 4px;
  padding: 6px;
  border: none;
  border-radius: 2px;
  background-color: shellopacity($osd_bg_color, 0.9);
  color: $osd_fg_color;
  box-shadow: $z-depth-4;
}


// /************
//  * Calendar *
//  ************/

.calendar {
  padding: 0.4em 1.75em;
  spacing-rows: 0;
  spacing-columns: 0;

  // .calendar-background class allows the date applet calendar
  // to be themed separately from other applet menus
  &-background {
  }

  &-month-label {
    @include fontscaling($ref_size * 0.8);
    margin: 0 2px;
    padding-top: (1.5em + 0.5em) / 8; // label centering
    color: $fg_color;
    font-weight: 400;
  }

  &-change-month-back,
  &-change-month-forward {
    @include fontscaling($ref_size * 0.8);
    width: 1.5em + 0.5em; // embed padding of -month-label
    height: 1.5em + 0.5em;
    margin: 0;
    padding: 0;
    border-radius: 100px;
    &:focus,
    &:hover { background-color: $semi_fill_color; }
    &:active { background-color: $fill_color; }
  }

  // arrow back
  &-change-month-back {
    background-image: url("assets/misc/calendar-arrow-left.svg");
    &:rtl {
      background-image: url("assets/misc/calendar-arrow-right.svg");
    }
  }

  // arrow forward
  &-change-month-forward {
    background-image: url("assets/misc/calendar-arrow-right.svg");
    &:rtl {
      background-image: url("assets/misc/calendar-arrow-left.svg");
    }
  }
}

.datemenu-date-label {
  @include fontscaling($ref_size * 0.8);
  padding: 0.4em 1.75em;
  border-radius: 2px;
  color: $fg_color;
  font-weight: 700;
  text-align: center;
}

.calendar-day {
  border-width: 0;
  color: $fg_color;

  &-base {
    @include fontscaling($ref_size * 0.8);
    width: 25px;
    height: 25px;
    padding: 0;
    margin: 2px;
    border-radius: 25px;
    text-align: center;
  }

  &-heading {
    @include fontscaling($ref_size * 0.7);
    width: 25px;
    height: 20px;
    margin-top: 2px;
    padding: 5px 0 0;
    background-color: transparent;
    color: $tertiary_fg_color;
    font-weight: 700;
    text-align: center;
  }

  &-top { border-top-width: 0; }

  &-left { border-left-width: 0; }

  &-with-events {
    background-image: none;
    color: $link_label_color;
    font-weight: 400;
    text-decoration: underline;
  }
}

.calendar-week-number {
  width: 25px;
  height: 20px;
  margin: 2px;
  padding: 5px 0 0;
  background-color: transparent;
  color: $tertiary_fg_color;
  font-weight: 700;
  font-size: inherit;
  text-align: center;
}

.calendar-nonwork-day {
  color: $secondary_fg_color;
  background-color: transparent;
}

.calendar {
  &-today {
    border-width: 0;
    color: $selected_fg_color;
    background-color: $selected_bg_color;
    font-weight: 700;
  }

  &-other-month-day { color: shellopacity($tertiary_fg_color, 0.55); }
}


// /*****************
//  * Notifications *
//  *****************/

#notification {
  width: 34em;
  spacing-rows: 10px;
  spacing-columns: 10px;
  margin-from-right-edge-of-screen: 20px;
  padding: 13px;
  border-radius: 2px;
  border-image: url("assets/misc/osd.svg") 9 9 9 9;
  color: $osd_fg_color;

  .menu &,
  .popup-menu & {
    &, &.multi-line-notification {
      border-image: url("assets/misc/message.svg") 9 9 9 9;
      color: $fg_color;
    }

    .notification-button,
    .notification-icon-button {
      @extend %button;
      padding: 5px;
    }

    StEntry { @extend %entry; }
  }

  &.multi-line-notification {
    padding-bottom: 13px;
    color: $osd_fg_color;
  }

  &-scrollview {
    max-height: 10em;

    > .top-shadow, > .bottom-shadow { height: 1em; }

    &:ltr > StScrollBar { padding-left: 6px; }
    &:rtl > StScrollBar { padding-right: 6px; }
  }

  &-body { spacing: 5px; }

  &-actions { spacing: 10px; }
}

.notification {
  // We use row-span = 2 for the image cell, which prevents its height
  // preferences to be taken into account during allocation, so its height
  // ends up being limited by the height of the content in the other rows.
  // To avoid showing a stretched image, we set the minimum height of the
  // table to be ICON_SIZE + IMAGE_SIZE + spacing-rows = 24 + 125 + 10 = 159
  &-with-image {
    min-height: 159px;
    color: $osd_fg_color;
  }

  &-button,
  &-icon-button {
    @extend %osd_button;
    padding: 5px;
  }

  &-icon-button > StIcon { icon-size: 36px; }

  StEntry { @extend %osd_entry; }
}


// /****************
//  * App Switcher *
//  ****************/

#altTabPopup {
  padding: 8px;
  spacing: 16px;
}

.switcher-list {
  padding: 20px;
  border: none;
  border-image: url("assets/misc/osd.svg") 9 9 9 9;
  border-radius: 2px;
  color: $osd_fg_color;
  background: none;

  > StBoxLayout { padding: 4px; }

  &-item-container { spacing: 8px; }

  .item-box {
    padding: 8px;
    border-radius: 2px;
    &:outlined {
      padding: 6px;
      border: 2px solid $osd_outline_fill_color;
    }
    &:selected {
      background-color: $accent_fill_color;
      color: $inverted_accent_label_color;
    }
  }

  .thumbnail { width: 256px; }

  .thumbnail-box {
    padding: 2px;
    spacing: 4px;
  }

  .separator {
    width: 1px;
    background: $borders_color;;
  }
}

.switcher-arrow { // :highlighted pseudo-class does not exist?
  border-color: transparent;
  color: $osd_fg_color;
}

.switcher-preview-backdrop {
}

.thumbnail-scroll-gradient {
  &-left {
    width: 60px;
    border-radius: 24px;
    border-radius-topright: 0;
    border-radius-bottomright: 0;
    background-color: transparent;
  }

  &-right {
    width: 60px;
    border-radius: 24px;
    border-radius-topleft: 0;
    border-radius-bottomleft: 0;
    background-color: transparent;
  }
}


// /**********************
//  * Activities Ripples *
//  **********************/

.ripple-box {
  width: 104px;
  height: 104px;
  background-image: url("assets/misc/corner-ripple.svg");
  background-size: contain;
  &:rtl { background-image: url("assets/misc/corner-ripple.svg"); }
}


// /*****************
//  * Modal Dialogs *
//  *****************/

.modal-dialog {
  padding: 0 5px 6px 5px;
  border: none;
  border-radius: 2px;
  color: $osd_fg_color;
  background-color: shellopacity($osd_bg_color, 0.9);
  box-shadow: $z-depth-4;

  > StBoxLayout:first-child { padding: 20px 10px 10px 10px; }

  &-button-box {
    spacing: 0;
    margin: 0;
    padding: 14px 10px;
    border: none;
    background: none;

    .modal-dialog-button {
      @extend %osd_button;
      height: 30px;
      padding-top: 0;
      padding-bottom: 0;
      color: $inverted_secondary_accent_label_color;
      font-weight: 700;
      &:hover {
        color: $inverted_accent_label_color;
        background-color: $accent_semi_fill_color;
      }
      &:focus { color: $inverted_accent_label_color; }
      &:active {
        color: $inverted_accent_label_color;
        background-color: $accent_fill_color;
        box-shadow: $empty_shadow;
      }
      &:disabled { color: $osd_tertiary_fg_color; }
    }
  }
}


// /***************
//  * Run Dialogs *
//  ***************/

.run-dialog {
  padding: 0 15px 10px 15px;
  border-image: url("assets/misc/osd.svg") 9 9 9 9;

  > * { padding: 0; }

  &-label {
    @include fontscaling($ref_size * 0.9);
    padding-bottom: 0;
    color: $osd_tertiary_fg_color;
    font-weight: 400;
  }

  &-error-label { color: $error_color; }

  &-error-box {
    @include fontscaling($ref_size * 0.9);
    padding-top: 15px;
    spacing: 5px;
    color: $error_color;
  }

  &-completion-box {
    @include fontscaling($ref_size * 1.0);
    padding-left: 15px;
  }

  &-entry {
    @include entry(osd-normal);
    width: 28em;
    padding: 7px;
    border-radius: 0;
    color: $osd_fg_color;
    caret-color: $osd_fg_color;
    selected-color: $selected_fg_color;
    selection-background-color: $selected_bg_color;
    &:focus { @include entry(osd-focus); }
  }

  .modal-dialog-button-box {
    border: none;
    background: none;
    background-gradient-direction: none;
    box-shadow: $empty_shadow;
  }
}

.lightbox {
}


// /**********************************
//  * CinnamonMountOperation Dialogs *
//  **********************************/

.cinnamon-mount-operation-icon { icon-size: 48px; }

.mount-password-reask { color: $warning_color; }

.show-processes-dialog,
.mount-question-dialog {
  spacing: 24px;

  &-subject {
    padding-top: 10px;
    padding-bottom: 6px;
    
    &:ltr { padding-left: 17px; }
    &:rtl { padding-right: 17px; }
  }

  &-description {
    width: 28em;

    &:ltr { padding-left: 17px; }
    &:rtl { padding-right: 17px; }
  }
}

.show-processes-dialog-app-list {
  max-height: 200px;
  padding-top: 24px;

  &:ltr {
    padding-left: 49px;
    padding-right: 32px;
  }
  &:rtl {
    padding-right: 49px;
    padding-left: 32px;
  }

  &-item {
    color: $osd_secondary_fg_color;
    &:hover { color: $selected_fg_color; }

    &:ltr { padding-right: 1em; }
    &:rtl { padding-left: 1em; }

    &-icon:ltr { padding-right: 17px; }
    &-icon:rtl { padding-left: 17px; }

    &-name { @include fontscaling($ref_size * 1.1); }
  }
}


// /*************
//  * Magnifier *
//  *************/

.magnifier-zoom-region {
  border: 2px solid $selected_bg_color;

  &.full-screen { border-width: 0; }
}


// /************
//  * Keyboard *
//  ************/

#keyboard {
  border-width: 0;
  background-color: shellopacity($panel_bg_color, 0.54);
}

.keyboard {
  &-layout {
    spacing: $ref_size * 0.3;
    padding: $ref_size * 0.3;
  }

  &-row { spacing: $ref_size * 0.3; }

  &-key {
    min-height: $ref_size * 2;
    min-width: $ref_size * 2;
    border-radius: 2px;
    border: none;
    background-color: $osd_bg_color;
    color: $osd_secondary_fg_color;
    box-shadow: $empty_shadow;
    text-shadow: none;
    icon-shadow: none;
    font-size: $ref_size * 2; // use unscalable unit
    font-weight: 700;
    transition-timing-function: $slope_slow;
    &:focus,
    &:hover,
    &:checked {
      color: $osd_fg_color;
      background-color: mix($osd_bg_color, $osd_fg_color, 88%);
      transition-timing-function: $slope_slow;
    }
    &:active {
      color: $osd_fg_color;
      background-color: mix($osd_bg_color, $osd_fg_color, 75%);
      transition-timing-function: $slope_slow;
    }
    &:grayed { // FIXME
      color: $osd_tertiary_fg_color;
      background-color: $panel_bg_color;
      transition-timing-function: $slope_slow;
    }
  }

  &-subkeys { // long press on a key popup
    padding: 0;
    border-radius: 2px;
    -arrow-border-radius: 0;
    -arrow-background-color: transparent;
    -arrow-border-width: 0;
    -arrow-border-color: transparent;
    -arrow-base: 0;
    -arrow-rise: 0;
    -boxpointer-gap: $ref_size * 0.3;
    background-color: $suggested_color;
    color: $selected_fg_color;
    box-shadow: $z-depth-2;
  }
}


// /*****************************
//  * Cinnamon Specific Section *
//  *****************************/


// /******************
//  * Menu (menu.js) *
//  ******************/

.menu {
  // menu-background class allows the menu applet to be themed separately
  // from other applet menus
  &-background {
  }

  &-favorites-box {
    padding: 7px;
    border-radius: 0;
    border: 0 solid $borders_color;
    background-color: transparent;
    &:ltr { border-right-width: 1px; }
    &:rtl { border-left-width: 1px; }

    // FIXME: override generic menuitem padding with default theme's value.
    // And we have no way to override the min-width of global secion here,
    // so do not add min-width into .menu > .popup-menu-item.
    .popup-menu-item { padding: 10px; }
  }

  &-favorites-button {
    padding: 10px;
    &:hover { @include button(flat-hover); }
  }

  &-places {
    &-box { padding: 7px; }

    &-button { padding: 10px; }
  }

  &-categories-box {
    padding: 7px 7px 0 7px;
    border: 0 solid $borders_color;
    &:ltr { border-right-width: 1px; }
    &:rtl { border-left-width: 1px; }
  }

  &-applications-inner-box,
  &-applications-outer-box { padding: 7px 7px 0 7px; }

  &-application-button {
    padding: 0 7px;
    border: 1px solid transparent;
    color: $secondary_fg_color;

    // This style is used in menu application buttons
    // for applications which were newly installed
    &:highlighted { font-weight: 700; }

    &-selected {
      @include button(flat-hover);
      padding: 0 7px;
      border: 1px solid transparent;
      &:highlighted { font-weight: 700; }
    }

    &-label { // embed vertical padding directly
      &:ltr { padding: 6px 0 7px 5px; }
      &:rtl { padding: 6px 5px 7px 0; }
    }
  }

  StScrollView.menu-application-button { // extracted submenu container
    padding: 0;
    border-radius: 2px;
    border: 1px solid $borders_color;
    background-color: $secondary_dark_color;

    .popup-menu-item {
      padding: 0;
      spacing: 0;
      &:ltr { padding-left: 7px; }
      &:rtl { padding-right: 7px; }

      &:active {
        border-image: none; // image independent
        background-color: $semi_fill_color;
      }

      StIcon { min-width: 22px; } // indentation

      StLabel {
        &:ltr { padding: 6px 0 7px 5px; }
        &:rtl { padding: 6px 5px 7px 0; }
      }
    }
  }

  &-category-button {
    padding: 0 7px;
    border: 1px solid transparent;
    color: $secondary_fg_color;

    &-hover,
    &-selected {
      padding: 0 7px;
      border-radius: 2px;
      border: 1px solid transparent;
      background-color: shellopacity($selected_bg_color, 0.12);
      color: $selected_bg_color;
    }

    &-greyed {
      padding: 0 7px;
      border: 1px solid transparent;
      color: $insensitive_fg_color;
    }

    &-label { // embed vertical padding directly
      &:ltr { padding: 6px 0 7px 5px; }
      &:rtl { padding: 6px 5px 7px 0; }
    }
  }

  // Name and description of the currently hovered item in the menu
  // This appears on the bottom right hand corner of the menu
  &-selected-app {
    &-box {
      margin-bottom: 0.33em * 2 + 0.4em;
      padding: 0 30px;
      text-align: right;
    }

    &-title {
      @include fontscaling($ref_size * 0.9);
      margin-top: 0.4em;
      color: $secondary_fg_color;
      font-weight: 700;
    }

    &-description {
      @include fontscaling($ref_size * 0.9);
      max-width: 150px;
      color: $tertiary_fg_color;
    }
  }

  &-search-box {
    margin-bottom: 7px;
    &:ltr { padding-left: 30px; }
    &:rtl { padding-right: 30px; }
  }
}

#menu-search-entry {
  @extend %entry;
  width: 24em;
  caret-color: $fg_color;
  font-weight: 500;
}

.menu-search-entry-icon {
  icon-size: $icon_size;
  color: $fg_color;
}

// Context menu (at the moment only for favorites)
.menu-context-menu {
}


// /*******
//  * OSD *
//  *******/

.info-osd {
  spacing: 1em;
  padding: 16px;
  border-image: url("assets/misc/osd.svg") 9 9 9 9;
  color: $osd_fg_color;
  text-align: center;
  font-weight: 700;
}

.osd-window {
  min-width: 64px;
  min-height: 64px;
  spacing: 1em;
  padding: 20px;
  margin: 32px;
  border: none;
  border-radius: 5px;
  border-image: url("assets/misc/osd.svg") 9 9 9 9;
  color: $osd_fg_color;
  background: none;
  font-weight: 700;
  text-align: center;

  .osd-monitor-label { @include fontscaling($ref_size * 3.0); }

  .level { // for legacy
    height: 3px;
    padding: 0;
    border-radius: 0;
    background-color: $osd_outline_fill_color;
    color: $success_color;
  }

  .level-bar {
    border-radius: 0;
    background-color: $success_color;
  }
}


// /*******************************
//  * Window list (windowList.js) *
//  *******************************/

.window-list {
  &-box {
    spacing: 0;

    .panel-top,
    .panel-bottom & {
      &:ltr { padding: 0 0 0 8px; }
      &:rtl { padding: 0 8px 0 0; }
    }

    &.vertical { padding: 6px 0 0 0; }

    &:highlight { background-color: $accent_fill_color; }
  }

  &-item-box {
    border: 0 none transparent;
    border-image: none;
    background-image: none;
    background-color: $hidden_fill_color;
    color: $osd_fg_color;
    box-shadow: $empty_shadow;
    font-weight: 400;
    &:hover {
      color: $selected_fg_color;

      @each $position, $_indicator in (top, 0 2px),
                                      (bottom, 0 -2px),
                                      (left, 2px 0),
                                      (right, -2px 0) {
        .panel-#{$position} & {
          box-shadow: inset #{$_indicator} $osd_outline_fill_color;
        }
      }
    }
    &:active,
    &:checked,
    &:focus {
      &, &:hover {
        color: $selected_fg_color;

        @each $position, $_indicator in (top, 0 2px),
                                        (bottom, 0 -2px),
                                        (left, 2px 0),
                                        (right, -2px 0) {
          .panel-#{$position} & {
            box-shadow: inset #{$_indicator} $osd_indicator_color;
          }
        }
      }
    }

    StIcon,
    StBin {
      .panel-top &,
      .panel-bottom & { padding: 0 (6px - 2px); }
    }

    &.vertical StIcon,
    &.vertical StBin { padding: 0; }

    StLabel {
      font-weight: 400;

      .panel-top &,
      .panel-bottom & {
        &:ltr { padding: 0 (6px - 2px) 0 0; }
        &:rtl { padding: 0 0 0 (6px - 2px); }
      }
    }

    &:progress,
    .progress {
      background-gradient-start: $accent_fill_color;
      background-gradient-end: $accent_fill_color;
    }
  }

  &-item-demands-attention {
    background-gradient-start: $accent_fill_color;
    background-gradient-end: $accent_fill_color;
    color: $selected_fg_color;

    @each $position, $_indicator in (top, 0 2px),
                                    (bottom, 0 -2px),
                                    (left, 2px 0),
                                    (right, -2px 0) {
      .panel-#{$position} & {
        box-shadow: inset #{$_indicator} $accent_color;
      }
    }
  }

  // >= 3.6.7
  &-preview { // thumbnail popup windows = .switcher-list
    padding: 20px - 8px; // = .switcher-list - .item-box
    spacing: 8px; // = .switcher-list-item-container
    border: none;
    border-image: url("assets/misc/osd.svg") 9 9 9 9;
    border-radius: 2px;
    color: $osd_fg_color;
    background: none;
  }
}


// /***********************************
//  * Sound Applet (status/volume.js) *
//  ***********************************/

.sound-player {
  padding: 0 3px;

  > StBoxLayout:first-child {
    padding: 0.4em (1.75em - 0.75em) 0.4em * 2;

    StLabel { padding: 0 0.4em 1px; }

    StButton:small {
      width: $icon_size;
      height: $icon_size;
      padding: 1px 0.4em 0;

      StIcon { icon-size: $icon_size; }
    }
  }

  &-generic-coverart { background-color: $secondary_dark_color; }

  &-overlay {
    width: 290px;
    height: 70px;
    padding: 0.4em (1.75em - 0.75em) 0.4em * 3;
    spacing: 5px;
    border: 0 solid $osd_bg_color;
    border-bottom-width: 1px;
    color: $osd_fg_color;
    background: shellopacity($osd_bg_color, 0.9);

    StButton {
      width: $icon_size * 2;
      height: $icon_size * 2;
      padding: 0;
      border-radius: 100px;
      border: 0 none transparent;
      color: $osd_secondary_fg_color;
      &:hover{ @include button(osd-hover); }
      &:active { @include button(osd-active); }

      StIcon { icon-size: $icon_size; }
    }

    StLabel { padding: 0 5px 1px; }
  }

  .slider {
    height: 4px;
    padding: 0;
    border: 0 none transparent;
    -slider-height: 4px;
    // FIXME: do not use transparentize
    -slider-background-color: mix($secondary_base_color, $accent_color, 80%);
    -slider-border-color: transparent;
    -slider-active-background-color: $accent_color;
    -slider-active-border-color: transparent;
    -slider-border-width: 0;
    -slider-handle-radius: 0;
  }
}


// /****************************************************
//  * Workspace Switcher applet (workspaceSwitcher.js) *
//  ****************************************************/

#workspaceSwitcher {
  spacing: 0;
  padding: 3px;
}

// Controls the styling when using the "Simple buttons" option
.workspace-switcher {
  .panel-top &,
  .panel-bottom & {
    padding-left: 3px;
    padding-right: 3px;
    // padding: 0 3px; // NEEDS_REVIEW
  }

  .panel-left &,
  .panel-right & {
    padding-top: 3px;
    padding-bottom: 3px;
    // padding: 3px; // NEEDS_REVIEW
  }
}

.workspace-button { // numeric buttons
  // in future, we will drop damned fixed width/height properties
  width: 20px;
  height: 10px;
  // padding: 0 6px; // NEEDS_REVIEW
  color: $osd_fg_color;
  background-color: $hidden_fill_color;
  transition-duration: 0.2s;

  // .vertical & { padding: 3px; } // NEEDS_REVIEW

  &:hover {
    color: $selected_fg_color;

    @each $position, $_indicator in (top, 0 2px),
                                    (bottom, 0 -2px),
                                    (left, 2px 0),
                                    (right, -2px 0) {
      .panel-#{$position} & {
        box-shadow: inset #{$_indicator} 0 $osd_indicator_color;
      }
    }
  }
  &:outlined {
    color: $selected_bg_color;
    &:hover {
      @each $position, $_indicator in (top, 0 2px),
                                      (bottom, 0 -2px),
                                      (left, 2px 0),
                                      (right, -2px 0) {
        .panel-#{$position} & {
          box-shadow: inset #{$_indicator} 0 $osd_indicator_color;
        }
      }
    }
  }
}

// Controls the style when using the "Visual representation" option
.workspace-graph {
  padding: 3px;
  spacing: 3px;

  .workspace {
    border: 1px solid shellopacity(black, 0.4);
    background-gradient-direction: none;
    background-color: shellopacity(black, 0.2);
    &:active {
      border: 1px solid $selected_bg_color;
      background-gradient-direction: none;
    }

    .windows {
      -active-window-background: lighten($osd_bg_color, 15%);
      -active-window-border: rgba(0, 0, 0, 0.8);
      -inactive-window-background: lighten($osd_bg_color, 15%);
      -inactive-window-border: rgba(0, 0, 0, 0.8);
    }
  }

  .workspace:active .windows {
    -active-window-background: lighten($osd_bg_color, 20%);
    -active-window-border: rgba(0, 0, 0, 0.8);
    -inactive-window-background: lighten($osd_bg_color, 5%);
    -inactive-window-border: rgba(0, 0, 0, 0.8);
  }
}


// /**********************************************
//  * Panel Launchers Applet (panelLaunchers.js) *
//  **********************************************/

#panel-launchers-box { padding: 0 7px; }

.panel-launcher {
  border: 0 solid transparent;

  @each $position, $_padding in (top, 0 4px 2px 4px),
                                (bottom, 2px 4px 0 4px),
                                (left, 2px 2px 2px 0),
                                (right, 2px 0 2px 2px) {
    .panel-#{$position} & {
      padding: #{$_padding};
      border-#{$position}-width: 2px;
    }
  }

  &:hover {
    border: 0 solid $osd_indicator_color;
    background-gradient-direction: none;

    @each $position, $_padding in (top, 0 4px 2px 4px),
                                  (bottom, 2px 4px 0 4px),
                                  (left, 2px 2px 2px 0),
                                  (right, 2px 0 2px 2px) {
      .panel-#{$position} & {
        padding: #{$_padding};
        border-#{$position}-width: 2px;
      }
    }
  }
}

// 3.2.x
.launcher {
  padding: 2px;
  spacing: 2px;
  transition-duration: 0.2s;
  &:hover {
    border: 0 solid $osd_indicator_color;
    background-gradient-direction: none;

    @each $position in (top),
                       (bottom),
                       (left),
                       (right) {
      .panel-#{$position} & {
        padding-#{$position}: 0;
        border-#{$position}-width: 2px;
      }
    }
  }

  .icon-box {
    padding: 0 2px;

    &.vertical { padding: 2px 0; }
  }
}

.panel-launchers {
  padding: 0 0 0 4px;
  spacing: 2px;

  &.vertical {
    padding: 2px 0 0 0;
    spacing: 2px;
  }

  .launcher {
    .icon-box {
      padding: 0 2px;

      &.vertical { padding: 2px 0; }
    }
  }
}


// /*******************
//  * Overview corner *
//  *******************/

#overview-corner {
  background-image: url("assets/misc/overview.svg");
  &:hover { background-image: url("assets/misc/overview-hover.svg"); }
}


// /***********************
//  * Applets (applet.js) *
//  ***********************/

.applet {
  &-separator { padding: 1px 4px; }

  &-separator-line {
    width: 1px;
    background: $osd_outline_fill_color;

    &-vertical {
      height: 1px;
      background: $osd_outline_fill_color;
    }
  }

  &-box {
    color: $osd_fg_color;
    text-shadow: none;
    &:hover,
    &:checked {
      color: $selected_fg_color;
      background-color: $hidden_fill_color;
    }
    &:highlight { background-color: $accent_fill_color; }

    @each $position, $_padding, $_indicator in (top, 0 6px, 0 2px),
                                               (bottom, 0 6px, 0 -2px),
                                               (left, 2px 0, 2px 0),
                                               (right, 2px 0, -2px 0) {
      .panel-#{$position} & {
        padding: #{$_padding};
        spacing: 2px;
        &:hover,
        &:checked {
          box-shadow: inset #{$_indicator} 0 $osd_indicator_color;
        }
      }
    }
  }

  &-label {
    color: $osd_fg_color;
    font-weight: 700;

    &:hover,
    .applet-box:hover &,
    .applet-box:checked & {
      color: $selected_fg_color;
      text-shadow: none;
    }
  }

  &-icon {
    icon-size: $icon_size;
    color: $osd_fg_color;

    &:hover,
    .applet-box:hover > &,
    .applet-box:checked > & {
      color: $selected_fg_color;
      text-shadow: none;
    }
  }
}


// /***************
//  * User Applet *
//  ***************/

.user {
  &-icon {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 0;
    background-color: transparent;
  }

  &-label {
    @include fontscaling($ref_size * 1.0);
    margin: 0;
    color: $fg_color;
    font-weight: 700;
  }
}


// /*************************
//  * Desklets (desklet.js) *
//  *************************/

.desklet {
  color: $osd_secondary_fg_color;

  &-with-borders {
    padding: 12px;
    padding-bottom: 16px;
    border-image: url("assets/misc/osd.svg") 9 9 9 9;
    color: $osd_fg_color;
  }

  &-with-borders-and-header {
    padding: 12px;
    padding-bottom: 17px;
    border-radius: 0;
    border-radius-topleft: 0;
    border-radius-topright: 0;
    border-image: url("assets/misc/desklet.svg") 9 9 9 9;
    color: $osd_fg_color;
  }

  &-header {
    @include fontscaling($ref_size * 1.0);
    padding: 12px;
    padding-bottom: 6px;
    border-image: url("assets/misc/desklet-header.svg") 9 9 9 9;
    color: $osd_fg_color;
  }

  &-drag-placeholder { 
    border: 2px solid $accent_color;
    background-color: shellopacity($accent_color, 0.8);
  }

  // 3.2.x?
  &:highlight,
  &:highlight-with-borders,
  &:highlight-with-borders-and-header {
    background-color: $accent_fill_color;
  }
}

.photoframe-box {
  padding: 12px;
  padding-bottom: 16px;
  border-image: url("assets/misc/bg.svg") 9 9 9 9;
  color: $osd_fg_color;
  &:highlight { background-color: $accent_fill_color; }
}


// /*******************************************
//  * About Dialog (applet.js and desklet.js) *
//  *******************************************/

.about {
  &-content {
    width: 550px;
    height: 250px;
    spacing: 8px;
    padding-bottom: 10px;
  }

  &-title {
    @include fontscaling($ref_size * 2.0);
    font-weight: 700;
  }

  &-uuid {
    @include fontscaling($ref_size * 1.0);
    color: $tertiary_fg_color;
  }

  &-icon {
    padding-right: 20px;
    padding-bottom: 14px;
  }

  &-scrollBox {
    padding: 4px;
    padding-right: 0;
    border: 1px solid $borders_color;
    border-radius: 0;
    background-color: $base_color;

    &-innerBox {
      padding: 1.2em;
      spacing: 1.2em;
    }
  }

  &-description {
    padding-top: 4px;
    padding-bottom: 16px;
  }

  &-version {
    @include fontscaling($ref_size * 1.0);
    padding-left: 7px;
    color: $tertiary_fg_color;
  }
}


// /*****************
//  * Workspace OSD *
//  *****************/

.workspace-osd { // workspace name
  @include fontscaling($ref_size * 3.0);
  padding: 0.2em 0.8em;
  border-radius: 2px;
  background-color: shellopacity($osd_bg_color, 0.9);
  color: $osd_fg_color;
  box-shadow: $z-depth-4;
  font-weight: 400;
  text-shadow: none;
}

$top_gap: 2px;
$bottom_gap: 4px;

.expo {
  &-workspaces-name-entry {
    @include fontscaling($ref_size * 0.9);
    -cinnamon-caption-spacing: 12px;
    // FIXME: use 'height' property instead of min-height since total height
    // affects to the size of vertically gap between thumbnails. And we can't
    // use margins either. Foolish...
    height: $ws_thumb_spacing - $top_gap - $bottom_gap;
    padding: 0 8px;
    border-radius: 0;
    border-top: $top_gap solid transparent; // add extra top gap
    border-bottom: $bottom_gap solid transparent; // add extra bottom gap
    color: $osd_tertiary_fg_color;
    background-color: $hidden_fill_color;
    caret-color: $osd_fg_color;
    caret-size: 1px;
    selection-background-color: $selected_bg_color;
    selected-color: $selected_fg_color;
    font-weight: 700;
    &:focus { @include entry(osd-focus); }

    &#selected {
      color: $osd_fg_color;
      caret-color: $osd_fg_color;
      background-color: $hidden_fill_color;
    }
  }

  &-workspace-thumbnail-frame {
    border-radius: 2px;
    border: 2px solid $osd_outline_fill_color;
    background-color: transparent;

    &#active {
      border-radius: 2px;
      border: 2px solid $selected_bg_color;
    }
  }

  &-background { background-color: rgba(0, 0, 0, 0.54); }
}


// /***********************
//  * Notification Applet *
//  ***********************/

.notification-applet {
  &-padding { padding: 0.5em 1em; }

  &-container { max-height: 100px; }
}

.flashspot { background-color: $selected_fg_color; }


// /****************
//  * Tile Preview *
//  ****************/

.tile-preview,
.tile-hud {
  &,
  &.snap {
    border: 1px solid $selected_bg_color;
    border-radius: 0;
    background-color: shellopacity($selected_bg_color, 0.2);
  }
}


// /****************
//  * Xkcd Desklet *
//  ****************/

.xkcd-box {
  padding: 6px;
  border: none;;
  border-radius: 0;
  background-color: transparent;
}


// /******************
//  * Systray Applet *
//  ******************/

.systray,
#CinnamonTrayIcon {
  spacing: 0;
  padding: 0;
}


// /********************
//  * Slingshot Applet *
//  ********************/

.slingshot {
  &.popup-menu-content {
    // horizontal padding is non-sense
    // so add outer spacing instead
    margin: 0 3px;
    padding: 0.45em 0;
  }

  .button {
    padding: 4px;
    border-radius: 2px;
    border-color: $solid_light_borders_color;
    background-color: $light_color;
    box-shadow: $empty_shadow; // hide unwanted inner higlights
    &:hover {
      background-color: $semi_fill_color;
      color: $fg_color;
    }
    &:checked,
    &:active:checked {
      &, &:hover {
        background-color: $selected_bg_color;
        color: $selected_fg_color;
      }
    }
    &:insensitive {
      background-color: $hidden_fill_color;
      color: $insensitive_fg_color;
    }
  }

  .sidebar .button,
  .button.app {
    background-color: $hidden_fill_color;
    &:hover {
      background-color: $semi_fill_color;
      color: $fg_color;
    }
    &:checked,
    &:active:checked {
      &, &:hover {
        border-color: transparent;
        background-color: shellopacity($selected_bg_color, 0.25);
        color: $selected_bg_color;
      }
    }
  }

  .entry {
    min-height: 16px + 4px * 2;
    padding: 0 8px; // do not set vertical padding causes truncation of StLabel
    border-radius: 2px;
    border-color: transparent;
    background-color: $light_color;
    color: $secondary_fg_color;
    caret-color: $secondary_fg_color;
    box-shadow: inset 0 0 0 1px $solid_light_borders_color;
    &:ltr { margin-right: 3px; }
    &:rtl { margin-left: 3px; }

    &:focus,
    &:focus:hover {
      border-color: transparent;
      background-color: $light_color;
      color: $fg_color;
      caret-color: $fg_color;
      box-shadow: inset 0 0 0 1px $selected_bg_color;
    }
    &:insensitive {
      border-color: transparent;
      background-color: $hidden_fill_color;
      color: $insensitive_fg_color;
      box-shadow: inset 0 0 0 1px $solid_light_borders_color;
    }
  }

  // insert vertical spacing
  > StBoxLayout > StBoxLayout { margin: 3px 0; }
}


// /*******************************
//  * IcingTaskListManager Applet *
//  *******************************/

.applet-box { // the parent container
  .window-list-item-box { // actual childs
    .panel-top &,
    .panel-bottom &,
    .panel-left &,
    .panel-right & {
      StIcon, StBin { padding: 0; }
    }

    @each $position, $_indicator in (top, 0 2px),
                                    (bottom, 0 -2px),
                                    (left, 2px 0),
                                    (right, -2px 0) {
      .panel-#{$position} & {
        spacing: 0;
        padding: 0;
        border: 0 none transparent;
        border-image: none;
        background-color: $hidden_fill_color;
        box-shadow: inset #{$_indicator} $osd_outline_fill_color;
        &:hover {
          background-color: $hidden_fill_color;
          box-shadow: inset #{$_indicator} $osd_outline_fill_color;
        }
        &:focus,
        &:active,
        &:checked {
          background-color: $hidden_fill_color;
          box-shadow: inset #{$_indicator} $osd_indicator_color;
        }
        &:closed {
          &,
          &:hover,
          &:focus,
          &:active,
          &:checked { // return to :normal state
            background-color: $hidden_fill_color;
            box-shadow: $empty_shadow;
          }
        }
      }
    }
  }

  .window-icon-list-numlabel {
    @include fontscaling($ref_size * 0.9);
    color: $selected_fg_color;
    font-weight: 700;
  }
}

StBin.popup-menu,
StBin.menu {
  // .switcher-list should be with StBin
  // at the root metaWindow
  StBoxLayout.switcher-list {
    border-radius: 0;

    .item-box {
      border-radius: 0; // fill entire surface to cover up the parent
      background-color: $osd_bg_color; // use opaque
      &:outlined,
      &:selected { border-radius: 2px; }
      &:selected {
        background-color: mix($osd_bg_color, $accent_color, 75%);
      }

      > StBoxLayout { // icon and title
        &:ltr { margin: 6px 0 0 6px; }
        &:rtl { margin: 6px 6px 0 0; }

        StLabel { padding-bottom: 0.1em; }
      }

      > StButton { // close button
        &:ltr { margin: 6px 6px 0 0; }
        &:rtl { margin: 6px 0 0 6px; }
      }

      > StBin.thumbnail { margin: 6px; }
    }
  }
}

