form {
    width: 100%;
}

form .field {
    width: 100%;
    position: relative;
    margin-bottom: 7px;

    display: block;
}

form .field label {
    font-size: 1rem;
    position: absolute;

    left: 8px;
    top: 50%;

    padding: 3px 8px;
    box-sizing: border-box;

    cursor: text;

    transform: translateY(-50%);
    transform-origin: left;
    transition: all .25s cubic-bezier(0.075, 0.82, 0.165, 1);
}

form .field label::after {
    content: '';

    position: absolute;
    top: 0;
    left: 0;

    z-index: -1;

    background-color: white;

    width: 100%;
    height: 100%;

    transform-origin: center;
    transform: scaleX(0);

    transition: transform .25s cubic-bezier(0.075, 0.82, 0.165, 1);
    transition-delay: .05s;
}

form .field input {
    width: 100%;
    border: none;
    border: 2px solid var(--input-border-normal);
    padding: 15px 16px;
    font-size: 1rem;
    outline: none;

    transition: border-color .25s cubic-bezier(0.075, 0.82, 0.165, 1);
}

form .field input:not(:placeholder-shown) + label,
form .field input:focus + label {
    top: -0%;
    transform: translateY(-15%) scale(.75);
}

form .field input:not(:placeholder-shown) + label::after,
form .field input:focus + label::after {
    transform: scaleX(1);
}

form .field input:focus {
    border-color: var(--input-border-selected);
}