@layer component {
  .collection {
    .collection__nav {
      margin-block-end: 20px;
    }

    .collection__back {
      display: inline-flex;
      gap: 10px;
      align-items: center;

      .icon {
        width: calc(20 / 16 * 1rem);
        height: calc(20 / 16 * 1rem);
      }

      &:hover {
        text-decoration: underline 1px;
        text-underline-offset: 4px;
      }
    }

    .collection__header {
      margin-block-end: 40px;
    }

    .collection__description {
      margin-block: 24px;
    }

    .collection__tags {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5em;
      list-style: none;
      padding: 0;
    }

    .collection__tag {
      padding: 0.25rem 0.75rem;
      border: 1px solid var(--card-border-color);
      border-radius: 100vmax;
      background-color: var(--card-bg-color);
    }

    .collection__meta {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: last baseline;
      gap: 1em;
      margin-block-end: 32px;
      font-size: var(--fs-14);

      @media (width >= calc(600 / 16 * 1rem)) {
        font-size: var(--fs-18);
      }
    }

    .collection__count {
      font-style: italic;
      font-weight: 300;
      font-size: var(--fs-18);

      @media (width >= calc(600 / 16 * 1rem)) {
        font-size: var(--fs-20);
      }
    }

    .collection__sort {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .collection__select-label {
    }

    .collection__select {
      position: relative;
      width: max-content;
    }

    .collection__select-native {
      position: absolute;
      inset: 0;
      opacity: 0;
      cursor: pointer;

      &:hover + .collection__select-presentational {
        background-color: var(--card-bg-color-hover);
        border-color: var(--card-border-color-hover);
      }

      &:focus + .collection__select-presentational {
        outline: 2px solid AccentColor;
        outline: 2px solid -webkit-focus-ring-color;
        outline-offset: 2px;
      }
    }

    .collection__select-presentational {
      background-color: var(--card-bg-color);
      border: 1px solid var(--card-border-color);
      padding: 12px 16px;
      padding-right: 52px;
      border-radius: 8px;
      transition: 150ms ease-in-out;
      transition-property: background-color, border-color;
    }

    .collection__select-value {
    }

    .collection__select-icon {
      position: absolute;
      right: 10px;
      top: 0;
      bottom: 0;
      margin: auto;
      pointer-events: none;
    }
  }
}