/* /styleguide only. --swatch is set per item from the token it shows. */
@layer components {
  .swatches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: var(--block-space-half);
    padding: 0;
    list-style: none;
  }

  .swatch, .logo-tile {
    display: flex;
    flex-direction: column;
    justify-content: end;
    gap: var(--block-space-half);
    min-block-size: 5rem;
    padding: var(--block-space-half) var(--inline-space);
    font-size: var(--text-x-small);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: linear-gradient(var(--swatch) 60%, var(--color-bg-raised) 60%);
  }

  .logo-tile {
    align-items: center;
    background: var(--swatch);

    & code { background: var(--color-bg-raised); padding-inline: var(--inline-space-half); border-radius: var(--radius); }
  }

  .space-sample {
    display: flex;
    align-items: center;
    gap: var(--inline-space);
    font-size: var(--text-x-small);

    & span { block-size: 1rem; background: var(--color-link-tint); border: 1px solid var(--color-link); }
  }
}