@use '../../styles/utils' as *

.text_area_container
  width: 100%
  position: relative

  .text_area_wrapper
    width: calc(100% - $size-24px)
    padding: $size-28px $size-10px $size-8px
    border-style: solid
    border-width: $size-1px
    border-color: $medium-grey
    border-radius: $size-4px
    color: $black-primary

    &:focus
      border-color: $pressed

    &:hover
      border-color: $hovered

    &[data-disabled="true"]
      background-color: $light-grey
      color: $medium-grey

      textarea:focus + label, textarea:not(:placeholder-shown) + label, label
        color: $ash-grey

      &:hover
        border-color: $medium-grey

    &[data-error="true"]
      border-color: $alert-danger

      &:hover, &:focus
        border-color: $alert-danger

  .character_count
    margin: $size-4px 0 0 auto
    width: fit-content
    color: $dark-border-grey
    font-size: $size-12px

  label
    position: absolute
    left: $size-12px
    top: $size-18px
    transform: translateY(-50%)
    font-size: $size-16px
    color: $darker-grey
    letter-spacing: $size-1px
    transition: 0.3s
    cursor: pointer

  textarea::placeholder
    opacity: 0

  textarea:focus + label,
  textarea:not(:placeholder-shown) + label
    top: $size-14px
    font-size: $size-12px
    color: $darker-grey
    cursor: none

  textarea
    width: 100%
    padding: 0