@import '@/styles/variables.scss';

// $phone-width:  'screen and (max-width: 600px)';

.view {
    max-height: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    background-color: #f3f3f3;
    color: rgb(0, 0, 0);
    overflow: hidden;
    z-index: 0;

    // @media #{$phone-width} {
    //     flex-direction: column;
    // }
}

.sidebar {
    flex: 3 1 0;
    z-index: 1;
    /* min-width: 300px;
    max-width: 300px;; */
    display: flex;
    flex-direction: column;
    font-size: 1rem;
    overflow: hidden;
    /* font-family: Roboto; */
}

.canvasWrap {
    flex: 5;
    position: relative;
    height: 100%;
    overflow: hidden;
}

.canvasWrap::after {
    content: ' ';
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    box-shadow: inset 0 0 6px 0 rgba(20, 20, 20, 0.3);
    pointer-events: none;
}

.canvas {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    touch-action: none;
    /* image-rendering: pixelated; */
}

.canvasEventSurface {
    position: absolute;
    width: 100%;
    height: 100%;
    // touch-action: initial;
    /* image-rendering: pixelated; */
}
