@use "@db-ui/foundations/build/styles/variables";
@use "@db-ui/foundations/build/styles/colors";
@use "@db-ui/foundations/build/styles/fonts";
@use "@db-ui/foundations/build/styles/screen-sizes";
@use "@db-ui/foundations/build/styles/helpers";
@use "@db-ui/foundations/build/styles/animation";
@use "@db-ui/foundations/build/styles/icons";
@use "../../styles/internal/icon-passing";
@use "../../styles/internal/component";

%sub-navi-handler-desktop {
	// show sub-navigation on hover
	@include screen-sizes.screen("md") {
		&:is(:hover, :focus-visible) {
			~ .db-sub-navigation {
				visibility: visible;
			}
		}
	}
}

@mixin sub-navi-handler-mobile() {
	// show/hide sub-navigation by click
	&[aria-expanded="true"] {
		~ .db-sub-navigation {
			@media screen and (prefers-reduced-motion: no-preference) {
				transition: visibility 0ms linear 0ms;
				animation: show-right-to-left
					#{variables.$db-transition-straight-show};
			}

			visibility: visible;

			.db-sub-navigation {
				inset-block: 0;
			}
		}
	}

	&:not(&[aria-expanded="true"]) {
		@media screen and (prefers-reduced-motion: no-preference) {
			~ .db-sub-navigation {
				transition: visibility 0ms linear 410ms; // hide animation is 0.4s
				animation: hide-right-to-left
					#{variables.$db-transition-straight-hide};
			}
		}
	}
}

%navigation-item {
	@extend %default-interactive-component;
	@extend %transparent-border;
	@extend %db-overwrite-font-size-md;

	background-color: colors.$db-adaptive-bg-basic-transparent-full-default;
	cursor: pointer;
	inline-size: 100%;
	display: inline-flex;
	border-radius: variables.$db-border-radius-sm;
	padding: variables.$db-spacing-fixed-xs variables.$db-spacing-fixed-sm;
	white-space: nowrap; // we don't want to break
	text-align: center;
	align-items: center; // Centering the content vertically and horizontally

	@include helpers.hover {
		background-color: colors.$db-adaptive-bg-basic-transparent-hovered;
	}

	@include helpers.active {
		background-color: colors.$db-adaptive-bg-basic-transparent-pressed;
	}

	&:has(~ .db-sub-navigation:is(:hover, :focus)) {
		background-color: colors.$db-adaptive-bg-basic-transparent-hovered;
	}
}

.db-navigation-item {
	--db-has-before: 0;

	@extend %db-overwrite-font-size-md;

	@include icon-passing.icon-passing();

	display: inline-flex;
	position: relative;
	inline-size: 100%;

	@include screen-sizes.screen("md", "max") {
		&:not([data-width="full"]) {
			.db-navigation-item-expand-button {
				&::after {
					--db-icon-margin-start: auto;
				}
			}
		}
	}

	a {
		@extend %navigation-item;

		text-decoration: none;

		&:focus-visible {
			// We need to increase the z-index on focus-visible for the outline and box-shadow to appear above the pulse
			z-index: 1;
		}
	}

	.db-navigation-item-expand-button {
		@include screen-sizes.screen("md", "max") {
			@include sub-navi-handler-mobile();
		}

		&:is(button),
		> button {
			@extend %sub-navi-handler-desktop;
			@extend %navigation-item;

			// default icon for navigation
			@include icons.set-icon("chevron_right", "after");

			font-weight: inherit;
		}
	}

	&:has([aria-current="page"]),
	&:has([data-active="true"]),
	&[aria-current="page"],
	&[data-active="true"] {
		> :is(a, button) {
			font-weight: 700;
		}
	}

	&:not([data-width="full"]) {
		.db-navigation-item-expand-button {
			&::after {
				--db-icon-margin-start: #{variables.$db-spacing-fixed-sm};
			}
		}
	}

	&[data-width="full"] {
		inline-size: 100%;

		.db-navigation-item-expand-button {
			&::after {
				--db-icon-margin-start: auto;
			}
		}
	}

	&[aria-disabled="true"] {
		opacity: component.$default-disabled;
		pointer-events: none;
	}
}

@mixin sub-navigation-mobile() {
	padding: variables.$db-spacing-fixed-md;
	inline-size: 100%;
	position: fixed;
	overflow: hidden auto;
	// additional #{$db-spacing-fixed-3xs} for border
	inset-block: calc(
			#{component.$min-mobile-header-height} +
				#{variables.$db-spacing-fixed-3xs}
		)
		calc(
			#{variables.$db-sizing-md} + #{variables.$db-spacing-fixed-xs} * 2 +
				#{variables.$db-spacing-fixed-3xs}
		);
}

.db-sub-navigation {
	margin: 0;
	display: flex;
	flex-direction: column;
	z-index: 70;
	inset-inline-start: 0;
	background-color: colors.$db-adaptive-bg-basic-level-1-default;
	visibility: hidden;

	@include screen-sizes.screen("md", "max") {
		@include sub-navigation-mobile();
	}

	@include screen-sizes.screen("md") {
		.db-mobile-navigation-back {
			display: none;
		}
	}

	@include screen-sizes.screen("md") {
		border-radius: variables.$db-border-radius-sm;
		box-shadow: variables.$db-elevation-md;
		padding: variables.$db-spacing-fixed-sm;
		position: absolute;
		min-inline-size: 328px; // We should get this value from UX
		inset-block-start: calc(100% + #{variables.$db-spacing-fixed-md});
		transition: visibility 1ms linear; // workaround to enable focus with keyboard

		&[data-outside-vx="true"] {
			transform: translateX(-100%);
			inset-inline-start: 100%;
		}

		&:is(:hover, :focus-within) {
			visibility: visible;
		}

		&::before {
			content: "";
			position: absolute;
			inset-inline-start: 0;
			inline-size: 100%;
			// #{$db-spacing-fixed--3xs} for shadows
			block-size: calc(
				#{variables.$db-spacing-fixed-3xs} +
					#{variables.$db-spacing-fixed-md}
			);
			inset-block-start: calc(
				-1 * #{variables.$db-spacing-fixed-md} -
					#{variables.$db-spacing-fixed-3xs}
			);
		}

		.db-sub-navigation {
			// 1px for box shadow
			inset-block-start: calc(
				-50% + #{variables.$db-spacing-fixed-xs} + 1px
			);
			inset-inline-start: calc(100% + #{variables.$db-spacing-fixed-xs});

			&[data-outside-vy="bottom"] {
				inset-block-start: calc(
					100% + #{variables.$db-spacing-fixed-md}
				);
				transform: translateY(-100%);
			}

			&[data-outside-vx="right"] {
				transform: translateX(-100%);
				inset-inline-start: calc(
					-1 * #{variables.$db-spacing-fixed-xs}
				);

				&[data-outside-vy="bottom"] {
					transform: translate(-100%, -100%);
				}

				&::before {
					inset-block: auto 0;
					// inline-size: calc(var(--db-navigation-item-inline-size, 100%) - #{variables.$db-spacing-fixed-xs} - 2px);
					transform: translateX(100%) scaleX(-1);
				}
			}

			&::before {
				content: "";
				position: absolute;
				inset-block-start: 0;
				inset-inline-start: 0;
				block-size: 100%;
				inline-size: var(--db-navigation-item-inline-size, 100%);
				background: transparent;
				transform: translateX(-100%);
				clip-path: var(
					--db-navigation-item-clip-path,
					polygon(10% 30px, 100% 0, 100% 100%)
				);
			}

			&::after {
				content: "";
				position: absolute;
				padding: variables.$db-spacing-fixed-xs;
				// #{$db-spacing-fixed-3xs} for box shadow
				inset-block-start: #{variables.$db-spacing-fixed-3xs};
				inset-inline-end: calc(-1 * #{variables.$db-spacing-fixed-xs});
				block-size: 100%;
				inline-size: variables.$db-spacing-fixed-xs;
			}
		}
	}

	&:empty {
		display: none;
	}

	.db-navigation-item {
		inline-size: 100%;

		&::after {
			margin-inline-start: auto;
		}
	}
}

.db-mobile-navigation-back {
	@include helpers.divider("bottom");

	display: flex;
	font-weight: normal;
	background-color: colors.$db-adaptive-bg-basic-level-1-default;
	padding-block-end: variables.$db-spacing-fixed-md;
	margin-block-end: variables.$db-spacing-fixed-md;
}