@layer components {
  /* Base
  /* -------------------------------------------------------------------------- */

  /* The mapping-kind switcher: one island of tabs, current kind raised */
  .mapping-kind-tabs {
    --tab-background: var(--color-surface);
    --tab-color: var(--color-ink-subtle);
    --tab-padding-block: var(--block-space-half);
    --tab-padding-inline: var(--inline-space-double);
    --island-padding: 0.25rem;

    background-color: var(--color-surface-subtle);
    border: var(--border);
    border-radius: var(--border-radius-large);
    box-shadow: var(--shadow-small);
    display: flex;
    flex-wrap: wrap;
    gap: var(--island-padding);
    inline-size: fit-content;
    margin-block-end: var(--block-space);
    margin-inline: auto;
    max-inline-size: 100%;
    padding: var(--island-padding);
  }

  /* A link to another page, or a button when the page switches kinds itself */
  .mapping-kind-tabs__tab {
    background-color: transparent;
    border: 0;
    border-radius: calc(var(--border-radius-large) - var(--island-padding));
    color: var(--tab-color);
    font-weight: 500;
    padding-block: var(--tab-padding-block);
    padding-inline: var(--tab-padding-inline);
    text-decoration: none;
    transition: background-color var(--duration-fast) ease-in-out,
      color var(--duration-fast) ease-in-out;
    white-space: nowrap;
  }

  /* Variants
  /* -------------------------------------------------------------------------- */

  .mapping-kind-tabs__tab--current {
    --tab-color: var(--color-ink);

    background-color: var(--tab-background);
    box-shadow: var(--shadow-small);
  }

  /* States
  /* -------------------------------------------------------------------------- */

  :is(a, button).mapping-kind-tabs__tab:not(.mapping-kind-tabs__tab--current) {
    @media (any-hover: hover) {
      &:hover {
        --tab-color: var(--color-ink);

        background-color: oklch(from var(--tab-background) l c h / 50%);
      }
    }
  }
}