.ui-switch {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;

  &.disabled {
    @apply cursor-default pointer-events-none opacity-50;
  }
}

.ui-switch__track {
  position: relative;
  width: 5.25rem;
  height: 3rem;
  border-radius: 1.5rem;
  transition: background-color 0.2s ease-in-out;
  @apply bg-isa-neutral-400;

  &--checked {
    @apply bg-isa-secondary-400;
  }
}

.ui-switch__thumb {
  position: absolute;
  left: 0.375rem;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
  transition: all 0.3s ease-in-out;
  @apply bg-isa-white;
  top: 50%;
  transform: translate(0.1875rem, -50%);

  &--checked {
    transform: translate(2.2rem, -50%);
    width: 2.25rem;
    height: 2.25rem;
  }

  .ui-switch:hover & {
    transform: translate(0.1875rem, -50%) scale(0.9);
  }

  .ui-switch:hover &--checked {
    transform: translate(2.25rem, -50%) scale(0.9);
  }
}

.ui-switch__icon {
  position: absolute;
  top: 50%;
  right: 0.75rem;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: color 0.2s ease-in-out;
}

.ui-switch__primary {
  .ui-switch__track {
    @apply bg-isa-neutral-400;

    &--checked {
      @apply bg-isa-secondary-400;
    }
  }

  .ui-switch__icon {
    @apply text-isa-white;
  }

  .ui-switch__track--checked .ui-switch__icon {
    @apply text-isa-secondary-400;
  }
}

.ui-switch:disabled,
.ui-switch.disabled {
  @apply cursor-default;
}
