@use 'sass:map';
@use 'Foundation/scss/input-chains.studio' 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-200, 4px)),
    padding: var(--wds-input-padding-horizontal-tiny, var(--wds-space-100, 4px)),
    inner-start: var(--wds-space-50, 2px),
    inner-end: var(--wds-space-50, 2px),
    gap: var(--wds-space-100, 4px),
    gap-min: var(--wds-space-50, 2px),
  ),
  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, 4px)),
    inner-start: var(--wds-space-100, 4px),
    inner-end: var(--wds-space-50, 2px),
    gap: var(--wds-space-100, 4px),
    gap-min: var(--wds-space-50, 2px),
  ),
  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-200, 8px)),
    inner-start: var(--wds-space-100, 4px),
    inner-end: var(--wds-space-50, 2px),
    gap: var(--wds-space-150, 6px),
    gap-min: var(--wds-space-100, 4px),
  ),
  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-200, 8px)),
    inner-start: var(--wds-space-100, 4px),
    inner-end: var(--wds-space-50, 2px),
    gap: var(--wds-space-200, 8px),
    gap-min: var(--wds-space-100, 4px),
  ),
);

.otp-input {
  @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);
    }
  }
}