/* =========================================================
   PANORAMA DE MERCADO
   @oEvandroSoares

   FASE 4

   Arquivo:
   heatmap.css

   Heatmap Mercado B3
========================================================= */





/*
=========================================================
CONTAINER PRINCIPAL
=========================================================
*/


.heatmap {


    width:100%;



    display:grid;



    grid-template-columns:


    repeat(

        6,

        1fr

    );



    grid-auto-rows:

    120px;



    gap:

    8px;



}









/*
=========================================================
BLOCO DO ATIVO
=========================================================
*/


.heatmap-item {


    position:

    relative;



    display:flex;



    flex-direction:

    column;



    justify-content:

    center;



    align-items:

    center;



    padding:

    12px;



    border-radius:

    8px;



    border:

    1px solid

    var(--border-color);



    overflow:

    hidden;



    cursor:

    pointer;



    transition:

    .25s ease;



}









.heatmap-item:hover {


    transform:

    scale(1.04);



    z-index:

    2;



}









/*
=========================================================
NOME DO ATIVO
=========================================================
*/


.heatmap-symbol {


    font-size:

    18px;



    font-weight:

    800;



    color:

    white;



}









.heatmap-company {


    font-size:

    10px;



    color:

    rgba(

        255,

        255,

        255,

        .75

    );



    margin-top:

    4px;



}









/*
=========================================================
VARIAÇÃO
=========================================================
*/


.heatmap-change {


    font-size:

    16px;



    font-weight:

    700;



    margin-top:

    8px;



}









/*
=========================================================
POSITIVOS
=========================================================
*/


.heatmap-positive {


    background:


    linear-gradient(

        135deg,

        rgba(

            0,

            208,

            132,

            .75

        ),

        rgba(

            0,

            100,

            70,

            .85

        )

    );



}









/*
=========================================================
NEGATIVOS
=========================================================
*/


.heatmap-negative {


    background:


    linear-gradient(

        135deg,

        rgba(

            255,

            77,

            90,

            .75

        ),

        rgba(

            120,

            20,

            40,

            .85

        )

    );



}









/*
=========================================================
NEUTROS
=========================================================
*/


.heatmap-neutral {


    background:


    linear-gradient(

        135deg,

        #273043,

        #151b27

    );



}









/*
=========================================================
TAMANHO POR IMPORTÂNCIA
=========================================================
*/


.heatmap-large {


    grid-column:

    span 2;



    grid-row:

    span 2;



}









.heatmap-medium {


    grid-column:

    span 2;



}









.heatmap-small {


    grid-column:

    span 1;



}









/*
=========================================================
INFORMAÇÕES EXTRAS
=========================================================
*/


.heatmap-volume {


    position:

    absolute;



    bottom:

    8px;



    font-size:

    10px;



    color:

    rgba(

        255,

        255,

        255,

        .7

    );



}









.heatmap-sector {


    position:

    absolute;



    top:

    8px;



    left:

    8px;



    font-size:

    9px;



    text-transform:

    uppercase;



    opacity:

    .7;



}









/*
=========================================================
RANKING LATERAL
=========================================================
*/


.market-ranking {


    display:flex;


    flex-direction:

    column;



    gap:

    8px;



}









.rank-item {


    display:flex;


    align-items:center;



    justify-content:

    space-between;



    padding:

    10px;



    background:

    var(--bg-secondary);



    border-radius:

    6px;



}









.rank-name {


    font-weight:

    700;



    font-size:

    13px;



}









.rank-value {


    font-weight:

    800;



}









/*
=========================================================
RESPONSIVIDADE
=========================================================
*/


@media(max-width:1100px){



    .heatmap {


        grid-template-columns:


        repeat(

            4,

            1fr

        );



    }



}









@media(max-width:700px){



    .heatmap {


        grid-template-columns:


        repeat(

            2,

            1fr

        );



    }





    .heatmap-large {


        grid-column:

        span 2;



    }



}