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

.container {
  padding: 16px;
}

.assigned {
  display: flex;
  flex-flow: row wrap;
  gap: 16px 32px;

  @include phone-portrait {
    flex-flow: column nowrap;
  }
}

.itemAndMods {
  display: flex;
  flex-direction: row;
  align-items: flex-start;

  & > :first-child {
    margin-right: 8px;
  }

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

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

.unassigned {
  composes: sub-bucket from global;
}

.infoSectionHeader {
  margin-bottom: 10px;
  > h3 {
    margin-bottom: 2px;
  }
  > span {
    color: grey;
    font-style: italic;
  }
}

.costs {
  display: flex;
  flex-direction: row;
  gap: 6px;

  .cost {
    font-size: 12px !important;
  }
}

.headerInfo {
  display: flex;
  flex-flow: row wrap;
  row-gap: 4px;
  align-items: center;
}

.headerName {
  font-weight: bold;
  font-size: large;
  margin-right: 16px;
}

.headerStats {
  gap: 8px;
  width: auto !important;

  :global(.stat) {
    font-size: 1.2em;

    img {
      height: 20px;
      width: 20px;
    }
  }
}
