.textarea
  width 100%
  height auto

  &-element
    display block
    width 100%
    min-height 30px
    box-sizing border-box
    background-color transparent
    border none
    outline none
    padding-top 0
    padding-bottom 10px
    padding-left 0
    padding-right 0
    position relative
    z-index 2
    resize none
    transition-timing-function ease-in-out
    transition-duration .2s
    transition-property margin, padding

    &[disabled]
      color b2c-cool-grey

.textarea-label
  color main-color05
  font-size 14px
  line-height 18px
  margin-bottom 5px
  .textarea--disabled &
    color main-color03
    .{newAppName}-dark-theme &
      color b2c-white05
  .{newAppName}-dark-theme &
    color b2c-white05

.textarea--static
  .textarea-element
    height 200px
    box-sizing border-box
    box-shadow 0 0 0 2px b2c-cool-grey inset
    padding-top vertical-space * .5
    padding-bottom vertical-space * .5
    padding-left horizontal-space * .5
    padding-right horizontal-space * .5
    transition-timing-function ease-in-out
    transition-duration .4s
    transition-property box-shadow

    &:focus,
    &:hover
      box-shadow 0 0 0 2px b2c-purple inset

    &[disabled]
      border 2px dashed b2c-cool-grey !important
      box-shadow none !important

.textarea--static.text-field--error .textarea-element
  box-shadow 0 0 0 2px error-color inset !important

.{b2bAppName}-textarea
  min-height 60px
  background-color b2c-white
  position relative

  .textarea-element
    padding 10px 20px

  .floating-placeholder
    left 20px

  &--outlined
    .text-field__border
      border 1px solid b2c-cool-grey
      position absolute
      top 0
      bottom 0
      left 0
      right 0

    &:focus,
    &:hover
      .text-field__border
        border-color b2c-purple

      .textarea-element[disabled]+.text-field__border
        border-color b2c-cool-grey

  .textarea-element[disabled]
    &+.text-field__border+.floating-placeholder,
    &+.text-field__line+.floating-placeholder
      color main-color05

    &+.text-field__line
      border-color transparent

.text-field--error
  .text-field__border
    border-color error-color !important

  .{b2bAppName}-textarea:hover
    .text-field__border
      border-color error-color