/************************************\
                #ENTRAR
\************************************/
.content-login-page {
    position: absolute;
    top: 0;
    right: 0;
    height: 100vh;
    width: 100vw;
    display: flex;
    /* align-items: center; */
    justify-content: center;
    
    .box-login {
        margin-top: 80px;
        width: 480px;
        height: max-content;
        border-radius: var(--radius-small);
        box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-inline: 40px;
        padding-block: 40px;
        /* margin-bottom: 200px; */

        .box-login-top {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;

            img {
                margin-bottom: 20px;
            }

            & .welcome {
                color: var(--color-gray-link);
                font-weight: var(--weight-SemiBold);
                font-size: 1.6rem;
                margin-bottom: 20px;
                /* font-family: var(--font-title); */

                & span {
                    display: inline;
                    font-weight: var(--weight-Bold);
                }
            }

            .cadastre-se {
                & p {
                    font-size: 1.3rem;
                }
                & span {
                    display: inline;
                    color: var(--color-orange-logo);
                    font-weight: var(--weight-SemiBold);
                    margin-inline-start: 4px;
                }
            }
        }

        & .form {
            margin-top: 60px;
            .form-title {
                /* letter-spacing: var(--ls-negative); */
                font-size: 2.2rem;
                font-weight: var(--weight-Bold);
                text-align: center;
                padding-block-end: 60px;
                /* font-family: var(--font-title); */
                
            }

            form {
                .box-inputs {
                    display: grid;
                    gap: 30px;
                }

                .input-area {
                    position: relative;
                    height: 40px;

                    label {
                        position: absolute;
                        left: 10px;
                        bottom: 6px;
                        transition: all .3s ease;
                        color: var(--color-gray-link);
                        font-size:1.5rem;
                        pointer-events: none;
                        font-weight: var(--weight-Medium);
                    }
                    &:focus-within label,
                    & input:not(:placeholder-shown) + label {
                        background-color: var(--color-white);
                        border-radius: 0 0 4px 4px;
                        padding-inline: 2px;
                        transform: translateY(-150%);
                        color: var(--color-text);
                        font-size: 1.3rem;
                    }
                }

                .esqueceu-senha {
                    text-align: end;
                    margin-top: 10px;
                    font-size: 1.3rem;
                    color: var(--color-orange-logo);
                    font-weight: var(--weight-Medium);
                }

                .agree {
                    margin-top: 10px;
                    font-size: 1.3rem;
                    color: var(--color-text);
                    font-weight: var(--weight-Regular);
                    a {
                        display: inline;
                        font-weight: var(--weight-SemiBold);
                        color: var(--color-orange-logo);
                    }
                }

                .form-bottom {
                    margin-top: 30px;

                    .login-btn {
                        font-size: 1.4rem;
                        min-width: 100%;
                    }
                }
            }            
        }
    }
    
}

input[type="email"],
input[type="text"],
input[type="password"] {
    font-size: 1.4rem;
    width: 100%;
    height: 100%;
    border: 1px solid var(--color-gray-link);
    border-radius: var(--radius-small);
    padding-inline-start: 10px;
    transition: border-bottom .3s ease;
}

input:is([type="email"], input[type="text"], [type="password"]):hover {
    border: 1px solid var(--color-text);
}

input:is([type="email"], input[type="text"], [type="password"]):focus, :focus-visible{
    border: 1px solid var(--color-orange-logo);
}

.eye {
    z-index: 2;
    cursor: pointer;
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;

    & .hidden-password {
        display: none;
    }

    &.active {
        .hidden-password {
            display: block;
        }

        .view-password {
            display: none;
        }
    }
}

.view-password, .hidden-password {
    fill: var(--color-gray-link);
}