@helpwave/hightide/dist/style/uncompiled/theme/components/switch.css

helpwave's component and theming library

@layer components {
  [data-name="switch"] {
    @apply flex-col-0 items-center justify-center;
    @apply h-7 w-12 rounded-full border-2 p-1;
    transition: var(--coloring-transitions), var(--focus-transitions);

    &:not([data-disabled]) {
      @apply hover:cursor-pointer;
    }

    &[data-disabled] {
      @apply border-on-disabled bg-disabled cursor-not-allowed;
    }

    &:not([data-disabled]) {
      [data-invalid] {
        @apply border-negative;

        &:hover {
          @apply border-negative-hover bg-negative/10;
        }
      }

      &:not([data-invalid]) {
        @apply bg-input-background border-border;

        &:hover {
          @apply border-primary-hover bg-primary/10;
        }

        &[data-active] {
          @apply bg-primary border-primary;

          &:hover {
            @apply bg-primary-hover border-primary-hover;
          }
        }
      }
    }
  }

  [data-name="switch-track"] {
    @apply w-full h-full rounded-full flex items-center relative;
  }

  [data-name="switch-thumb"] {
    @apply rounded-full transition-all duration-[var(--animation-duration-in,250ms)] h-3 w-3;
    @apply absolute top-1/2 -translate-y-1/2 left-0.5;

    background-color: var(--color-switch-thumb-inactive, var(--color-on-surface));

    &[data-active] {
      @apply w-4 h-4;
      left: calc(100% - 4 * var(--spacing));
      background-color: var(--color-switch-thumb-active, var(--color-on-surface));
    }
  }
}