.image-position-dialog{width:min(680px,100vw - 32px);max-height:calc(100dvh - 32px);padding:var(--space-5);border:1px solid var(--color-border-default);border-radius:var(--radius-lg);background:var(--color-bg-surface,white);color:var(--color-text-primary);margin:auto;position:fixed;inset:0;overflow:auto}.image-position-dialog::backdrop{background:#0000008c}.image-position-dialog header,.image-position-dialog footer{gap:var(--space-3);align-items:center;display:flex}.image-position-dialog header{justify-content:space-between}.image-position-dialog h2{font-size:var(--size-20);margin:0}.image-position-dialog p{margin-block:var(--space-3);font-size:var(--size-13);color:var(--color-text-secondary)}.image-position-stage{border-radius:var(--radius-lg);touch-action:none;-webkit-user-select:none;user-select:none;background:#181818;width:100%;height:clamp(180px,50dvh,420px);position:relative;overflow:hidden}.image-position-stage[data-axis]{cursor:grab}.image-position-stage[data-axis]:active{cursor:grabbing}.image-position-stage:focus-visible{outline:2px solid var(--color-action-primary);outline-offset:3px}.image-position-stage img{pointer-events:none;max-width:none;max-height:none;position:absolute}.image-position-overflow{opacity:.35}.image-position-mask{pointer-events:none;background:#181818;outline:2px solid #fff;position:absolute;overflow:hidden;box-shadow:0 0 0 3px #00000040}.image-position-dialog footer{margin-top:var(--space-4);flex-wrap:wrap}.image-position-dialog footer>span{flex:1}.image-position-tabs{gap:var(--size-8);margin:var(--size-16) 0 0;display:flex;overflow-x:auto}.image-position-tabs>[role=presentation]{flex:none}.image-position-tabs [role=tab]{min-height:var(--size-36);padding:var(--size-8) var(--size-14);border:1px solid var(--color-border-default);border-radius:var(--radius-md);background:var(--color-bg-control);color:var(--color-text-secondary);cursor:pointer}.image-position-tabs [role=tab][aria-selected=true]{border-color:var(--color-text-secondary);background:var(--color-bg-selected-secondary);color:var(--color-text-primary)}.image-position-tabs [role=tab]:focus-visible{outline:2px solid var(--color-action-primary);outline-offset:2px}.image-position-stage[data-crop]{cursor:move}.image-position-mask.is-movable{pointer-events:auto;cursor:move}.image-position-frame-handles{z-index:2;pointer-events:none;outline:1px solid #fff;position:absolute}.image-position-move-handle{appearance:none;pointer-events:auto;cursor:move;touch-action:none;background:#fff;border:1px solid #181818;border-radius:1px;width:10px;min-width:0;height:10px;min-height:0;margin:0;padding:0;position:absolute;transform:translate(-50%,-50%)}.image-position-move-handle:focus-visible{z-index:1;outline:2px solid var(--color-action-primary);outline-offset:2px}.image-position-frame-handles .handle-top-left{top:0;left:0}.image-position-frame-handles .handle-top{width:16px;height:6px;top:0;left:50%}.image-position-frame-handles .handle-top-right{top:0;left:100%}.image-position-frame-handles .handle-right{width:6px;height:16px;top:50%;left:100%}.image-position-frame-handles .handle-bottom-right{top:100%;left:100%}.image-position-frame-handles .handle-bottom{width:16px;height:6px;top:100%;left:50%}.image-position-frame-handles .handle-bottom-left{top:100%;left:0}.image-position-frame-handles .handle-left{width:6px;height:16px;top:50%;left:0}.image-position-frame-handles :is(.handle-top,.handle-bottom){cursor:ns-resize}.image-position-frame-handles :is(.handle-left,.handle-right){cursor:ew-resize}.image-position-frame-handles :is(.handle-top-left,.handle-bottom-right){cursor:nwse-resize}.image-position-frame-handles :is(.handle-top-right,.handle-bottom-left){cursor:nesw-resize}
