@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: var(--wds-input-border-color, var(--wds-color-border-standard-secondary, var(--wsr-color-B40, #d6e6fe)));
$border-color-hover: var(--wds-input-border-color-hover, var(--wds-color-border-standard-secondary, var(--wsr-color-B40, #d6e6fe)));
$background-fill-default: var(--wds-input-background-fill-default, var(--wds-color-fill-standard-tertiary, var(--wsr-color-D80, #ffffff)));
$background-fill-hover: var(--wds-input-background-fill-hover, var(--wds-color-fill-standard-tertiary-hover, var(--wsr-color-B50, #e7f0ff)));

.input {
  box-sizing: border-box;
  position: relative;
  display: flex;
  border: solid 1px $border-color;
  background-color: var(--wds-internal-input-background, #{$background-fill-default});
  color: var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624));
  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-weight: var(--wds-font-weight-regular, var(--wsr-font-weight-regular, 400));
  letter-spacing: var(--wds-font-letter-spacing-0, unset);

  & * {
    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;
  }

  &__input {
    color: var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624));
    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-weight: var(--wds-font-weight-regular, var(--wsr-font-weight-regular, 400));
    letter-spacing: var(--wds-font-letter-spacing-0, unset);
    display: block;
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
    border: 0;
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: 0;
    background: transparent;
    box-shadow: none;
    /* stylelint-disable-next-line plugin/use-baseline */
    overflow-block: scroll;

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

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

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

    &:-ms-input-placeholder {
      color: var(--wds-color-text-placeholder, var(--wsr-color-D40, #868aa5)) !important;
    }

    /* stylelint-disable-next-line plugin/use-baseline */
    &::selection {
      background: var(--wds-color-text-highlight, var(--wsr-color-B40, #d6e6fe));
    }
  }

  &__wrapper {
    display: flex;
    width: 100%;
  }

  &__wrapper > &__input {
    width: inherit;
  }

  &--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-tiny > &__wrapper {
    padding: 0 var(--wds-input-padding-horizontal-tiny, var(--wds-space-100, 6px));
  }

  &--size-tiny > &__wrapper > &__input {
    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));
    padding: var(--wds-input-padding-vertical-tiny, var(--wds-space-50, 3px)) var(--wds-space-50, 3px);
  }

  &--size-tiny > &__wrapper > &__input:-webkit-autofill::first-line {
    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-small > &__wrapper {
    padding: 0 var(--wds-input-padding-horizontal-small, var(--wds-space-100, 6px)) 0
      var(--wds-input-padding-horizontal-small, var(--wds-space-100, 6px));
  }

  &--size-small > &__wrapper > &__input {
    font-size: #{chains.$input-value-font-size-small};
    line-height: #{chains.$input-value-font-line-height-small};
    padding: var(--wds-input-padding-vertical-small, var(--wds-space-100, 5px))
      var(--wds-space-50, 3px) var(--wds-input-padding-vertical-small, var(--wds-space-100, 5px))
      var(--wds-space-100, 6px);
  }

  &--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-100, 6px)) 0
      var(--wds-input-padding-horizontal-medium, var(--wds-space-100, 6px));
  }

  &--size-medium > &__wrapper > &__input {
    font-size: #{chains.$input-value-font-size-medium};
    line-height: #{chains.$input-value-font-line-height-medium};
    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);
  }

  &--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};
    font-size: #{chains.$input-value-font-size-large};
    line-height: #{chains.$input-value-font-line-height-large};
  }

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

  &--size-large > &__wrapper > &__input {
    font-size: #{chains.$input-value-font-size-large};
    line-height: #{chains.$input-value-font-line-height-large};
    padding: var(--wds-input-padding-vertical-large, var(--wds-space-150, 8px))
      var(--wds-space-50, 3px) var(--wds-input-padding-vertical-large, var(--wds-space-150, 8px))
      var(--wds-space-100, 6px);
  }

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

  &--has-focus#{&}--border-standard,
  &--has-focus#{&}--border-round {
    border-color: var(--wds-input-border-color-focus, var(--wds-color-border-standard-secondary-active, var(--wsr-color-B10, #116dff)));
    outline-offset: 1px;
  }

  &#{&}--has-focus#{&}--border-standard::before,
  &#{&}--has-focus#{&}--border-round::before {
    inset: -1px;
  }

  &--border-bottom-line::before {
    content: ' ';
    transition: width 0.2s ease-in-out;
    width: 0;
    position: absolute;
    height: 1px;
    background: var(--wds-color-border-standard-secondary-active, var(--wsr-color-B10, #116dff));
    bottom: 0;

    @media (prefers-reduced-motion) {
      transition: none;
    }
  }

  &--border-bottom-line#{&}--status-error::before {
    background: var(--wds-color-border-destructive-secondary-active, var(--wsr-color-R10, #e62214));
  }

  &--border-bottom-line#{&}--status-warning::before {
    background: var(--wds-color-border-warning-secondary-active, var(--wsr-color-Y10, #ffb700));
  }

  &--border-bottom-line#{&}--has-focus::before {
    width: 100%;
  }

  &#{&}#{&}--force-hover#{&}--border-standard,
  &#{&}#{&}--force-hover#{&}--border-round {
    background-color: var(--wds-internal-input-background, #{$background-fill-hover});
  }

  &--force-hover {
    border-color: $border-color-hover;
  }

  @media (hover: hover) {
    &:hover:not(&--has-focus):not(&--disabled):not(&--read-only)#{&}--border-standard,
    &:hover:not(&--has-focus):not(&--disabled):not(&--read-only)#{&}--border-round {
      background-color: var(--wds-internal-input-background, #{$background-fill-hover});
    }

    &:hover:not(&--read-only) {
      border-color: $border-color-hover;
    }

    &:hover#{&}--read-only:not(&--disabled) {
      border-color: $border-color;
    }

    &:not(&--has-focus)#{&}--border-bottom-line:not(&--disabled):hover {
      border-bottom-color: var(--wds-color-border-standard-secondary-hover, var(--wsr-color-D60, #dfe5eb));
    }

    &:not(&--has-focus)#{&}--border-bottom-line:not(&--disabled)#{&}--status-error:hover {
      border-bottom-color: var(--wds-color-border-destructive-secondary-hover, var(--wsr-color-R40, #fbd0cd));
    }

    &:not(&--has-focus)#{&}--border-bottom-line:not(&--disabled)#{&}--status-warning:hover {
      border-bottom-color: var(--wds-color-border-warning-secondary-hover, var(--wsr-color-Y40, #ffe2a5));
    }
  }

  &--read-only {
    border-color: var(--wds-input-border-color, var(--wds-color-border-standard-secondary, var(--wsr-color-D60, #dfe5eb)));
    /* stylelint-disable-next-line plugin/use-baseline */
    background-color: var(
      --wds-internal-input-background,
      var(--wds-input-background-fill-default, var(--wds-color-fill-standard-tertiary, var(--wsr-color-D10-03, color-mix(in srgb, var(--wsr-color-D10, #000624) 3%, transparent))))
    );
  }

  &--read-only,
  &--read-only > &__wrapper > &__input {
    color: var(--wds-color-text-standard-secondary, var(--wsr-color-D10, #000624));
  }

  &--size-tiny#{&}--border-round {
    $round-radius: var(--wds-input-border-radius-round-tiny, var(--wds-border-radius-full, 13px));

    border-radius: $round-radius;

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

  &--size-small#{&}--border-round {
    $round-radius: var(--wds-input-border-radius-round-small, var(--wds-border-radius-full, 15px));

    border-radius: $round-radius;

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

  &--size-medium#{&}--border-round {
    $round-radius: var(--wds-input-border-radius-round-medium, var(--wds-border-radius-full, 18px));

    border-radius: $round-radius;

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

  &--size-large#{&}--border-round {
    $round-radius: var(--wds-input-border-radius-round-large, var(--wds-border-radius-full, 21px));

    border-radius: $round-radius;

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

  &--size-tiny#{&}--border-standard {
    $tiny-radius: var(--wds-input-border-radius-default-tiny, var(--wds-border-radius-300, var(--wsr-border-radius-06, 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-300, var(--wsr-border-radius-06, 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-300, var(--wsr-border-radius-06, 6px)));

    border-radius: $large-radius;

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

  &--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-radius: 0;
    background-color: transparent;
    border-color: transparent;

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

  &--border-none {
    border: none;
    padding: 1px;
    border-radius: 0;
    background-color: transparent;
  }

  &--border-none,
  &--border-bottom-line {
    &::after {
      box-shadow: none;
    }
  }

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

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

  &--disabled > &__wrapper > &__input::-webkit-input-placeholder {
    color: var(--wds-color-text-placeholder, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3)));
  }

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

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

  &--disabled > &__wrapper > &__input:-ms-input-placeholder {
    color: var(--wds-color-text-placeholder, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3))) !important;
  }

  &#{&}--disabled:not(#{&}--border-bottom-line) {
    border-color: var(--wds-input-border-color-disabled, var(--wds-color-border-standard-secondary-disabled, var(--wsr-color-D10-20, rgba(0, 6, 36, 0.2))));
    background-color: var(--wds-input-background-fill-disabled, 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#{&}--border-bottom-line {
    border-bottom-color: var(--wds-input-border-color-disabled, var(--wds-color-border-standard-secondary-disabled, var(--wsr-color-D10-20, rgba(0, 6, 36, 0.2))));
  }

  &__suffixes {
    /* stylelint-disable-next-line plugin/use-baseline */
    user-select: none;
    white-space: nowrap;
    display: flex;
  }

  &__suffix {
    display: flex;
  }

  &--size-tiny &__status-wrapper,
  &--size-small &__status-wrapper {
    margin: auto 0 auto var(--wds-space-100, 6px);
  }

  :global([dir='rtl']) &--size-tiny &__status-wrapper,
  :global([dir='rtl']) &--size-small &__status-wrapper {
    margin: auto var(--wds-space-100, 6px) auto 0;
  }

  &--size-medium &__status-wrapper,
  &--size-large &__status-wrapper {
    margin: auto var(--wds-space-50, 3px) auto var(--wds-space-100, 6px);
  }

  :global([dir='rtl']) &--size-medium &__status-wrapper,
  :global([dir='rtl']) &--size-large &__status-wrapper {
    margin: auto var(--wds-space-100, 6px) auto var(--wds-space-50, 3px);
  }

  &:not(&--disabled)#{&}--status-error#{&}--border-standard,
  &:not(&--disabled)#{&}--status-error#{&}--border-round {
    border-color: var(--wds-color-border-destructive-secondary-active, var(--wsr-color-R10, #e62214));
    box-shadow: none;
  }

  &:not(&--disabled)#{&}--status-error#{&}--border-standard#{&}--has-focus,
  &:not(&--disabled)#{&}--status-error#{&}--border-round#{&}--has-focus {
    border-color: var(--wds-color-border-destructive-secondary-active, var(--wsr-color-R10, #e62214));
  }

  &:not(&--disabled)#{&}--status-warning#{&}--border-standard,
  &:not(&--disabled)#{&}--status-warning#{&}--border-round {
    border-color: var(--wds-color-border-warning-secondary-active, var(--wsr-color-Y10, #ffb700));
    box-shadow: none;
  }

  &:not(&--disabled)#{&}--status-warning#{&}--border-standard#{&}--has-focus,
  &:not(&--disabled)#{&}--status-warning#{&}--border-round#{&}--has-focus {
    border-color: var(--wds-color-border-warning-secondary-active, var(--wsr-color-Y10, #ffb700));
  }

  &__clear-button-wrapper {
    display: flex;
    align-items: center;
    margin: 0 0 0 var(--wds-space-50, 3px);
  }

  :global([dir='rtl']) &__clear-button-wrapper {
    margin: 0 var(--wds-space-50, 3px) 0 0;
  }

  &__menu-arrow {
    display: flex;
    align-items: center;

    & svg {
      transform: translateY(1px);
      color: var(--wds-dropdown-icon-fill, var(--wds-color-text-primary, var(--wsr-color-B10, #116dff)));
    }
  }

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

  @media (hover: hover) {
    &:not(&--disabled) &__menu-arrow:hover {
      cursor: pointer;
    }
  }

  &--size-tiny &__menu-arrow {
    padding: 0 var(--wds-space-100, 3px);
  }

  &--size-small &__menu-arrow,
  &--size-medium &__menu-arrow {
    padding: 0 var(--wds-space-100, 6px);
  }

  &--size-medium#{&}--border-round &__menu-arrow {
    padding: 0 var(--wds-space-100, 9px) 0 var(--wds-space-100, 6px);
  }

  :global([dir='rtl']) &--size-medium#{&}--border-round &__menu-arrow {
    padding: 0 var(--wds-space-100, 6px) 0 var(--wds-space-100, 9px);
  }

  &--size-large &__menu-arrow {
    padding: 0 var(--wds-space-100, 6px) 0 var(--wds-space-100, 9px);
  }

  :global([dir='rtl']) &--size-large &__menu-arrow {
    padding: 0 var(--wds-space-100, 9px) 0 var(--wds-space-100, 6px);
  }

  &--size-large#{&}--border-round &__menu-arrow {
    padding: 0 var(--wds-space-100, 9px);
  }

  &:not(&--disabled) &__menu-arrow {
    color: var(--wds-color-text-primary, var(--wsr-color-B10, #116dff));
  }

  & input[type='number'] {
    -moz-appearance: textfield;
  }

  & input::-webkit-outer-spin-button,
  & input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  &__input:-webkit-autofill,
  &__input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624));
  }

  @media (hover: hover) {
    &__input:-webkit-autofill:hover {
      -webkit-text-fill-color: var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624));
    }
  }

  &__input:-webkit-autofill,
  &__input:-webkit-autofill:focus {
    box-shadow: 0 0 0px 1000px var(--wds-internal-input-background, #{$background-fill-default}) inset;
    -webkit-box-shadow: 0 0 0px 1000px var(--wds-internal-input-background, #{$background-fill-default}) inset;
  }

  @media (hover: hover) {
    &:hover:not(&--has-focus):not(&--disabled) &__input:-webkit-autofill:hover,
    &--force-hover &__input:-webkit-autofill:hover {
      box-shadow: 0 0 0px 1000px var(--wds-internal-input-background, #{$background-fill-hover}) inset;
      -webkit-box-shadow: 0 0 0px 1000px var(--wds-internal-input-background, #{$background-fill-hover}) inset;
    }
  }

  &__input::-webkit-contacts-auto-fill-button {
    display: none !important;
  }

  &__input::-ms-clear {
    display: none;
  }
}