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

$fill-default: var(
  --wds-input-background-fill-default,
  var(--wds-color-black-750, var(--wsr-color-D80, #ffffff))
);
$fill-hover: var(
  --wds-input-background-fill-hover,
  var(--wds-color-black-750, var(--wsr-color-B50, #e7f0ff))
);
$border-radius: var(
  --wds-input-border-radius-default-medium,
  var(--wds-border-radius-400, 6px)
);
$rows: var(--wds-internal-variable-input-rows);
$tag-size-tiny: var(--wds-tag-size-tiny, var(--wds-space-500, 18px));
$tag-size-small: var(--wds-tag-size-small, var(--wds-space-600, 24px));

// rowHeight is the largest element in the row, either tag or text
$row-height-tiny: max(
  #{chains.$input-value-font-line-height-tiny},
  #{$tag-size-tiny}
);
$row-height-small: max(
  #{chains.$input-value-font-line-height-small},
  #{$tag-size-tiny}
);
$row-height-medium: max(
  #{chains.$input-value-font-line-height-medium},
  #{$tag-size-small}
);
$row-height-large: max(
  #{chains.$input-value-font-line-height-large},
  #{$tag-size-small}
);

$padding-vertical-tiny: var(--wds-variable-input-padding-vertical-tiny, 2px);
$padding-horizontal-tiny: var(
  --wds-input-padding-horizontal-small,
  var(--wds-space-200, 13px)
);
$padding-vertical-small: var(--wds-variable-input-padding-vertical-small, 5px);
$padding-horizontal-small: var(
  --wds-input-padding-horizontal-small,
  var(--wds-space-200, 13px)
);
$padding-vertical-medium: var(
  --wds-input-padding-vertical-medium,
  var(--wds-space-175, 6px)
);
$padding-horizontal-medium: var(
  --wds-input-padding-horizontal-medium,
  var(--wds-space-200, 13px)
);
$padding-vertical-large: var(
  --wds-input-padding-vertical-large,
  var(--wds-space-300, 9px)
);
$padding-horizontal-large: var(
  --wds-input-padding-horizontal-large,
  var(--wds-space-300, 12px)
);

.variable-input {
  background-color: #{$fill-default};
  border-radius: $border-radius;

  /* tiny — min-height, row-height and padding */
  &--size-tiny :global(.public-DraftEditor-content) {
    height: calc(
      #{chains.$input-size-tiny} + ((#{$rows} - 1) * #{$row-height-tiny})
    );
    padding: #{$padding-vertical-tiny} #{$padding-horizontal-tiny};
  }

  &--size-tiny :global(.public-DraftEditorPlaceholder-root) {
    top: #{$padding-vertical-tiny};
    left: #{$padding-horizontal-tiny};
  }

  &--size-tiny :global(.public-DraftEditorPlaceholder-inner) {
    height: #{$row-height-tiny};
    line-height: #{$row-height-tiny};
  }

  &--size-tiny :global(.public-DraftStyleDefault-block) {
    line-height: #{$row-height-tiny};
  }

  &--size-tiny &__indicator-wrapper {
    height: #{$row-height-tiny};
    top: #{$padding-vertical-tiny};
    right: #{$padding-horizontal-tiny};
  }

  /* small — min-height, row-height, padding and font size */
  &--size-small :global(.public-DraftEditor-content) {
    height: calc(
      #{chains.$input-size-small} + ((#{$rows} - 1) * #{$row-height-small})
    );
    padding: #{$padding-vertical-small} #{$padding-horizontal-small};
  }

  &--size-small :global(.public-DraftEditorPlaceholder-root) {
    top: #{$padding-vertical-small};
    left: #{$padding-horizontal-small};
  }

  &--size-small :global(.public-DraftEditorPlaceholder-inner) {
    height: #{$row-height-small};
    line-height: #{$row-height-small};
  }

  &--size-small :global(.public-DraftStyleDefault-block) {
    line-height: #{$row-height-small};
  }

  &--size-small &__text-wrapper,
  &--size-small :global(.public-DraftEditorPlaceholder-root),
  &--size-small :global(.public-DraftStyleDefault-block) > span {
    font-size: #{chains.$input-value-font-size-small};
  }

  &--size-small &__indicator-wrapper {
    height: #{$row-height-small};
    top: #{$padding-vertical-small};
    right: #{$padding-horizontal-small};
  }

  /* medium — min-height, row-height, padding and typography */
  &--size-medium :global(.public-DraftEditor-content) {
    height: calc(
      #{chains.$input-size-medium} + ((#{$rows} - 1) * #{$row-height-medium})
    );
    padding: #{$padding-vertical-medium} #{$padding-horizontal-medium};
  }

  &--size-medium :global(.public-DraftEditorPlaceholder-root) {
    top: #{$padding-vertical-medium};
    left: #{$padding-horizontal-medium};
  }

  &--size-medium :global(.public-DraftEditorPlaceholder-inner) {
    height: #{$row-height-medium};
    line-height: #{$row-height-medium};
  }

  &--size-medium :global(.public-DraftStyleDefault-block) {
    line-height: #{$row-height-medium};
  }

  &--size-medium &__text-wrapper,
  &--size-medium :global(.public-DraftEditorPlaceholder-root),
  &--size-medium :global(.public-DraftStyleDefault-block) > span {
    font-size: #{chains.$input-value-font-size-medium};
    line-height: #{chains.$input-value-font-line-height-medium};
  }

  &--size-medium &__indicator-wrapper {
    height: #{$row-height-medium};
    top: #{$padding-vertical-medium};
    right: #{$padding-horizontal-medium};
  }

  /* large — min-height, row-height, padding and typography */
  &--size-large :global(.public-DraftEditor-content) {
    height: calc(
      #{chains.$input-size-large} + ((#{$rows} - 1) * #{$row-height-large})
    );
    padding: #{$padding-vertical-large} #{$padding-horizontal-large};
  }

  &--size-large :global(.public-DraftEditorPlaceholder-root) {
    top: #{$padding-vertical-large};
    left: #{$padding-horizontal-large};
  }

  &--size-large :global(.public-DraftEditorPlaceholder-inner) {
    height: #{$row-height-large};
    line-height: #{$row-height-large};
  }

  &--size-large :global(.public-DraftStyleDefault-block) {
    line-height: #{$row-height-large};
  }

  &--size-large &__text-wrapper,
  &--size-large :global(.public-DraftEditorPlaceholder-root),
  &--size-large :global(.public-DraftStyleDefault-block) > span {
    font-size: #{chains.$input-value-font-size-large};
    line-height: #{chains.$input-value-font-line-height-large};
  }

  &--size-large &__indicator-wrapper {
    height: #{$row-height-large};
    top: #{$padding-vertical-large};
    right: #{$padding-horizontal-large};
  }

  & :global(.DraftEditor-root) {
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: 1px solid
      var(
        --wds-input-border-color,
        var(--wds-color-black-100-transparent-0, var(--wsr-color-B40, #d6e6fe))
      );
  }

  & :global(.public-DraftEditor-content) {
    &::-webkit-scrollbar-thumb {
      background-color: var(
        --wds-scrollbar-fill,
        var(--wds-color-black-500, var(--wsr-color-B30, #a8caff))
      );
      border: calc((12px - var(--wds-scrollbar-width, 4px)) / 2) solid
        transparent;
    }

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

    &::-webkit-scrollbar-thumb:active {
      background-color: var(
        --wds-scrollbar-fill-active,
        var(--wds-color-black-400, var(--wsr-color-B10, #116dff))
      );
    }
  }

  /* The editor's `background-color` and `outline-color` are decided by source
     order between rules of equal specificity (hover, focus, disabled,
     read-only, status). Overriding any of them here moves it after the base's
     later rules, so the whole chain is repeated below in the base's order to
     keep the same winners. */
  @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-primary-active,
        var(--wsr-color-B10, #116dff)
      )
    );
  }

  /* doubled root class mirrors the base sheet: outranks `:focus-within` */
  &#{&}--disabled :global(.DraftEditor-root) {
    outline-color: var(
      --wds-input-border-color-disabled,
      var(--wds-color-black-700, var(--wsr-color-D60, #dfe5eb))
    );
  }

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

  &#{&}--read-only:not(#{&}--disabled) :global(.DraftEditor-root) {
    background-color: var(
      --wds-input-background-fill-readonly,
      var(--wds-color-white, 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-primary, var(--wsr-color-B40, #d6e6fe))
      );
    }
  }

  /* doubled root class mirrors the base sheet */
  &#{&}--status-error :global(.DraftEditor-root),
  &#{&}--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),
  &#{&}--status-warning :global(.DraftEditor-root):focus-within {
    outline-color: var(
      --wds-color-border-warning-secondary-active,
      var(--wsr-color-Y10, #ffb700)
    );
  }
}