.lightbox { background-color: black; }
.flashspot { background-color: white; }

  .hidden {
    color: rgba(0,0,0,0);
  }

/* Tiled window previews */
.tile-preview {
  background-color: rgba(on(dark, primary), 0.3);
  border: 1px solid on(dark, primary);
}

  .tile-preview-left.on-primary {
    border-radius: 0;
  }

  .tile-preview-right.on-primary {
    border-radius: 0;
  }

  .tile-preview-left.tile-preview-right.on-primary {
    border-radius: 0;
  }

//close buttons

.window-close {
  // FIXME: unless disable the transition, button will distort when hovering
  // transition-duration: $duration;
  height: $medium-size;
  width: $medium-size;
  -shell-close-overlap: $medium-size / 2;
  -st-background-image-shadow: $shadow-1;
  background-image: url("assets/window-close.svg");
  background-size: $medium-size;

  &:hover {
    -st-background-image-shadow: $shadow-2;
    background-image: url("assets/window-close.svg");
  }
  &:active {
    // transition-duration: $duration-ripple;
    background-image: url("assets/window-close-active.svg");
  }

  // For backward compatibility of 3.26.0
  &:rtl { -st-background-image-shadow: $shadow-1; }
  &:rtl:hover { -st-background-image-shadow: $shadow-2; }
}

  .window-picker { //container around window thumbnails
    -horizontal-spacing: 16px;
    -vertical-spacing: 16px;
    padding: 0 16px 32px;

    &.external-monitor { padding: 16px; }
  }

  .window-clone-border {
    border: 4px solid on(dark, stroke);
    border-radius: $corner-radius;
    // For window decorations with round corners we can't match
    // the exact shape when the window is scaled. So apply a shadow
    // to fix that case
    box-shadow: inset 0 0 0 1px on(dark, stroke);
  }
  .window-caption {
    spacing: 25px;
    color: on($scrim);
    background-color: $scrim;
    border-radius: $corner-radius;
    padding: 4px 8px;
  }

  //search entry
  .search-entry {
    width: 320px - 8px * 2;
    padding: 0 8px;
    border-radius: $corner-radius $corner-radius 0 0;
    color: on(dark, text-disabled);
    selection-background-color: on(dark, stroke);
    selected-color: on(dark);
    @include entry(normal,$fc:on(dark, stroke));
    &:hover { @include entry(hover,$fc:on(dark, stroke)); }
    &:focus {
      @include entry(focus,$fc:on(dark));
      padding: 0 8px;
      border-width: 0;
      color: on(dark);
    }

    .search-entry-icon { icon-size: 16px; padding: 0 0; color: on(dark, text2); }

    &:hover, &:focus {
      .search-entry-icon { color: on(dark); }
    }
  }

  //search results

  #searchResultsBin {
    max-width: 1000px;
  }

  #searchResultsContent {
    padding-left: 20px;
    padding-right: 20px;
    spacing: 16px;
  }

  .search-section { spacing: 16px; } // This should be equal to #searchResultsContent spacing
  .search-section-content { spacing: 32px; } // This is the space between the provider icon and the results container
  .search-statustext { // "no results"
    @extend %status_text;
  }
  .list-search-results { spacing: 3px; }

  .search-section-separator { height: 1px; background-color: on(dark, divider); }

  .list-search-result-content { spacing: 30px; }
  .list-search-result-title { @include type(subtitle1); color: on(dark); spacing: 12px; }
  .list-search-result-description { color: on(dark, text2); }
  .list-search-provider-details { width: 150px; color: on(dark, text2); margin-top: 0.24em; }
  .list-search-provider-content { spacing: 20px; }
  .search-provider-icon { padding: 15px; }


  /* DASHBOARD */

  #dash {
    transition-duration: $duration-panel;
    font-size: 1em;
    color: on(dark);
    background-color: on(dark, fill);
    padding: 3px 0;
    border: none;
    border-left: 0px;
    border-radius: 0px $corner-radius $corner-radius 0px;

    &:rtl {
      border-radius: $corner-radius 0 0 $corner-radius;
    }

    .placeholder {
      background-image: url("assets/dash-placeholder.svg");
      background-size: contain;
      height: 24px;
    }

    .empty-dash-drop-target {
      width: 24px;
      height: 24px;
    }

  }

  .dash-item-container > StWidget {
    padding: 3px 6px;
  }

  .dash-label { //osd tooltip
    // min-height: 32px - 6px * 2;
    border-radius: $corner-radius;
    padding: 7px 8px;
    color: $text;
    background-color: $surface;
    box-shadow: $shadow-2;
    text-align: center;
    -x-offset: 8px;
  }

  /* App Vault/Grid */
  .icon-grid {
    spacing: 30px;
    -shell-grid-horizontal-item-size: 136px;
    -shell-grid-vertical-item-size: 136px;

    .overview-icon { icon-size: 96px; }
  }
  //.app-display { spacing: 20px; }

  .system-action-icon {
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2); // FIXME: this should really have a highlight
    background-color: $grey_900;
    color: $white;
    border-radius: 99px;
    icon-size: 48px;
  }

  .app-view-controls { //favorties | all toggle container
    width: 320px;
    padding-bottom: 32px;
  }
  .app-view-control { //favorties | all toggle button
    padding: 0 8px;
    font-weight: bold;
    color: on(dark, text2);
    &:hover {
      color: on(dark);
      background-color: $inverse-overlay-hover !important;
    }
    &:active {
      color: on(dark);
      background-color: $inverse-overlay-active !important;
    }
    &:checked {
      color: on(dark);
      background-color: rgba($scrim, 0.01) !important;
      box-shadow: inset 0 2px 0 on(dark);
    }
    &:first-child {
      border-right-width: 0;
      border-radius: $corner-radius;
      &:checked { border-radius: 0; }
    }
    &:last-child {
      border-radius: $corner-radius;
      &:checked { border-radius: 0; }
    }
  }

  //Icon tile
  .search-provider-icon,
  .list-search-result {
    @extend %icon_tile;
    &:focus, &:selected, &:hover {
      background-color: $inverse-overlay-hover;
      transition-duration: 0ms;
    }
    &:active, &:checked {
      background-color: $inverse-overlay-active;
      transition-duration: $duration-ripple;
    }
  }
  .app-well-app,
  .app-well-app.app-folder,
  .show-apps,
  .grid-search-result {
    & .overview-icon {
      @extend %icon_tile;
    }
    &:hover .overview-icon,
    &:focus .overview-icon,
    &:selected .overview-icon {
      background-color: $inverse-overlay-hover;
      transition-duration: 0ms;
      border-image: none;
      background-image: none;
    }
    &:active .overview-icon,
    &:checked .overview-icon {
      background-color: $inverse-overlay-active;
      box-shadow: $shadow-0;
      transition-duration: $duration-ripple;
    }

  }

  .app-well-app-running-dot { //running apps indicator
    width: 32px; height: 2px;
    background-color: on(dark);
    margin-bottom: 0;
  }

  .app-well-app.app-folder > .overview-icon {
    background-color: on(dark, fill);
  }

  .show-apps .show-apps-icon {
    color: on(dark, text2);
  }

  .show-apps:hover .show-apps-icon,
  .show-apps:active .show-apps-icon,
  .show-apps:checked .show-apps-icon,
  .show-apps:focus .show-apps-icon {
    color: on(dark);
    transition-duration: $duration;
  }


  // Collections
  .app-folder-popup { //expanded collection
    -arrow-border-radius: $corner-radius;
    -arrow-background-color: on(dark, fill);
    -arrow-base: 24px;
    -arrow-rise: 12px;
  }
  .app-folder-popup-bin { padding: 5px; }
  .app-folder-icon {
    padding: 5px;
    spacing-rows: 5px;
    spacing-columns: 5px;
  }

  .page-indicator {
    padding: 15px 20px;

    .page-indicator-icon {
      width: 12px;
      height: 12px;
      border-radius: 12px;
      background-image: none;
      background-color: on(dark, text2-disabled);
      transition-duration: $duration;
    }
    &:hover .page-indicator-icon {
      background-image: none;
      background-color: on(dark, text-disabled);
    }
    &:active .page-indicator-icon {
      background-image: none;
      background-color: on(dark, text2);
    }
    &:checked .page-indicator-icon {
      background-image: none;
      background-color: on(dark);
      transition-duration: 0ms;
    }
    &:checked:active { background-image: none; }
  }

  .no-frequent-applications-label { @extend %status_text; }

  .app-well-app > .overview-icon.overview-icon-with-label,
  .grid-search-result .overview-icon.overview-icon-with-label {
    padding: 10px 8px 5px 8px;
    spacing: 4px;
  }

  // Workspace pager
  .workspace-thumbnails { //container ala dash
    @extend %overview-panel;
    visible-width: 32px; //amount visible before hover
    spacing: 12px;
    padding: 12px;
    border-radius: $corner-radius 0 0 $corner-radius;
    //border-width: 0; //fixme: can't have non unoform borders :(
    &:rtl { border-radius: 0 $corner-radius $corner-radius 0;}

    .placeholder {
      background-image: url("assets/dash-placeholder.svg");
      background-size: contain;
      height: 24px;
    }
  }
  .workspace-thumbnail-indicator {
    border: 0 solid on(dark);
    border-left-width: 2px;
    padding: 6px 10px;
    border-radius: 0;
  }

  //Some hacks I don't even
  .search-display > StBoxLayout,
  .all-apps,
  .frequent-apps > StBoxLayout {
    // horizontal padding to make sure scrollbars or dash don't overlap content
    padding: 0px 88px 10px 88px;
  }

/* Eeeky things */

//magnifier

.magnifier-zoom-region {
  border: 2px solid $primary;
  &.full-screen { border-width: 0; }
}

//Keyboard
/* On-screen Keyboard */
.word-suggestions {
    @include type(subtitle1);
    spacing: 12px;
    min-height: 20pt;
}

#keyboard {
    background-color: $scrim-alt;
}

  .key-container {
    padding: 4px;
    spacing: 4px;
  }

  .keyboard-key {
    min-height: 1.2em;
    min-width: 1.2em;
    font-size: 2em;
    font-weight: 500;
    border-radius: $corner-radius;
    border: none;
    @include button(normal);
    &:focus { @include button(focus); }
    &:hover,&:checked { @include button(hover); }
    &:active { @include button(active);}
    &:grayed { //FIXME
      background-color: $scrim-alt;
      color: on($scrim-alt);
      border-color: $scrim-alt;
    }
    &.default-key {
      border-color: transparent;
      background-color: $surface;
      background-size: 24px;
      &:active { background-color: mix($text, $surface, percentage(0.2)); }
    }
    &.enter-key {
      border-color: transparent;
      background-color: $primary;
      background-image: url("assets/key-enter.svg");
      &:active { background-color: mix(on($primary), $primary, percentage(0.2)); }
    }
    &.shift-key-lowercase {
      background-image: url("assets/key-shift.svg");
    }
    &.shift-key-uppercase {
      background-image: url("assets/key-shift-uppercase.svg");
    }
    &.shift-key-uppercase:latched {
      background-image: url("assets/key-shift-latched-uppercase.svg");
    }
    &.hide-key {
      background-image: url("assets/key-hide.svg");
    }
    &.layout-key {
      background-image: url("assets/key-layout.svg");
    }
  }

  .keyboard-subkeys { //long press on a key popup
    color: inherit;
    padding: 5px;
    -arrow-border-radius: 0;
    -arrow-background-color: transparent;
    -arrow-border-width: 0;
    -arrow-border-color: transparent;
    -arrow-base: 0;
    -arrow-rise: 0;
    -boxpointer-gap: 5px;
    background-color: $surface;
    border-radius: $corner-radius;
    box-shadow: $shadow-2;
  }

/* Auth Dialogs & Screen Shield */

.framed-user-icon {
  background-size: contain;
  border: none;
  color: on($os-background);
  border-radius: $corner-radius;
  &:hover {
    border-color: on($os-background);
    color: on($os-background);
  }
}

// LOGIN DIALOG

.login-dialog-banner-view {
  padding-top: 24px;
  max-width: 23em;
}

.login-dialog {
  //reset
  border: none;
  background-color: transparent;

  StEntry {
    color: on($os-background);
    selection-background-color: on($os-background, stroke);
    selected-color: on($os-background);
    @include entry(normal, $fc:on($os-background, stroke));
    &:focus { @include entry(focus, $fc:on($os-background)); }
    &:insensitive {
      @include entry(insensitive, $fc:on($os-background, stroke-disabled));
      color: on($os-background, text-disabled);
    }
  }

  .modal-dialog-button-box { spacing: 3px; }
  .modal-dialog-button {
    min-width: 64px - 8px * 2;
    padding: 0 8px;
    @include button(flat-normal, $tc: on($os-background));
    &:hover,&:focus { @include button(flat-hover, $tc: on($os-background)); }
    &:active { @include button(flat-active, $tc: on($os-background)); }
    &:insensitive { @include button(flat-insensitive, $tc: on($os-background)); }

    &:default {
      min-width: 64px - 16px * 2;
      padding: 0 16px;
      @include button(normal, $c: $primary, $tc: on($primary));
      &:hover,&:focus { @include button(hover, $c: $primary, $tc: on($primary)); }
      &:active { @include button(active, $c: $primary, $tc: on($primary)); }
      &:insensitive { @include button(insensitive, $c: on($os-background, fill), $tc: on($os-background, text-disabled)); }
    }
  }
}

  .login-dialog-logo-bin { padding: 24px 0px; }
  .login-dialog-banner { color: on($os-background, text2); }
  .login-dialog-button-box { spacing: 5px; }
  .login-dialog-message-warning { color: on($os-background, error); }
  .login-dialog-message-hint { padding-top: 0; padding-bottom: 20px; }
  .login-dialog-user-selection-box { padding: 100px 0px; }
  .login-dialog-not-listed-label {
    padding-left: 2px;
    .login-dialog-not-listed-button:focus &,
    .login-dialog-not-listed-button:hover & {
      color: on($os-background);
    }
  }
  .login-dialog-not-listed-label {
    transition-duration: $duration;
    font-size: 1em;
    font-weight: bold;
    color: on($os-background, text2);
    padding-top: 1em;
    border-radius: $corner-radius;
    &:hover {
      background-color: $inverse-overlay-hover;
      color: on($os-background);
    }
    &:focus { background-color: $inverse-overlay-focus; }
    &:active {
      transition-duration: $duration-ripple;
      background-color: $inverse-overlay-active;
      color: on($os-background);
    }
  }

  .login-dialog-user-list-view { -st-vfade-offset: 1em; }
  .login-dialog-user-list {
    spacing: 12px;
    padding: .2em;
    width: 23em;
    &:expanded .login-dialog-user-list-item:selected { background-color: $inverse-overlay-focus; color: on($os-background); }
    &:expanded .login-dialog-user-list-item:hover { background-color: $inverse-overlay-hover; color: on($os-background); }
    &:expanded .login-dialog-user-list-item:active { background-color: $inverse-overlay-active; color: on($os-background); }
    &:expanded .login-dialog-user-list-item:logged-in { border-right: 2px solid on($os-background); }
  }
  .login-dialog-user-list-item {
    transition-duration: $duration;
    border-radius: $corner-radius;
    padding: 4px 4px 0;
    color: on($os-background, text2);
    &:ltr { padding-right: 1em; }
    &:rtl { padding-left: 1em; }
    &:hover {
      background-color: $inverse-overlay-hover;
      color: on($os-background);
    }
    &:active {
      transition-duration: $duration-ripple;
      background-color: $inverse-overlay-active;
      color: on($os-background);
    }
    .login-dialog-timed-login-indicator {
      height: 2px;
      margin: 2px 0 0 0;
      background-color: on($os-background);
    }
    &:focus .login-dialog-timed-login-indicator { background-color: on($os-background); }
  }

  .login-dialog-username,
  .user-widget-label {
    color: on($os-background);
    @include type(headline6);
    text-align: left;
    padding-left: 15px;
  }
    .user-widget-label {
      &:ltr { padding-left: 18px; }
      &:rtl { padding-right: 18px; }
    }

  .login-dialog-prompt-layout {
      padding-top: 24px;
      padding-bottom: 12px;
      spacing: 8px;
      width: 23em;
  }

  .login-dialog-prompt-label {
      color: on($os-background, text2);
      font-size: 1em;
      padding-top: 1em;
  }

  .login-dialog-session-list-button StIcon {
      icon-size: 1.25em;
  }

  .login-dialog-session-list-button {
      color: on($os-background, text2);
      &:hover,&:focus { color: on($os-background); }
      &:active { color: on($os-background); }
  }

//SCREEN SHIELD

.screen-shield-arrows {
    padding-bottom: 3em;
}

.screen-shield-arrows Gjs_Arrow {
    color: white;
    width: 80px;
    height: 48px;
    -arrow-thickness: 12px;
    -arrow-shadow: $shadow-1;
}

.screen-shield-clock {
  color: white;
  text-shadow: $shadow-1;
  font-weight: normal;
  text-align: center;
  padding-bottom: 1.5em;
}

.screen-shield-clock-time {
  @include type(headline1);
  text-shadow: $shadow-1;
}

.screen-shield-clock-date { @include type(headline4); }

.screen-shield-notifications-container {
  spacing: 6px;
  width: 30em;
  background-color: transparent;
  max-height: 500px;
  .summary-notification-stack-scrollview {
    padding-top: 0;
    padding-bottom: 0;
  }

  .notification,
  .screen-shield-notification-source {
    padding: 8px;
    border: none;
    background-color: $scrim-alt;
    color: on($scrim-alt);
    border-radius: $corner-radius;
  }
  .notification { margin-right: 16px; } //compensate for space allocated to the scrollbar
}


.screen-shield-notification-label {
  min-height: $small-size - 2px;
  padding: 2px 0px 0px 16px;
  font-weight: bold;
}

.screen-shield-notification-count-text {
  min-height: $small-size - 2px;
  padding: 2px 0px 0px 16px;
  color: on($scrim-alt, text2);
}

#panel.lock-screen { background-color: $scrim-alt; }

.screen-shield-background { //just the shadow, really
  background: black;
  box-shadow: $shadow-5;
}

#lockDialogGroup {
  background: $os-background;
  background-size: cover;
  color: on($os-background, text2);
}

#screenShieldNotifications {
  StScrollBar { @extend %overview_scrollbar; }
}


// Looking Glass
#LookingGlassDialog {
  background-color: $surface;
  spacing: 4px;
  padding: 0;
  border: none;
  border-radius: $corner-radius;
  box-shadow: $shadow-4;
  & > #Toolbar {
    padding: 0 8px;
    border: none;
    border-radius: 0;
    background-color: rgba($surface, 0.01);
    box-shadow: inset 0 -1px 0 $divider;
  }
  .labels { spacing: 0; }
  .notebook-tab {
    -natural-hpadding: 12px;
    -minimum-hpadding: 6px;
    font-weight: bold;
    color: $text2;
    transition-duration: $duration;
    padding-left: 16px;
    padding-right: 16px;
    min-height: $medium-size;
    padding: 0 16px * 2;
    &:hover {
      background-color: $overlay-hover;
      color: $text;
      text-shadow: none;
    }
    &:active {
      background-color: $overlay-active;
      color: $text;
      transition-duration: $duration-ripple;
    }
    &:selected {
      border-bottom-width: 0;
      border-color: transparent;
      background-color: rgba($surface, 0.01);
      box-shadow: inset 0 -2px 0px $primary;
      color: $text;
      text-shadow: none;
    }
  }
  StBoxLayout#EvalBox { padding: 4px; spacing: 4px; }
  StBoxLayout#ResultsArea { spacing: 4px; }
}

  .lg-dialog {
    StEntry {
      selection-background-color: $overlay-selected;
      selected-color: $text;
    }
    .shell-link {
      color: $primary;
      &:hover { color: $primary; }
     }
  }

  .lg-completions-text {
      font-size: 1em;
      font-style: italic;
  }

  .lg-obj-inspector-title {
      spacing: 4px;
  }

  .lg-obj-inspector-button {
      min-height: $medium-size;
      min-width: 64px - 8px * 2;
      padding: 0 8px;
      border: none;
      border-radius: $corner-radius;
      @include type(button);
      @include button(flat-normal);
      &:hover { @include button(flat-hover); }
      &:active { @include button(flat-active); }
      &:insensitive { @include button(flat-insensitive); }
      &:focus { @include button(flat-focus); }
      &:hover { border: none; }
  }

  #lookingGlassExtensions { padding: 4px; }

  .lg-extensions-list {
      padding: 4px;
      spacing: 6px;
  }

  .lg-extension {
      border: none;
      border-radius: $corner-radius;
      padding: 4px;
  }

  .lg-extension-name {
      @include type(headline5);
  }

  .lg-extension-meta {
      spacing: 6px;
  }

  #LookingGlassPropertyInspector {
    background: $surface;
    border: none;
    border-radius: $corner-radius;
    padding: 6px;
    box-shadow: $shadow-4;
  }