@use 'colours';
@use 'responsive';
@use 'typography';

.text-input-wrap {
  position: relative;
  display: inline-block;
  height: 86px;

  @include responsive.not-desktop {
    width: 100%;
    max-width: 420px;
  }

  label {
    position: relative;
    color: colours.$colour-textinput-text;
    left: 0;
    top: 9px;
    transition: top 0.3s, font-size 0.3s;
    font-weight: typography.$font-weight-medium;
  }

  .input-wrap {
    position: absolute;
    height: 100%;
    border-top: solid 2px transparent;
    padding: 5px;
    left: 12px;
    top: 0;
    transition: border-top-color 0.1s;
    pointer-events: none;
  }

  .form-text-input:focus + .input-wrap {
    border-top-color: colours.$colour-white;

    label {
      color: colours.$colour-textinput-text-active;
      top: -18px;
      font-size: 14px;
    }
  }

  .has-value {
    border-top-color: colours.$colour-white;
    input {
      background-color: colours.$colour-white;
    }
    label {
      top: -18px;
      font-size: 14px;
    }
  }

  .icon {
    position: absolute;
    right: 16px;
    top: 16px;
  }

  .is-hidden {
    display: none;
  }

  .validated-icon {
    color: colours.$colour-utility-success;
  }

  .invalid-icon {
    color: colours.$colour-utility-error;
  }
}

.form-text-input {
  width: 100%;
  height: 50px;
  border: 2px solid colours.$colour-textinput-border;
  color: colours.$colour-textinput-text;
  padding-left: 18px;
  outline: none;
  background-color: colours.$colour-textinput-bg;
  position: relative;
  line-height: 3;

  &:focus {
    border-color: colours.$colour-textinput-text-active;
    color: colours.$colour-textinput-text-active;
    background-color: colours.$colour-white;
  }

  @include responsive.not-desktop {
    max-width: 420px;
    width: 100%;
  }
}

.invalid > .form-text-input  {
  padding-right: 2rem;
}

.validated > .form-text-input  {
  padding-right: 2rem;
}

input::placeholder {
  overflow: visible;
}