@import "../../../style/mixin.scss";

@include export-module('co-edit-canvas-layout') {
  .co-edit-canvas {
    .edit-canvas-container {
      position: relative;
      max-height: 100vh;
      overflow: scroll;

      .toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        max-width: 120px;
        position: absolute;
        top: 20px;
        left: calc(50% - 60px);
        z-index: 1;
        border-radius: 10px;

        .toolbar-item {
          border-radius: 10px;
          cursor: pointer;
          box-sizing: border-box;
          padding: 10px;

          .hidden-input {
            display: none;
          }

          .toolbar-item-option {
            position: absolute;
            top: 50px;
            box-sizing: border-box;
            padding: 10px;
            left: 0;
            border-radius: 10px;
          }
        }
      }

      .canvas-container {
        position: relative;

        canvas {
          max-width: 100%;
        }

        canvas.object-picker {
          cursor: crosshair;
        }

        .close-canvas-button, .open-canvas-button {
          position: absolute;
          cursor: pointer;
        }

        .close-canvas-button {
          top: 20px;
          right: 20px;
        }

        .open-canvas-button {
          bottom: 20px;
          right: 20px;
        }
      }

      .canvas-container.canvas-full-screen {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        canvas {
          max-height: 100%;
        }
      }
    }
  }
}
