@use '@/styles/variables' as *;
@use '@/styles/mixins' as *;

.toggle {
  @include flex-start;
  gap: $spacing-sm;
  cursor: pointer;

  &--disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }

  &--sm {
    .toggle__switch {
      width: 32px;
      height: 18px;
    }

    .toggle__thumb {
      width: 14px;
      height: 14px;
    }

    .toggle__switch--checked .toggle__thumb {
      transform: translateX(14px);
    }
  }

  &--md {
    .toggle__switch {
      width: 44px;
      height: 24px;
    }

    .toggle__thumb {
      width: 20px;
      height: 20px;
    }

    .toggle__switch--checked .toggle__thumb {
      transform: translateX(20px);
    }
  }

  &__switch {
    position: relative;
    border-radius: $border-radius-pill;
    background-color: $border-color;
    padding: 2px;
    @include transition-base;

    &--checked {
      background-color: $primary-color;
    }
  }

  &__thumb {
    display: block;
    border-radius: 50%;
    background-color: #ffffff;
    box-shadow: $shadow-sm;
    @include transition-base;
  }

  &__label {
    font-size: $font-size-sm;
    color: $text-primary;
    user-select: none;
  }
}
