/* App Grid */

$app_icon_size: 96px;
$app_folder_size: 720px;

// app icons
.icon-grid {
  row-spacing: 12px;
  column-spacing: 12px;
  max-row-spacing: 36px;
  max-column-spacing: 36px;
  page-padding-top: 24px;
  page-padding-bottom: 24px;
  page-padding-left: 18px;
  page-padding-right: 18px;
}

/* App Icons */

// items in the app grid and dash
.overview-tile {
  background-color: transparent;

  &:focus { background-color: $light_divider_color; }
  &:hover { background-color: $light_divider_color; }
  &:active { background-color: $light_track_color; }
  &:highlighted,&:selected,
  &:checked { background-color: $light_track_color; }
  &:insensitive { background-color: transparent; }

  // override the %tile style
  border-radius: $wm_radius * 1.5;
  padding: 12px;

  // the icon itself
  .overview-icon {
    // item with a label
    &.overview-icon-with-label {
      > StBoxLayout {
        spacing: 6px;
      }
    }
  }
}

.app-folder {
  background-color: $light_divider_color;

  &:focus { background-color: $light_divider_color; }
  &:hover { background-color: rgba(white, 0.2); }
  &:active { background-color: rgba(white, 0.3); }
  &:highlighted,&:selected,
  &:checked { background-color: rgba(white, 0.3); }
  &:insensitive { background-color: transparent; }
}

.app-folder-dialog-container {
  // pad the top with panel height so the folder doesn't overlap the panel on smaller resolutions
  padding-top: $menuitem_size;
}

// Expanded app folder dialog
.app-folder-dialog {
  width: $app_folder_size;
  height: $app_folder_size;

  & .page-indicators {
    margin-bottom: $base_padding * 4;
  }

  & .icon-button, & .page-navigation-arrow {
    color: $light_alt_fg_color;
    background-color: transparent;

    &:hover {
      background-color: $light_divider_color;
      color: $light_fg_color;
    }

    &:active {
      background-color: $light_track_color;
      color: $light_fg_color;
    }
  }
}

.page-navigation-hint {
  width: if($laptop == 'true', 220px, 300px);

  &.dnd {
    background: rgba(255, 255, 255, 0.1);
  }

  &.next:ltr,
  &.previous:rtl {
    background-gradient-start: $light_divider_color;
    background-gradient-end: transparent;
    background-gradient-direction: horizontal;
    border-radius: $modal_radius 0px 0px $modal_radius;
  }

  &.previous:ltr,
  &.next:rtl {
    background-gradient-start: transparent;
    background-gradient-end: $light_divider_color;
    background-gradient-direction: horizontal;
    border-radius: 0px $modal_radius $modal_radius 0px;
  }
}

.page-navigation-arrow {
  margin: $base_padding;
  padding: $base_padding * 3;
  width: 24px;
  height: 24px;
  border-radius: $circular_radius;
  color: $light_alt_fg_color;
  background-color: transparent;

  > StIcon { color: $light_fg_color; }

  &:insensitive {
    background-color: $light_fill_color;
    color: $light_alt_disabled_fg_color;
  }

  &:hover {
   background-color: $light_divider_color;
   color: $light_fg_color;
  }

  &:active {
   background-color: $light_track_color;
   color: $light_fg_color;
  }
}