.Checkbox {
  --size: 1rem;

  @apply ring-primary-100 relative inline-flex size-[var(--size)] cursor-pointer appearance-none items-center justify-center rounded border border-gray-300 p-0 align-middle after:btu-icon checked:after:btu-icon-check indeterminate:after:btu-icon-minus after:absolute after:inset-0 after:items-center after:justify-center after:font-semibold after:btu-icon-xs checked:border-primary-700 checked:bg-primary-700 checked:after:text-white indeterminate:border-primary-700 indeterminate:bg-primary-700 indeterminate:after:text-white hover:border-primary-700 hover:bg-primary-50 focus-visible:border-primary-700 focus-visible:bg-primary-50 checked:focus-visible:border-primary-700 checked:focus-visible:bg-primary-600 indeterminate:focus-visible:border-primary-700 indeterminate:focus-visible:bg-primary-600 checked:enabled:hover:border-primary-800 checked:enabled:hover:bg-primary-800 indeterminate:enabled:hover:border-primary-800 indeterminate:enabled:hover:bg-primary-800 disabled:pointer-events-none disabled:border-gray-300 disabled:bg-gray-100 disabled:after:text-gray-400;
}

.Checkbox-toggle {
  --gap-size: 0.12rem;
  --h: 1.25rem;
  --toggle-size: 1rem;
  --w: 2.25rem;

  @apply relative inset-0 inline-flex h-[var(--h)] w-[var(--w)] flex-row items-center justify-start rounded-xl border-0 bg-gray-200 p-[var(--gap-size)] content-[''] after:relative after:size-[var(--toggle-size)] after:rounded-lg after:bg-white after:shadow-sm after:content-[''] checked:justify-end checked:bg-primary-600 checked:after:content-[''] hover:border-0 hover:bg-gray-300 hover:checked:bg-primary-800 focus-visible:bg-gray-300 checked:focus-visible:bg-primary-600 disabled:pointer-events-none disabled:bg-gray-100 disabled:checked:bg-primary-300 disabled:checked:hover:bg-primary-300;

  &.is-active {
    @apply justify-end bg-primary-500 hover:bg-primary-800;
  }
}

input[type='checkbox'] {
  @apply Checkbox;
}
