@use 'Foundation/scss/input-chains.odeditor-dark' 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);

$b: '.input-area';
$hover-background: var(
  --wds-internal-input-area-background,
  var(--wds-input-background-fill-hover, var(--wds-color-black-700, #E7F0FF))
);
$border-color: var(--wds-input-border-color-hover, var(--wds-color-border-standard-primary, #D6E6FE));

#{$b} #{$b}__input-area {
  background-color: var(
    --wds-internal-input-area-background,
    var(
      --wds-input-background-fill-default,
      var(--wds-color-black-700, #ffffff)
    )
  );
  outline-color: var(--wds-input-border-color, var(--wds-color-black-100-transparent-0, #D6E6FE));
  border-radius: var(--wds-input-area-border-radius-default-medium, var(--wds-border-radius-400, 6px));
}

#{$b} textarea {
  padding: #{$padding-vertical-medium}
    var(--wds-input-area-padding-right-medium, var(--wds-space-250, 9px))
    #{$padding-vertical-medium}
    var(--wds-input-area-padding-left-medium, var(--wds-space-300, 12px));

  &::-webkit-scrollbar-thumb {
    background-color: var(--wds-scrollbar-fill, var(--wds-color-black-550, #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, #5999FF)
      );
    }
  }

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

#{$b}#{$b}--size-small textarea {
  padding-top: #{$padding-vertical-small};
  padding-bottom: #{$padding-vertical-small};
}

#{$b}#{$b}--size-small,
#{$b}#{$b}--size-small textarea {
  font-size: #{chains.$input-value-font-size-small};
  min-height: var(--wds-input-size-small, var(--wds-space-750, 18px));
}

#{$b}#{$b}--size-medium,
#{$b}#{$b}--size-medium textarea {
  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-950, 34px));
}

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

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

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