@use '../variables' as *;

.#{$prefix}navigation-menu {
	background-color: var(--#{$prefix}navigation-menu-background);
	border-radius: var(--#{$prefix}navigation-menu-border-radius);
	padding: var(--#{$prefix}navigation-menu-padding);
	color: var(--#{$prefix}navigation-menu-color);
	min-width: max-content;

	&-list {
		display: flex;
		position: relative;
		list-style: none;
		padding: 0;
		margin: 0;
	}

	&-item {
		display: flex;
	}

	&-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		transition: transform 0.2s ease;
		transform-origin: center;

		&[data-popup-open] {
			transform: rotate(180deg);
		}
	}

	&-positioner {
		--easing: cubic-bezier(0.22, 1, 0.36, 1);
		--duration: 0.35s;
		box-sizing: border-box;
		transition-property: top, left, right, bottom;
		transition-duration: var(--duration);
		transition-timing-function: var(--easing);
		width: var(--positioner-width);
		height: var(--positioner-height);
		max-width: var(--available-width);
		z-index: 1000;

		&[data-instant] {
			transition: none;
		}
	}

	&-popup {
		position: relative;
		box-sizing: border-box;
		padding-block: var(--#{$prefix}navigation-menu-popup-padding-block, 0.375rem);
		padding-inline: var(--#{$prefix}navigation-menu-popup-padding-inline, 0.375rem);
		border-radius: var(--#{$prefix}navigation-menu-popup-border-radius, 0.5rem);
		background-color: var(--#{$prefix}navigation-menu-popup-background, rgba(255, 255, 255, 0.98));
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		color: var(--#{$prefix}navigation-menu-popup-color, #343a40);
		transform-origin: var(--transform-origin);
		transition-property: opacity, transform, width, height, backdrop-filter;
		transition-duration: var(--duration);
		transition-timing-function: var(--easing);
		width: var(--popup-width);
		height: var(--popup-height);
		border: 1px solid var(--#{$prefix}navigation-menu-popup-border-color, rgba(0, 0, 0, 0.08));
		box-shadow: var(
			--#{$prefix}navigation-menu-popup-shadow,
			0 0 0 1px rgba(0, 0, 0, 0.02),
			0 2px 4px rgba(0, 0, 0, 0.04),
			0 8px 16px rgba(0, 0, 0, 0.08),
			0 16px 32px rgba(0, 0, 0, 0.06)
		);
		overflow: hidden;

		&[data-starting-style],
		&[data-ending-style] {
			opacity: 0;
			transform: scale(0.92) translateY(-8px);
		}

		&[data-ending-style] {
			transition-timing-function: ease;
			transition-duration: 0.15s;
		}
	}

	&-content {
		box-sizing: border-box;
		transition:
			opacity calc(var(--duration) * 0.5) ease,
			transform var(--duration) var(--easing);
		width: calc(100vw - 40px);
		height: 100%;

		@media (min-width: 500px) {
			width: max-content;
			min-width: 400px;
		}

		&[data-starting-style],
		&[data-ending-style] {
			opacity: 0;
		}

		&[data-starting-style] {
			&[data-activation-direction='left'] {
				transform: translateX(-50%);
			}
			&[data-activation-direction='right'] {
				transform: translateX(50%);
			}
		}

		&[data-ending-style] {
			&[data-activation-direction='left'] {
				transform: translateX(50%);
			}
			&[data-activation-direction='right'] {
				transform: translateX(-50%);
			}
		}
	}

	&-link {
		text-decoration: none !important;
		color: inherit !important;
		border-radius: 0.375rem;
		transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
		display: block;

		&,
		&:visited,
		&:link {
			text-decoration: none !important;
			color: inherit !important;
		}

		@media (hover: hover) {
			&:hover {
				background-color: var(--#{$prefix}navigation-menu-link-hover-background, rgba(0, 0, 0, 0.05)) !important;
			}
		}

		&:focus-visible {
			outline: 2px solid var(--#{$prefix}navigation-menu-trigger-focus-outline, var(--#{$prefix}primary-color));
			outline-offset: 2px;
			outline-style: solid;
		}
	}

	&-viewport {
		position: relative;
		overflow: hidden;
		width: 100%;
		height: 100%;
	}

	&-arrow {
		display: flex;
		transition: left calc(var(--duration)) var(--easing);

		&[data-side='top'] {
			bottom: -8px;
			rotate: 180deg;
		}

		&[data-side='bottom'] {
			top: -8px;
			rotate: 0deg;
		}

		&[data-side='left'] {
			right: -13px;
			rotate: 90deg;
		}

		&[data-side='right'] {
			left: -13px;
			rotate: -90deg;
		}
	}
}