@miyagi/core/frontend/assets/css/main/menu/config-switchers.css

miyagi is a component development tool for JavaScript template engines.

@import url("./config-switcher.css");

.ConfigSwitchers {
	display: flex;
	background: var(--bar-background);
}

.ConfigSwitchers-toggle {
	--size: var(--bar-size);

	align-items: center;
	color: var(--color-Icon);
	display: flex;
	flex-shrink: 0;
	gap: 0.5em;
	cursor: pointer;
	border-block-start: var(--divider);
	inline-size: 100%;

	svg {
		display: block;
		inline-size: var(--size);
		block-size: var(--size);
		padding: 0.45em;
	}
}

.ConfigSwitchers-toggle:focus-visible {
	outline-offset: calc(-1 * var(--outline-offset));
}

.ConfigSwitchers-toggleClose {
	fill: currentcolor;
	block-size: 75%;
	inline-size: 75%;
}

.ConfigSwitchers-toggle[aria-expanded="false"] .ConfigSwitchers-toggleClose {
	display: none;
}

.ConfigSwitchers-toggle[aria-expanded="true"] .ConfigSwitchers-toggleOpen {
	display: none;
}

.ConfigSwitchers-container {
	padding: var(--bar-size);
	padding-inline-start: calc(2 * var(--bar-size));
	flex: 1;
	position: absolute;
	z-index: 2;
	inset-block: 0 calc(var(--bar-size) + 0.0625rem);
	inset-inline: 0;
	background: var(--bar-background);
}

.ConfigSwitchers-container > * + * {
	margin-block-start: var(--menu-spacing);
}

.ConfigSwitchers-toggle[aria-expanded="false"] ~ .ConfigSwitchers-container {
	display: none;
}

.ConfigSwitchers-toggle[aria-expanded="true"] ~ .ConfigSwitchers-container {
	display: block;
}