/**
 * MPV Image Layer — image region detection, selection, copy/save UI.
 */

.mpv-image-layer{
	position:absolute;
	overflow:hidden;
	z-index:3;
	pointer-events:none;
}

.mpv-image-hotspot{
	position:absolute;
	box-sizing:border-box;
	appearance:none;
	border:2px solid transparent;
	background:rgba(0,120,215,.02);
	cursor:pointer;
	pointer-events:auto;
	padding:0;
	margin:0;
}

.mpv-image-hotspot:hover,
.mpv-image-hotspot:focus-visible{
	outline:none;
	border-color:rgba(0,120,215,.45);
}

.mpv-image-hotspot.is-selected{
	border-color:rgba(0,120,215,.95);
	box-shadow:0 0 0 1px rgba(0,120,215,.35) inset;
	background:rgba(0,120,215,.08);
}

.mpv-image-context-menu{
	position:fixed;
	left:0;
	top:0;
	z-index:100100;
	display:none;
	min-width:170px;
	padding:6px;
	border:1px solid rgba(0,0,0,.18);
	border-radius:8px;
	background:#fff;
	box-shadow:0 8px 24px rgba(0,0,0,.2);
}

.mpv-image-context-menu.is-open{
	display:block;
}

.mpv-image-menu-item{
	appearance:none;
	display:block;
	width:100%;
	border:0;
	background:transparent;
	padding:8px 10px;
	text-align:left;
	font-size:13px;
	line-height:1.3;
	border-radius:6px;
	cursor:pointer;
	color:#111;
}

.mpv-image-menu-item:hover,
.mpv-image-menu-item:focus-visible{
	outline:none;
	background:rgba(0,120,215,.1);
}