/* OSD */
.osd-window {
  text-align: center;
  font-weight: bold;
  spacing: 1em;
  margin: 32px;
  min-width: 64px;
  min-height: 64px;

  .osd-monitor-label { @include font(display-2); }
  .level {
    height: 0.6em;
    border-radius: 4px;
    background-color: $divider_color;
    color: $fg_color;
  }
  .level-bar {
    background-color: $primary_color;
    border-radius: 2px;
  }
}

/* Pad OSD */
.pad-osd-window {
  padding: 32px;
  background-color: $bg_color;

  .pad-osd-title-box { spacing: 12px; }
  .pad-osd-title-menu-box { spacing: 6px; }
}

.combo-box-label {
  width: 15em;
}

/* App Switcher */
.switcher-popup {
  padding: 8px;
  spacing: 16px;
}

.osd-window,
.resize-popup,
.switcher-list {
  @extend %osd-panel;
}

  .switcher-list-item-container { spacing: 8px; }

  .switcher-list .item-box {
    padding: 8px;
    border-radius: 2px;
  }

  .switcher-list .item-box:outlined {
    padding: 8px;
    border: none;
    background-color: $divider_color;
  }

  .switcher-list .item-box:selected {
    background-color: $primary_color;
    color: $inverse_fg_color;
  }

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

  .switcher-list .thumbnail {
    width:  256px;
  }

  .switcher-list .separator {
    width: 1px;
    background: $border_color;
  }

  .switcher-arrow {
    border-color: rgba(0,0,0,0);
    color: $hint_fg_color;
    &:highlighted {
      color: $fg_color;
    }
  }

  .input-source-switcher-symbol {
    @include font(display-2);
    width: 96px;
    height: 96px;
  }

/* Window Cycler */
.cycler-highlight { border: 4px solid $primary_color; }

/* Workspace Switcher */
.workspace-switcher-group { padding: 8px; }

  .workspace-switcher-container {
    @extend %osd-panel;
  }

  .workspace-switcher {
    background: transparent;
    border: 0px;
    border-radius: 0px;
    padding: 0px;
    spacing: 8px;
  }

  .ws-switcher-active-up, .ws-switcher-active-down {
    height: 48px;
    background-color: $primary_color;
    color: $inverse_fg_color;
    background-size: 32px;
    border-radius: 2px;
  }

  .ws-switcher-box {
    height: 48px;
    border: none;
    background: $divider_color;
    border-radius: 2px;
  }

%osd-panel {
  color: $fg_color;
  background-color: $base_color;
  border: none;
  box-shadow: $shadow_4;
  border-radius: 2px;
  padding: 12px;
}

/* Tiled window previews */
.tile-preview {
  background-color: rgba($alt_primary_color, $lower_opacity);
  border: 1px solid $alt_primary_color;
}

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

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

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