.nano-switch {
  display: inline-flex;
  align-items: center;
  width: 2.75rem;
  height: 1.5rem;
  padding: 0.25rem;
  border: none;
  border-radius: var(--radius-full);
  background-color: hsl(var(--color-input));
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-default);

  &[aria-checked="true"] {
    background-color: hsl(var(--color-primary));

    .nano-switch__thumb {
      transform: translateX(1.25rem);
    }
  }

  .nano-switch__thumb {
    display: block;
    width: 1rem;
    height: 1rem;
    border-radius: var(--radius-full);
    background-color: hsl(var(--color-background));
    box-shadow: var(--shadow-sm);
    transition: transform var(--duration-fast) var(--ease-default);
    pointer-events: none;
  }

  &:focus-visible {
    outline: 2px solid hsl(var(--color-ring));
    outline-offset: 2px;
  }

  &:disabled,
  &[aria-disabled="true"] {
    opacity: 0.5;
    pointer-events: none;
  }
}