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

$border-radius: var(
  --wds-input-border-radius-default-medium,
  var(--wds-border-radius-400, 6px)
);
$border-color-hover: var(--wds-input-border-color-hover, var(--wds-color-border-standard-primary, #d6e6fe));

.input-shell {
  border-radius: $border-radius;
  border: solid 1px var(--wds-input-border-color, var(--wds-color-black-100-transparent-0, #d6e6fe));
  background-color: var(
    --wds-input-background-fill-default,
    var(--wds-color-black-750, #ffffff)
  );
  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};
  }

  &.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};
    font-size: var(--wds-input-value-font-size-large, var(--wds-font-size-body-small, 16px));
    line-height: var(--wds-input-value-font-line-height-large, var(--wds-font-size-body-small, 24px));
  }
}

.input-shell__content {
  padding: var(--wds-input-padding-vertical-medium, var(--wds-space-175, 5px))
    var(--wds-space-50, 3px) var(--wds-input-padding-vertical-medium, var(--wds-space-175, 5px))
    var(--wds-space-100, 6px);
}

@media (hover: hover) {
  .input-shell:not(.input-shell--disabled):not(:focus):not(.input-shell--focused-true):hover,
  .input-shell:not(.input-shell--disabled).input-shell--focused-false:hover {
    background-color: var(
      --wds-input-background-fill-hover,
      var(--wds-color-black-750, #e7f0ff)
    );
    border-color: $border-color-hover;
  }
}

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