@use 'sass:map';
@use 'Foundation/scss/input-chains' as chains;

$sizes: (
  tiny: (
    height: chains.$input-size-tiny,
    font-size: chains.$input-value-font-size-tiny,
    line-height: chains.$input-value-font-line-height-tiny,
    radius: var(--wds-input-border-radius-default-tiny, var(--wds-border-radius-300, 6px)),
    padding: var(--wds-input-padding-horizontal-tiny, var(--wds-space-100, 6px)),
    inner-start: var(--wds-space-50, 3px),
    inner-end: var(--wds-space-50, 3px),
    gap: var(--wds-space-100, 6px),
    gap-min: var(--wds-space-50, 3px),
  ),
  small: (
    height: chains.$input-size-small,
    font-size: chains.$input-value-font-size-small,
    line-height: chains.$input-value-font-line-height-small,
    radius: chains.$input-border-radius-default-small,
    padding: var(--wds-input-padding-horizontal-small, var(--wds-space-100, 6px)),
    inner-start: var(--wds-space-100, 6px),
    inner-end: var(--wds-space-50, 3px),
    gap: var(--wds-space-100, 6px),
    gap-min: var(--wds-space-50, 3px),
  ),
  medium: (
    height: chains.$input-size-medium,
    font-size: chains.$input-value-font-size-medium,
    line-height: chains.$input-value-font-line-height-medium,
    radius: chains.$input-border-radius-default-medium,
    padding: var(--wds-input-padding-horizontal-medium, var(--wds-space-100, 6px)),
    inner-start: var(--wds-space-100, 6px),
    inner-end: var(--wds-space-50, 3px),
    gap: var(--wds-space-150, 9px),
    gap-min: var(--wds-space-100, 6px),
  ),
  large: (
    height: chains.$input-size-large,
    font-size: chains.$input-value-font-size-large,
    line-height: chains.$input-value-font-line-height-large,
    radius: chains.$input-border-radius-default-large,
    padding: var(--wds-input-padding-horizontal-large, var(--wds-space-150, 9px)),
    inner-start: var(--wds-space-100, 6px),
    inner-end: var(--wds-space-50, 3px),
    gap: var(--wds-space-200, 12px),
    gap-min: var(--wds-space-100, 6px),
  ),
);

$font-family: var(
  --wds-font-family-default,
  var(--wsr-font-family, Madefor, 'Helvetica Neue', Helvetica, Arial, sans-serif)
);
$text-color: var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624));
$text-color-secondary: var(--wds-color-text-standard-secondary, var(--wsr-color-D20, #3b4057));
$border-color: var(--wds-input-border-color, var(--wds-color-border-standard-secondary, var(--wsr-color-B40, #d6e6fe)));
$border-color-hover: var(--wds-input-border-color-hover, var(--wds-color-border-standard-secondary, var(--wsr-color-B40, #d6e6fe)));
$border-color-active: var(--wds-input-border-color-focus, var(--wds-color-border-standard-secondary-active, var(--wsr-color-B10, #116dff)));
$background-fill-hover: var(--wds-input-background-fill-hover, var(--wds-color-fill-standard-tertiary-hover, var(--wsr-color-B50, #e7f0ff)));
$background-fill: var(--wds-input-background-fill-default, var(--wds-color-fill-standard-tertiary, var(--wsr-color-D80, #ffffff)));
$border-color-error: var(--wds-color-border-destructive-secondary-active, var(--wsr-color-R10, #e62214));
$border-color-warning: var(--wds-color-border-warning-secondary-active, var(--wsr-color-Y10, #ffb700));
$border-color-disabled: var(--wds-input-border-color-disabled, var(--wds-color-border-standard-secondary-disabled, var(--wsr-color-D10-20, rgba(0, 6, 36, 0.2))));
$background-fill-disabled: var(--wds-input-background-fill-disabled, var(--wds-color-fill-standard-tertiary-disabled, var(--wsr-color-D80, #ffffff)));
$text-color-disabled: var(--wds-color-text-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3)));

/* stylelint-disable declaration-no-important */
.otp-input {
  display: block;
  max-width: 100%;
  font-family: $font-family;

  /* stylelint-disable-next-line plugin/use-baseline */
  &__input::selection {
    background: transparent !important;
    color: transparent !important;
  }

  &__input:autofill,
  &__input:-webkit-autofill {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    color: transparent !important;
    opacity: 0 !important;
    -webkit-box-shadow: none !important;
    -webkit-text-fill-color: transparent !important;
  }

  @supports (-webkit-touch-callout: none) {
    &__input {
      right: 1px !important;
      left: -1px !important;
      font-weight: 100 !important;
      /* stylelint-disable-next-line plugin/use-baseline */
      font-stretch: ultra-condensed;
      font-optical-sizing: none !important;
      letter-spacing: -0.6em !important;
    }
  }

  &__input + * {
    pointer-events: all !important;
  }

  &__row {
    display: inline-flex;
    max-width: 100%;
    vertical-align: top;
  }

  /* Outranks FocusRing's .focus-ring--forced::before inset. */
  &#{&} .otp-input-slot--active::before {
    inset: -1px;
  }

  @each $name, $size in $sizes {
    $natural: calc(
      1ch + #{map.get($size, padding)} * 2 + #{map.get($size, inner-start)} + #{map.get($size, inner-end)} + 2px
    );

    &--size-#{$name} .otp-input-slot {
      flex: 0 1 auto;
      width: $natural;
      min-width: calc(#{$natural} * 0.6);
      height: #{map.get($size, height)};
      border-radius: #{map.get($size, radius)};
      font-size: #{map.get($size, font-size)};
      line-height: #{map.get($size, line-height)};
    }

    &--size-#{$name} &__gap,
    &--size-#{$name} .otp-input-separator {
      flex: 0 1000 auto;
      width: #{map.get($size, gap)};
      min-width: #{map.get($size, gap-min)};
    }

    &--size-#{$name} &__gap--wide {
      width: calc(#{map.get($size, gap)} * 3);
      min-width: calc(#{map.get($size, gap-min)} * 3);
    }
  }

  @media (hover: hover) {
    &:not(&--disabled):not(&--read-only) .otp-input-slot--hovered:not(.otp-input-slot--active) {
      background: $background-fill-hover;
    }

    &:not(&--disabled):not(&--read-only):not(&--status-error):not(&--status-warning)
      .otp-input-slot--hovered:not(.otp-input-slot--active) {
      border-color: $border-color-hover;
    }
  }

  &--status-error .otp-input-slot {
    border-color: $border-color-error;
  }

  &--status-warning .otp-input-slot {
    border-color: $border-color-warning;
  }

  &--status-error .otp-input-slot__char--selected,
  &--status-warning .otp-input-slot__char--selected {
    background: var(--wds-color-text-highlight, var(--wsr-color-B40, #d6e6fe));
  }

  &--read-only .otp-input-slot {
    color: $text-color-secondary;
  }

  &--disabled .otp-input-slot {
    border-color: $border-color-disabled;
    background: $background-fill-disabled;
    color: $text-color-disabled;
  }
}

.otp-input-group {
  display: flex;
  flex: 0 1 auto;
  min-width: 0;
}

.otp-input-separator {
  align-self: center;
  height: 2px;
  border-radius: 1px;
  background: $text-color-secondary;
}

.otp-input-slot {
  display: flex;
  position: relative;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  border: 1px solid $border-color;
  background: $background-fill;
  color: $text-color;
  font-family: $font-family;
  font-weight: var(--wds-font-weight-regular, var(--wsr-font-weight-regular, 400));
}

.otp-input-slot--active {
  border-color: $border-color-active;
}

.otp-input-slot__caret {
  width: 1px;
  height: 1.2em;
  background: $text-color;
  animation: wds-otp-input-caret-blink 1.2s step-end infinite;

  @media (prefers-reduced-motion) {
    animation: none;
  }
}
/* stylelint-enable declaration-no-important */

@keyframes wds-otp-input-caret-blink {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}