@import "globalCssVariables";

.inkingCanvas {
    opacity: 0.99;

    .jsx-parser {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: -1; // allows annotations to appear on videos when screen is full-size & ... 
    }
}

.inkingCanvas-paths-ink,
.inkingCanvas-paths-markers,
.inkingCanvas-noSelect,
.inkingCanvas-canSelect {
    position: absolute;
    top: 0;
    left: 0;
    width: 8192px;
    height: 8192px;
    cursor: "crosshair";
    pointer-events: auto;

}

.inkingCanvas-canSelect,
.inkingCanvas-noSelect {
    top: -50000px;
    left: -50000px;
    width: 100000px;
    height: 100000px;
}

.inkingCanvas-noSelect {
    pointer-events: none;
    cursor: "arrow";
}

.inkingCanvas-paths-ink,
.inkingCanvas-paths-markers {
    pointer-events: none;
    z-index: 10000; // overlays ink on top of everything 
    cursor: "arrow";
}

.inkingCanvas-paths-markers {
    mix-blend-mode: multiply;
}