/*************************
 * Window-list extension *
 *************************/

.bottom-panel {
  // .window-button-icon height +
  // .window-button vertical padding +
  // .window-button > StWidget vertical padding)
  height: 30px; // = 2.25em
}

.window-list {
  @include fontscaling($ref_size * 1.0);
  spacing: 2px;
}

.window-button {
  padding: 1px;

  &:first-child:ltr { padding-left: 2px; }
  &:last-child:rtl { padding-right: 2px; }

  &-box { spacing: 4px; }

  & > StWidget {
    -st-natural-width: 18.75em;
    max-width: 18.75em;
    padding: 3px 6px 1px;
    border-radius: 0;
    color: $osd_secondary_fg_color;
    background-color: rgba(19, 25, 28, 0.01);
    background-gradient-drection: vertical;
    background-gradient-start: rgba(19, 25, 28, 0.01);
    background-gradient-end: rgba(19, 25, 28, 0.01);
    box-shadow: none;
    text-shadow: none;
  }

  &:hover > StWidget {
    color: $osd_fg_color;
    background-gradient-drection: vertical;
    background-gradient-start: rgba(19, 25, 28, 0.01);
    background-gradient-end: rgba(19, 25, 28, 0.01);
    box-shadow: inset 0 -2px 0 $osd_fill_color;
  }

  &:active > StWidget,
  &:focus > StWidget {
    color: $osd_fg_color;
    background-gradient-drection: vertical;
    background-gradient-start: rgba(19, 25, 28, 0.01);
    background-gradient-end: rgba(19, 25, 28, 0.01);
    box-shadow: inset 0 -2px 0 $osd_indicator_color;
  }

  &.focused {
    & > StWidget,
    &:active > StWidget {
      color: $osd_fg_color;
      box-shadow: none;
      box-shadow: inset 0 -2px 0 $osd_indicator_color;
    }
  }

  &.minimized {
    & > StWidget {
      color: $inverted_dim_fg_color;
      box-shadow: none;
    }
    &:hover > StWidget {
      color: $osd_fg_color;
      box-shadow: inset 0 -2px 0 $osd_fill_color;
    }
    &:active > StWidget {
      color: $osd_fg_color;
      box-shadow: inset 0 -2px 0 $osd_indicator_color;
    }
  }

  &-icon {
    width: 24px;
    height: 24px;
  }
}

.window-list-workspace-indicator {
  padding: 3px;

  & > StWidget {
    border: none;
    color: $osd_secondary_fg_color;
    background-color: rgba(19, 25, 28, 0.01);
    background-gradient-drection: vertical;
    background-gradient-start: rgba(19, 25, 28, 0.01);
    background-gradient-end: rgba(19, 25, 28, 0.01);
    font-weight: 700;
  }

  &:hover {
    background-gradient-drection: vertical;
    background-gradient-start: rgba(19, 25, 28, 0.01);
    background-gradient-end: rgba(19, 25, 28, 0.01);
    box-shadow: inset 0 -2px 0 $osd_fill_color;

    & > StWidget { color: $osd_fg_color; }
  }
  &:active,
  &:checked,
  &:focus {
    background-gradient-drection: vertical;
    background-gradient-start: rgba(19, 25, 28, 0.01);
    background-gradient-end: rgba(19, 25, 28, 0.01);
    box-shadow: inset 0 -2px 0 $osd_indicator_color;

    & > StWidget { color: $osd_fg_color; }
  }
}

.notification { font-weight: 500; }

