// app icons
.icon-grid {
  row-spacing: $base_spacing * 6;
  column-spacing: $base_spacing * 6;
  max-row-spacing: $base_spacing * 12;
  max-column-spacing: $base_spacing * 12;
}

.app-folder-icon {
  padding: $base_padding;
  spacing-rows: $base_spacing;
  spacing-columns: $base_spacing;
}

// expanded folder
.app-folder-dialog {
  & .page-indicators {
    .page-indicator {
      padding: 15px 12px;
    }
  }

  & StButton#vhandle,
  & StButton#vhandle:hover,
  & StButton#vhandle:active { background-color: transparent; }
}

.page-indicator {
  padding: 15px 20px;

  .page-indicator-icon {
    width: 12px;
    height: 12px;
    border-radius: 12px;
    margin: 0;
    padding: 0;
    background-image: none;
    color: transparent;
    border: none;
    box-shadow: none;
    background-color: $light_alt_disabled_fg_color;
  }
  &:hover .page-indicator-icon {
    background-image: none;
    background-color: $light_disabled_fg_color;
  }
  &:active .page-indicator-icon {
    margin: 0;
    padding: 0;
    background-image: none;
    color: transparent;
    border: none;
    box-shadow: none;
    background-color: $light_alt_fg_color;
  }
  &:checked .page-indicator-icon {
    background-image: none;
    background-color: $light_alt_fg_color;
    transition-duration: 0ms;
  }
  &:checked:active { background-image: none; }
}

// Some hacks I don't even know
.all-apps {
  // horizontal padding to make sure scrollbars or dash don't overlap content
  padding: 0px 88px 10px 88px;
}

// shutdown and other actions in the grid
.system-action-icon {
  background-color: rgba(0,0,0,0.8);
  color: #fff;
  border-radius: 99px;
  icon-size: 48px;
}