@import "../style/colors";
@import "../style/typography";

.la-text-input {
  position: relative;

  &--focus {
    top: 12px;
    @extend %LaTypeFaceTitle-4;
  }

  &-floating {
    display: block;
    width: 100%;
    min-height: 69px;
    padding: 12px 0 0 16px;
    color: $midnight-1;
    background-color: $white;
    border: solid 1px $midnight-8;
    border-radius: 10px;
    @extend %LaTypeFaceTitle-2;

    &:hover,
    &:focus {
      border: solid 1px $midnight-6;
    }

    &:disabled {
      background-color: $midnight-8;
      border: solid 1px $midnight-6;
    }

    &.input-full ~ .input-place-holder {
      @extend .la-text-input--focus;
    }

    &--top {
      border-bottom: none;
      border-radius: 10px 10px 0 0;
    }

    &--middle {
      border-bottom: none;
      border-radius: 0;
    }

    &--bottom {
      border-radius: 0 0 10px 10px;
    }

    // Used for customize input into form
    &--border-top-none {
      border-top: none;
    }

    &--border-bottom-none {
      border-bottom: none;
    }

    &--border-left-none {
      border-left: none;
    }

    &--border-right-none {
      border-right: none;
    }

    &--border-radius-top-left-none {
      border-top-left-radius: 0;
    }

    &--border-radius-top-right-none {
      border-top-right-radius: 0;
    }

    &--border-radius-bottom-left-none {
      border-bottom-left-radius: 0;
    }

    &--border-radius-bottom-right-none {
      border-bottom-right-radius: 0;
    }

    &-error {
      border: solid 1px $red-2;

      &:hover,
      &:focus {
        border: solid 1px $red-2;
      }
    }
  }
}

.input-place-holder {
  position: absolute;
  top: 23px;
  left: 16px;
  color: $midnight-3;
  letter-spacing: -.4px;
  pointer-events: none;
  transition: .2s ease all;
}

.la-text-input-floating:focus ~ .input-place-holder {
  @extend .la-text-input--focus;
}

input:focus {
  outline: none;
}