.text-field-word-counter
  color: #9ba0ae
  font-size: 0.7rem

  .too-many &, .too-few &
    color: red

.entity-attribute-text-area
  padding: 0

  label
    position: relative
    display: inline-block
    vertical-align: top
    width: 160px

  .text-area-wrapper
    position: relative
    display: inline-block
    vertical-align: top
    width: calc(100% - 195px)

    .tiny-mce-overlay
      position: absolute
      z-index: 2
      left: 0
      top: 0
      +flex(flex-start, center)
      width: 100%
      height: 100%
      background-color: rgba(white, 0.7)
      pointer-events: none

      &__message
        +flex(center, center)
        margin-left: 50px
        padding: 14px 18px
        background-color: $brand-primary
        border-radius: 8px


      &__icon
        display: inline-block
        color: white
        margin-right: 15px

        svg
          width: 18px

      &__text
        color: white
        font-size: 0.7rem
        line-height: 1.2
        font-weight: bold
        text-transform: uppercase

    textarea
      color: $darker-gray

    >textarea
      display: block
      width: 100%
      padding: 20px 20px 20px 10px

      min-height: 200px
      background-color: transparent
      border: none
      line-height: grid-row(1)
      +attribute-focus
      font-size: 0.7rem
      resize: vertical

      &.tiny-mce-on-click
        resize: none
        overflow: hidden
        filter: blur(1px)
        cursor: pointer