/**
 *  GLOBAL STYLES
 */ 

body{
    --color-strawberry: #F2055C; 
    --color-purple:     #37003c; 
    --color-pink:       #ff2882; 
    --color-aqua:       #07F2F2; 
    --color-green:      #05F26C; 
    --color-yellow:     #EAF205; 

    --color-light:         #fff;
    --color-dark:           #131313;
}


main, input, 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:                 var(--color-purple);
}

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

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

    }

    .title-info__wrapper{
        display:                flex;
        flex-direction:         column;
        justify-content:        center;
        background:             linear-gradient(135deg, rgba(5, 240, 255, 1) 0%, rgb(149, 59, 255, 1) 70%) rgb(255, 59, 206) 50%;

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

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

            &.team{
                height:                 10dvh;
                align-items:            center;
            }

            &.era{
                height:                3.5dvh;
                background:         rgba(0, 0, 0, 0.2);
            }

            select{
            color:                  var(--color-light);
                font-weight:            300;
                font-size:              3.5vmin;
                letter-spacing:         0.2rem;
                margin:                 0 1rem;
                width:                  min-content;
                width:                  100%;
                text-transform:         lowercase;
                text-align-last:        center;
                overflow:               visible;

                &#team-selector{
                    font-weight:            300;
                    font-size:              5vmin;
                }
                &#era-selector{
                    font-weight:            300;
                    font-size:              1.5vmin;
                }
            }
        }
    }
}

section.info__container{
    color:                      var(--color-light);

    .info-block__wrapper{
        margin:                 var(--margin-std);
        padding-bottom:         calc(0.5 * var(--margin-std));
        border-bottom:          0.5px solid var(--color-pink);


        h2{
            font-size:                  1.5vmin;
            font-weight:                600;
        }

        .info__wrapper{
            display:                    flex;
            width:                      100%;
            justify-content:            space-between;
            font-size:                  1.25vmin;


            .info-block{
                min-width:                  40%;

                .info-line{
                    display:                    grid;
                    grid-template-columns:      1fr 1fr;
                    width:                      100%;
                    margin-bottom:              calc(var(--margin-std) * 0.5);


                    .info-label{
                        font-weight:                400;
                    }

                    .info-data{
                        display:                    flex;
                        justify-content:            end;
                        font-weight:                100;
                    }
                }

                .dash{
                    padding:                    0 0.125rem;
                }
            }
        }
    }
}

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

    .chart-header-block{
        display:                    flex;
        font-size:                  1.25vmin;
        font-weight:                500;
        color:                      var(--color-light);

        span{
            padding:                0 0.25rem;
        }

        .select__wrapper{
            border:                 none;
            border-bottom:          0.5px dashed;
            outline:                none;
            margin-top:             -1px;

            input,
            select{
                display:                    flex;
                font-size:                  1.25vmin;
                font-weight:                500;
                color:                       var(--color-light);

                &[type="date"] {
                    color-scheme:           dark;

                    &::-webkit-calendar-picker-indicator {
                        margin-left:            -0.5vmin;
                    }
                }

                &:focus{
                    outline:                1px dotted var(--color-strawberry);
                    outline-offset:         2px;
                    border-radius:          1px;
                }
            }
        }  
    }
}

section.controls__container{    /* See shared-components css */
    color:                      var(--color-light);
    background:                 var(--color-purple);
}



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


@media (max-width: 1024px)  {
    .content__wrapper{
        width:                  100%;
        height:                 100dvh;
    }

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

        .title-info__wrapper{
            .select-wrapper{
                select#team-selector{
                    font-size:          7.5vmin;
                }
                select#era-selector{
                    font-size:          3vmin;
                }
            }
        }
    }

    section.info__container{
        .info-block__wrapper{
            .info__wrapper{
                font-size:          1.5vmin;
            }
        }
    }

    section.chart__container{
        .chart-header-block{
            font-size:          1.5vmin;

            .select__wrapper{
                input,
                select{
                    font-size:          1.5vmin;

                    &[type="date"]::-webkit-calendar-picker-indicator {
                        margin-right:   0; 
                        margin-left:    -5vmin;
                    }
                }
            }
        }
    }
}


@media (max-width: 768px)  {

    section.info__container{
        .info-block__wrapper{
            .info__wrapper{
                font-size:          2vmin;

                .info-block{
                    min-width:          45%;
                    &.score-data{
                        display:            none;
                    }
                }
            }
        }
    }

    section.chart__container{
        .chart-header-block {
            font-size:          2vmin;

            input,
            select{
                font-size:      2vmin;
            }
        }
    }
}