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

.subclassContainer {
  --item-icon-size: calc(0.8 * var(--item-size));
  composes: flexRow from '../../dim-ui/common.m.scss';

  @include phone-portrait {
    width: 100%;
  }
}

.subclass {
  width: var(--item-size);
  min-width: var(--item-size);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: var(--item-margin);
  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(3 * var(--item-icon-size) + 2 * var(--item-margin));
  margin-right: calc(-1 * var(--item-margin) + #{$item-border-width});
  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 {
    width: min(calc(3 * var(--item-icon-size) + 2 * var(--item-margin)), 100%);
  }

  :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';
  width: calc(3 * var(--item-icon-size) + var(--item-margin) + #{$item-border-width}) !important;
}

.missingItem {
  opacity: 0.3;
}
