/* MenuComponent */

.som.menu-component {
	display: box;
	layout-direction: vertical;
}

.som.menu-component > .menu-items-component {
	display: none;
	grid-auto-rows: auto;
	grid-template: auto / auto;
	gap: 0.4cm;
	centroid-z: 0.8cm;
}

.som.menu-component.open > .menu-items-component {
	display: grid;
}

.som.menu-component > .menu-items-component > .menu-item {
	padding: var(--som-inner-element-tight-padding);
	background-emissive: var(--dom-light-tertiary-color);
	background-z: -0.2cm;
	border-radius: var(--som-component-border-radius);
}

.dom.menu-component {
	z-index: 7;
	position: relative;
	vertical-align: top;
	display: inline-block;
}

.dom.menu-component > .menu-items-component {
	display: none;
	grid-auto-rows: auto;
	grid-template: auto / auto;
	gap: 0;
	position: relative;

	top: 45px;
	right: 13px;
	min-width: 6em;
	text-align: center;
	position: absolute;
	background-color: var(--dom-background-color);
	border-radius: var(--dom-container-border-radius);
	border: solid var(--dom-container-border-width) var(--dom-primary-color);
}

.dom.menu-component.open > .menu-items-component {
	display: grid;
}

.dom.menu-component > .menu-items-component > .selected {
	color: var(--dom-primary-color);
	z-index: 7;
}

.dom.menu-component > .menu-items-component > .component {
	border-top: solid var(--dom-container-border-width) var(--dom-secondary-color);
	padding: var(--dom-inner-element-padding);
}

.dom.menu-component > .menu-items-component > .component:first-child {
	border-top: none;
}

.dom.menu-component > .menu-items-component > .component:hover {
	color: var(--dom-secondary-color);
}

.dom.menu-component > .menu-items-component > .component:active {
	color: var(--dom-dark-secondary-color);
}