.form-floating {
    .form-control {
        padding: 12px 0;
    }

    label {
        padding: 17px 0 0 0;
        border: 0;
        color: $color-text-black;
    }

    .invalid-feedback {
        font-size: 12px;
        position: absolute;
    }
}

.form-floating>.form-control:focus~label {
    transform: scale(.85) translateY(-0.5rem) translateX(-0rem);
    opacity: 1;
}

.form-control.is-invalid:focus {
    box-shadow: none;
}
.form-control.is-valid:focus {  
    box-shadow: none;
}

.form-control {
    font-size: 16px;
    font-weight: 500;
    color: $color-grey;
    padding: 12px 0;
    border-radius: 0;
    border: none;
    background-color: transparent;
    border-bottom: 1px solid $color-grey;

    &:focus {
        border-color: $color-primary;
        box-shadow: none;
        background-color: transparent;
    }

    &::placeholder {
        color: $color-grey;
    }
}