// Switch Variables
$switch-transition: 0.3s ease-in-out !default;
$switch-sizes: (
  'xs': (
    scale: 0.68,
    font: 0.75rem,
    margin: 0.15em
  ),
  'sm': (
    scale: 0.75,
    font: 0.875rem,
    margin: 0.2em
  ),
  'md': (
    scale: 1,
    font: 1rem,
    margin: 0.25em
  ),
  'lg': (
    scale: 1.25,
    font: 1.125rem,
    margin: 0.3em
  ),
  'xl': (
    scale: 1.5,
    font: 1.25rem,
    margin: 0.35em
  )
) !default;

$switch-colors: (
  'primary': var(--bs-primary),
  'success': var(--bs-success),
  'danger': var(--bs-danger),
  'warning': var(--bs-warning),
  'info': var(--bs-info)
) !default;

// Mixins
@mixin switch-size($scale, $font-size, $margin-top) {
  font-size: $font-size;

  .form-check-input {
    width: 2.5em * $scale;
    height: 1.25em * $scale;
    margin-top: $margin-top;

    &::before {
      transform: translateX(2.5em * $scale - 1.25em * $scale);
    }
  }
}

@mixin switch-color($color-var) {
  background-color: $color-var;
  border-color: $color-var;
}

/* Base switch styling */
.form-check-input[type='checkbox'][role='switch'] {
  cursor: pointer;

  &:not(:disabled):hover {
    border-color: var(--bs-gray-500);
    opacity: 0.85;
  }

  &:disabled {
    cursor: not-allowed;
  }

  &:focus {
    border-color: var(--bs-primary);
    box-shadow: none;
  }

  // Switch colors
  &:checked {
    @include switch-color(var(--bs-primary));

    // Generate color variants
    @each $color-name, $color-value in $switch-colors {
      &.bg-#{$color-name} {
        @include switch-color($color-value);
      }
    }
  }

  // Validation states
  &.is-valid:checked {
    @include switch-color(var(--bs-success));
  }

  &.is-invalid:checked {
    @include switch-color(var(--bs-danger));
  }
}

/* Switch sizes with matching text */
.form-check.form-switch {
  display: flex;
  flex-direction: row;
  align-items: center;

  // Default switch size
  .form-check-input {
    width: 2.5em;
    height: 1.25em;
  }

  // Generate switch sizes
  @each $size, $values in $switch-sizes {
    &.switch-#{$size} {
      @include switch-size(
        map-get($values, scale),
        map-get($values, font),
        map-get($values, margin)
      );
    }
  }

  // Ensure proper alignment for all sizes when checked
  .form-check-input:checked::before {
    transform: translateX(0);
  }

  .form-check-label {
    margin-left: 0.25rem;
  }
}

/* Square switch styling */
.switch-square {
  .form-check-input {
    @extend .rounded-1 !optional;
    @include transition(all $switch-transition);

    &::before,
    &::after {
      @extend .rounded-1 !optional;
    }
  }
}

/* Layout utilities */
.switch-examples {
  .col-md-6:first-child {
    border-right: 1px solid var(--bs-border-color);
  }
}

.switch-heading {
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  color: var(--bs-gray-600);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--bs-border-color);
}
