/* =========================================================
   ELEMENT TRANSFORM
========================================================= */

.selection-box {
    --selection-rotation: 0deg;

    transform: rotate(var(--selection-rotation));
    transform-origin: center center;
}


/* =========================================================
   Resize Handles
========================================================= */

.transform-handle {
    position: absolute;

    width: 8px;
    height: 8px;

    background: #ffffff;
    border: 1px solid #6171e8;
    border-radius: 2px;

    pointer-events: auto;

    z-index: 20;
    box-sizing: border-box;
}


/* 四角 */

.transform-handle-nw {
    left: -5px;
    top: -5px;
    cursor: nwse-resize;
}

.transform-handle-ne {
    right: -5px;
    top: -5px;
    cursor: nesw-resize;
}

.transform-handle-sw {
    left: -5px;
    bottom: -5px;
    cursor: nesw-resize;
}

.transform-handle-se {
    right: -5px;
    bottom: -5px;
    cursor: nwse-resize;
}


/* 四边 */

.transform-handle-n {
    left: 50%;
    top: -5px;

    transform: translateX(-50%);

    cursor: ns-resize;
}

.transform-handle-s {
    left: 50%;
    bottom: -5px;

    transform: translateX(-50%);

    cursor: ns-resize;
}

.transform-handle-w {
    left: -5px;
    top: 50%;

    transform: translateY(-50%);

    cursor: ew-resize;
}

.transform-handle-e {
    right: -5px;
    top: 50%;

    transform: translateY(-50%);

    cursor: ew-resize;
}


/* =========================================================
   Rotate Handle
========================================================= */

.transform-rotate-handle {
    position: absolute;

    left: 50%;
    top: -32px;

    width: 14px;
    height: 14px;

    transform: translateX(-50%);

    background: #ffffff;
    border: 1px solid #6171e8;

    border-radius: 50%;

    pointer-events: auto;

    cursor: grab;

    z-index: 30;
    box-sizing: border-box;
}

.transform-rotate-handle::after {
    content: '';

    position: absolute;

    left: 50%;
    top: 100%;

    width: 1px;
    height: 18px;

    background: #6171e8;

    transform: translateX(-50%);
}

.transform-rotate-handle:active {
    cursor: grabbing;
}


/* =========================================================
   Text Editing
========================================================= */

#previewFrame [contenteditable="true"] {
    outline: none;
    cursor: text;
}