/**
 *  CHART CSS
 */

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

    /* GENERAL */
    .data-line{
        fill:               none;
        stroke-width:       2px;
        opacity:            0.25;
        transition:         all 500ms;

        &:hover{
            opacity:            1;
            stroke-width:       5px;
        }
    }

    .rings-group{
        pointer-events:     none;
    }

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

        circle{
            cursor:         pointer;    
            filter:         brightness(0.5);
            transition:     all 500ms;
        }
        .dice-icon-group{
            transition:     all 500ms;

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

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

        &:hover{
            transform:          scale(1.075);

            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.05);
                fill:           var(--color-light);
            }
        }
    }

    /* RECORD PLAYER */
    .vinyl-group{
        .vinyl{
            fill:            var(--color-vinyl);
        }

        .vinyl-label{
            fill:           var(--color-light);
        }
    }

    .recordPlayer-group{
        circle.tone-arm-base{
            fill:           none;
            stroke:         var(--color-light);
            stroke-width:   3px;
        }

        .tone-arm{
            stroke:         var(--color-light);
            stroke-width:   10px;
            fill:           none;      
        }

        .filter-track{
            stroke-linecap: round;
            stroke-width:   3px;
            stroke:         rgba(255, 255, 255, 0.25);
        }
    }

    .data-step-marker{
        stroke:             var(--color-vinyl);
        stroke-width:       0.75px;

        &.data-step-marker--midnight {
        }
    }
}