@keyframes anim {
    from{
        transform:scale(1.1);
    }
    to{
        transform:scale(1);
    }
}

.login-01{
    --primary:hsl(300, 100%, 50%);
    --secondary:hsl(0, 2%, 20%);
    --secondary-light:hsl(0, 2%, 40%);
    --secondary-lighter:hsl(0, 2%, 80%);

    display:flex;
    flex-direction:column;
    gap:30px;

    > span{
        font-size:2rem;
        color:var(--secondary);
        text-align:center;
        font-weight:bold;
    }

    a{
        text-decoration:none;
        color:var(--primary);
        align-self:center;
    }

    > input{
        padding:10px;
        color:white;
        font-size:1.5rem;
        border-radius:calc(10px + 1.5rem);
        background-color:var(--primary);
        border-width:0;
        font-family:inherit;
        cursor:pointer;

        &:hover{
            background-color:var(--secondary-light);
        }
    }

    .form-field-wrap{
        display:flex;
        flex-direction:column;
        gap:20px;
    }

    .form-field{
        display:flex;
        align-items:center;
        gap:10px;
        padding:10px;
        border-radius:calc(10px + 1rem);
        background-color:var(--secondary-lighter);
        animation-duration:100ms;
        animation-timing-function:linear;

        &:focus-within{
            animation-name:anim;

            i{
                color:var(--primary);
            }
        }

        i{
            color:var(--secondary-light);
        }
        

        input{
            border-width:0;
            font-size:inherit;
            font-family:inherit;
            color:var(--secondary-light);
            background-color:transparent;

            &:focus{
                outline-width:0;
            }

            &::placeholder{
                color:var(--secondary-light);
            }
        }

        span{
            color:white;
            width:20px;
            height:20px;
            border-radius:20px;
            text-align:center;
            line-height:20px;
            background-color:red;
            opacity:0;
        }

    }
    
}