@layer components {
  .theme {
    display: flex;
    flex-wrap: wrap;
    gap: var(--block-space-half);
    margin-block: var(--block-space);
  }

  .theme__option {
    display: inline-flex;
    align-items: center;
    gap: var(--inline-space-half);
    padding-block: 0.35rem;
    padding-inline: 0.75rem;
    border: 1px solid var(--color-rule);
    border-radius: var(--radius);
    font-size: var(--text-small);
    color: var(--color-muted);
    cursor: pointer;
    transition: background-color 120ms, border-color 120ms, color 120ms;

    & input {
      accent-color: var(--color-accent);
      margin: 0;
    }

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

    &:has(:checked) {
      border-color: var(--color-accent);
      background: var(--color-accent-wash);
      color: var(--color-ink);
    }
  }
}