/* core/components/resize_handle/resize_handle.css — 194-2Н
 * WAI-ARIA Window Splitter visual layer + body-state during drag.
 * Glassmorphism-consistent (accent tokens, prefers-reduced-motion respected).
 */

.resize-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 4px;                                  /* OPTICAL: thin separator, 0.5 × 8pt grid acceptable */
    background: transparent;                     /* invisible at rest */
    cursor: col-resize;
    z-index: var(--z-above);
    touch-action: none;                          /* prevent scroll on touch drag */
    transition: background-color var(--timing-fast) var(--ease-standard),
                opacity var(--timing-fast) var(--ease-standard);
}

/* Edge overhang за край panel — 2px outside для easy grab */
.resize-handle[data-edge="right"] {
    right: -2px;                                 /* OPTICAL: half-handle outside panel */
}
.resize-handle[data-edge="left"] {
    left: -2px;                                  /* OPTICAL: half-handle outside panel */
}

.resize-handle:hover {
    background-color: var(--accent-secondary);
    opacity: 0.6;                                /* OPTICAL: subtle hover hint */
}

.resize-handle:focus-visible {
    background-color: var(--accent-secondary);
    opacity: 0.8;                                /* OPTICAL: focus более visible чем hover */
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

/* Body-state during active drag — disable text selection + lock cursor + suppress potomki pointer events */
body.is-resizing {
    user-select: none;
    cursor: col-resize;
}

body.is-resizing * {
    pointer-events: none;                        /* prevent accidental clicks during drag */
}

body.is-resizing .resize-handle {
    pointer-events: auto;                        /* handle itself остаётся interactive */
}

/* Mobile guard — handle hidden, panels overlay вместо side-by-side
   (sym JS matchMedia guard в mount()) */
@media (max-width: 600px) {
    .resize-handle {
        display: none;
    }
}

/* Reduced motion preference — remove transition (но cursor changes immediate) */
@media (prefers-reduced-motion: reduce) {
    .resize-handle {
        transition: none;
    }
}