/* ------------------------------------ *\
   #FORM COMPONENTS
\* ------------------------------------ */

// .c-input {
//   margin-bottom: $spacing-unit;
// }
.c-form__field {
  @include clearfix();
  margin-bottom: $spacing-unit-large;
  
  & ~ .c-form__field {
    margin-top: -$spacing-unit;
  }
}

.c-input {
  width: 100%;
}

  .c-input--inline {
    display: inline-block;
    width: auto;
  }

  .c-input--has-icon {
    padding-right: 45px;
  }


.c-input__wrapper {
  position: relative;
}




.c-input__icon {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
}


.c-label {
  display: block;
  margin-bottom: $spacing-unit-xsmall;
}




.c-input--validation-text {
  opacity: 0;
  visibility: hidden;
  @include font-size(small);
  @include font-weight(bold);
  color: palette(black);
  transition: color .3s ease-in-out, visibility .3s ease-in-out, opacity .3s ease-in-out;
}



/** Error Input States **/
.c-input--error {
  background-color: palette(red, light);
  outline: 3px solid palette(red);
  outline-offset: -3px;
  
  & + .c-input--validation-text {
    color: palette(red);
    opacity: 1;
    visibility: visible;
  }
}

.c-input__icon--error {
  color: palette(red);
}


/** Success Input States **/
.c-input--success {
  background-color: palette(green, light);
  outline: 3px solid palette(green);
  outline-offset: -3px;
  
  & + .c-input--validation-text {
    color: palette(green);
    opacity: 1;
    visibility: visible;
  }
}

.c-input__icon--success {
  color: palette(green);
}


/** Caution Input States **/
.c-input--caution {
  background-color: palette(yellow, light);
  outline: 3px solid palette(yellow);
  outline-offset: -3px;
  
  & + .c-input--validation-text {
    color: palette(yellow);
    opacity: 1;
    visibility: visible;
  }
}

.c-input__icon--caution {
  color: palette(yellow);
}