.input-text-field {
    tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-transition: border-bottom 200ms ease;
    -moz-transition: border-bottom 200ms ease;
    -ms-transition: border-bottom 200ms ease;
    -o-transition: border-bottom 200ms ease;
    transition: border-bottom 200ms ease;
    border-bottom: solid 1px $faintBlack;
    border-top: solid 1px transparent;
    border-right: none;
    border-left: none;
    border-radius: 0;
    padding: rem(8) 0;
    font-size: rem(16);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    box-sizing: border-box;
    height: rem(36);
}

.input-text-error {
    font-size: rem(12);
    line-height: rem(13);
    color: $red500;
}

.input-text-label {
    font-size: rem(12);
    line-height: rem(13);
    box-sizing: border-box;
    padding: rem(8) 0 0;
    display: block;
    box-sizing: border-box;
}

.input-text {
    display: block;
    position: relative;
    padding: rem(8) 0;
    box-sizing: border-box;
    max-height: rem(72);
    min-height: rem(72);
    &.input-text-invalid {
        max-height: rem(98);
    }
}

.input-text-label {
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

.input-text-field:focus {
    outline: none;
}

.input-text.input-text-focused {
    .input-text-label {
        color: $colorInputActive;
    }
    .input-text-field {
        border-bottom: solid 2px $colorInputActive;
        border-top: none;
    }
}

.input-text.input-text-floating {
    padding: rem(28) 0 rem(8);
    .input-text-label {
        font-size: rem(16);
        line-height: rem(18);
        padding: rem(8) 0 0;
        position: absolute;
    }
    .input-text-field {
        width: 100%;
    }

    .input-text-field::-moz-placeholder {
        color: $fullWhite;
    }
    .input-text-field::-webkit-input-placeholder{
        color: $fullWhite;
    }
    .input-text-field:-ms-input-placeholder{
        color: $fullWhite;
    }
}

.input-text.input-text-floating.input-text-focused, .input-text.input-text-floating.input-text-typed {
    padding: rem(28) 0;
    .input-text-label {
        font-size: rem(12);
        line-height: rem(13);
        padding: rem(8) 0 0;
        top: rem(8);
    }
    .input-text-field::-moz-placeholder {
        color: $grey400;
    }
    .input-text-field::-webkit-input-placeholder{
        color: $grey400;
    }
    .input-text-field:-ms-input-placeholder{
        color: $grey400;
    }
}

.input-text.input-text-invalid {
    .input-text-label {
        color: $red500;
    }
    .input-text-field {
        border-bottom: solid 2px $red500;
        border-top: none;
    }
}