@layer components {
  .form-switch {
    @apply absolute w-0 h-0 opacity-0;

    &:checked + .form-switch-slider {
      @apply bg-pine-600;
    }

    &:focus + .form-switch-slider {
      @apply ring;
    }

    &:checked + .form-switch-slider::before {
      @apply transform translate-x-5;
    }
  }

  .form-switch-slider {
    @apply relative inset-0 flex-shrink-0 w-10 h-5 transition duration-200 bg-gray-400 rounded-full cursor-pointer;

    &::before {
      @apply absolute w-4 h-4 transition duration-200 bg-white rounded-full ring-1 ring-black ring-opacity-5;
      content: "";
      left: 2px;
      bottom: 2px;
    }
  }
}