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

.item {
  composes: flexRow from '../../dim-ui/common.m.scss';
  gap: 6px;
  width: min-content;
  align-items: start;
  justify-content: start;

  .energyMeter {
    margin-top: 3px;
    padding: 3px 0;
    width: 100%;

    @include phone-portrait {
      padding: 3px 0 20px;
    }
  }
}

.energySwapContainer {
  composes: flexRow from '../../dim-ui/common.m.scss';
  justify-content: flex-start;
  align-items: center;
  font-size: 10px;
}

.arrow {
  margin: 0 4px;
}

.energyValue {
  composes: flexRow from '../../dim-ui/common.m.scss';
  align-items: center;
}

.swapButton {
  composes: dim-button from global;
  justify-self: center;
  margin-top: 4px;

  @include phone-portrait {
    padding: 8px 20px;
  }
}

.swapButtonContainer {
  composes: flexColumn from '../../dim-ui/common.m.scss';
  min-height: 24px;
  align-items: center;

  @include phone-portrait {
    min-height: 32px;
  }
}

.energyHidden {
  visibility: hidden;
}

.archetype {
  --item-icon-size: calc(var(--item-size) * 0.4);
  height: var(--item-icon-size);
  width: var(--item-icon-size);
  :global(.item-img) {
    --item-size: var(--item-icon-size);
  }
}
