.ca-input-text {
  $input-text-height: rem-calc(50px) !default;
  $block: &;

  position: relative;
  transition: border 0.2s ease;
  height: $input-text-height;
  border: $input-border;
  background-color: $c-input-background;
  border-radius: $input-border-radius;

  &__wrap {
    text-align: left;

    & + & {
      margin: $px16 0 0;
    }
  }

  &__label {
    left: $px10;
    transition: top 0.2s ease, transform 0.2s ease;
    pointer-events: none;
    padding: rem-calc(1px) rem-calc(6px);
    position: absolute;
    transform: translateY(-50%) scale(1);
    transform-origin: left center;
    top: 0;
    font-size: $font-size-xs;
    border-radius: rem-calc(10px);
    background-color: $c-input-background;
  }

  &__optional {
    font-size: 0.8em;
    margin-left: 2px;
    transition: inherit;
    color: $c-text-secondary;
  }

  &__input {
    border: none;
    height: 100%;
    width: 100%;
    background-color: transparent;
    outline: none;
    font-size: $font-size-s;
    padding: $px4 $px16 0 $px16;
    border-radius: $input-border-radius;

    @include bp(phone-only) {
      font-size: $font-size-m;
    }
    
    &:focus-visible {
      box-shadow: none;
    }
  }

  &__spinner {
    @include valign;

    right: $px16;
    background-color: $c-input-background;
  }

  &__toggle-password {
    @include valign;

    right: $px16;
    padding: $px4 $px10;
    background-color: $c-medium-gray;
    font-size: $font-size-xs;
    font-weight: $font-weight-bold;
  }

  &__error-icon {
    @include valign;

    right: $px16;
    color: $c-error;
  }

  &__help-text {
    font-size: $font-size-xs;
    padding: $px4 0 0 $px16;
    color: $c-text-secondary;

    &--error {
      color: $c-error;
    }
  }

  &__password-strength {
    position: absolute;
    width: 100%;
    max-width: calc(100% - #{2 * $px16}) !important;
    left: $px16;
    bottom: 0;
    height: 17px;
  }

  &__password-meter {
    height: 2px !important;
  }

  &--empty {
    &:not(#{$block}--focused) {
      #{$block}__label {
        transform: translateY(-50%) scale(1.15);
        top: 50%;
      }
    }
  }
  
  &--focused {
    border-color: $c-input-focused-border;
  
    #{$block}__label {
      font-weight: $font-weight-bold;
    }
  }
  
  &--error {
    border-color: $c-error;
  
    #{$block}__label {
      color: $c-error;
      font-weight: $font-weight-bold;
    }
  }
  
  &--disabled {
    #{$block}__input {
      color: $c-text-secondary;
    }
  }
}