export function createPlaygroundStyles(playgroundId: string) {
    const styleElement = document.createElement('style') as HTMLStyleElement;
    styleElement.innerHTML = `
    body{
        user-select: none;
    }

    .${playgroundId} .interactive-layer{
        position: relative;
        z-index: 8000;
        user-select: none;
    }
    

    .${playgroundId} .interactive-layer svg{
        position: absolute;
        zIndex: 8000;
        overflow: visible;
        /*border: 1px solid green;*/
        /*top: -100px;
        left: 0;*/
        width: 100vw;
        height: 100vh;
        

        pointer-events: none;
    }

    .${playgroundId} svg > g{
        cursor: pointer;
        user-select: none;
        pointer-events: all;
    }

    .${playgroundId} .interactive-layer canvas{
        position: absolute;
        zIndex: 8000;
        overflow: visible;
        border: 1px solid green;
        top: 0;
        left: 0;
        pointer-events: none;
    }
    `;
    return styleElement;
}