$min-height: 72px;
$min-width: 366px;
$background-color: var(
  --wds-input-background-fill-default,
  var(--wds-color-fill-standard-tertiary, var(--wsr-color-D80, #ffffff))
);
$background-color-hover: var(
  --wds-input-background-fill-hover,
  var(--wds-color-fill-standard-tertiary-hover, var(--wsr-color-B50, #e7f0ff))
);
$border-width: 1px;
$border-color: var(
  --wds-input-border-color,
  var(--wds-color-border-standard-secondary, var(--wsr-color-B40, #d6e6fe))
);
$border-color-hover: var(
  --wds-color-border-standard-secondary-hover,
  var(--wsr-color-B40, #d6e6fe)
);
$border-color-focus: var(
  --wds-input-border-color-focus,
  var(--wds-color-border-standard-secondary-active, var(--wsr-color-B10, #116dff))
);
$border-color-disabled: var(
  --wds-input-border-color-disabled,
  var(--wds-color-border-standard-secondary-disabled, var(--wsr-color-B40, #d6e6fe))
);
$border-radius: var(
  --wds-input-border-radius-default-medium,
  var(--wds-border-radius-300, 6px)
);
$padding: var(--wds-space-100, 12px)
  var(--wds-input-padding-horizontal-medium, var(--wds-space-100, 12px));
$error-border-color: var(
  --wds-color-border-destructive-secondary-active,
  var(--wsr-color-R10, #e62214)
);
$warning-border-color: var(
  --wds-color-border-warning-secondary-active,
  var(--wsr-color-Y10, #ffb700)
);
$disabled-fill: var(
  --wds-color-text-disabled,
  var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3))
);
$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-input-value-font-size-medium,
  var(--wds-font-size-body-medium, 16px)
);
$line-height: var(
  --wds-input-value-font-line-height-medium,
  var(--wds-font-line-height-body-medium, 24px)
);

.rich-text-input-area {
  box-sizing: border-box;
  min-height: $min-height;
  min-width: $min-width;
  background-color: var(
    --wds-internal-rich-text-input-area-background,
    #{$background-color}
  );
  border: $border-width solid $border-color;
  border-radius: $border-radius;
  box-shadow: var(
      --wds-shadow-inner-100,
      1px 1px 2px var(--wds-color-black-100-transparent-10) inset,
      1px 1px 2px var(--wds-color-white-transparent-10)
    )
    inset;

  @media (max-width: 550px) {
    & {
      min-width: unset;
      max-width: 100%;
    }
  }

  /* stylelint-disable-next-line plugin/use-baseline -- releases the minimum width by container width, which the viewport media query above cannot see */
  @container (max-width: 550px) {
    & {
      min-width: unset;
      max-width: 100%;
    }
  }

  /* editor typography — placeholder, content and inline links share it */
  & :global(.public-DraftEditorPlaceholder-root),
  &__editor-wrapper :global(.public-DraftEditor-content),
  &__link {
    font-family: $font-family;
    font-size: $font-size;
    font-weight: var(
      --wds-font-weight-regular,
      var(--wsr-font-weight-regular, 400)
    );
    line-height: $line-height;
    letter-spacing: var(--wds-font-letter-spacing-0, unset);
  }

  & :global(.public-DraftEditorPlaceholder-root) {
    padding: 0 var(--wds-space-50, 0) 0 var(--wds-space-100, 0);
    position: absolute;
    pointer-events: none;
    color: var(--wds-color-text-placeholder, var(--wsr-color-D40, #868aa5));
  }

  &--disabled :global(.public-DraftEditorPlaceholder-root) {
    color: #{$disabled-fill};
  }

  &--disabled &__link {
    color: #{$disabled-fill};
  }

  &--hide-placeholder :global(.public-DraftEditorPlaceholder-root) {
    display: none;
  }

  &__toolbar {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--wds-space-50, 2px);
    padding: var(--wds-space-200, 8px) var(--wds-space-200, 8px)
      var(--wds-space-100, 4px);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* stylelint-disable-next-line plugin/use-baseline */
    scrollbar-width: none;
    -ms-overflow-style: none;

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

  &__editor-wrapper {
    position: relative;
    padding: $padding;
    border-top: $border-width solid;
    border-top-color: inherit;
    color: var(
      --wds-color-text-standard-primary,
      var(--wsr-color-D10, #000624)
    );
    min-height: var(
      --wds-internal-rich-text-input-area-min-height,
      #{$min-height}
    );
    max-height: var(--wds-internal-rich-text-input-area-max-height);
    overflow: auto;
    overscroll-behavior-y: auto;
    box-sizing: border-box;
    cursor: pointer;
  }

  &:focus-within &__editor-wrapper {
    cursor: text;
  }

  &--disabled &__editor-wrapper {
    color: #{$disabled-fill};
    cursor: default;
  }

  &__editor-wrapper :global(.public-DraftEditor-content) {
    padding: 0 var(--wds-space-50, 0) 0 var(--wds-space-100, 0);
  }

  @media (hover: hover) {
    &:hover {
      border-color: #{$border-color-hover};
      background-color: var(
        --wds-internal-rich-text-input-area-background,
        #{$background-color-hover}
      );
    }
  }

  &:focus-within {
    border-color: #{$border-color-focus};
    background-color: var(
      --wds-internal-rich-text-input-area-background,
      #{$background-color}
    );
  }

  &--disabled {
    border-color: #{$border-color-disabled};
    background-color: var(
      --wds-internal-rich-text-input-area-background,
      #{$background-color}
    );
  }

  &--has-error,
  &--has-error:focus-within {
    border-color: #{$error-border-color};
  }

  &--has-warning,
  &--has-warning:focus-within {
    border-color: #{$warning-border-color};
  }

  @media (hover: hover) {
    &--disabled:hover {
      border-color: #{$border-color-disabled};
      background-color: var(
        --wds-internal-rich-text-input-area-background,
        #{$background-color}
      );
    }

    &--has-error:hover {
      border-color: #{$error-border-color};
    }

    &--has-warning:hover {
      border-color: #{$warning-border-color};
    }
  }

  &#{&}#{&}::before {
    content: none;
  }

  &__status-indicator {
    position: absolute;
    top: var(--wds-space-100, 9px);
    right: var(
      --wds-input-padding-horizontal-medium,
      var(--wds-space-100, 12px)
    );
    padding: 0 var(--wds-space-50, 0) 0 var(--wds-space-100, 0);
  }

  &__link {
    text-decoration: none;
    color: var(--wds-color-blue-100, var(--wsr-color-B10, #116dff));
  }

  &__form {
    width: 100%;
  }

  &__form-footer {
    margin-top: 12px;
    text-align: right;
    display: flex;
    flex-direction: row-reverse;
  }
}