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

$padding-vertical-medium: calc((#{chains.$input-size-medium} - #{chains.$input-value-font-line-height-medium}) / 2);
$padding-vertical-small: calc((#{chains.$input-size-small} - #{chains.$input-value-font-line-height-small}) / 2);

$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
  )
);

$background: var(--wds-internal-input-area-background);
$placeholder-fill: var(
  --wds-color-text-placeholder,
  var(--wsr-color-D40, #868AA5)
);
$disabled-placeholder-fill: var(
  --wds-color-black-100-transparent-30,
  var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3))
);

$border-color: var(--wds-input-border-color-hover, var(--wds-color-border-standard-secondary, var(--wsr-color-B40, #D6E6FE)));
$border-color-destructive: var(
  --wds-color-border-destructive-secondary-active,
  var(--wsr-color-R10, #E62214)
);
$border-color-warning: var(
  --wds-color-border-warning-secondary-active,
  var(--wsr-color-Y10, #FFB700)
);
$border-color-disabled: var(
  --wds-color-border-standard-secondary-disabled,
  var(--wsr-color-D10-20, rgba(0, 6, 36, 0.2))
);
$border-color-readonly: var(
  --wds-color-border-standard-secondary-readonly,
  var(--wsr-color-D60, #DFE5EB)
);
$hover-background: var(
  --wds-internal-input-area-background,
  var(
    --wds-input-background-fill-hover,
    var(--wds-color-fill-standard-tertiary-hover, var(--wsr-color-B50, #E7F0FF))
  )
);

@mixin placeholder-fill($color) {
  &::-webkit-input-placeholder {
    color: $color;
  }

  &:-moz-placeholder {
    color: $color;
  }

  &::-moz-placeholder {
    color: $color;
  }

  &:-ms-input-placeholder {
    color: $color !important;
  }
}

.input-area {
  box-sizing: border-box;
  position: relative;

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

  & &__input-area {
    background-color: var(
      --wds-internal-input-area-background,
      var(
        --wds-input-background-fill-default,
        var(--wds-color-fill-standard-tertiary, var(--wsr-color-D80, #ffffff))
      )
    );
    position: relative;
    display: flex;
    align-items: stretch;
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: solid 1px var(--wds-input-border-color, var(--wds-color-border-standard-secondary, var(--wsr-color-B40, #D6E6FE)));
    border-radius: var(--wds-input-area-border-radius-default-medium, var(--wds-border-radius-300, 6px));

    &::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;
    }
  }

  & textarea {
    @include placeholder-fill($placeholder-fill);

    flex-grow: 1;
    flex-shrink: 1;
    min-width: 20px;
    padding: #{$padding-vertical-medium}
      var(--wds-input-area-padding-right-medium, var(--wds-space-150, 9px))
      #{$padding-vertical-medium}
      var(--wds-input-area-padding-left-medium, var(--wds-space-200, 12px));
    margin: 0;
    border: 0;
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: 0;
    background: transparent;
    cursor: auto;
    /* stylelint-disable-next-line plugin/use-baseline */
    resize: none;
    overscroll-behavior-y: auto;
    color: var(
      --wds-color-text-standard-primary,
      var(--wsr-color-D10, #000624)
    );

    &::-webkit-scrollbar {
      height: 0;
      width: 12px;
    }

    &::-webkit-scrollbar-button {
      display: none;
      height: 6px;
    }

    &::-webkit-scrollbar-thumb {
      background-color: var(--wds-scrollbar-fill, var(--wds-color-blue-300, var(--wsr-color-B30, #A8CAFF)));
      background-clip: content-box;
      border-radius: var(--wds-border-radius-full, calc(3px * 2));
      border: calc((12px - var(--wds-scrollbar-width, 6px)) / 2) solid transparent;
      height: 72px;
    }

    @media (hover: hover) {
      &::-webkit-scrollbar-thumb:hover {
        background-color: var(
          --wds-scrollbar-fill-hover,
          var(--wds-color-blue-200, var(--wsr-color-B20, #5999FF))
        );
      }
    }

    &::-webkit-scrollbar-thumb:active {
      background-color: var(
        --wds-scrollbar-fill-active,
        var(--wds-color-blue-100, var(--wsr-color-B10, #116DFF))
      );
    }
  }

  &#{&}--size-small textarea {
    padding: #{$padding-vertical-small}
      var(--wds-input-area-padding-right-small, var(--wds-space-150, 9px))
      #{$padding-vertical-small}
      var(--wds-input-area-padding-left-small, var(--wds-space-200, 12px));
  }

  & textarea::-webkit-scrollbar-thumb {
    height: 30px;
  }

  & textarea::-webkit-scrollbar {
    border-radius: 0 var(--wds-border-radius-full, 6px)
      var(--wds-border-radius-full, 6px) 0;
  }

  &#{&}--size-small,
  &#{&}--size-small textarea {
    font-family: #{$font-family};
    font-weight: var(
      --wds-font-weight-regular,
      var(--wsr-font-weight-regular, 400)
    );
    letter-spacing: var(--wds-font-letter-spacing-0, unset);
    font-size: #{chains.$input-value-font-size-small};
    line-height: #{chains.$input-value-font-line-height-small};
    min-height: var(--wds-input-size-small, var(--wds-space-500, 18px));
  }

  &#{&}--size-medium,
  &#{&}--size-medium textarea {
    font-family: #{$font-family};
    font-weight: var(
      --wds-font-weight-regular,
      var(--wsr-font-weight-regular, 400)
    );
    letter-spacing: var(--wds-font-letter-spacing-0, unset);
    font-size: #{chains.$input-value-font-size-medium};
    line-height: #{chains.$input-value-font-line-height-medium};
    min-height: var(--wds-input-size-medium, var(--wds-space-600, 34px));
  }

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

  &__counter {
    position: absolute;
    top: -24px;
    right: 0;
    font-size: var(--wds-font-size-body-small, 14px);
    line-height: 1.3;
    color: #{$placeholder-fill};
  }

  :global([dir='rtl']) &__counter {
    right: unset;
    left: 0;
  }

  &#{&}--has-focus &__input-area {
    outline-color: var(
      --wds-color-border-standard-secondary-active,
      var(--wsr-color-B10, #116DFF)
    );
  }

  &#{&}--has-focus &__input-area::before,
  &#{&}--has-focus &__input-area::after {
    inset: -1px;
  }

  &#{&}--disabled &__input-area {
    outline-color: #{$border-color-disabled};
  }

  &#{&}--disabled textarea {
    @include placeholder-fill($disabled-placeholder-fill);

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

  &__status {
    position: absolute;
    right: 6px;
    top: 0;
    margin: var(--wds-space-100, 6px);
  }

  :global([dir='rtl']) &__status {
    right: unset;
    left: 6px;
  }

  &:not(&--disabled)#{&}--status-error &__input-area {
    outline-color: #{$border-color-destructive};
  }

  &:not(&--disabled)#{&}--status-error#{&}--has-focus
    &__input-area {
    outline-color: #{$border-color-destructive};
  }

  &:not(&--disabled)#{&}--status-warning &__input-area {
    outline-color: #{$border-color-warning};
  }

  &:not(&--disabled)#{&}--status-warning#{&}--has-focus
    &__input-area {
    outline-color: #{$border-color-warning};
  }

  &#{&}#{&}--force-hover &__input-area {
    background-color: #{$hover-background};
  }

  @media (hover: hover) {
    &:not(&--has-focus):not(&--disabled)
      &__input-area:hover {
      outline-color: #{$border-color};
    }

    &:not(&--has-focus):not(&--disabled)#{&}--status-error
      &__input-area:hover {
      outline-color: #{$border-color-destructive};
    }

    &:not(&--has-focus):not(&--disabled)#{&}--status-warning
      &__input-area:hover {
      outline-color: #{$border-color-warning};
    }

    &:not(&--has-focus)#{&}--disabled &__input-area:hover {
      outline-color: #{$border-color-disabled};
    }

    &:hover:not(&--has-focus):not(&--disabled) &__input-area {
      background-color: #{$hover-background};
    }
  }

  &#{&}--read-only &__input-area {
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: solid 1px #{$border-color-readonly};
    background-color: var(
      --wds-color-fill-standard-tertiary-readonly,
      var(--wsr-color-D70, #ECEFF3)
    );
  }

  &#{&}--read-only#{&}--has-focus &__input-area {
    outline-color: var(
      --wds-color-border-standard-secondary-active,
      var(--wsr-color-B10, #116DFF)
    );
  }

  &#{&}--resizable:not(&--disabled) textarea {
    /* stylelint-disable-next-line plugin/use-baseline */
    resize: vertical;
  }
}