.hidden-input {
  @apply .absolute .w-px .h-px .-m-px .p-0 .border-0 .overflow-hidden;
  clip: rect(0, 0, 0, 0);
}

.hidden-input:disabled ~ * {
  @apply .opacity-40 .cursor-not-allowed;
}

.hidden-input:checked + .sw-checkbox > svg {
  @apply .opacity-100 .w-4/5;
}

.sw-control-label {
  @apply .cursor-pointer .my-1 .py-2 .px-4 .flex .rounded .leading-large .select-none;
  transition: all 0.15s ease-in-out;
}

.sw-control-label:not(:hover):not(:focus-within) .hidden-input:not(:checked) + .sw-checkbox {
  @apply .text-porcelain;
}

.sw-checkbox {
  @apply .border .flex .items-center .justify-center .flex-shrink-0 .rounded-sm;
  height: 1.25rem;
  width: 1.25rem;
}

.order-0 {
  order: 0;
}

.order-1 {
  order: 1;
}