@layer components {
  [data-ui="toggle"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    gap: var(--spacing-4);
    height: var(--toggle-size);
    min-width: var(--toggle-size);
    color: var(--color-on-toggle);
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    outline: 0;
    background-color: var(--color-toggle);
    border: 1px solid var(--color-toggle-border);
    transition: all var(--transition-expressive-fast-effects);

    &[data-size="lg"] {
      --toggle-size: 40px;
      --svg-as-icon-size: var(--spacing-24);

      padding-inline: var(--spacing-8);
      border-radius: var(--radius-md);
    }

    &[data-size="md"] {
      --toggle-size: 32px;
      --svg-as-icon-size: var(--spacing-14);

      padding-inline: var(--spacing-6);
      border-radius: var(--radius-sm);
    }

    &[data-size="sm"] {
      --toggle-size: 24px;
      --svg-as-icon-size: var(--spacing-14);

      font: var(--font-body-sm);
      padding-inline: var(--spacing-4);
      border-radius: var(--radius-xs);
    }

    &[data-variant="primary"] {
      --color-toggle: var(--color-background);
      --color-on-toggle: var(--color-on-background);
      --color-toggle-border: var(--color-surface-container-highest);
      --color-toggle-container: var(--color-primary-container);
      box-shadow: 0 1px 2px 0 color-mix(in srgb, currentcolor 2%, transparent);

      &:hover:not(:disabled, &[data-pressed]),
      &[data-pressed] {
        color: var(--color-primary);
        background-color: var(--color-toggle-container);
        border-color: transparent;
      }
    }

    &[data-variant="ghost"] {
      --color-toggle: transparent;
      --color-on-toggle: var(--color-on-background);
      --color-toggle-border: transparent;
      --color-toggle-container: var(--color-surface-container-high);

      &:hover:not(:disabled, &[data-pressed]),
      &[data-pressed] {
        background-color: var(--color-toggle-container);
      }
    }

    /* Focus */
    &:focus-visible {
      box-shadow: 0 0 0 3px var(--color-toggle-container);
    }

    &:disabled {
      pointer-events: none;
      border-color: none;
      opacity: 0.38;
    }

    svg {
      flex-shrink: 0;
      pointer-events: none;
      width: var(--svg-as-icon-size);
      height: var(--svg-as-icon-size);
    }
  }
}
Prop	Type	Default
`variant`	`"primary" \| "ghost"`	`"primary"`
`size`	`"sm" \| "md" \| "lg"`	`"md"`
On this page
