:root {
	--vid-context-menu-bg: #e6eef5;
}

.vid-context-menu {
	position: absolute;
	left: -1000px;
	top: -1000px;
	z-index: 10000;
	width: max-content;
	padding: 0;
	margin: 0;
	background-color: var(--vid-context-menu-bg);
	border-radius: 5px;
	-webkit-box-shadow: var(--vid-shadow);
	box-shadow: var(--vid-shadow);
	transition: max-height 300ms ease-out;
	overflow: hidden;
	user-select: none;
	--separator: 1px solid #0002;
}
.vid-context-menu.cols-2 {
	display: grid;
	grid: auto / repeat(2, 1fr);
}
.vid-context-menu.cols-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}
.vid-context-menu.cols-4 {
	display: grid;
	grid-template-columns: auto / repeat(4, 1fr);
}
.vid-context-menu.cols-5 {
	display: grid;
	grid-template-columns: auto / repeat(5, 1fr);
}
.vid-context-menu-title {
	font-size: 1.1em;
	font-weight: 600;
	text-align: center;
	padding: 5px;
}
.vid-context-menu-option {
	width: 100%;
	max-width: 200px;
	box-sizing: border-box;
	color: #003166;
	padding: 5px 10px;
	background-color: transparent;
	transition: background-color 300ms, color 300ms;
	cursor: pointer;
}
.vid-context-menu-option:hover {
	background-color: var(--vid-text-bg);
	color: #0059b3;
}
.vid-context-menu-option.disabled {
	width: 100%;
	box-sizing: border-box;
	color: #555;
	padding: 5px 10px;
	background-color: #ccc5;
	cursor: not-allowed;
}
.vid-context-menu-option:not(:last-child) {
	border-bottom: var(--separator);
}

.vid-context-menu-label {
	font-size: 0.8em;
	font-weight: bold;
	padding: 5px;
}