/**
 *  CHART CSS
 */

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

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

    text{
        font-family:        "Oxanium", sans-serif;
        fill:             #6c6c6c;

        &.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:             #fff;
        stroke-width:       1px;
        fill:               none;
        filter:             url(#neon-white-line);
    }

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

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

            &.active{
                opacity:           0.75;   
            }
        }

        rect.step{
            fill:             #fdadad;
            mix-blend-mode:     hard-light;
        }

        rect.bar{
            fill:             #000;
            mix-blend-mode:     soft-light;
        }
    }


    /* Annotation markers */
    circle.finals{
        opacity:            0;

        &.win{
            opacity:         1;
            fill:           rgba(250, 50, 50, 0.5);
            filter:         url(#neon-win);
        }
    }

    /** Annotation tooltips **/
    .annotation-group{
        fill:          #6c6c6c;
    }

}