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

.subclassContainer {
  --item-icon-size: calc(0.8 * var(--item-size));
  composes: flexRow from '../../dim-ui/common.m.scss';
  flex-wrap: wrap;
  max-width: calc(
    var(--item-size) + var(--item-margin) + var(--loadout-edit-subclass-columns, 3) *
      var(--item-icon-size) + (var(--loadout-edit-subclass-columns, 3) - 1) * 4px
  );
  gap: var(--item-margin);
  cursor: pointer;
}

.subclass {
  width: var(--item-size);
  min-width: var(--item-size);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--item-margin);
}

.power {
  display: inline;
  color: $gold;
  flex: inherit;
  font-size: 12px;
  letter-spacing: normal;
  svg {
    margin-right: 2px;
    font-size: 10px;
  }
}

.subclassMods {
  --item-icon-size: calc(0.8 * var(--item-size));
  width: calc(
    var(--loadout-edit-subclass-columns, 3) * var(--item-icon-size) +
      (var(--loadout-edit-subclass-columns, 3) - 1) * 4px
  );
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--item-icon-size));
  gap: 4px;
  align-content: flex-start;
  align-items: flex-start;
  :global(.item) {
    --item-size: var(--item-icon-size);
  }
}

.modsPlaceholder {
  composes: placeholder from '../loadout-ui/LoadoutItemCategorySection.m.scss';
  width: calc(3 * var(--item-icon-size) + var(--item-margin) + #{$item-border-width}) !important;
}

.classButton {
  // Smaller items to try and make it clearer that these aren't selected.
  --item-size: 32px;
  composes: resetButton from '../../dim-ui/common.m.scss';
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;

  color: #999;

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

.missingItem {
  opacity: 0.3;
}

.canDrop {
  filter: invert(20%);
  background-color: rgb(255, 255, 255, 0.2);
}

.isOver {
  filter: invert(40%);
  background-color: rgb(255, 255, 255, 0.4);
}
