/**
 *  GLOBAL STYLES
 */ 

body{
    --color-light:         #fff;
    --color-dark:           #2b2b2b;
    --color-grey:           #6b5c5c;
    --color-dark-offset:    #494949;
    --color-red-dark:       #6f091a;
    --color-red-light:      #c8102e;
}


main, select, button {
    font-family:            "League Spartan", sans-serif;
    font-optical-sizing:    auto;
    font-style:             normal;
    font-weight:            300;  
    background:             transparent;
}



/**********************/
/*** CONTENT STYLES ***/
/**********************/


.content__wrapper{
    height:                      100dvh;
    width:                       70dvh;
    display:                     flex;
    flex-direction:              column;
    justify-content:             space-between;
    background:                rgba(255, 255, 255, 0.75);
    background:                 var(--color-dark);
}

section.title__container{
    display:                    flex;
    flex-direction:             column;
    justify-content:            center;
    padding-bottom:             calc(var(--margin-std) * 0.25);
    color:                  var(--color-light);

    .title-info__wrapper {
        background-color:       var(--color-light);
        background-image:       url("../assets/peppermint-swirl.svg");
        background-position:    center;
        background-size:        105% auto; 
        background-repeat:      no-repeat;
        overflow:               hidden;
        height:                 12.5vh;
        display:                grid;
        grid-template-rows:     1fr auto;

    }

    h1.title{
        font-size:              1.75vmin;
        font-weight:            100;
        text-transform:         uppercase;
        margin-block-start:     0;
        margin-block-end:       0;
        letter-spacing:         0.5vmin;
        height:                 5dvh;
        display:                flex;
        align-items:            end;
        justify-content:        center;

    }

    .title-selector__wrapper{
        display:                flex;
        flex-direction:         column;
        justify-content:        center;
    }

    .select-wrapper{
        display:                flex;
        width:                  100%;
        justify-content:        center;

        .chart{
            height:                3.5dvh;
        }

        select{
            margin:                 0 1rem;
            width:                  100%;
            text-transform:         lowercase;
            text-align-last:        center;

            &#region-selector{
                letter-spacing:         0rem;
                font-weight:            600;
                font-size:              5vmin;
                text-shadow:
                        -1px -1px 2px #000,
                        -2px -2px 4px #000,
                        2px 2px 2px #000,
                        4px 4px 4px #000;
                color:               var(--color-light); 
            }

            &#chart-selector{
                font-weight:            500;
                font-size:              1.75vmin;
                color:                var(--color-light); 
                margin:             1.5vmin 0;
            }
        }
    }
}


section.chart__container{
    margin:                     var(--margin-std) var(--margin-std) 0 var(--margin-std);

    .chart-grid-container{
        display:                grid;
        grid-template-areas: 
            'cell-0  cell-0  cell-0  cell-0  cell-0'
            'cell-0  cell-0  cell-0  cell-0  cell-0'
            'cell-1  cell-2  cell-3  cell-4  cell-5'
            'label-1 label-2 label-3 label-4 label-5';
        grid-template-columns:  repeat(5, 1fr);
        grid-template-rows:     repeat(2fr, 1fr); 

        #chart-00-container{ grid-area:  cell-0; margin-bottom: 3.5dvh}
        #chart-01-container{ grid-area:  cell-1; }
        #chart-02-container{ grid-area:  cell-2; }
        #chart-03-container{ grid-area:  cell-3; }
        #chart-04-container{ grid-area:  cell-4; }
        #chart-05-container{ grid-area:  cell-5; }

        .chart-container{
            cursor:                 pointer;
            background:             none; 
            border-radius:          0.5rem;
            transition:             all 250ms;

            &.chart-00{
                border-radius:          1rem;
            }
            &.active {
                background:         var(--color-light);
            }
        }
    }

    .chart-container{
        display:                grid;
        margin:                 0 0.25rem;

        svg.svg-chart,
        .chart-label{
            grid-area:          1 / 1 / 2 / 2;
        }
    }

    .chart-label{
        font-size:          1.15dvh;
        color:               var(--color-light);
        align-self:         start;
        white-space:        nowrap;
        text-transform:     lowercase;
        justify-self:       center;
        padding-top:        0.5rem;

        &.cell-0{
            margin-top:         0.75rem;
            font-weight:        500;
            font-size:          1.5dvh;
            justify-self:       start;
            color:              var(--color-dark);
            background:           var(--color-light);
            display:            flex;
            width:              min-content;
            padding:            0.125rem 0.125rem;
        }
    }
}


section.controls__container{
    --button-width:             5dvh;
    display:                    grid;
    grid-template-columns:      1fr;
    grid-template-rows:         1fr;
    height:                     15dvh; 
    color:                       var(--color-light);
}



/******************************/
/*** MOBILE / TABLET STYLES ***/
/******************************/

@media (max-width: 1024px)  {
    body{
         --sash-angle:          120deg;
    }

    .content__wrapper{
        width:                  100%;
        height:                 100dvh;
    }

    section.title__container{
        h1.title{
            font-size:          3vmin;
        }

        .select-wrapper{
            select#region-selector{
                font-size:          7.5vmin;
            }
            select#chart-selector{
                font-size:          3vmin;
            }
        }
    }
}