@layer components {
  .skin-switcher {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 0 auto;
  }

  .skin-switcher__label {
    font-family: var(--font-pixel);
    font-size: var(--text-lg);
  }

  .skin-switcher button {
    padding: var(--space-1) var(--space-3);
    border: var(--border-w) solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-ink);
    font-size: var(--text-xs);
    cursor: pointer;
    transition: transform var(--speed-fast);
  }

  .skin-switcher button:hover {
    transform: translateY(calc(var(--space-1) * -1));
  }

  .skin-switcher button[aria-pressed="true"] {
    background: var(--color-accent);
    color: var(--color-surface);
  }
}