@kanton-basel-stadt/designsystem/dist/assets/css/components/form-elements/toggle-switch.css

Unplugin to install the digital design system of the canton of Basel-Stadt

@layer components {
  .toggle-switch {
    @apply relative inline-flex gap-5 items-center cursor-pointer select-none;
    &:before {
      @apply block content-[''] border border-blue-900 bg-white w-[36px] h-20 relative rounded-large transition-all ease-in-out duration-250;
    }
    &:after {
      @apply block content-[''] bg-blue-900 w-[14px] h-[14px] absolute left-[3px] rounded-full transition-all ease-in-out duration-250;
    }

    &.is-reversed {
      @apply flex-row-reverse;

      &:after {
        @apply left-auto right-[19px];
      }
    }

    &:hover {
      &:before {
        @apply border-blue-500;
      }

      &:after {
        @apply bg-blue-500;
      }
    }

    &.is-on-dark {
      @apply text-white;

      &:before {
        @apply border-white bg-blue-900;
      }

      &:after {
        @apply bg-white;
      }

      &:hover {
        &:before {
          @apply border-blue-300;
        }

        &:after {
          @apply bg-blue-300;
        }
      }
    }
  }

  /* Form kit alternative. We can savely remove this once we're able to export Pro components and restructure the toggle switch. */
  /* See https://github.com/formkit/formkit/issues/412 */
  .toggle-switch:has(.toggle-switch-input) {
    &:has(.toggle-switch-input:focus) {
      &:before {
        @apply border-purple-600 shadow-purple-600;
      }

      &.is-on-dark:before {
        @apply border-purple-400 shadow-[0_0_10px_0_#C196DC];
      }
    }

    &:has(.toggle-switch-input:disabled) {
      @apply cursor-default;

      &:before,
      &:before:hover {
        @apply border-gray-500;
      }

      &:after,
      &:after:hover {
        @apply bg-gray-500;
      }

      &.is-on-dark {
        @apply text-gray-300;

        &:before,
        &:before:hover {
          @apply border-gray-300 bg-transparent;
        }

        &:after,
        &:after:hover {
          @apply border-gray-300;
        }
      }
    }

    &:has(.toggle-switch-input:checked) {
      &:before {
        @apply bg-blue-900;
      }

      &:after {
        @apply bg-white left-[19px];
      }

      &.is-reversed {
        &:after {
          @apply left-auto right-[3px];
        }
      }

      &:hover {
        &:before {
          @apply border-blue-300;
        }

        &:after {
          @apply bg-blue-300;
        }
      }

      &.is-on-dark {
        &:before {
          @apply bg-white border-white;
        }

        &:after {
          @apply bg-blue-900;
        }

        &:hover {
          &:before {
            @apply border-blue-400;
          }

          &:after {
            @apply bg-blue-400;
          }
        }
      }
    }

    .toggle-switch-input {
      @apply sr-only;
    }
  }

  input[role='switch'] {
    &:focus + .toggle-switch {
      &:before {
        @apply border-purple-600 shadow-purple-600;
      }

      &.is-on-dark:before {
        @apply border-purple-400 shadow-[0_0_10px_0_#C196DC];
      }
    }

    &:disabled + .toggle-switch {
      @apply cursor-default;

      &:before,
      &:before:hover {
        @apply border-gray-500;
      }

      &:after,
      &:after:hover {
        @apply bg-gray-500;
      }

      &.is-on-dark {
        @apply text-gray-300;

        &:before,
        &:before:hover {
          @apply border-gray-300 bg-transparent;
        }

        &:after,
        &:after:hover {
          @apply border-gray-300;
        }
      }
    }

    &:checked + .toggle-switch {
      &:before {
        @apply bg-blue-900;
      }

      &:after {
        @apply bg-white left-[19px];
      }

      &.is-reversed {
        &:after {
          @apply left-auto right-[3px];
        }
      }

      &:hover {
        &:before {
          @apply border-blue-300;
        }

        &:after {
          @apply bg-blue-300;
        }
      }

      &.is-on-dark {
        &:before {
          @apply bg-white border-white;
        }

        &:after {
          @apply bg-blue-900;
        }

        &:hover {
          &:before {
            @apply border-blue-400;
          }

          &:after {
            @apply bg-blue-400;
          }
        }
      }
    }
  }
}