/* ************************************************************
   DbqResizeHandle
   Generic drag handle between two layout regions.
   The host control positions the handle; this file only styles
   the line, the cursor and the drag shield.
************************************************************ */

$resize-handle-line-size: 2px;
$resize-handle-hover-opacity: 0.35;
$resize-handle-active-opacity: 0.5;

.dbq-resize-handle {
    position: relative;
    flex-shrink: 0;
    touch-action: none;
    outline: none;

    // A vertical bar is dragged left/right
    &[data-orientation="vertical"] {
        cursor: col-resize;

        &::after {
            left: 50%;
            top: 0;
            width: $resize-handle-line-size;
            height: 100%;
            transform: translateX(-50%);
        }
    }

    // A horizontal bar is dragged up/down
    &[data-orientation="horizontal"] {
        cursor: row-resize;

        &::after {
            left: 0;
            top: 50%;
            width: 100%;
            height: $resize-handle-line-size;
            transform: translateY(-50%);
        }
    }

    &::after {
        content: "";
        position: absolute;
        background: $color-primary;
        opacity: 0;
        transition: opacity 0.15s ease;
    }

    &:hover::after,
    &:focus-visible::after {
        opacity: $resize-handle-hover-opacity;
    }

    &[aria-hidden="true"] {
        pointer-events: none;
    }
}

// Regions that are being resized
.dbq-resizing {
    user-select: none;

    .dbq-resize-handle::after {
        opacity: $resize-handle-active-opacity;
    }
}

// Covers the page (and its iframes) while dragging, so the pointer is never swallowed
.dbq-resize-handle-drag-shield {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: transparent;
    user-select: none;

    &[data-orientation="vertical"] {
        cursor: col-resize;
    }

    &[data-orientation="horizontal"] {
        cursor: row-resize;
    }
}