.bp-textarea-wrapper {
  min-height: 5.6*$m;
  border: 0.1*$m solid $bp-color-breeze;
  border-radius: 0.8*$m;
  padding: 0.8*$m;
  position: relative;
  background-color: $bp-color-white;
  cursor: default !important;

  &.bp2-textarea-wrapper {
    border: none;
    max-height: 25*$m;

    .bp2-textarea__label {
      color: $bp-color-silver;
      font-size: $bp-fs-7;
    }

    .bp-textarea {
      color: $bp-color-city;
      font-size: 14px;
      min-height: 2*$m;
      line-height: 2*$m;
      background-color: transparent;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      user-select: none;
      display: inline-block;
    }
  }

  &.bp2-textarea-wrapper--show {
    border: 1px solid $bp-color-wave;
    height: auto;
    display: flex;
    flex-direction: column;

    .bp2-textarea__label {
      color: $bp-color-cloud;
      font-weight: $bp-fw-bold;
      font-size: $bp-fs-7;
    }

    .bp-textarea {
      white-space: normal;
      overflow-y: auto;
      text-overflow: unset;
    }

    .bp-textarea-auto-resize {
      height: 2*$m;
    }
  }

  &.bp-textarea-wrapper--focus {
    box-shadow: 0 0.2*$m 1.2*$m 0 rgba(0, 0, 0, 0.1);
    border-color: $bp-color-bot;
    box-shadow: 0px 0px 1px 2px $bp-color-blip-light;
    transition: box-shadow .2s ease-in;
  }

  &.bp-textarea-wrapper--disabled {
    border: 1px solid;
    background-color: $bp-color-offwhite;
    border-color: $bp-color-breeze;
  }

  &.bp-textarea-wrapper--invalid {
    border-color: $bp-color-warning;
    box-shadow: 0px 0px 1px 2px $bp-color-delete;
    transition: box-shadow .2s ease-in;

    .bp2-textarea__label {
      color: $bp-color-delete;
    }
  }
}

.bp-textarea,
.bp-textarea[disabled],
.bp-textarea[readonly] {
  resize: none;
  border: none;
  font-size: $bp-fs-6;
  padding: 0;
  overflow-y: auto;
  width: 100%;
  height: 7.2*$m;
  line-height: $bp-lh-6;
  display: block;
  margin-top: 0.2*$m;
  padding-right: 0.8*$m;

  &::-webkit-scrollbar {
    width: 0.2*$m;
  }

  &::-webkit-scrollbar-thumb {
    background-color: $bp-color-time;
    border-radius: 0.1*$m;
  }

  &::-webkit-scrollbar-track {
    background: $bp-color-offwhite;
    border-radius: 0.1*$m;
  }

  &:focus {
    border: none;
    outline: none;
  }

  @include placeholder($bp-color-cloud);
}

.bp-textarea,
.bp-textarea[readonly] {
  background: $bp-color-white;
}

.bp-textarea[disabled] {
  background: $bp-color-offwhite;
}