@use 'Foundation/scss/input-chains' as chains;
@use 'Foundation/scss/typography-chains' as typography;

.input-affix {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--wds-color-text-placeholder, var(--wsr-color-D40, #868aa5));
  flex: 1 0 auto;

  &--in-prefix {
    margin: auto 0 auto var(--wds-space-100, 6px);
  }

  [dir='rtl'] &--in-prefix {
    margin: auto var(--wds-space-100, 6px) auto 0;
  }

  &--size-tiny#{&}--in-suffix,
  &--size-small#{&}--in-suffix {
    margin: auto var(--wds-space-50, 3px) auto var(--wds-space-100, 6px);
  }

  [dir='rtl'] &--size-tiny#{&}--in-suffix,
  [dir='rtl'] &--size-small#{&}--in-suffix {
    margin: auto var(--wds-space-100, 6px) auto var(--wds-space-50, 3px);
  }

  &--size-medium#{&}--in-suffix,
  &--size-large#{&}--in-suffix {
    margin: auto var(--wds-space-100, 6px);
  }

  [dir='rtl'] &--size-medium#{&}--in-suffix,
  [dir='rtl'] &--size-large#{&}--in-suffix {
    margin: auto var(--wds-space-100, 6px);
  }

  &--size-large#{&}--border-round#{&}--in-suffix {
    margin: auto var(--wds-space-100, 6px) auto var(--wds-space-50, 3px);
  }

  [dir='rtl'] &--size-large#{&}--border-round#{&}--in-suffix {
    margin: auto var(--wds-space-50, 3px) auto var(--wds-space-100, 6px);
  }

  &--size-tiny,
  &--size-small,
  &--size-medium,
  &--size-large {
    font-family: typography.$font-family-default;
    font-weight: var(--wds-font-weight-regular, var(--wsr-font-weight-regular, 400));
    letter-spacing: var(--wds-font-letter-spacing-0, unset);
  }

  &--size-tiny {
    font-size: var(--wds-input-value-font-size-tiny, var(--wds-font-size-body-tiny, 12px));
    line-height: var(--wds-input-value-font-line-height-tiny, var(--wds-font-line-height-body-tiny, 15px));
  }

  &--size-small {
    font-size: #{chains.$input-value-font-size-small};
    line-height: #{chains.$input-value-font-line-height-small};
  }

  &--size-medium {
    font-size: #{chains.$input-value-font-size-medium};
    line-height: #{chains.$input-value-font-line-height-medium};
  }

  &--size-large {
    font-size: #{chains.$input-value-font-size-large};
    line-height: #{chains.$input-value-font-line-height-large};
  }

  &--disabled {
    color: var(--wds-color-text-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3)));
  }
}