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

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

.input-shell {
  border-radius: $border-radius;
  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));
  height: #{chains.$input-size-medium};

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

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

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

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

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

.input-shell__suffix {
  color: var(--wds-dropdown-icon-fill, var(--wds-color-text-standard-secondary, #116DFF));
}