.vid-number-input-wrapper { position: relative; width: max-content; }
.vid-number-input {
	box-sizing: border-box;
	height: var(--vid-text-height);
	width: 100px;
	padding: 5px 30px 5px 5px;
	cursor: row-resize;
	margin: 0;
}
.vid-number-arrows {
	position: absolute;
	right: 0;
	top: 0;
	display: flex;
	flex-flow: column nowrap;
	border: 1px solid var(--vid-text-border);
	box-sizing: border-box;
	border-radius: 0 var(--vid-border-radius) var(--vid-border-radius) 0;
	width: 20px;
	height: 100%;
	overflow: hidden;
}
.vid-number-up-wrapper, .vid-number-down-wrapper {
	background-color: var(--vid-text-alt);
	box-sizing: border-box;
	width: 100%;
	height: 50%;
	padding-left: 5px;
	transition: border-color 150ms;
}
.vid-number-up { border-bottom: 1px solid var(--vid-text-border); }
.vid-number-up, .vid-number-down {
	width: 7px; height: 7px;
	transform: rotate(45deg);
}
.vid-number-up { margin-top: 6px; border: none; border-left: 2px solid var(--vid-text-bg); border-top: 2px solid var(--vid-text-bg); }
.vid-number-down { margin-top: 1px; border: none; border-right: 2px solid var(--vid-text-bg); border-bottom: 2px solid var(--vid-text-bg); }
.vid-number-up-wrapper:hover, .vid-number-down-wrapper:hover, .vid-number-up-wrapper.active, .vid-number-down-wrapper.active { background-color: var(--vid-text-act); }
.vid-number-input {
	background-color: var(--vid-text-bg);
	border: 1px solid var(--vid-text-border);
	border-radius: var(--vid-border-radius);
}
.vid-number-input:active, .vid-number-input:focus { outline: 1px solid var(--vid-text-focus); }
.vid-number-input[disabled] { background-color: var(--vid-text-disabled) !important; color: var(--vid-text-placeholder) !important; }
.vid-number-wrapper { display: flex; flex-flow: column nowrap; }
.vid-number-wrapper.row { flex-flow: row nowrap; align-items: center; }