/**
 *  CHART CSS
 */

.svg-chart{ 
    overflow:               visible;
    pointer-events:         all;

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

    /* Axis */
    .domain{
        visibility:         hidden;
    }

    .tick{
        color:            #6c6c6c;
    }

    text{
        font-family:      "League Spartan", sans-serif;
        fill:           var(--color-light);
    }


    .axis-label{
        font-size:      20px;
        font-weight:    300;
            opacity:        0.75;
            &:hover{
                opacity:        1;
            }
    }

        .tick text{
            font-size:      16px;
            opacity:        0.35;
            pointer-events: all;

            &:hover{
                opacity:        1;
            }
        }

    /* Line and area */
    .data-line{
        stroke:         var(--color-light);
        stroke-width:   15;
        fill:           none;
        opacity:        0.75;
        filter:         url(#hand-drawn);
    }

    /* Sonification markers */
    circle.year{
        stroke:            var(--color-light);
        fill:           var(--color-bg);
        stroke-width:   2;
    }

    text.marker.label{
        text-anchor:    middle;
        font-weight:    700;
        fill:           var(--color-light);
    }

    .latest circle.year{
        fill:           var(--color-light);
        stroke:         var(--color-bg);
    }

    .latest text.marker.label{
        fill:            var(--color-bg);
    }

    /** Step markers */
    circle.step{
        fill:           #aa0000ff;
        transition:     all 50ms;
        opacity:        0.8;
    }

    /** year annotations */
    .year-annotation-group{
        opacity:        0.5;
        transition:     all 200ms;

        &:hover{
            opacity:        1;
        }
    }
}

.svg-chart.playing{ 

    /** year annotations */
    .year-annotation-group{


        &.active{
            opacity:        0.5;
        }
    }
}