.swap {
  @apply cursor-pointer;
}

.swap > * {
  @apply duration-300 ease-in-out;
  transition-property: transform, opacity;
}

.swap-rotate .swap-on,
.swap-rotate .swap-indeterminate,
.swap-rotate input:indeterminate ~ .swap-on {
  @apply rotate-45;
}

.swap-rotate input:checked ~ .swap-off,
.swap-rotate.swap-active .swap-off,
.swap-rotate input:indeterminate ~ .swap-off {
  @apply -rotate-45;
}

.swap-rotate input:checked ~ .swap-on,
.swap-rotate.swap-active .swap-on,
.swap-rotate input:indeterminate ~ .swap-indeterminate {
  @apply rotate-0;
}

.swap-flip {
  transform-style: preserve-3d;
  perspective: 16em;
}
.swap-flip .swap-on,
.swap-flip .swap-indeterminate,
.swap-flip input:indeterminate ~ .swap-on {
  transform: rotateY(180deg);
  backface-visibility: hidden;
  @apply opacity-100;
}

.swap-flip input:checked ~ .swap-off,
.swap-flip.swap-active .swap-off,
.swap-flip input:indeterminate ~ .swap-off {
  transform: rotateY(-180deg);
  backface-visibility: hidden;
  @apply opacity-100;
}

.swap-flip input:checked ~ .swap-on,
.swap-flip.swap-active .swap-on,
.swap-flip input:indeterminate ~ .swap-indeterminate {
  transform: rotateY(0deg);
}
