@use "../functions" as *;
@use "../mixins/border-radius" as *;
@use "../mixins/tokens" as *;

// stylelint-disable custom-property-no-missing-var-function
$otp-tokens: () !default;

// scss-docs-start otp-tokens
// stylelint-disable-next-line scss/dollar-variable-default
$otp-tokens: defaults(
  (
    --otp-size: var(--btn-input-lg-min-height),
    --otp-font-size: var(--btn-input-font-size),
    --otp-gap: .5rem,
  ),
  $otp-tokens
);
// scss-docs-end otp-tokens
// stylelint-enable custom-property-no-missing-var-function

// scss-docs-start otp-sizes
$otp-sizes: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$otp-sizes: defaults(
  ("sm", "lg"),
  $otp-sizes
);
// scss-docs-end otp-sizes

@layer components {
  .otp {
    @include tokens($otp-tokens);

    display: inline-flex;
    gap: var(--otp-gap);

    .form-control {
      width: var(--otp-size);
      min-height: var(--otp-size);
      padding: 0;
      font-size: var(--otp-font-size);
      font-weight: 500;
      line-height: 1;
      text-align: center;
      @include border-radius(var(--otp-border-radius, var(--btn-input-border-radius)));

      // Remove default number spinners
      &::-webkit-outer-spin-button,
      &::-webkit-inner-spin-button {
        margin: 0;
        appearance: none;
      }

      &[type="number"] {
        appearance: textfield;
      }

      &:focus,
      &:focus-visible {
        z-index: 1;
      }
    }

    &.is-valid .form-control,
    .was-validated &:valid .form-control {
      border-color: var(--form-valid-border-color);

      &:focus {
        --focus-ring-color: rgba(var(--success-rgb), .25);
        border-color: var(--form-valid-border-color);
      }
    }

    &.is-invalid .form-control,
    .was-validated &:invalid .form-control {
      border-color: var(--form-invalid-border-color);

      &:focus {
        --focus-ring-color: rgba(var(--danger-rgb), .25);
        border-color: var(--form-invalid-border-color);
      }
    }
  }

  // When used with .input-group, disable the gap and prevent inputs from stretching
  .otp.input-group {
    gap: 0;
    width: auto; // Override input-group's width: 100%

    .form-control {
      flex: 0 0 auto; // Don't grow or shrink, use fixed width
    }
  }

  .otp-separator {
    display: flex;
    align-items: center;
    padding-inline: var(--otp-gap);
    font-size: var(--otp-font-size);
    color: var(--fg-4);
    user-select: none;
  }

  @each $size, $_ in $otp-sizes {
    .otp-#{$size} {
      --otp-size: var(--btn-input-#{$size}-min-height);
      --otp-font-size: var(--btn-input-#{$size}-font-size);
      --otp-border-radius: var(--btn-input-#{$size}-border-radius);
    }
  }
}