/**
 * Core styles for VideoAreaSelector
 */

.video-wrapper {
    position: relative; /* Container for video and overlay */
    display: inline-block; /* Shrink to fit video size */
    margin: 0 auto;
    line-height: 0; /* Remove extra space below inline element */
}

.selection-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: crosshair;
    display: none; /* Hidden by default, shown when in selection mode */
    z-index: 10; /* Ensure overlay is above video but below handles */
    user-select: none; /* Prevent text selection while dragging */
}

.selection-box {
    position: absolute;
    /* Include border in size calculations. So the box including border is the specified size. */
    /* The area under the border is therefore included in the selected dimensions. */
    box-sizing: border-box;
    border: 2px solid var(--selection-border, red); /* Can be overridden via JS options */
    background-color: var(--selection-color, rgba(255, 0, 0, 0.2)); /* Can be overridden via JS options */
    display: none;
    z-index: 20; /* Above overlay but below handles */
}

.selection-box.playback-mode {
    opacity: 0.4; /* Fade out in playback mode */
    pointer-events: none; /* Disable interaction in playback mode */
    border-style: dashed; /* Dashed border to indicate it's not interactive */
}

.resize-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #fff; /* Default white, will inherit from CSS variables if available */
    border: 1px solid var(--selection-border, red); /* Matches the selection border */
    z-index: 30; /* Ensure handles are always on top */
}

.handle-nw { 
    cursor: nw-resize; 
    top: -5px; 
    left: -5px; 
}

.handle-ne { 
    cursor: ne-resize; 
    top: -5px; 
    right: -5px; 
}

.handle-sw { 
    cursor: sw-resize; 
    bottom: -5px; 
    left: -5px; 
}

.handle-se { 
    cursor: se-resize; 
    bottom: -5px; 
    right: -5px; 
}