/* ===================================
   RESIZABLE HANDLE COMPONENT
   ===================================
   
   Draggable divider for adjusting panel sizes in grid layouts.
   The handle sits as a grid item between panels -- never overlays content.
   Parent grid defines placement; this component only styles the handle itself.
   
   SPACING CONTRACT:
   - No external margins (parent grid controls placement)
   - Handle fills its grid track completely
   - Grip indicator centered via pseudo-element
*/

.resizable-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    background: transparent;
    transition: background var(--duration-200) var(--easing-out);
}

.resizable-handle.vertical {
    cursor: col-resize;
}

.resizable-handle.horizontal {
    cursor: row-resize;
}

/* Grip indicator -- the visible "grab here" affordance */
.resizable-handle::after {
    content: '';
    display: block;
    border-radius: var(--border-radius-sm);
    background: var(--border-default);
    transition: background var(--duration-200) var(--easing-out);
}

.resizable-handle.vertical::after {
    width: 3px;
    height: var(--space-6);
}

.resizable-handle.horizontal::after {
    width: var(--space-6);
    height: 3px;
}

/* Hover: grip brightens, track gets subtle tint */
.resizable-handle:hover {
    background: var(--border-subtle);
}

.resizable-handle:hover::after {
    background: var(--border-strong);
}

/* Active/dragging: grip turns primary */
.resizable-handle:active::after {
    background: var(--color-primary);
}