@use "sass:map";
@use "helpers";

.conteudo-conta{
    .box-person{
        display: block;
        width: 100%;
        padding: 40px 15px;
        border: solid 1px map.get(helpers.$palletMinhaConta, borders);
        background-color: map.get(helpers.$palletMinhaConta, medium);

        .thumb-person{
            display: block;
            width: 128px;
            height: 128px;
            margin: 0 auto;
            margin-bottom: 20px;
            background-image: url(../img/minha-conta/icon10.svg);
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
        }

        .name-person{
            display: block;
            margin: 0px;
            color: map.get(helpers.$palletMinhaConta, textDark);
            font: normal 22px helpers.$fontMedium;
            text-align: center;
        }
    }

    .box-dados{
        display: block;
        width: 100%;

        .box-lista{
            display: block;
            width: 100%;
            padding: 25px 15px;

            .lista-item{
                display: flex;
                width: 100%;
                padding: 5px;
                align-items: center;
                justify-content: center;

                @media(max-width:575px){
                    flex-direction: column;
                }

                p{
                    display: block;
                    margin: 0px;
                    width: 50%;
                    padding-right: 5px;
                    text-align: right;
                    color: map.get(helpers.$palletMinhaConta, textMedium);
                    font: normal 13px helpers.$fontSemibold;

                    @media(max-width:575px){
                        width: 100%;
                        padding-right: 0px;
                        text-align: center;
                    }

                    &:last-of-type{
                        padding-left: 5px;
                        text-align: left;
                        color: map.get(helpers.$palletMinhaConta, textDark);
                        font: normal 15px helpers.$fontRegular;
                        text-decoration: underline;

                        @media(max-width:575px){
                            width: 100%;
                            padding-left: 0px;
                            text-align: center;
                        }
                    }
                }
            }
        }

        .opcoes{
            display: flex;
            width: 100%;
            align-items: center;
            justify-content: center;
            
            @media(max-width:575px){
                flex-direction: column;
            }

            .btn-mc{
                margin-right: 15px;
                
                @media(max-width:575px){
                    margin-right: 0px;
                    margin-bottom: 10px;
                }

                &:last-of-type{
                    margin-right: 0px;
                    
                    @media(max-width:575px){
                        margin-bottom: 0px;
                    }
                }
            }
        }
    }
}