@use '../variables' as *;

.armory {
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100%;
  padding: 16px;
  box-sizing: border-box;
  background-color: #0b0c0f;
  aspect-ratio: 16/9;
  user-select: text;

  :global(.item-details) {
    margin-left: 0;
    margin-right: 0;
    max-width: 300px;

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

  h2 {
    > button {
      margin-left: 1em;
    }
  }
}

.season {
  display: flex;
  align-items: center;
  .header &:nth-child(n + 1) {
    border-left: 1px solid #ccc;
    padding-left: 8px;
    margin-left: 4px;
  }
  > img {
    margin-right: 2px;
  }
}

.source {
  font-style: italic;
  opacity: 0.7;
}

.header {
  --item-size: 100px;

  display: grid;
  grid-template-columns: min-content 1fr;
  grid-template-areas:
    'item title'
    'item subtitle';
  gap: 0 16px;
  margin-bottom: 16px;

  @include phone-portrait {
    --item-size: 50px;
    grid-template-areas:
      'item title'
      'subtitle subtitle';
    gap: 8px 8px;
  }

  h1 {
    grid-area: title;
    margin: 0 0 4px 0;

    @include destiny-header;
  }

  :global(.item) {
    grid-area: item;
    img {
      // We're scaling up, keep it sharp
      image-rendering: pixelated;
    }
  }

  p {
    margin: 8px 0 0 0;
    white-space: pre-wrap;
  }
}

.headerContent {
  grid-area: subtitle;
}

.subtitle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 4px;
  gap: 4px;
  > * {
    margin: 0;
  }
}

.element {
  height: 16px;
  width: 16px;
}

.flavor {
  font-style: italic;
}

.section {
  width: 300px;
  margin-bottom: 10px;

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

.list {
  composes: flexColumn from '../dim-ui/common.m.scss';
  gap: 16px;
}

.alternate {
  composes: flexRow from '../dim-ui/common.m.scss';
  gap: 8px;
  text-align: left;
  width: max-content;
  max-width: 100%;

  > *:first-child {
    flex-shrink: 0;
  }

  b {
    text-transform: uppercase;
    font-weight: 600;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px;
  }
}

.alternateButton {
  composes: resetButton from '../dim-ui/common.m.scss';
  composes: item from global;
}

.alternateWishlist {
  text-transform: lowercase;
}
