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

$border-radius: var(
  --wds-input-border-radius-default-medium,
  var(--wds-border-radius-300, var(--wsr-border-radius-06, 6px))
);
$border-color-hover: var(--wds-input-border-color-hover, var(--wds-color-border-standard-secondary, var(--wsr-color-B40, #d6e6fe)));

.input-shell {
  box-sizing: border-box;
  border-radius: $border-radius;
  font-family: var(
    --wds-font-family-default,
    var(
      --wsr-font-family,
      Madefor,
      'Helvetica Neue',
      Helvetica,
      Arial,
      'メイリオ',
      'meiryo',
      'ヒラギノ角ゴ pro w3',
      'hiragino kaku gothic pro',
      sans-serif
    )
  );
  font-size: var(
    --wds-font-size-body-medium,
    var(--wsr-text-font-size-medium, 16px)
  );
  font-weight: var(
    --wds-font-weight-regular,
    var(--wsr-font-weight-regular, 400)
  );
  line-height: var(
    --wds-font-line-height-body-medium,
    var(--wsr-text-line-height-medium, 24px)
  );
  letter-spacing: var(--wds-font-letter-spacing-0, unset);
  border: solid 1px var(--wds-input-border-color, var(--wds-color-border-standard-secondary, var(--wsr-color-B40, #d6e6fe)));
  background-color: var(
    --wds-input-background-fill-default,
    var(--wds-color-fill-standard-tertiary, var(--wsr-color-D80, #ffffff))
  );
  padding: 0 var(--wds-input-padding-horizontal-medium, var(--wds-space-100, 6px)) 0
    var(--wds-input-padding-horizontal-medium, var(--wds-space-100, 6px));
  height: #{chains.$input-size-medium};
  position: relative;
  cursor: pointer;
  display: flex;
  width: 100%;
  color: var(
    --wds-color-text-standard-primary,
    var(--wsr-color-D10, #000624)
  );

  & * {
    box-sizing: border-box;
  }

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

  &::after {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border-radius: inherit;
    box-shadow: var(--wds-shadow-x-input, 0) var(--wds-shadow-y-input, 0)
      var(--wds-shadow-blur-input, 0) 0px
      var(--wds-shadow-fill-input, transparent) inset;
    pointer-events: none;
  }

  &#{&}--size-tiny {
    height: var(--wds-input-size-tiny, var(--wds-space-400, 23px));
    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 {
    height: #{chains.$input-size-small};
    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-large {
    height: #{chains.$input-size-large};
    font-size: var(--wds-input-value-font-size-large, var(--wds-font-size-body-medium, 16px));
    line-height: var(--wds-input-value-font-line-height-large, var(--wds-font-line-height-body-medium, 24px));
  }

  &#{&}--placeholder {
    color: var(--wds-color-text-placeholder, var(--wsr-color-D40, #868AA5));
  }

  &__content {
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: var(--wds-input-padding-vertical-medium, var(--wds-space-100, 5px))
      var(--wds-space-50, 3px) var(--wds-input-padding-vertical-medium, var(--wds-space-100, 5px))
      var(--wds-space-100, 6px);
  }

  @media (hover: hover) {
    &:not(&--disabled):not(:focus):not(&--focused-true):hover,
    &:not(&--disabled)#{&}--focused-false:hover {
      background-color: var(
        --wds-input-background-fill-hover,
        var(--wds-color-fill-standard-tertiary-hover, var(--wsr-color-B50, #e7f0ff))
      );
      border-color: $border-color-hover;
    }
  }

  &__suffix {
    display: flex;
    height: 100%;
    color: var(--wds-dropdown-icon-fill, var(--wds-color-text-primary, var(--wsr-color-B10, #116DFF)));
    padding: 0 var(--wds-space-100, 6px);
    align-items: center;
    justify-content: center;
  }

  &#{&}--disabled {
    border-color: var(
      --wds-color-border-standard-secondary-disabled,
      var(--wsr-color-D10-20, rgba(0, 6, 36, 0.2))
    );
    background-color: var(
      --wds-color-fill-standard-tertiary-disabled,
      var(--wsr-color-D80, #ffffff)
    );
    color: var(
      --wds-color-text-disabled,
      var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3))
    );
  }

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

  &:not(&--disabled):not(&--focused-false):focus,
  &:not(&--disabled)#{&}--focused-true {
    border-color: var(
      --wds-color-border-standard-secondary-active,
      var(--wsr-color-B10, #116DFF)
    );
  }

  &#{&}#{&}--has-visible-focus::before {
    inset: -1px;
  }
}