@prefix: absolute-layout-page;

.@{prefix} {
  &- {
    &root {
      position: relative;
      height: 100%;
      overflow: hidden;
      background-color: #CCCCCC;
    }

    &move {
      cursor: move;
    }

    &page-container {
      position: relative;
      width: 100%;
      height: 100%;
    }

    &disabled {
      pointer-events: none;
    }

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

    &bounds-changed-tips {
      position: absolute;
      outline: 1px solid #1199ff;
      transform-origin: center;
      transition: transform 500ms;
      pointer-events: none;
      opacity: 0;

      &.@{prefix}-in {
        animation: bounds-changed-zoom-in 500ms ease-in-out;
      }

      &.@{prefix}-out {
        animation: bounds-changed-zoom-out 300ms ease-in-out;
      }
    }
  }
}


@keyframes bounds-changed-zoom-in {
  from {
    transform: scale(1);
    outline-width: 1px;
    opacity: 1;
  }
  to {
    transform: scale(2);
    outline-width: 2px;
    opacity: 0;
  }
}

@keyframes bounds-changed-zoom-out {
  from {
    transform: scale(1.5);
    outline-width: 1.5px;
    opacity: 0;
  }
  to {
    transform: scale(1);
    outline-width: 1px;
    opacity: 1;
  }
}