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

.itemCategory {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--item-margin);
}

.itemsInCategory {
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--item-size));
  gap: var(--item-margin);
  width: 100%;
}
.itemBucket {
  display: flex;
  flex-direction: column;
  width: var(--item-size);
  gap: var(--item-margin);
}

.items {
  display: grid;
  gap: 2px;
  grid-template-columns: 1fr 1fr;
  min-height: unset !important;
}

.equipped {
  composes: sub-bucket from global;
  width: 100%;
  padding: 0;
  grid-template-columns: 1fr;
}

.unequipped {
  --item-icon-size: calc(0.5 * var(--item-size) - 1px);
  composes: sub-bucket from global;
  width: 100%;
  padding: 0;
  > * {
    --item-size: var(--item-icon-size);
  }
}

.categoryWeapons {
  width: calc(3 * var(--item-size) + 2 * var(--item-margin));
}

.categoryArmor {
  width: calc(5 * var(--item-size) + 4 * var(--item-margin));
  align-items: start;
  &.hasSetBonus {
    width: calc(6 * var(--item-size) + 5 * var(--item-margin));
  }
}

.categoryGeneral {
  width: calc(2 * var(--item-size) + 1 * var(--item-margin));
}

.missingItem {
  opacity: 0.3;
}

.categoryWeapons,
.categoryArmor {
  .equipped {
    :global(.item-drag-container) {
      height: calc(var(--item-size) + #{$badge-height} - #{$item-border-width});
    }
  }
}

.placeholder {
  background: rgb(255, 255, 255, 0.05);
  color: rgb(255, 255, 255, 0.5);
  width: 100%;
  height: var(--item-size);
  display: flex;
  align-items: center;
  justify-content: center;

  @include phone-portrait {
    display: none;
  }
}

.armorSubInfo {
  display: flex;
  flex-direction: column;
  gap: var(--item-margin);

  width: 100%;
  max-width: calc(5 * var(--item-size) + 4 * var(--item-margin));
  :global(.dim-button) {
    width: fit-content;
    margin: auto;
  }
}

.setBonusWrapper {
  --set-bonus-icon-size: calc(var(--item-size) * 0.58);
  align-self: start;
  * {
    flex-direction: column;
  }
}
