$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: rgba( 6, 16, 24, 0.82 );
	backdrop-filter: blur( 10px );
	border: 1px solid rgba( white, 0.08 );
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba( black, 0.35 );
	padding: 4px;
	gap: 2px;
	overflow: visible;
}

.menu-mode-button
{
	color: $menu-text;
	font-size: 1rem;
	font-weight: 600;
	padding: 0.7rem 1rem;
	gap: 0.5rem;
	font-family: $subtitle-font;
	cursor: pointer;
	pointer-events: all;
	justify-content: center;
	align-items: center;
	overflow: visible;
	border: 1px solid transparent;
	border-radius: 7px;
	transition: color 0.1s ease, background-color 0.1s ease, border-color 0.1s ease, transform 0.1s ease;

	.icon
	{
		width: 22px;
		height: 22px;
		justify-content: center;
		align-items: center;
		font-size: 1.35rem;
		transition: transform 0.1s ease;
	}

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

	&:hover
	{
		color: $menu-text-strong;
		background-color: rgba( white, 0.06 );
		transform: translateY( -1px );
	}

	&.active
	{
		border-color: rgba( $menu-accent, 0.65 );
		background-color: rgba( $menu-accent, 0.24 );
		box-shadow: 0 0 16px rgba( $menu-accent, 0.2 );
		color: $menu-text-strong;

		.icon
		{
			transform: scale( 1.08 );
		}
	}
}

.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;
		transition: opacity 0.1s ease, box-shadow 0.1s ease, transform 0.1s ease;

		&:hover
		{
			opacity: 0.7;
			box-shadow: 0 0 8px rgba( $menu-accent, 0.14 );
			transform: translateY( -1px );
		}


		&:active { transform: translateY( 0 ); }
		&.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;
	transition: background-color 0.1s ease, border-color 0.1s ease, box-shadow 0.1s ease, transform 0.1s ease;

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

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

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


	&:not(.disabled):hover
	{
		transform: translateY( -1px );
		box-shadow: 0 0 10px rgba( $menu-accent, 0.16 );
	}

	&:not(.disabled):active
	{
		transform: translateY( 0 );
		box-shadow: 0 0 6px rgba( $menu-accent, 0.12 );
	}
	&.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;
}