/* Window Picker */

// Window picker
.window-picker {
  // Space between window thumbnails
  @if $version >= 3.38 {
    spacing: 8px;
  } @else {
    -horizontal-spacing: 16px;
    -vertical-spacing: 16px;
  }

  @if $version < 40 {
    // Padding for container around window thumbnails
    padding: 0 16px 32px;

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

@if $version < 40 {
  // Borders on window thumbnails
  .window-clone-border {
    border: 4px solid stroke($on-dark);
    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 stroke($on-dark);
  }
}

// Window titles
.window-caption {
  padding: 4px 8px;
  border-radius: $corner-radius;
  background-color: $scrim;
  color: $on-scrim;

  @if $version < 40 {
    spacing: 0;
    border: 0;
    font-size: 1em;
    font-weight: normal;
  }
}

// Close button
.window-close {
  transition-duration: $duration;
  height: $medium-size;
  width: $medium-size;
  padding: 0;
  border: 0;
  border-radius: $medium-size / 2;
  box-shadow: $shadow-z2;
  background-color: $error;
  color: $on-error;

  background-image: url("assets/window-close.svg");
  background-size: 24px;

  @if $version < 3.38 {
    -shell-close-overlap: $medium-size / 2;
  }

  &:hover {
    box-shadow: $shadow-z4;
    border-color: transparent;
    background-color: overlay("hover", $on-error, $on: $error);
    color: $on-error;

    @if $version < 3.32 {
      background-image: url("assets/window-close.svg");
    }
  }

  &:active {
    transition-duration: $duration-ripple;
    box-shadow: $shadow-z8;
    border-color: transparent;
    background-color: overlay("pressed", $on-error, $on: $error);
    color: $on-error;

    @if $version < 3.32 {
      background-image: url("assets/window-close.svg");
    }
  }

  StIcon {
    icon-size: 24px;
    color: transparent;
  }
}

@if $version >= 40 {
  .workspace-background {
    // keep in sync with BACKGROUND_CORNER_RADIUS_PIXELS in workspace.js
    border-radius: 30px;
    background-color: black;
    box-shadow: $shadow-z4; // use z4 for the huge card
  }
}