input {
    font-size: inherit;
}

.form-field {
    position: relative;
}

.form-input {
    border: none;
    border-bottom: 1px solid var(--dark-shade);
    outline: none;
    padding: 10px 5px;
    margin: 10px 0;
    background: transparent;
    transition: border-color .15s;
    min-width: 100px;
    max-width: 500px;
    width: 100%;
}

.form-label {
    position: absolute;
    top: 5px;
    left: 0;
    padding: 10px 0;
    pointer-events: none;
    transition: .5s;
    font-size: inherit;
}

.form-input:focus ~ label,
.form-input:valid ~ label,
.form-input[type=date] ~ label,
.form-input[type=time] ~ label,
.form-input[type=datetime-local] ~ label {
    top: -10px;
    left: 0;
    font-size: 12px;
}

.form-input[type=checkbox] ~ label {
    top: -4px;
    font-size: inherit;
}

input:focus {
    border-bottom: 1px solid var(--brand);
}

select {
    padding: 10px;
    width: 100%;
    margin: 10px 0;
}