.worksurface {
    width: 100%;
    height: 100%;
    min-height: 100%;
    margin: 0;
    overflow: hidden;
    box-sizing: border-box;
}

/* .worksurface.gridded {
    background-size:
        var(--unit-size) var(--unit-size),
        var(--unit-size) var(--unit-size),
        calc(var(--unit-size) / 4) calc(var(--unit-size) / 4),
        calc(var(--unit-size) / 4) calc(var(--unit-size) / 4);
} */

.worksurface.is-holded {
    cursor: grabbing !important;
}

.worksurface .selection-rect {
    position: absolute;
    z-index: 102000;
    box-sizing: border-box;
    border: 2px dashed;
    display: none;
}

.worksurface .selection-rect.is-shown {
    display: block;
}

.worksurface.drawing,
.worksurface.drawing * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.worksurface.is-holded * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.worksurface > canvas.grid {
    position: absolute;
    /* z-index: -1; */
}

.worksurface.mode-viewer > canvas.grid.hide-at-runtime {
    display: none;
}