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

$border-radius: var(
  --wds-input-border-radius-default-medium,
  var(--wds-border-radius-400, 8px)
);
$padding: var(--wds-space-100, 4px)
  var(--wds-input-padding-horizontal-medium, var(--wds-space-200, 8px))
  var(--wds-space-200, 8px);
$background-color: var(
  --wds-input-background-fill-default,
  var(--wds-color-black-750, #f8f6f6)
);
$background-color-hover: var(
  --wds-input-background-fill-hover,
  var(--wds-color-black-750, #f8f6f6)
);
$border-color: var(
  --wds-input-border-color,
  var(--wds-color-black-100-transparent-0, transparent)
);
$border-color-hover: var(
  --wds-input-border-color-hover,
  var(--wds-color-border-standard-primary, #7896ff)
);
$border-color-focus: var(
  --wds-input-border-color-focus,
  var(--wds-color-border-standard-primary-active, #2f5dff)
);
$border-color-disabled: var(
  --wds-input-border-color-disabled,
  var(--wds-color-black-700, #f0efef)
);
$error-border-color: var(
  --wds-color-border-destructive-secondary-active,
  var(--wsr-color-R10, #df3336)
);
$warning-border-color: var(
  --wds-color-border-warning-secondary-active,
  var(--wsr-color-Y10, #f9ad4d)
);
$shadow: var(--wds-shadow-x-input, var(--wds-shadow-x-25, 1px))
  var(--wds-shadow-y-input, var(--wds-shadow-y-25, 1px))
  var(--wds-shadow-blur-input, var(--wds-shadow-blur-35, 3px)) 0
  var(
    --wds-shadow-fill-input,
    var(--wds-color-black-300-transparent-20, rgba(118, 117, 116, 0.2))
  )
  inset;

.rich-text-input-area {
  background-color: var(
    --wds-internal-rich-text-input-area-background,
    #{$background-color}
  );
  border-color: $border-color;
  border-radius: $border-radius;
  box-shadow: $shadow;

  & :global(.public-DraftEditorPlaceholder-root),
  &__editor-wrapper :global(.public-DraftEditor-content),
  &__link {
    font-size: #{chains.$input-value-font-size-medium};
    line-height: #{chains.$input-value-font-line-height-medium};
  }

  &__editor-wrapper {
    padding: $padding;
    border-top-width: var(--wds-border-width-none, 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};
    }
  }

  &__status-indicator {
    top: var(--wds-space-100, 4px);
    right: var(
      --wds-input-padding-horizontal-medium,
      var(--wds-space-200, 8px)
    );
  }
}