@import url(../base.css);

body{
    border: 1px solid indigo;
    display: grid;
    place-items: center;

    height: 100vh;
}


#loginForm{
    border: 2px solid var(--color-principal);
    border-radius: 16px;
    width: 90%;
    max-width: 550px;
    height: 80vh;
    padding: 10px 30px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 15px;

        & img{
            width: 229px;
            height: 98px;
            align-self: center;
        }

        & .form__title{
            font-size: var(--text-xl);
            margin-bottom: 10px;
            text-align: center;
            text-transform: uppercase;
        }
        
        & .form__group{
            display: flex;
            flex-direction: column;
            gap: 5px;

                & .form__required{
                    color: var(--color-danger);
                    font-weight: var(--font-extrabold);
                }

                & .input__icon{
                    border: 2px solid var(--color-border-input);
                    border-radius: 8px;
                    padding: 0.5rem 1rem;
                    font-size: var(--text-xl);

                    display: flex;
                    align-items: center;
                    gap: 10px;
                }
        }


        & button[type="submit"]{
            cursor: pointer;
            width: 80%;
            margin-top: 20px;

            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 10px;

            background-color: var(--color-principal);
            color: var(--color-white);
            font-size: var(--text-2xl);

            padding: 0.5rem 1rem;
            transition: width 0.2s ease-in, background-color 0.2s ease-in;
        }

        & button[type="submit"]:hover{
            --this-background: color-mix(in srgb, var(--color-principal), black 15%);

            width: 100%;
            background-color: var(--this-background);
        }
}