@use '../../variables.scss' as *;

.modsGrid {
  --item-icon-size: calc(0.8 * var(--item-size));
  min-width: calc(5 * var(--item-icon-size) + 4 * var(--item-margin));
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--item-icon-size));
  gap: 4px;
  align-content: flex-start;
  align-items: flex-start;

  @include phone-portrait {
    min-width: min(calc(5 * var(--item-icon-size) + 4 * var(--item-margin)), calc(100vw - 20px));
    max-width: calc(100vw - 20px);
  }
  :global(.item) {
    --item-size: var(--item-icon-size);
  }
  :global(.item-img) {
    border-color: var(--theme-item-socket-border);
  }
}

.modsPlaceholder {
  composes: placeholder from './LoadoutItemCategorySection.m.scss';
  flex: 1;
}

.missingItem {
  opacity: 0.3;
}

.artifactUnlock {
  background-color: #0a3b40;
}

.pickModButton {
  composes: resetButton from '../../dim-ui/common.m.scss';
  color: #999;
  border: 1px solid white;
  height: var(--item-icon-size);
  width: var(--item-icon-size);

  @include interactive($hover: true, $focus: true) {
    border-color: var(--theme-accent-primary);
    color: white;
  }
}

.buttons {
  display: flex;
  flex-flow: row wrap;
  margin-top: 8px;
  gap: 4px;
}

.fineprint {
  font-size: 0.85em;
  color: var(--theme-text-secondary);
  text-wrap: pretty;
  margin-top: 4px;
}
