//
// OSD
//
.info-osd {
  text-align: center;
  font-weight: bold;
  spacing: 1em;
  padding: 16px;
  color: $fg_color;
  border: 1px solid $borders_color;
  border-radius: 5px;
  background-color: $bg_color;
}

.restart-osd {
  font-size: 1.6em;
}

.workspace-osd {
  font-size: 4em;
}

.osd-window {
  text-align: center;
  font-weight: bold;
  spacing: 1em;
  padding: 20px;

  color: $fg_color;
  background-color: $bg_color;
  border: 1px solid $borders_color;
  border-radius: 5px;

  .osd-monitor-label {
    font-size: 3em;
  }

  .level {
    padding: 0;
    height: 0.7em;
    background-color: transparentize(black, 0.5);
    border-radius: 2px;
  }

  .level-bar {
    border-radius: 2px;
    background-color: $selected_bg_color;
  }
}

//
// Window list (windowList.js)
//
.window-list {
  &-box {
    spacing: 6px;
    padding-left: 10px;
    padding-top: 1px;

    &.vertical {
      spacing: 2px;
      padding-left: 0px;
      padding-right: 0px;
      padding-top: 10px;
      padding-bottom: 10px;
    }

    &:highlight {
      background-color: transparentize($error_color, 0.5);
    }
  }

  &-item-label {
    font-weight: bold;
    width: 15em;
    min-width: 5px;
  }

  &-item-box {
    font-weight: bold;
    background-image: none;
    padding-top: 0;
    padding-left: 8px;
    padding-right: 8px;
    transition-duration: 100;
    color: transparentize($panel_fg, 0.2);

    &.top,
    &.bottom {
      border-bottom-width: 2px;

      & StLabel {
        padding-left: 2px;
      }
    }

    &.right {
      padding-left: 0px;
      padding-right: 0px;
      border-right-width: 2px;

      & StBin {
        padding-right: 0;
      }
    }

    &.left {
      padding-left: 0px;
      padding-right: 0px;
      border-left-width: 2px;

      & StBin {
        padding-left: 1px;
      }
    }

    &:hover,
    &:groupfocus {
      color: $panel_fg;
      background-color: transparentize($panel_fg, 0.8);
    }

    &:active,
    &:checked,
    &:focus,
    &:running {
      color: $panel_fg;
      border-color: $selected_bg_color;
      background-color: transparentize($panel_fg, 0.8);
    }

    & .progress {
      background-color: transparentize($selected_bg_color, 0.2);
    }
  }

  &-item-demands-attention {
    background-gradient-direction: vertical;
    background-gradient-start: $destructive_color;
    background-gradient-end: $destructive_color;
  }

  &-preview {
    spacing: 6px;
    color: $fg_color;
    border: 1px solid $borders_color;
    background-color: $bg_color;
    border-radius: 3px;
    padding: 6px 12px 12px 12px;
    font-size: 1em;
  }
}

//
// Grouped window list
//

.grouped-window-list {
  &-item-label {
    font-weight: bold;
    width: 15em;
    min-width: 5px;
  }

  &-item-box {
    text-align: left;
    font-weight: bold;
    background-image: none;
    padding-top: 0;
    padding-left: 8px;
    padding-right: 8px;
    transition-duration: 100;
    color: transparentize($panel_fg, 0.2);

    &.top,
    &.bottom {
      border-bottom-width: 2px;

      & StLabel {
        padding-left: 2px;
      }
    }

    &.right {
      padding-left: 0px;
      padding-right: 0px;
      border-right-width: 2px;

      & StBin {
        padding-right: 0;
      }
    }

    &.left {
      padding-left: 0px;
      padding-right: 0px;
      border-left-width: 2px;

      & StBin {
        padding-left: 1px;
      }
    }

    &:hover,
    &:focus {
      color: $panel_fg;
      background-color: transparentize($panel_fg, 0.7);
    }

    &:active,
    &:checked {
      color: $panel_fg;
      border-color: $selected_bg_color;
    }

    & .progress {
      background-color: transparentize($selected_bg_color, 0.2);
    }
  }

  &-item-demands-attention {
    background-gradient-direction: vertical;
    background-gradient-start: $destructive_color;
    background-gradient-end: $destructive_color;
  }

  &-thumbnail-label {
    padding-left: 4px;
  }

  &-number-label {
    z-index: 99;
    color: $tooltip_border_color;
  }

  &-badge {
    border-radius: 256px;
    background-color: $tooltip_fg_color;
  }

  &-button-label {
    padding-left: 4px;
  }

  &-thumbnail-alert {
    background: rgba(255, 52, 52, 0.3);
  }

  &-thumbnail-menu {
    color: $fg_color;
    border: 1px solid $borders_color;
    background-color: $bg_color;
    border-radius: 3px;
    padding: 0px;

    > StBoxLayout {
      padding: 4px;
    }

    .item-box {
      padding: 10px;
      border-radius: 2px;
      spacing: 4px;

      &:outlined {
        padding: 8px;
        border: 1px solid $selected_bg_color;
      }

      &:selected {
        border: 1px solid $selected_bg_color;
      }
    }

    .thumbnail {
      width: 256px;
    }

    .separator {
      width: 1px;
      background: rgba(255, 255, 255, 0.2);
    }
  }
}

//
// Overview corner
//
#overview-corner {
  background-image: url('assets/misc/overview.png');

  &:hover {
    background-image: url('assets/misc/overview-hover.png');
  }
}