@layer base {
  .root {
    all: unset;
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 42px;
    height: 24px;
    background-color: var(--muted);
    border-radius: var(--radius-full);
    transition: background-color var(--animation-duration-normal) ease;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
  }

  .root:hover {
    background-color: var(--muted-foreground);
  }

  .root:focus-visible {
    box-shadow: var(--shadow-focus);
  }

  .root[data-state="checked"] {
    background-color: var(--primary);
  }

  .root[data-state="checked"]:hover {
    background-color: color-mix(in srgb, var(--primary), black 10%);
  }

  .thumb {
    display: block;
    width: 20px;
    height: 20px;
    background-color: var(--card);
    border-radius: var(--radius-full);
    box-shadow: 0 1px 2px color-mix(in srgb, black 10%, transparent);
    transition: transform var(--animation-duration-normal)
      cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateX(2px);
    will-change: transform;
  }

  .root[data-state="checked"] .thumb {
    transform: translateX(20px);
  }

  .root[data-disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }
}