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

    &:checked + .form-switch-slider {
      @apply bg-accent-base;
    }

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

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

    &:checked + .form-switch-slider::after {
      @apply transform translate-x-0 left-2;
      content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 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");
    }

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

    &:checked + .form-switch-slider.form-switch-slider--small::after {
      @apply left-1;
    }
  }

  .form-switch-slider {
    @apply relative inset-0 flex-shrink-0 w-16 h-8 transition duration-200 rounded-full cursor-pointer bg-highlight border-contrast border-3;

    &.form-switch-slider--small {
      @apply w-12 h-6;

      &::before {
        @apply w-4 h-4;
      }

      &::after {
        @apply translate-x-5;
        left: 0;
        top: -1px;
      }
    }

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

    &::after {
      @apply absolute w-5 h-5 transition duration-150 transform translate-x-5;

      content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 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");
      top: 3px;
      left: 10px;
    }
  }
}