@prefix: default-layout-page;

.@{prefix} {
  &- {
    &root {
      display: flex;
      flex-direction: column;
      //background-color: #CCCCCC;
      height: 100%;
      overflow: visible;
    }

    &normal-mode {
      padding: 20px;
      overflow: auto;

      .@{prefix}-modal-container {
        position: relative;
        top: 0;
        left: 0;
        margin-top: 32px;
      }
    }

    &move {
      cursor: move;
    }

    &mobile {
      padding: 0;

      .@{prefix}-page-container {
        max-width: unset;
      }
    }

    &disabled {
      &, * {
        pointer-events: none;
      }
    }


    &page-container {
      display: flex;
      flex-direction: column;
      background-color: #FFFFFF;
      box-shadow: 1px 3px 10px rgba(125, 125, 125, 0.3);
      flex: 1;
      overflow: visible;
      transform-origin: top left;
    }

    &zoom-controller-contain {
      position: absolute;
      bottom: 4px;
      right: 4px;
    }

    &modal-container {
      position: absolute;
      top: 12px;
      left: calc(100% + 48px);
      display: flex;
      flex-direction: column;
      gap: 24px;
      align-items: flex-start;
    }
  }
}