@use '../../scss/theming' as *;

@mixin daff-menu-theme($theme) {
	$black: daff-get-base-color($theme, 'black');
	$neutral: daff-get-palette($theme, neutral);
	$base: daff-get-base-color($theme, base);
	$base-contrast: daff-get-base-color($theme, base-contrast);
	$mode: daff-get-theme-mode($theme);

	@include light($mode) {
		.daff-menu {
			background: $base;
			box-shadow: 0 0 24px rgb($black, 0.12);
		}

		.daff-menu-item {
			background: $base;
			color: $base-contrast;

			@media (hover: hover) {
				&:hover {
					background: rgba(daff-color($neutral, 20), 0.5);
				}
			}

			&:focus {
				background: rgba(daff-color($neutral, 20), 0.5);
			}
		}
	}

	@include dark($mode) {
		.daff-menu {
			background: $base;
			box-shadow: 0 0 24px rgb($black, 0.12);
		}

		.daff-menu-item {
			background: $base;
			color: $base-contrast;

			@media (hover: hover) {
				&:hover {
					background: rgba(daff-color($neutral, 20), 0.08);
				}
			}

			&:focus {
				background: rgba(daff-color($neutral, 20), 0.08);
			}
		}
	}
}