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

.conteudo-conta{
    .opcoes{
        display: flex;
        margin-left: -10px;
        margin-right: -10px;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: flex-start;
        
        @media(max-width:1199px){
            justify-content: center;
        }

        .opcao{
            display: flex;
            outline: 0px;
            width: 214px;
            height: 214px;
            margin: 10px;
            padding: 10px;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            box-shadow: none;
            border-radius: map.get(helpers.$palletMinhaConta, borderRadius);
            border: solid 1px map.get(helpers.$palletMinhaConta, borders);
            @include helpers.transicao(0.4s ease-in-out);

            .icon{
                display: block;
                margin: 0 auto;
                margin-bottom: 40px;
                background-size: contain;
                background-position: center;
                background-repeat: no-repeat;

                &.icon1{
                    width: 59px;
                    height: 75px;
                    background-image: url(../img/minha-conta/icon1.svg);
                }
                &.icon2{
                    width: 59px;
                    height: 76px;
                    background-image: url(../img/minha-conta/icon2.svg);
                }
                &.icon3{
                    width: 59px;
                    height: 76px;
                    background-image: url(../img/minha-conta/icon3.svg);
                }
                &.icon4{
                    width: 50px;
                    height: 75px;
                    background-image: url(../img/minha-conta/icon4.svg);
                }
                &.icon5{
                    width: 66px;
                    height: 62px;
                    background-image: url(../img/minha-conta/icon5.svg);
                }
                &.icon6{
                    width: 81px;
                    height: 81px;
                    background-image: url(../img/minha-conta/icon6.svg);
                }
                &.icon7{
                    width: 59px;
                    height: 55px;
                    background-image: url(../img/minha-conta/icon7.svg);
                }
            }

            p{
                display: block;
                margin: 0px;
                color: map.get(helpers.$palletMinhaConta, textMedium);
                font: normal 15px helpers.$fontMedium;
                text-align: center;
            }

            &:hover,&:focus{
                border-color: map.get(helpers.$palletMinhaConta, highlight);
                background-color: map.get(helpers.$palletMinhaConta, highlight);

                .icon{
                    &.icon1{
                        background-image: url(../img/minha-conta/icon1-h.svg);
                    }
                    &.icon2{
                        background-image: url(../img/minha-conta/icon2-h.svg);
                    }
                    &.icon3{
                        background-image: url(../img/minha-conta/icon3-h.svg);
                    }
                    &.icon4{
                        background-image: url(../img/minha-conta/icon4-h.svg);
                    }
                    &.icon5{
                        background-image: url(../img/minha-conta/icon5-h.svg);
                    }
                    &.icon6{
                        background-image: url(../img/minha-conta/icon6-h.svg);
                    }
                    &.icon7{
                        background-image: url(../img/minha-conta/icon7-h.svg);
                    }
                }

                p{
                    color: map.get(helpers.$palletMinhaConta, textLight);
                }
            }
        }
    }
}