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

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

    &:focus + .form-switch-slider {
      @apply ring ring-offset-2 ring-pine-500 ring-offset-pine-100;
    }

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

    &:checked + .form-switch-slider::after {
      @apply transform translate-x-1;
      content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23ffffff'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='m10 15.172 9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z'/%3E%3C/svg%3E%0A");
    }
  }

  .form-switch-slider {
    @apply relative inset-0 flex-shrink-0 w-[72px] h-10 transition duration-200 bg-gray-400 border-black rounded-full cursor-pointer border-3;

    &::before {
      @apply absolute z-10 w-[28px] h-[28px] transition duration-200 bg-white rounded-full ring-1 ring-black ring-opacity-5 shadow;
      content: "";
      left: 3px;
      bottom: 3px;
    }

    &::after {
      @apply absolute w-6 h-6 transition duration-150 transform translate-x-8 top-1 left-1;

      content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='m12 10.586 4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z'/%3E%3C/svg%3E%0A");
    }
  }
}