/* Manifest Resize Handles

   Superseded by x-edit.size (manifest.edit.css) — kept for existing projects.
   Self-contained: handle geometry lives here, not in a shared snippet. */

@layer base, components, utilities;

@layer utilities {

    :where([x-resize]) {
        position: relative;

        /* Resize handle area */
        .resize-handle {
            position: absolute;
            display: block;
            width: var(--h);
            height: var(--h);
            z-index: 100;
            background: transparent;
            border: none;
            outline: none;
            --h: var(--spacing-resize-handle, 1rem);

            /* Visible handle */
            &::before {
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 1px;
                height: 1px;
                background: transparent;
                transition: background-color 0.2s ease;
                pointer-events: none
            }

            &:hover::before,
            &:active::before {
                background-color: var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
            }
        }

        /* Handle geometry — edges span their axis, corners stay square */
        .resize-handle-top,
        .resize-handle-bottom {
            left: 0;
            width: 100%;
            height: var(--h);
            cursor: ns-resize;

            &::before {
                width: 100%
            }
        }

        .resize-handle-left,
        .resize-handle-right,
        .resize-handle-start,
        .resize-handle-end {
            top: 0;
            width: var(--h);
            height: 100%;
            cursor: ew-resize;

            &::before {
                height: 100%
            }
        }

        .resize-handle-top {
            top: calc(var(--h) * -0.5)
        }

        .resize-handle-bottom {
            bottom: calc(var(--h) * -0.5)
        }

        .resize-handle-left,
        .resize-handle-top-left,
        .resize-handle-bottom-left {
            left: calc(var(--h) * -0.5)
        }

        .resize-handle-right,
        .resize-handle-top-right,
        .resize-handle-bottom-right {
            right: calc(var(--h) * -0.5)
        }

        /* Logical edges — inset-inline-* auto-flips for RTL */
        .resize-handle-start,
        .resize-handle-top-start,
        .resize-handle-bottom-start {
            inset-inline-start: calc(var(--h) * -0.5)
        }

        .resize-handle-end,
        .resize-handle-top-end,
        .resize-handle-bottom-end {
            inset-inline-end: calc(var(--h) * -0.5)
        }

        .resize-handle-top-left,
        .resize-handle-top-right,
        .resize-handle-top-start,
        .resize-handle-top-end {
            top: calc(var(--h) * -0.5)
        }

        .resize-handle-bottom-left,
        .resize-handle-bottom-right,
        .resize-handle-bottom-start,
        .resize-handle-bottom-end {
            bottom: calc(var(--h) * -0.5)
        }

        /* Corner cursors */
        .resize-handle-top-left,
        .resize-handle-top-start {
            cursor: nw-resize;
        }

        .resize-handle-top-right,
        .resize-handle-top-end {
            cursor: ne-resize;
        }

        .resize-handle-bottom-left,
        .resize-handle-bottom-start {
            cursor: sw-resize;
        }

        .resize-handle-bottom-right,
        .resize-handle-bottom-end {
            cursor: se-resize;
        }

        /* Screen overlay to get mouse coordinates */
        .resize-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: 9999;
            display: none;
            background: transparent
        }

        /* Resize states */
        .resizable-closing {
            opacity: 0.5;
            transition: opacity 0.2s ease
        }

        .resizable-closed {
            display: none !important
        }

        /* Focus states for accessibility — framework ring (manifest.theme.css) */
        .resize-handle:focus {
            outline: none;
            box-shadow: 0 0 0 2px color-mix(in oklch, var(--color-content-stark) 30%, transparent)
        }

        /* Reduced motion support */
        @media (prefers-reduced-motion: reduce) {

            :where(.resizable-closing,
                .resize-handle) {
                transition: none
            }
        }
    }

    /* RTL cursor flips — placement follows the logical insets in the shared geometry */
    [dir=rtl] :where([x-resize]) .resize-handle-top-start {
        cursor: ne-resize;
    }

    [dir=rtl] :where([x-resize]) .resize-handle-top-end {
        cursor: nw-resize;
    }

    [dir=rtl] :where([x-resize]) .resize-handle-bottom-start {
        cursor: se-resize;
    }

    [dir=rtl] :where([x-resize]) .resize-handle-bottom-end {
        cursor: sw-resize;
    }
}