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

#{$b} #{$b}__input-area {
  border-radius: var(--wds-input-area-border-radius-default-medium, var(--wds-border-radius-200, 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));
  }

  @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};
  line-height: #{chains.$input-value-font-line-height-small};
  min-height: var(--wds-input-size-small, var(--wds-space-700, 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-800, 34px));
}