/*********************/
/*** GLOBAL STYLES ***/
/*********************/

body{
    --color-bg:       #171c2a; 
    --color-fg:         #fff;
    --color-red:        #d50a0a;
    --color-blue:       #013369;

    --margin-std:           1rem;

    margin:                 0;
    /** Disable native touch actions where possible**/
    touch-action:           none;
    user-select:            none;
    -webkit-user-select:    none;
    -webkit-touch-callout:  none;
}


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

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


/**********************/
/*** 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-bg);
}

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

    h1{
        font-size:              1.75vmin;
        font-weight:            300;
        text-transform:         uppercase;
        letter-spacing:         0.5vmin;
        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, var(--color-blue) 0%,  var(--color-red) 120%);

        .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-fg);
                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-fg);

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


        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:              27.5%;

                .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-fg);

        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-fg);

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

                    &::-webkit-calendar-picker-indicator {
                        /* margin-left:            -2vmin; */
                    }
                }

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

section.controls__container{   /* See shared-components css */
    path.icon{
        fill:               var(--color-fg);
    }
}



/******************************/
/*** 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;
            }
        }
    }

}