/* Dash */

$dash_background_color: rgba(on($system), 0.2);
$dash_placeholder_size: 32px;
$dash_padding: 12px;
$dash_spacing: 2px;
$dash_edge_offset: 12px;
$dash_border_radius: if($corner_style == 'circular', $circular-radius, $material-radius + $dash_padding + $dash_spacing);

#dash {
  // a bit of spacing so that dash doesn't touch the screen edges
  padding-left: $space-size;
  padding-right: $space-size;

  // background behind item container
  .dash-background {
    background-color: $dash_background_color;
    border-radius: $dash_border_radius;
    padding-top: $dash_padding;
    padding-bottom: $dash_padding;
    padding-left: $dash_padding - $dash_spacing; // subtract the margins added to .overview-tile below
    padding-right: $dash_padding - $dash_spacing;
  }

  // items on the dash
  .dash-item-container {
    .placeholder {
      // background-image: url("resource:///org/gnome/shell/theme/dash-placeholder.svg");
      background-image: none;
      background-size: contain;
      height: $dash_placeholder_size;
    }

    .empty-dash-drop-target {
      width: $dash_placeholder_size;
      height: $dash_placeholder_size;
    }

    // IMPORTANT: items on the dash need to extend to the edge to be adequate click targets
    // as such the %tile style is overriden and button styles are applied to the child class .overview-icon
    .show-apps,
    .overview-tile {
      background: none;
      box-shadow: none;
      border: none;
      border-radius: 0;
      padding: 0;
      margin: 0 $dash_spacing;
      padding-bottom: $dash_edge_offset; // align with other items

      .overview-icon {
        border-radius: if($corner_style == 'circular', $circular-radius, $material-radius);
        padding: $space-size;
        spacing: $space-size;
        text-align: center;
        transition-duration: 100ms;
        background-color: transparent;
        color: on($system);
      }

      &:focus .overview-icon { background-color: on($system, divider); }
      &:hover .overview-icon { background-color: on($system, divider); }
      &:active .overview-icon { background-color: on($system, track); }
      &:checked .overview-icon { background-color: on($system, divider); }
    }

    // running app dot
    .app-grid-running-dot {
      // manually position the dot within the dash item
      offset-y: -$dash_padding;
    }
  }

  // separator between pinned and running apps
  .dash-separator {
    width: 1px;
    margin-left: $margin-size;
    margin-right: $margin-size;
    background-color: rgba(on($system), 0.15);
  }

  // make sure all dash components have same margin from screen edge
  .dash-separator,
  .dash-background {
    margin-bottom: $dash_edge_offset;
  }
}

// OSD Tooltip
.dash-label {
  border-radius: if($corner_style == 'circular', $circular-radius, $material-radius);
  padding: $space-size $space-size * 2;
  margin: $space-size * 1.5;
  color: on(dark);
  background-color: rgba(black, 0.75);
  border: none;
  box-shadow: $shell-shadow-z2;
  text-align: center;
  -y-offset: 0; // distance from the dash edge
  -x-offset: 0;
}
