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

.textfield_container
  width: 100%

  .form_input
    position: relative
    align-items: center
    border-width: $size-1px
    border-style: solid
    border-color: $medium-grey
    border-radius: $size-8px
    background: $white

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

      .disabled_image
        opacity: $alpha-five
        cursor: not-allowed

      &:hover
        border-color: $medium-grey

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

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

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

    &[data-leading-icon="true"]
      label
        left: $size-48px

  .leading_image_wrapper
    padding:
      left: $size-12px

  .coupon_description
    color: $dark-grey
    white-space: nowrap
    padding-top: $size-4px

  .character_count
    margin: $size-8px 0 0 auto
    width: fit-content
    color: $dark-border-grey
    font-size: $size-12px
    white-space: nowrap

  .tailing_image_wrapper
    padding:
      right: $size-12px

  .form_input:hover
    border-color: $hovered

  .form_input input::placeholder
    opacity: 0

  .offer_description
    padding-top: 8px
    color: $dark-grey

  .form_input input
    width: 100%
    font-size: $size-16px
    padding: $size-28px $size-8px $size-8px $size-12px
    background-color: $white !important
    color: $black-primary
    border: $size-1px solid transparent

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

  .form_input input:focus + label,
  .form_input input:not(:placeholder-shown) + label
    top: $size-14px
    font-size: $size-12px
    color: $darker-grey
    cursor: pointer

  .form_input:focus-within
    border-color: $pressed