@import 'main';

$textarea_width: 288px;
$textarea_waiting_icon_size: 32px;
$textarea_transition: 550ms, cubic-bezier(0.19, 1, 0.22, 1);

.textarea {
  width: $textarea_width;

  textarea {
    width: 100%;
    min-height: 32px;
    padding: 6px 12px;
    font-family: $default_font_family;
    font-size: $default_font_size;
    background-color: $color_paper;
    border: 1px solid $color_grey;
    color: $color_default;
    text-overflow: ellipsis;
    resize: vertical;
    @include border-radius();
    @include placeholder() {
      color: $color_grey;
    }
    @include box-shadow($box_shadow_light);
    @include transition($textarea_transition...);

    &[disabled] {
      background-color: $color_light;
      color: $color_grey;
      border-color: transparent;
      box-shadow: none;
    }
  }

  .box {
    width: 100%;
  }

  .waiting-icon {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 8px;
    height: 100%;
    cursor: pointer;
    @include transition($textarea_transition...);

    svg {
      width: $textarea_waiting_icon_size;
      height: $textarea_waiting_icon_size;
      fill: $color_grey;
    }
  }

  .message {
    font-size: 12px;
    letter-spacing: 0.4px;
    line-height: 1.5;
    color: $color_dark;
  }
}

.waiting {
  textarea {
    padding-right: 36px;
  }

  & &-icon {
    display: block !important;
  }
}

.error {
  textarea {
    border-color: $color_error;
    color: $color_error;
  }

  .message {
    display: block;
    color: $color_error;
  }
}

.full-width {
  width: 100%;
}

.textarea textarea {
  &:hover {
    border-color: $color_primary;
  }

  &:focus {
    @include box-shadow($box_shadow_paper_hover);
    border-color: transparent;
  }
}