@layer components {

  .switcher {
    min-width: 2.75rem;
    height: 1.5rem;
    @apply inline-flex items-center relative rounded-3xl bg-gray-200 dark:bg-gray-600 cursor-pointer transition-colors ease-in-out duration-200;

    input {
      @apply hidden;
    }

    &.switcher-checked {
      .switcher-toggle {
        left: calc(100% - 1.25rem - 0.125rem);
      }

      .switcher-toggle-loading {
        left: calc(100% - 1.25rem - 0.125rem);
      }

      .switcher-content {
        margin: 0 1.65rem 0 0.45rem;
      }
    }

    &.switcher-disabled {
      @apply opacity-50 cursor-not-allowed select-none;
    }
  }

  .switcher-toggle {
    @apply absolute transition-all ease-in-out duration-200 left-0.5 top-1/2 w-5 h-5 -translate-y-1/2;

    &:before {
      content: "";
      @apply absolute left-0 right-0 bottom-0 top-0 bg-neutral rounded-xl;
    }
  }

  .switcher-content {
    margin: 0 0.45rem 0 1.65rem;
    @apply text-white transition-colors ease-in-out duration-200;
  }

  .switcher-toggle-loading {
    width: 1.25rem;
    height: 1.25rem;
    left: 0.125rem;
    top: 0.125rem;
    @apply absolute transition-all ease-in-out duration-200;
  }

  .switcher-checked-loading {
    @apply !text-white;
  }

  .switcher-uncheck-loading {
    @apply dark:!text-white;
  }
}