$menu-color:#cdf;
$menu-text: #fffa;
$menu-text-strong: #fff;
$menu-surface-soft: #0004;
$menu-accent: $color-accent;
$menu-accent-soft: rgba($color-accent, 0.13);
$menu-panel-bg: #0c202fcc;

.menu-header-bar
{
	border-radius: 8px 8px 0 0;
	z-index: 100;
	font-family: $title-font;
	font-weight: 600;
}

.menu-input
{
	background-color: $menu-surface-soft;
	border-radius: 8px;
	padding: 2px 10px;
}

.menu-segmented-group
{
	background-color: #0008;
	border-radius: 8px;
	overflow: visible;
}

.menu-mode-button
{
	color: $menu-text;
	font-size: 1rem;
	font-weight: 600;
	padding: 1rem;
	font-family: $subtitle-font;
	cursor: pointer;
	pointer-events: all;
	justify-content: center;
	align-items: center;
	overflow: visible;
	border-radius: 8px;

	.icon
	{
		margin-left: -4px;
		margin-top: -1.5px;
		padding-right: 4px;
		font-size: 1.5rem;
	}

	.title
	{
		font-size: 1.1rem;
		font-weight: 700;
	}

	&:hover
	{
		color: $menu-text-strong;
	}

	&.active
	{
		outline: 1px solid $menu-accent;
		background-color: rgba( $menu-accent, 0.2 );
		color: $menu-text-strong;
	}
}

.menu-icon-toggle-group
{
	background-color: $menu-surface-soft;
	border-radius: 8px;
	gap: 0.5rem;
	padding: 4px 4px;
	padding-left: 8px;
	align-items: center;

	IconPanel
	{
		width: 20px;
		aspect-ratio: 1;
		opacity: 0.35;
		align-items: center;
		cursor: pointer;

		&:hover
		{
			opacity: 0.7;
		}

		&.active
		{
			opacity: 1;
		}
	}
}

span
{
	&.grow
	{
		gap: 8px;

		> *
		{
			flex-grow: 1;
		}
	}
}

.menu-action
{
	color: $menu-text-strong;
	border: 1px solid transparent;
	border-radius: 4px;
	cursor: pointer;
	padding: 6px 10px;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-weight: 600;

	label, .title
	{
		font-size: 14px;
	}

	IconPanel, .icon
	{
		font-size: 1.2rem;
	}

	&.disabled
	{
		pointer-events: none;
		opacity: 0.25;
	}

	&.soft
	{
		background-color: $menu-accent-soft;

		&:hover
		{
			background-color: rgba($color-accent, 0.4);
			sound-in: ui.button.over;
		}
	}

	&.primary
	{
		border-color: $menu-accent;

		&:hover
		{
			background-color: $menu-accent-soft;
			sound-in: ui.button.over;
		}
	}

	&.wide
	{
		width: 100%;
	}
}

.menu-filter-input
{
	width: 200px;
}

TextEntry 
{
	color: $color-text;
	font-family: $body-font;
}