.form{position:relative;width:20rem;height:2rem}.form.full-width{width:100%}.form-input{position:absolute;top:0;left:0;width:100%;height:100%;outline:none;background:none;font-size:inherit;font-family:inherit;padding:1rem;color:var(--white-1);transition:all .16s ease-in;z-index:1}.form-input.outline{border:2px solid var(--white-2);border-radius:.5rem}.form-input.filled{border:none;border-bottom:2px solid var(--white-2)}.form-label{position:absolute;top:.5rem;left:1rem;cursor:text;transition:top .2s ease-in,left .2s ease-in,font-size .2s ease-in;background-color:var(--secondary);padding:0 .5rem;pointer-events:none;z-index:0}.form-input.filled~.form-label{position:absolute;top:-.5rem;left:-.5rem;font-size:1.5rem}.form-input.filled:focus~.form-label{top:-.5rem;left:-.5rem;font-size:.8rem}.form-input:not(.filled):focus~.form-label,.form-input:not(.filled):not(:placeholder-shown).form-input:not(:focus)~.form-label{top:-.5rem;left:.8rem;font-size:.8rem}