/* Dash */

$dash-spacing: 6px;
$dash-margin: 12px;

#dash {
  font-size: 1em;

  @if $version >= 40 {
    margin-top: 0;
    padding: $dash-margin $dash-margin 0;

    .overview-icon {
      // Same as normal .overview-icon
      padding: 6px;
    }
  } @else {
    @extend %overview-panel;
    padding: ($dash-spacing / 2) 0;
    border-left-width: 0;
    border-radius: 0 $corner-radius $corner-radius 0;

    &:rtl {
      border-right-width: 0;
      border-radius: $corner-radius 0 0 $corner-radius;
    }
  }

  .placeholder {
    height: 24px;
    background-image: url("assets/dash-placeholder.svg");
    background-size: contain;
  }

  .empty-dash-drop-target {
    width: 24px;
    height: 24px;
  }
}

@if $version >= 40 {
  .dash-background {
    margin-bottom: 0;
    padding: $dash-spacing ($dash-spacing / 2);
    border-radius: $corner-radius $corner-radius 0 0;
    background-color: fill($on-dark);
  }

  // Dash Items
  .dash-item-container .app-well-app,
  .show-apps {
    padding: $dash-spacing ($dash-spacing / 2);
  }

  .dash-separator {
    width: 1px;
    margin: $dash-spacing ($dash-spacing / 2);
    background-color: stroke($on-dark);
  }
} @else {
  // Dash Items
  .dash-item-container > StWidget {
    padding: ($dash-spacing / 2) $dash-spacing;
  }
}

// OSD Tooltip
.dash-label {
  // min-height: 32px - 6px * 2;
  padding: 7px 8px;
  border: 0;
  border-radius: $corner-radius;
  box-shadow: $shadow-z4;
  background-color: $surface-z8;
  color: $on-surface;
  text-align: center;

  // distance from the dash edge
  @if $version >= 40 {
    -y-offset: 8px;
  } @else {
    -x-offset: 8px;
  }
}

// Show apps button
.show-apps {
  @extend %overview-icon;
  color: hint($on-dark);

  &:checked {
    color: $on-dark;
  }
}