.textarea-container {
  position: relative;
  width: 100%;

  label {
    display: block;
    margin-bottom: 8px;
  }

  .textarea-display {
    width: 100%;
    height: 155px;
    border: 1px solid $light-grey;
    border-radius: 6px;
    background: $white;
    @include display-flex(flex-start, flex-start);
    transition: all ease-in-out 0.3s;
    padding: 16px 0;

    textarea {
      width: 100%;
      border-radius: 6px;
      height: 100%;
      background: transparent;
      border: 0;
      padding: 0 16px;
      font-family: $primary-font;
      color: $black;
      font-size: 14px;
      line-height: 24px;
      letter-spacing: -0.006px;
      appearance: none;
      resize: none;

      &::-webkit-outer-spin-button,
      &::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }

      @include placeholder(24px) {
        color: $dark-grey;
        font-size: 14px;
        line-height: 24px;
        letter-spacing: -0.006px;
      }

      &:focus {
        outline: $light-grey;
      }

      &:disabled {
        color: $grey;
        -webkit-text-fill-color: $grey;
        opacity: 1;
        -webkit-opacity: 1;
      }
    }
  }

  .textarea-message {
    margin-top: 4px;
    position: absolute;

    &.error {
      color: $critical;
    }

    &.warning {
      color: $warning;
    }

    &.success {
      color: $success;
    }
  }

  &__focused {
    .textarea-display {
      border-color: $success;
      box-shadow: $input-shadow;
    }
  }

  &__error {
    .textarea-display {
      border-color: $critical;
      box-shadow: none;
    }
  }
}