.menubox {
	--lines-color: #ccc;
	--content-padding: 0.25rem;
	--hover-foreground: #335588;
	--hover-background: #f0f0f0;
	--disabled-foreground: #a0a0a0;
	--dim-foreground: #c0c0c0;
	--dim-hover-foreground: #8090a0;

	font-family: sans-serif;
	font-size: 1rem;
	border: 1px solid var(--lines-color);
	background-color: white;
	box-shadow: 0 0.3rem 1rem #00000092;
	border-radius: 0.5rem;
	max-width: 100vw;
	overflow: hidden;
	z-index: initial;

	.menubox-wrapper {
		margin: var(--content-padding);
		user-select: none;
		white-space: nowrap;
		max-width: 100vw;
	}

	.menubox-item,
	.menubox-label {
		display: block;
		padding: 0.3em 2em 0.3em 1em;
		border-radius: 0.3em;
	}
	.menubox-item {
		&.disabled {
			color: var(--disabled-foreground);
		}

		&:not(.disabled) {
			&:hover,
			&.submenuitem.active {
				cursor: pointer;
				color: var(--hover-foreground);
				background-color: var(--hover-background);
			}
			&.submenuitem:hover::after,
			&.submenuitem.active:after {
				color: var(--dim-hover-foreground);
			}
		}

		&.multiselect:not(.submenu) {
			padding-left: 0.3em;
			&:before {
				content: "\2610";
				padding-right: 0.5em;
			}
			&.checked:before {
				content: "\2611";
			}
		}

		&.submenuitem {
			padding-right: 0.3em;
			&:after {
				content: ">";
				color: var(--dim-foreground);
				margin-left: 1em;
				float: right;
			}
		}
	}

	.menubox-label {
		font-style: italic;
	}

	.menubox-separator {
		height: 1px;
		background-color: var(--lines-color);
		border: 0;
		margin: 0.6rem 0;
	}
}