/**
 *  CHART CSS
 */

svg.svg-chart {
    overflow:           visible;
    max-width:          100%;
    height:             auto;
     /* border:    dotted 1px #fff; */

    .country-chart-group {
        .chart-wrapper {
            opacity: 0.4;
            mix-blend-mode: screen;

            path.ribbon {
                fill-opacity:           0.25;
                stroke-opacity:         0.4;
                stroke-width:           0.5;
                stroke-width:           0;
                mix-blend-mode:         screen;
            }

            &.active {
                opacity: 1;
                mix-blend-mode: normal;

                path.ribbon {
                    fill-opacity:   0.6;
                    stroke-opacity: 0.7;
                    stroke-width:   1.0;
                }

            }

            &.hovered:not(.active) {
                opacity:             0.75;

                path.ribbon {
                    fill-opacity:       0.3;
                    stroke-width:       0.5;
                    stroke-opacity:     0.65;
                }
            }
        }
    }

    /* .annotation-group{ */
    .index-label{
        pointer-events:     none;
        font-size:          16px;
        font-weight:        100;
        dominant-baseline:  central; 
        text-anchor:        middle;
        opacity:            0.25;
        transition:         all 500ms;
    }

    .index-label.active{
        opacity:            0.95;
    }

    /* Active movement label — full opacity */
    &[data-movement="electoral"]     .index-label.electoral,
    &[data-movement="liberal"]       .index-label.liberal,
    &[data-movement="participatory"] .index-label.participatory,
    &[data-movement="deliberative"]  .index-label.deliberative,
    &[data-movement="egalitarian"]   .index-label.egalitarian {
        opacity: 1;
    }

    .hover-group{
        .hover-segment { 
            cursor:         pointer; 
            fill:           transparent;
            stroke:         none;
        }
    }

    .sonic-marker-group{
        .playhead-ring{
            fill:               none;
            stroke:             var(--color-light);
            stroke-width:       8px;
            mix-blend-mode:     overlay;
        }

        .beat-ring{
            fill:                var(--color-light);
            opacity:            0;


        }
    }


    #randomiser-button{
        cursor:             pointer;        
        pointer-events:     all;
        transition:         all 500ms;

        circle{
            cursor:         pointer;    
            filter:         brightness(0.5);
            transition:     all 500ms;
            stroke:         var(--color-light);
            stroke-width:   2px;
            fill:           rgba(255, 255, 255, 0.1);
        }

        .dice-icon-group{
            transition:     all 500ms;
            opacity:        1;

            .dice-icon{
                fill:       var(--color-light);
            }

            &.faded { 
                opacity:    0; 
            }
        }

        .randomiser-button-label{
            fill:           var(--color-light);
            font-size:      20px;
            opacity:        0;
            transition:     all 200ms;
        }

        .button-label-group {
            opacity:            0;
            transition:         opacity 250ms ease;
            pointer-events:     none;

            text.button-label {
                fill:           #fff;
                font-size:      18px;
                letter-spacing: 0.08em;
            }

            &.visible { 
                opacity: 1;
            }
        }

        &:hover{
            circle{
                filter:         brightness(1);
            }

            .randomiser-button-label{
                opacity:        1;
            }

        }

        &:active{
            circle,
            .randomiser-button-label{
                transform:      scale(0.85);
            }
            .dice-icon-group{
                transform:      rotate(720deg) scale(0.25);
                fill:           var(--color-light);
            }
        }
    }
}