@use 'Foundation/scss/input-chains.studio' as chains;

$border-radius: var(
  --wds-input-border-radius-default-medium,
  var(--wds-border-radius-200, 6px)
);

.input {
  border-radius: $border-radius;

  &:-webkit-autofill {
    border-radius: $border-radius;
  }

  &--size-tiny {
    height: var(--wds-input-size-tiny, var(--wds-space-600, 23px));
  }

  &--size-tiny > &__wrapper {
    padding: 0 var(--wds-input-padding-horizontal-tiny, var(--wds-space-100, 6px));
  }

  &--size-tiny > &__wrapper > &__input {
    padding: var(--wds-input-padding-vertical-tiny, var(--wds-space-100, 3px)) var(--wds-space-50, 3px);
  }

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

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

  &--size-small > &__wrapper > &__input:-webkit-autofill::first-line {
    font-size: #{chains.$input-value-font-size-small};
    line-height: #{chains.$input-value-font-line-height-small};
  }

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

  &--size-medium > &__wrapper {
    padding: 0 var(--wds-input-padding-horizontal-medium, var(--wds-space-200, 6px)) 0
      var(--wds-input-padding-horizontal-medium, var(--wds-space-200, 6px));
  }

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

  &--size-medium > &__wrapper > &__input:-webkit-autofill::first-line {
    font-size: #{chains.$input-value-font-size-medium};
    line-height: #{chains.$input-value-font-line-height-medium};
  }

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

  &--size-large > &__wrapper {
    padding: 0 var(--wds-input-padding-horizontal-large, var(--wds-space-200, 9px)) 0
      var(--wds-input-padding-horizontal-large, var(--wds-space-200, 9px));
  }

  &--size-tiny#{&}--border-standard {
    $tiny-radius: var(--wds-input-border-radius-default-tiny, var(--wds-border-radius-200, 6px));

    border-radius: $tiny-radius;

    &:-webkit-autofill {
      border-radius: $tiny-radius;
    }
  }

  &--size-small#{&}--border-standard {
    $small-radius: var(--wds-input-border-radius-default-small, var(--wds-border-radius-200, 6px));

    border-radius: $small-radius;

    &:-webkit-autofill {
      border-radius: $small-radius;
    }
  }

  &--size-medium#{&}--border-standard {
    border-radius: $border-radius;

    &:-webkit-autofill {
      border-radius: $border-radius;
    }
  }

  &--size-large#{&}--border-standard {
    $large-radius: var(--wds-input-border-radius-default-large, var(--wds-border-radius-200, 6px));

    border-radius: $large-radius;

    &:-webkit-autofill {
      border-radius: $large-radius;
    }
  }

  &__menu-arrow svg {
    color: var(--wds-dropdown-icon-fill, var(--wds-color-text-standard-secondary, var(--wsr-color-D10, #000624)));
  }

  &--border-standard#{&}--no-left-border-radius,
  &--border-round#{&}--no-left-border-radius {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
  }

  &--border-standard#{&}--no-right-border-radius,
  &--border-round#{&}--no-right-border-radius {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
  }

  &--border-bottom-line,
  &--border-none {
    border-radius: 0;
  }

  &--border-bottom-line:-webkit-autofill {
    border-radius: 0;
  }
}