/* OVERVIEW */

@if $version >= 40 {
  .controls-manager,
  .secondary-monitor-workspaces {
    spacing: 16px;
  }

  #overviewGroup {
    background-color: $system;
    color: $on-system;

    StScrollBar {
      @extend %scrollbar-on-dark;
    }
  }
} @else {
  #overview {
    spacing: 24px;
    background-color: transparent;
    color: $on-dark;

    StScrollBar {
      @extend %scrollbar-on-dark;
    }
  }

  .overview-controls {
    padding-bottom: 32px;
  }
}

%overview-panel {
  transition-duration: $duration-panel;
  border: 0;
  background-color: fill($on-dark);
  color: $on-dark;
}

%overview-status-text {
  @include type(headline3);
  color: disabled($on-dark);
}

%overview-item {
  @extend %-overview-item;

  &:focus {
    @extend %-overview-item-focus;
  }

  &:hover,
  &:selected {
    @extend %-overview-item-hover;
  }

  &:active,
  &:checked {
    @extend %-overview-item-active;
  }
}

%overview-icon {
  .overview-icon {
    @extend %-overview-item;
  }

  &:focus {
    .overview-icon {
      @extend %-overview-item-focus;
    }
  }

  &:drop,
  &:hover,
  &:selected {
    .overview-icon {
      @extend %-overview-item-hover;
    }
  }

  &:active,
  &:checked {
    .overview-icon {
      @extend %-overview-item-active;
    }
  }
}

%-overview-item {
  padding: 6px;
  border: 0;
  border-radius: $corner-radius;
  background-color: transparent;
  color: inherit;
  text-align: center;
  transition-duration: $duration;
}

%-overview-item-focus {
  border-image: none;
  background-image: none;
  background-color: overlay("focus", $on-dark);
  color: inherit;
  transition-duration: 0ms;
}

%-overview-item-hover {
  border: 0;
  border-image: none;
  background-image: none;
  background-color: overlay("hover", $on-dark);
  color: inherit;
  transition-duration: 0ms;
}

%-overview-item-active {
  box-shadow: none;
  background-color: overlay("pressed", $on-dark);
  color: inherit;
  transition-duration: $duration-ripple;
}