@use 'sass:map';
@use 'Foundation/scss/input-chains.odeditor-dark' 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-150, 6px)),
    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-200, 8px)),
    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-300, 12px)),
    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),
  ),
);

$border-color: var(--wds-input-border-color, var(--wds-color-black-100-transparent-0, #d6e6fe));
$border-color-hover: var(--wds-input-border-color-hover, var(--wds-color-border-standard-primary, #d6e6fe));
$border-color-active: var(--wds-input-border-color-focus, var(--wds-color-border-standard-primary-active, #116dff));
$background-fill-default: var(--wds-input-background-fill-default, var(--wds-color-black-700, #ffffff)) !default;
$background-fill-hover: var(--wds-input-background-fill-hover, var(--wds-color-black-700, #e7f0ff)) !default;
$border-color-disabled: var(--wds-input-border-color-disabled, var(--wds-color-black-700, #d6e6fe));
$background-fill-disabled: var(--wds-input-background-fill-disabled, var(--wds-color-black-700, #ffffff));
$shadow-fill: var(--wds-color-white-transparent-20, transparent) !default;
$inner-shadow: var(--wds-shadow-x-input, var(--wds-shadow-x-25, 0)) var(--wds-shadow-y-input, var(--wds-shadow-y-25, 0))
  var(--wds-shadow-blur-input, var(--wds-shadow-blur-35, 0)) 0px var(--wds-shadow-fill-input, #{$shadow-fill}) inset;

.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);
    }
  }

  @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;
    }
  }

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

.otp-input-slot {
  border-color: $border-color;
  background: $background-fill-default;
  box-shadow: $inner-shadow;
}

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