/* Inspired from https://codepen.io/lewisvrobinson/pen/EyZwjR */

form.material .group {
    position: relative;
    width: 100%;
}

form.material textarea {
    resize: none;
}

form.material input, form.material textarea {
    background: none;
    color: var(--font-color);
    font-size: 18px;
    padding: 10px 10px 10px 5px;
    display: block;
    width: 100%;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid var(--font-color);
}

    form.material input:focus, form.material textarea:focus {
        outline: none;
    }

        form.material input:focus ~ label, form.material input:valid ~ label,
        form.material textarea:focus ~ label, form.material textarea:valid ~ label {
            top: -14px;
            font-size: 12px;
            color: var(--primary-color);
        }

        form.material input:focus ~ .bar:before, form.material textarea:focus ~ .bar:before {
            width: 100%;
        }

    form.material input[type="password"] {
        letter-spacing: 0.3em;
    }

form.material label {
    color: var(--font-color);
    font-size: 16px;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    left: 5px;
    top: 10px;
    transition: 300ms ease all;
}

form.material .bar {
    position: relative;
    display: block;
    width: 100%;
}

    form.material .bar:before {
        content: '';
        height: 2px;
        width: 0;
        bottom: 0px;
        position: absolute;
        background: var(--primary-color);
        transition: 300ms ease all;
        left: 0%;
    }