/* Styling for resize functionality with direct hover visibility */

/* Base resize handle style */
.resize-handle {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 200; /* Ensure handles are above the mount element */
    opacity: 0; /* Invisible by default */
    transition: opacity 0.2s ease-in-out;
}

/* Width resize handle (right edge) */
.resize-handle-width {
    top: 25%;
    right: -5px;
    width: 10px;/*   was 10   */
    height: 50%;
    cursor: e-resize;
	border-radius: 5px;
	  background-color: rgba(100, 149, 237, 0.4);
}

/* Height resize handle (bottom edge) */
.resize-handle-height {
    left: 25%;
    bottom: -5px;
    width: 50%;
    height: 10px;
    cursor: s-resize;
	border-radius: 5px;
	background-color: rgba(100, 149, 237, 0.4);
}

/* Corner resize handle (bottom-right corner) */
.resize-handle-corner {
    right: -12px;
    bottom: -12px;
    width: 25px;
    height: 25px;
    cursor: se-resize;
	border-radius: 5px;
	background-color: rgba(100, 149, 237, 0.4);
}

/* Only show handles when hovered directly */
.resize-handle:hover {
    opacity: 1 !important;
}

/* Always show handle when active (being dragged) */
.resize-handle.active {
    opacity: 1 !important;
}

/* Show slight outline on mount hover to indicate it's resizable but don't show handles */
.mount {
    cursor: default;
}

.mount:hover {
    outline: 1px dashed rgba(0, 0, 0, 0.2);
}

/* Position adjustment for resize handles on oval/circle shapes */
.mount.shape-oval .resize-handle-width,
.mount.shape-circle .resize-handle-width {
    right: -5px;
    width: 15px;
}

.mount.shape-oval .resize-handle-height,
.mount.shape-circle .resize-handle-height {
    bottom: -5px;
    height: 15px;
}

.mount.shape-oval .resize-handle-corner,
.mount.shape-circle .resize-handle-corner {
    right: -5px;
    bottom: -5px;
    width: 20px;
    height: 20px;
}

/* Show resize outline for different shapes */
.mount.shape-oval:hover,
.mount.shape-circle:hover,
.mount.shape-rectangle:hover {
    outline: 1px dashed rgba(0, 0, 0, 0.3);
    outline-offset: 2px;
}

/* Force hover state for initial visibility (used by resize-handle-init.js) */
.mount.force-hover .resize-handle {
    opacity: 0.7;
}