.toggle {
  --tglbg: var(--fill-color-inverse);
  --handleoffset: 1.5rem;
  --handleoffsetcalculator: calc(var(--handleoffset) * -1);
  --togglehandleborder: 0 0;
  @apply border-fill-primary bg-fill-primary h-6 w-12 cursor-pointer appearance-none rounded-[1.9rem] border opacity-50 duration-300 ease-in-out;
  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);

  &:focus-visible {
    outline: 2px solid #000000;
    outline-offset: 2px;
  }

  &:checked,
  &[checked='true'],
  &[aria-checked='true'] {
    --handleoffsetcalculator: var(--handleoffset);
    @apply opacity-100;
  }

  &:indeterminate {
    @apply 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;
  }

  &:disabled {
    @apply cursor-not-allowed border opacity-30;
    --togglehandleborder: 0 0 0 3px #000000 inset,
      var(--handleoffsetcalculator) 0 0 3px #000000 inset;
  }
  &-xs {
    --handleoffset: 0.5rem;
    @apply h-4 w-6;
  }
  &-sm {
    --handleoffset: 0.75rem;
    @apply h-5 w-8;
  }
  &-md {
    --handleoffset: 1.5rem;
    @apply h-6 w-12;
  }
  &-lg {
    --handleoffset: 2rem;
    @apply h-8 w-16;
  }
}

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