/**
 *  CHART CSS
 */

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


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

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

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

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

        /* 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-light);
        stroke-width:       10;
        fill:               none;
        opacity:            1;
        mix-blend-mode:     difference;
    }

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

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

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


    /** Step markers */
    circle.step{
        fill:               #aa0000ff;
        transition:         all 200ms;
        transform-origin: center;  /* may need explicit cx/cy in Safari — see below */
        transform-box: fill-box;   /* ensures transform-origin is relative to the element */
        transform: scale(0);

        &.active{
            transform: scale(1);
        }
    }
}

.active .svg-chart{ 
    .tick text{
        fill:             #000000;
    }
}