.form-field__label {
  margin-bottom: 5px;
  position: absolute;
  opacity: 0;
  height: 0;
}

.form-field__shown-label {
  font-size: 12px;
  font-weight: 400;
  transition: all 0.2s;
  transform-origin: top left;
  position: absolute;
  top: -7px;
  left: 10px;
  background: var(--union-white);
  margin: 0 auto 0 0;
  padding: 0 4px;
}

.form-field__input-container {
  display: flex;
  flex-direction: column;
  position: relative;
}

/* non-focused, untouched field label */
.form-field__input[placeholder=" "]:not(:focus):placeholder-shown
  + .form-field__shown-label {
  transform: translate(-4px, 20px) scale(1.4);
  pointer-events: none;
  opacity: 0.5;
  color: var(--union-black);
  background: var(--union-white);
}

@media only screen and (min-width: 1024px) {
  .fcu-form-field__input[placeholder=" "]:not(:focus):placeholder-shown
    + .fcu-form-field__shown-label {
    transform: translate(-4px, 20px) scale(1.7);
  }
}

.form-field__input:-webkit-autofill {
  background: var(--union-white);
}

/* transform the label if browser has autofilled */
.form-field__input:-webkit-autofill ~ .form-field__shown-label {
  transform-origin: top left;
}

.form-field__shown-label--error {
  color: var(--union-red);
}

.form-field__shown-label--valid {
  color: var(--union-green);
}

.form-field__input {
  padding: 10px 45px 10px 12px;
  font-weight: 400;
  font-size: 16px;
  line-height: 32px;
  outline: solid 1px var(--union-grey-light);
  border: none;
  border-radius: 4px;
  margin-bottom: 23px;
}

/* focused input or focused non-verified input */
.form-field__input:focus-visible,
.form-field__input--not-verified:focus-visible {
  border: none;
  outline: solid 1px var(--union-grey-dark);
  box-shadow: 0px 3px 5px var(--union-grey-dark);
}

.form-field__input:not(:placeholder-shown) {
  outline: solid 1px var(--union-grey-light);
}

/* error input style always shown focus or blur */
.form-field__input--error,
.form-field__input--error:focus-visible,
.form-field__input--error:not(:placeholder-shown) {
  outline: solid 1px var(--union-red);
}

/* valid input shown on focus*/
.form-field__input--valid:focus-visible {
  outline: solid 1px var(--union-green);
}

/* valid label reverts to original color on blur */
.form-field__input--valid:not(:focus-visible)
  + .form-field__shown-label--valid {
  color: var(--union-black);
}

.form-field__input-success-icon {
  position: absolute;
  right: 20px;
  top: 12px;
  height: 28px;
}

.form-field__criteria-error-icon {
  height: 30px;
}

.form-field__password-input {
  padding: 10px 45px 10px 12px;
}

.form-field__password-icon {
  position: absolute;
  right: 20px;
  top: 12px;
  color: var(--union-grey-darkest);
  font-size: 25px;
  z-index: 1;
}

.form-field__input:focus-visible ~ .form-field__password-icon {
  color: var(--union-black);
}

/* hidden accessibility button for tab access to show/hide password */
.form-field__show-password-btn {
  position: absolute;
  height: 30px;
  width: 41px;
  border: 0 solid;
  background: transparent;
  top: 10px;
  right: 12px;
  color: white;
  font-size: 5px;
}

.form-field__aria-criteria {
  display: none;
}

.form-field__criteria-container {
  display: flex;
  margin: -20px 0 10px -5px;
}

.form-field__criteria {
  font-size: 12px;
  margin-top: 10px;
  font-family: RobotoBold;
}

.form-field__criteria--error {
  color: var(--union-red);
  bottom: -20px;
  line-height: 12px;
}

@media only screen and (min-width: 480px) {
  .form-field__label {
    margin-bottom: 15px;
  }
  .form-field__input {
    margin-bottom: 32px;
  }
  .form-field__criteria-container {
    margin: -30px 0 10px -5px;
  }
}

@media only screen and (min-width: 720px) {
  .form-field__input {
    font-size: 18px;
    padding: 10px 45px 10px 20px;
  }
  .form-field__shown-label {
    padding: 0 7px;
  }

  .form-field__criteria {
    font-size: 12px;
    bottom: -7px;
  }
}

@media only screen and (min-width: 1024px) {
  .form-field__input {
    font-size: 20px;
  }

  .form-field__shown-label {
    font-size: 14px;
  }
}