/*
 * Librarium Militaris: index tags.
 *
 * Every facet one game belongs to, as one flat run of ways back into the
 * archive.
 */

@layer components {
  .indextags {
    padding: var(--space-20);
    background-color: var(--color-surface);
    border-radius: var(--radius);
  }

  .indextags__title {
    margin-bottom: var(--space-12);
    padding-bottom: var(--space-8);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-ink-soft);
    font-family: var(--font-heading);
    font-size: var(--text-14);
    line-height: var(--leading-20);
    letter-spacing: var(--tracking-xl);
    text-transform: uppercase;
  }

  .indextags__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
  }

  .indextag {
    --indextag-color: var(--color-ink-soft);
    --indextag-border: var(--color-border-strong);

    padding: var(--space-4) var(--space-10);
    background-color: var(--color-surface-sunken);
    border: 1px solid var(--indextag-border);
    border-radius: var(--radius);
    color: var(--indextag-color);
    font-size: var(--text-12);
    line-height: var(--leading-16);
    transition: all var(--transition-chip);

    &:hover {
      --indextag-color: var(--color-ink-bright);
      --indextag-border: var(--color-border-hover);
    }

    &:focus-visible {
      outline: var(--focus-ring);
      outline-offset: var(--focus-ring-offset);
    }
  }
}