.error-message {
  font-size: (14em / 16);
  color: $rose;
}

#{text-inputs((), ':focus')},
#{text-inputs()},
.form-input,
textarea {
  height: auto;
  border: $input-border;
  border-width: 0 0 (2em / 14) 0;
  padding: (11em / 14) (12em / 14) (10em / 14);
  font-size: (14em / $global-size);
  line-height: $input-line-height;
  position: relative;
  z-index: 1;
  transition: $input-transition;

  &.not-empty {
    border-color: $mint;
    &.light-grey-border {
      border-color: $light-grey;
      color: $charcoal;
      button {
        i {
          display: none;
        }
      }
    }
  }

  &.focus,
  &:focus {
    border-color: $dark-mint;
  }

  &:hover {
    border-color: $charcoal;
  }

  &.invalid {
    border-color: $rose;
  }

  &:disabled,
  &:disabled:hover {
    background-color: white;
    border-color: $off-white;
    border-width: 0 0 (1em / 14) 0;

    &.disabled-2 {
      background-color: $off-white;
      border-width: 0 0 (2em / 14) 0;
      color: $light-grey;
    }
  }
}

.form-group {
  position: relative;
  padding-top: (11em / $global-size);
  margin-bottom: (24em / $global-size);

  &.padding-fix {
    padding-top: 2px;
  }

  &.always-on {
    label {
      color: $grey;
      transform: scale((11/14)) translate(-(12em / 14), -((24em / 14) / (11/14)));
    }
  }

  & > input,
  & > .form-input {
    margin-bottom: 0;
    font-weight: 600;
    font-size: 14px;

    &:disabled {
      color: $light-grey;
    }
    &:focus {
      font-size: 14px;
    }
  }

  & > label {
    top: (11em / 14);
    left: 0;
    position: absolute;
    color: black;
    padding: (12em / 14) (12em / 14) (9em / 14);
    transform: scale(1) translate(0,0);
    transition: transform .15s linear, color .15s linear;
    transform-origin: left;
    pointer-events: none;
    text-align: left;
    width: 100%;
    white-space: nowrap;
    z-index: 2;
    font-weight: 600;
  }

  & > .error-message {
    color: $rose;
    font-size: (11em / 16);
    line-height: (11em / 11);
    display: block;
    width: 100%;
    position: absolute;
    z-index: 0;
    bottom: 0;
    transform: translateY(0);
    transition: transform .15s linear, color .15s linear;
    text-align: left;
    white-space: nowrap;
  }

  & > .not-empty ~ label,
  & > textarea:focus ~ label,
  & > input:focus ~ label {
    color: $grey;
    transform: scale((11/14)) translate(-(12em / 14), -((24em / 14) / (11/14)));
  }

  & > .invalid ~ label,
  & > .invalid:focus ~ label {
    color: $rose;
  }

  & > input:disabled ~ label {
    color: $light-grey;
  }

  & > .invalid ~ .error-message {
    transform: translateY((17em / 11));
  }

  &.button-over-input-right > button {
    font-size: (18em / $global-size);
    line-height: ($global-size / 18);
    position: absolute;
    right: (12em / 18);
    top: (11em / 18);
    margin: (12em / 18) 0 (9em / 18);
    color: $grey;
    transition: $button-transition;
    z-index: 1;

    &:hover {
      color: $honey;
    }
  }

  &.form-group-button {
    padding-top: (4em / $global-size);
  }
}
.edit-payment-methods-container {
  .form-group {
    overflow: hidden;
  }
}