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

$fill-default: var(
  --wds-input-background-fill-default,
  var(--wds-color-fill-standard-tertiary, var(--wsr-color-D80, #ffffff))
);
$fill-hover: var(
  --wds-input-background-fill-hover,
  var(--wds-color-fill-standard-tertiary-hover, var(--wsr-color-B50, #e7f0ff))
);
$border-radius: var(
  --wds-input-border-radius-default-medium,
  var(--wds-border-radius-300, 6px)
);

.variable-input {
  --wds-internal-variable-input-rows: 1;
  position: relative;
  text-align: left;
  background-color: #{$fill-default};
  border-radius: #{$border-radius};
  width: 100%;
  color: var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624));

  &--size-tiny {
    --variable-input-min-height: var(
      --wds-input-size-tiny,
      var(--wds-space-400, 24px)
    );
    /* rowHeight is determined by the largest element in the row, either tag or text */
    --variable-input-row-height: max(
      var(
        --wds-input-value-font-line-height-tiny,
        var(--wds-font-line-height-body-tiny, 18px)
      ),
      var(--wds-tag-size-tiny, var(--wds-space-300, 18px))
    );
    --variable-input-padding-vertical: var(
      --wds-variable-input-padding-vertical-tiny,
      var(--wds-space-50, 3px)
    );
    --variable-input-padding-horizontal: var(
      --wds-input-padding-horizontal-small,
      var(--wds-space-100, 13px)
    );
    --variable-input-font-size: var(
      --wds-input-value-font-size-tiny,
      var(--wds-font-size-body-tiny, var(--wsr-text-font-size-small, 14px))
    );
    --variable-input-line-height: var(
      --wds-input-value-font-line-height-tiny,
      var(
        --wds-font-line-height-body-tiny,
        var(--wsr-text-line-height-small, 18px)
      )
    );
  }

  &--size-small {
    --variable-input-min-height: var(
      --wds-input-size-small,
      var(--wds-space-500, 30px)
    );
    --variable-input-row-height: max(
      var(
        --wds-input-value-font-line-height-small,
        var(--wds-font-line-height-body-small, 18px)
      ),
      var(--wds-tag-size-tiny, var(--wds-space-300, 18px))
    );
    --variable-input-padding-vertical: var(
      --wds-variable-input-padding-vertical-small,
      var(--wds-space-100, 6px)
    );
    --variable-input-padding-horizontal: var(
      --wds-input-padding-horizontal-small,
      var(--wds-space-100, 13px)
    );
    --variable-input-font-size: var(
      --wds-input-value-font-size-small,
      var(--wds-font-size-body-small, var(--wsr-text-font-size-small, 14px))
    );
    --variable-input-line-height: var(
      --wds-input-value-font-line-height-small,
      var(
        --wds-font-line-height-body-small,
        var(--wsr-text-line-height-small, 18px)
      )
    );
  }

  &--size-medium {
    --variable-input-min-height: var(
      --wds-input-size-medium,
      var(--wds-space-600, 36px)
    );
    --variable-input-row-height: max(
      var(
        --wds-input-value-font-line-height-medium,
        var(--wds-font-line-height-body-medium, 24px)
      ),
      var(--wds-tag-size-small, var(--wds-space-400, 24px))
    );
    --variable-input-padding-vertical: var(
      --wds-input-padding-vertical-medium,
      var(--wds-space-100, 6px)
    );
    --variable-input-padding-horizontal: var(
      --wds-input-padding-horizontal-medium,
      var(--wds-space-100, 13px)
    );
    --variable-input-font-size: var(
      --wds-input-value-font-size-medium,
      var(--wds-font-size-body-medium, var(--wsr-text-font-size-medium, 16px))
    );
    --variable-input-line-height: var(
      --wds-input-value-font-line-height-medium,
      var(
        --wds-font-line-height-body-medium,
        var(--wsr-text-line-height-medium, 24px)
      )
    );
  }

  &--size-large {
    --variable-input-min-height: var(
      --wds-input-size-large,
      var(--wds-space-700, 42px)
    );
    --variable-input-row-height: max(
      var(
        --wds-input-value-font-line-height-large,
        var(--wds-font-line-height-body-medium, 24px)
      ),
      var(--wds-tag-size-small, var(--wds-space-400, 24px))
    );
    --variable-input-padding-vertical: var(
      --wds-input-padding-vertical-large,
      var(--wds-space-150, 9px)
    );
    --variable-input-padding-horizontal: var(
      --wds-input-padding-horizontal-large,
      var(--wds-space-150, 12px)
    );
    --variable-input-font-size: var(
      --wds-input-value-font-size-large,
      var(--wds-font-size-body-medium, var(--wsr-text-font-size-medium, 16px))
    );
    --variable-input-line-height: var(
      --wds-input-value-font-line-height-large,
      var(
        --wds-font-line-height-body-medium,
        var(--wsr-text-line-height-medium, 24px)
      )
    );
  }

  & :global(.DraftEditor-root) {
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: 1px solid
      var(
        --wds-input-border-color,
        var(
          --wds-color-border-standard-secondary,
          var(--wsr-color-B40, #d6e6fe)
        )
      );
    outline-offset: -1px;
    background-color: #{$fill-default};
    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;
    }
  }

  & :global(.public-DraftEditor-content) {
    height: calc(
      var(--variable-input-min-height) +
        (
          (var(--wds-internal-variable-input-rows) - 1) *
            var(--variable-input-row-height)
        )
    );
    overflow: auto;
    box-sizing: border-box;
    cursor: text;
    padding: var(--variable-input-padding-vertical)
      var(--variable-input-padding-horizontal);

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

  & :global(.public-DraftEditorPlaceholder-root) {
    color: var(--wds-color-text-placeholder, var(--wsr-color-D40, #868aa5));
    position: absolute;
    pointer-events: none;
    max-width: calc(100% - 26px);
    top: var(--variable-input-padding-vertical);
    left: var(--variable-input-padding-horizontal);
  }

  & :global(.public-DraftEditorPlaceholder-inner) {
    /* There's a "white-space: pre-wrap" used on Editor component inline style, that is why `!important` is used here. */
    white-space: nowrap !important;
    height: var(--variable-input-row-height);
    line-height: var(--variable-input-row-height);
    overflow: hidden;
    text-overflow: ellipsis;
  }

  & :global(.public-DraftStyleDefault-block) {
    line-height: var(--variable-input-row-height);
  }

  &__text-wrapper,
  & :global(.public-DraftStyleDefault-block) > span {
    display: inline;
  }

  /* editor typography — the size-specific values arrive through the root's
     `--variable-input-*` properties set above */
  &__text-wrapper,
  & :global(.public-DraftEditorPlaceholder-root),
  & :global(.public-DraftStyleDefault-block) > span {
    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: var(--variable-input-font-size);
    line-height: var(--variable-input-line-height);
  }

  &__tag {
    vertical-align: top;
  }

  &__tag-wrapper {
    padding-left: 2px;
    padding-right: 2px;
  }

  &__indicator-wrapper {
    position: absolute;
    height: var(--variable-input-row-height);
    display: flex;
    align-items: center;
    top: var(--variable-input-padding-vertical);
    right: var(--variable-input-padding-horizontal);
  }

  @media (hover: hover) {
    & :global(.DraftEditor-root):hover {
      background-color: #{$fill-hover};
    }
  }

  & :global(.DraftEditor-root):focus-within {
    background-color: #{$fill-default};
    outline-color: var(
      --wds-input-border-color-focus,
      var(
        --wds-color-border-standard-secondary-active,
        var(--wsr-color-B10, #116dff)
      )
    );
  }

  &--focus-visible :global(.DraftEditor-root):focus-within::after {
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: var(
      --wds-outline-focus-outer,
      3px solid var(--wsr-color-B10, #116dff)
    );
  }

  &--focus-visible :global(.DraftEditor-root):focus-within::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: var(
      --wds-outline-focus-inner,
      1px solid var(--wsr-color-D80, #ffffff)
    );
  }

  /* doubled root class: `outline-color` must outrank the `:focus-within` rule
     above, which carries a pseudo-class this rule doesn't have */
  &#{&}--disabled :global(.DraftEditor-root) {
    color: var(
      --wds-color-text-disabled,
      var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3))
    );
    outline-color: var(
      --wds-input-border-color-disabled,
      var(
        --wds-color-border-standard-secondary-disabled,
        var(--wsr-color-D60, #dfe5eb)
      )
    );
  }

  @media (hover: hover) {
    &#{&}--disabled :global(.DraftEditor-root):hover {
      background-color: var(
        --wds-input-background-fill-disabled,
        var(
          --wds-color-fill-standard-tertiary-disabled,
          var(--wsr-color-D80, #ffffff)
        )
      );
    }
  }

  /* doubled root class: read-only must outrank the `--status-*` rules below
     (three classes) as the Stylable `.root:readOnly:not(:disabled)` did */
  &#{&}--read-only:not(#{&}--disabled) :global(.DraftEditor-root) {
    background-color: var(
      --wds-input-background-fill-readonly,
      var(
        --wds-color-fill-standard-tertiary-readonly,
        var(--wsr-color-D70, #eceff3)
      )
    );
    outline-color: var(
      --wds-color-border-standard-secondary-readonly,
      var(--wsr-color-D60, #dfe5eb)
    );
  }

  @media (hover: hover) {
    &:hover#{&}--read-only:not(#{&}--disabled)
      :global(.DraftEditor-root):not(:focus-within) {
      background-color: #{$fill-hover};
      outline-color: var(
        --wds-input-border-color-hover,
        var(
          --wds-color-border-standard-secondary,
          var(--wsr-color-B40, #d6e6fe)
        )
      );
    }
  }

  /* doubled root class: status `outline-color` must outrank the `:focus-within`,
     `--disabled` and `--read-only` rules above (three classes each) */
  &#{&}--status-error :global(.DraftEditor-root) {
    outline-color: var(
      --wds-color-border-destructive-secondary-active,
      var(--wsr-color-R10, #e62214)
    );
  }

  &#{&}--status-error :global(.DraftEditor-root):focus-within {
    outline-color: var(
      --wds-color-border-destructive-secondary-active,
      var(--wsr-color-R10, #e62214)
    );
  }

  &#{&}--status-warning :global(.DraftEditor-root) {
    outline-color: var(
      --wds-color-border-warning-secondary-active,
      var(--wsr-color-Y10, #ffb700)
    );
  }

  &#{&}--status-warning :global(.DraftEditor-root):focus-within {
    outline-color: var(
      --wds-color-border-warning-secondary-active,
      var(--wsr-color-Y10, #ffb700)
    );
  }

  &--single-line :global(.public-DraftEditor-content) {
    overflow-x: auto;
    white-space: pre !important;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }
}