toggle.css

.toggle {
  --tglbg: hsl(var(--b1));
  --handleoffset: 1.5rem;
  --handleoffsetcalculator: calc(var(--handleoffset) * -1);
  --togglehandleborder: 0 0;
  @apply h-6 w-12 cursor-pointer appearance-none border border-base-content border-opacity-20 bg-base-content bg-opacity-50 duration-300 ease-in-out rounded-badge;
  transition: background, box-shadow var(--animation-input, 0.2s) ease-in-out;
  box-shadow: var(--handleoffsetcalculator) 0 0 2px var(--tglbg) inset, 0 0 0 2px var(--tglbg) inset, var(--togglehandleborder);
  [dir="rtl"] & {
    --handleoffsetcalculator: calc(var(--handleoffset) * 1);
  }
  &:focus-visible {
    outline: 2px solid hsl(var(--bc));
    outline-offset: 2px;
  }
  &:checked,
  &[checked="true"],
  &[aria-checked=true] {
    --handleoffsetcalculator: var(--handleoffset);
    @apply border-opacity-100 bg-opacity-100;
    [dir="rtl"] & {
      --handleoffsetcalculator: calc(var(--handleoffset) * -1);
    }
  }
  &:indeterminate {
    @apply border-opacity-100 bg-opacity-100;
    box-shadow: calc(var(--handleoffset) / 2) 0 0 2px var(--tglbg) inset, calc(var(--handleoffset) / -2) 0 0 2px var(--tglbg) inset, 0 0 0 2px var(--tglbg) inset;
    [dir="rtl"] & {
      box-shadow: calc(var(--handleoffset) / 2) 0 0 2px var(--tglbg) inset, calc(var(--handleoffset) / -2) 0 0 2px var(--tglbg) inset, 0 0 0 2px var(--tglbg) inset;
    }
  }
  &-primary {
    &:focus-visible {
      outline: 2px solid hsl(var(--p));
    }
    &:checked,
    &[checked="true"],
    &[aria-checked=true] {
      @apply border-primary;
      @apply border-primary border-opacity-10 bg-primary text-primary-content;
    }
  }
  &-secondary {
    &:focus-visible {
      outline: 2px solid hsl(var(--s));
    }
    &:checked,
    &[checked="true"],
    &[aria-checked=true] {
      @apply border-secondary;
      @apply border-secondary border-opacity-10 bg-secondary text-secondary-content;
    }
  }
  &-accent {
    &:focus-visible {
      outline: 2px solid hsl(var(--a));
    }
    &:checked,
    &[checked="true"],
    &[aria-checked=true] {
      @apply border-accent;
      @apply border-accent border-opacity-10 bg-accent text-accent-content;
    }
  }
  &-success {
    &:focus-visible {
      outline: 2px solid hsl(var(--su));
    }
    &:checked,
    &[checked="true"],
    &[aria-checked=true] {
      @apply border-success;
      @apply border-success border-opacity-10 bg-success text-success-content;
    }
  }
  &-warning {
    &:focus-visible {
      outline: 2px solid hsl(var(--wa));
    }
    &:checked,
    &[checked="true"],
    &[aria-checked=true] {
      @apply border-warning;
      @apply border-warning border-opacity-10 bg-warning text-warning-content;
    }
  }
  &-info {
    &:focus-visible {
      outline: 2px solid hsl(var(--in));
    }
    &:checked,
    &[checked="true"],
    &[aria-checked=true] {
      @apply border-info;
      @apply border-info border-opacity-10 bg-info text-info-content;
    }
  }
  &-error {
    &:focus-visible {
      outline: 2px solid hsl(var(--er));
    }
    &:checked,
    &[checked="true"],
    &[aria-checked=true] {
      @apply border-error;
      @apply border-error border-opacity-10 bg-error text-error-content;
    }
  }
  &:disabled {
    @apply cursor-not-allowed bg-transparent border-base-content opacity-30;
    --togglehandleborder: 0 0 0 3px hsl(var(--bc)) inset, var(--handleoffsetcalculator) 0 0 3px hsl(var(--bc)) inset;
  }
}

/* backward comptability */
.toggle-mark {
  @apply hidden;
}