.vs-con-textarea
  width: 100%
  position relative
  border: 1px solid rgba(0, 0, 0, .08)
  box-shadow: 0 0 0 0 rgba(0, 0, 0, .0)
  border-radius: 6px
  transition: boxShadow .25s ease, border .25s ease, transform .25s ease
  // overflow hidden
  transform: translate(0, 0)
  margin-bottom: 16px

  &.focusx
    // box-shadow: 0 4px 16px 0 rgba(0,0,0,.05)
    // border: 1px solid rgba(0,0,0,.02)
    // transform: translate(0, -3px)

    h4
      background: rgb(252, 252, 252)
      padding-top: 4px
      padding-bottom: 4px

  h4
    font-size: .7rem
    padding: 8px
    padding-bottom: 0
    cursor default
    transition: all .25s ease
    border-radius: 5px 5px 0 0


.vs-textarea
  resize: none
  border-radius: 6px
  border: 0 solid rgba(0, 0, 0, .0)
  display: block
  padding: 9px
  color: rgba(0, 0, 0, .8)
  font-size: .8rem
  width: 100%
  max-width 100%
  min-width 100%
  background: transparent

  &:focus
    resize: both;

    ~
    .count
      opacity 1

&.textarea-danger
  border: 1px solid getColor('danger', .4)
  box-shadow: 0 4px 20px 0 getColor('danger', .1)

  .vs-textarea
    color getColor('danger', .8)

  .count
    background: getColor('danger', 1)

.vs-textarea--count
  position: absolute
  right 14px
  bottom: 0
  transform: translate(0, 100%)
  // background: rgb(250,250,250)
  padding: 1px 6px
  font-size: .6rem

  border-radius: 0 0 5px 5px
  font-weight: bold
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, .05)
  cursor default
  background: getColor('primary', 1)
  color rgba(255, 255, 255, 1)
  opacity .3
  transition: all .25s ease

for colorx, i in $vs-colors
  .focusx
    &.vs-textarea-{colorx}
      border: 1px solid getColor(colorx) !important