@use 'sass:map';

@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;

@include b(textarea) {
  @include set-component-css-var('input', $input);
}

@include b(textarea) {
  position: relative;
  display: inline-block;
  width: 100%;
  vertical-align: bottom;
  font-size: getCssVar('font-size', 'base');

  @include e(inner) {
    position: relative;
    display: block;
    resize: vertical;
    padding: 5px 10px;
    line-height: 1.5;
    box-sizing: border-box;
    width: 100%;
    font-size: inherit;
    font-family: inherit;
    color: var(
      #{getCssVarName('input-text-color')},
      map.get($input, 'text-color')
    );
    background-color: var(
      #{getCssVarName('input-bg-color')},
      map.get($input, 'bg-color')
    );
    background-image: none;
    border: none;
    @include inset-input-border(
      var(
        #{getCssVarName('input-border-color')},
        map.get($input, 'border-color')
      )
    );
    border-radius: getCssVarWithDefault(
      'input-border-radius',
      map.get($input, 'border-radius')
    );
    transition: getCssVar('transition-box-shadow');

    &::placeholder {
      color: getCssVarWithDefault(
        'input-placeholder-color',
        map.get($input, 'placeholder-color')
      );
    }

    &:hover {
      @include inset-input-border(#{getCssVar('input', 'hover-border-color')});
    }

    &:focus {
      outline: none;
      @include inset-input-border(#{getCssVar('input', 'focus-border-color')});
    }
  }

  @include e(count) {
    color: getCssVar('color-info');
    background: getCssVar('fill-color', 'blank');
    position: absolute;
    font-size: 12px;
    line-height: 14px;
    bottom: 5px;
    right: 10px;
  }

  @include when(disabled) {
    .#{$namespace}-textarea__inner {
      background-color: map.get($input-disabled, 'fill');
      border-color: map.get($input-disabled, 'border');
      color: map.get($input-disabled, 'text-color');
      cursor: not-allowed;

      &::placeholder {
        color: map.get($input-disabled, 'placeholder-color');
      }
    }
  }

  @include when(exceed) {
    .#{$namespace}-textarea__inner {
      border-color: getCssVar('color-danger');
    }

    .#{$namespace}-input__count {
      color: getCssVar('color-danger');
    }
  }
}