
$app_icon_size: 96px;
$app_icon_spacing: 6px;

// app icons
.icon-grid {
  row-spacing: $app_icon_spacing * 2;
  column-spacing: $app_icon_spacing * 2;
  max-row-spacing: $app_icon_spacing * 12;
  max-column-spacing: $app_icon_spacing * 12;
  page-padding-top: $app_icon_spacing * 4;
  page-padding-bottom: $app_icon_spacing * 4;
  page-padding-left: $app_icon_spacing * 2;
  page-padding-right: $app_icon_spacing * 2;
}

// App Grid pagination indicators
.page-indicator {
  padding: $base_padding $base_padding * 2 0;

  .page-indicator-icon {
    width: 10px;
    height: 10px;
    border-radius: 10px; // the same as height&width
    background-color: white;
  }
}

.apps-scroll-view {
  padding: 0;
}

.page-navigation-hint {
  width: 300px;

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

  &.next:ltr,
  &.previous:rtl {
    background-gradient-start: rgba(255, 255, 255, 0.05);
    background-gradient-end: transparent;
    background-gradient-direction: horizontal;
    border-radius: 15px 0px 0px 15px;
  }

  &.previous:ltr,
  &.next:rtl {
    background-gradient-start: transparent;
    background-gradient-end: rgba(255, 255, 255, 0.05);
    background-gradient-direction: horizontal;
    border-radius: 0px 15px 15px 0px;
  }
}

.page-navigation-arrow {
  margin: $base_margin + 2px;
  width: 24px;
  height: 24px;
}
