@use './theme.scss' as *;
@use 'styles/variables.scss' as *;

$root: 'textarea';
$focused: 'Mui-focused';

.#{$root} {
  @include textarea-theme-modifiers();

  display: flex;
  flex-direction: column;

  &__wrapper {
    display: flex;
    border-radius: 10px;
    border: 1px solid textarea-theme-color('border');
    background-color: textarea-theme-color('background');
    padding: 7px 0;

    &.#{$focused} {
      border-color: textarea-theme-color('focused-border');
    }
  }

  &__error {
    color: textarea-theme-color('error');
  }

  &__info {
    color: textarea-theme-color('info-text');
  }

  &__label {
    padding-bottom: 10px;
  }

  &__input {
    height: 100%;
    width: 100%;
    outline: none;
    resize: none;
    border: none;
    background-color: transparent;
    padding: 0 20px;
    font-family: $font-family;
    font-weight: 500;
    font-size: 14px;
    line-height: 25px;

    &::placeholder {
      color: textarea-theme-color('placeholder');
    }
  }

  &--disabled {
    .#{$root}__wrapper {
      border: none;
      background-color: textarea-theme-color('disabled-background');
      color: textarea-theme-color('disabled-text');
    }

    .#{$root}__label {
      color: textarea-theme-color('disabled-text');
    }

    .#{$root}__input {
      &::placeholder {
        color: textarea-theme-color('disabled-text');
      }
    }
  }

  &--hasError {
    .#{$root}__wrapper {
      border-color: textarea-theme-color('error');
    }
  }
}