:root {
	--vid-list-item: #e6eef5;
	--vid-list-item-selected: #c7ebc7;
	--vid-list-item-dragged: #ffebcc;
	--vid-list-min-height: 40px;
}

.vid-item-list-wrapper {
	position: relative;
}
.vid-item-list-wrapper .vid-item-list-add-item-wrapper {
	display: flex;
	justify-content: end;
}
.vid-item-list {
	border-radius: var(--vid-border-radius);
}
.vid-item-list.focus {
	outline: 2px dotted var(--vid-text-focus);
	outline-offset: 3px;
}
.vid-item-list .item { max-width: 100%;}
.vid-item-list .item-body {
	display: flex;
	flex-flow: column nowrap;
	gap: var(--vid-gap);
	background-color: var(--vid-list-item);
	border-radius: var(--vid-border-radius);
	margin: var(--vid-gap) 0;
	padding: 0 var(--vid-gap) 0 var(--vid-gap-plus);
	position: relative;
	transition: background-color 150ms, opacity 150ms;
	user-select: none;
}
.vid-item-list .item-main {
	display: flex; flex-flow: row nowrap;
	width: 100%;
	min-height: var(--vid-list-min-height);
	align-items: center;
	gap: 10px;
}
.vid-item-list .item-main button,
.vid-item-list .item-main .button-secondary,
.vid-item-list .item-main .button-primary {
	font-family: monospace;
	padding: 0 8px;
	line-height: 1.8;
	min-height: 20px;
}
.vid-item-list .item-options { overflow: hidden; }
.vid-item-list .item-options-inside,
.vid-item-list .item-options-inline {
	display: flex;
	flex-flow: row wrap;
	gap: var(--vid-gap);
}
.vid-item-list .item-options-inside {
	margin: 0 0 var(--vid-gap) 0;
}
.vid-item-list .item-cnt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-grow: 1;
	box-sizing: border-box;
	min-height: var(--vid-list-min-height);
	overflow: hidden;
}
.vid-item-list .drag-index {
	width: 100%;
	height: 5px;
	background-color: black;
	margin: 3px 0;
}
.vid-item-list .item.dragged .item-body { background-color: var(--vid-list-item-dragged); }
.vid-item-list .item.selected .item-body { background-color: var(--vid-list-item-selected); }
.vid-item-list .item-drag {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	cursor: grab;
	font-size: 1.4em;
	text-shadow: 1px 1px 3px #000;
}
.vid-item-list .item-options-inside > * {
	border-left: 1px solid var(--vid-text-border);
	padding-left: var(--vid-gap);
}
.vid-item-list .item-drag span { position: relative; top: -3px; letter-spacing: 2px; }
.vid-item-list [data-level="1"] { padding-left: 2em; }
.vid-item-list [data-level="2"] { padding-left: 4em; }
.vid-item-list [data-level="3"] { padding-left: 6em; }
.vid-item-list [data-level="4"] { padding-left: 8em; }
.vid-item-list [data-level="5"] { padding-left: 10em; }
.vid-item-list [data-level="6"] { padding-left: 12em; }
.vid-item-list [data-level="7"] { padding-left: 14em; }
.vid-item-list [data-level="8"] { padding-left: 16em; }
.vid-item-list [data-level="9"] { padding-left: 18em; }
.vid-item-list [data-level="10"] { padding-left: 20em; }
.vid-item-list [data-level="11"] { padding-left: 22em; }
.vid-item-list [data-level="12"] { padding-left: 24em; }
.vid-item-list.disabled .item-body, .vid-item-list .item.disabled .item-body { background-color: var(--vid-text-disabled); }