/**
 *  CHART CSS
 */


svg#chart{ 
    overflow:               visible;
    margin:                 var(--margin-std) 0;

    /* GENERAL & SHARED */
    .hidden {
        opacity:            0;
    }

    text{
        font-family:      "League Spartan", sans-serif;
        fill:             #ffffff;

        &.axis-label{
            font-size:          16px;
            font-weight:        500;
        }

        /* Tooltip text */
        &.headline{
            font-weight: 500;   
            text-anchor: middle;
        }
        &.label{
            text-anchor: middle;
        }
    }


    /* Axis */
    .domain{
        visibility:         hidden;
    }
    .tick{
        color:            #6c6c6c;
        text{
            font-size:          16px;
        }
    } 


    /* Line and area */
    .data-line{
        stroke:             var(--color-fg);
        stroke-width:       2;
        fill:               none;
    }

    /* Sonification markers */
    .step-marker-group{
        pointer-events: none;

        rect.step,
        rect.bar{
            opacity:            0;
            transition:         all 100ms;  

            &.active{
                opacity:           0.75;   
            }
        }

        rect.step{
            fill:             var(--color-fg);
            mix-blend-mode:     soft-light;
        }

        rect.bar{
            fill:              var(--color-fg);
            mix-blend-mode:     soft-light;
        }
    }



    /** Playoff markers */
    circle.playoff{
        opacity:            0;
        fill:               var(--color-fg);;

        &.win{
            opacity:            1;
            fill:           rgba(249, 255, 217, 0.75);
            filter:         url(#neon-win);
        }
    }

}