@use "../../abstracts/mixins";

.mobile-menu {
	--menu-item-width: 100%;
	--menu-item-link-flex: 1;
	--menu-item-link-padding: var(--spacing-sm) var(--spacing-sm);
	--wrap-display: block;
	--sub-menu-background: var(--color-header);
	--sub-menu-margin: 0 0 var(--spacing-md) var(--spacing-xxs);

	position: absolute;
	top: 100%;
	left: 0;
	display: var(--mobile-menu-display, none);
	width: 100%;
	max-height: calc(100vh - var(--header-height, 0px) - var(--header-shrink-offset));
	padding: var(--spacing-md) 0;
	overflow-y: auto;
	color: var(--mobile-menu-color, var(--color-body));
	background: var(--mobile-menu-background, var(--color-header));
	border-bottom: var(--mobile-menu-border-bottom, var(--border));
	animation: var(--mobile-menu-animation, none);

	@include mixins.mq(false, sm) {
		--sub-menu-toggle-margin: 0 0 0 auto;
	}

	.search-icon-form {
		display: none;
	}

	.menu-item-button {
		--menu-item-margin: var(--spacing-sm) 0;
	}

	.menu-item:hover > .sub-menu:not(.visible),
	.menu-item:focus-visible > .sub-menu:not(.visible),
	.menu-item:focus-within > .sub-menu:not(.visible) {
		display: none;
	}
}

.mobile-menu-visible {
	--mobile-menu-display: block;
	--mobile-menu-animation: standardmenu 0.15s ease-in-out;
}