@use "@db-ui/foundations/build/styles/variables";
@use "@db-ui/foundations/build/styles/screen-sizes";
@use "../../styles/internal/component";
@use "../../styles/internal/form-components";
@use "../../styles/internal/db-puls";

.db-navigation {
	-webkit-tap-highlight-color: transparent; /* for removing the highlight */
	inline-size: 100%;

	@include screen-sizes.screen("md") {
		-webkit-tap-highlight-color: inherit;
		inline-size: auto;
	}

	> menu {
		display: flex;
		flex-direction: column;
		padding: 0;
		margin: 0;
		gap: variables.$db-spacing-fixed-sm;

		@include screen-sizes.screen("md") {
			flex-direction: row;
		}

		.db-navigation-item {
			@extend %db-puls-auto;

			.db-navigation-item-expand-button:is(button),
			.db-navigation-item-expand-button > button {
				// overwrite for navigation items
				@include screen-sizes.screen("md") {
					&::after {
						--db-icon-margin-start: #{variables.$db-spacing-fixed-sm};
						--db-icon-after: "chevron_down";

						@media screen and (prefers-reduced-motion: no-preference) {
							transition: form-components.$dropdown-icon-transition;
						}
					}

					&:is(:hover, :focus-visible),
					&:has(
							~ .db-sub-navigation:is(
									:hover,
									:focus-visible,
									:focus-within
								)
						) {
						&::after {
							transform: form-components.$dropdown-icon-transform;
						}
					}
				}
			}

			// re overwrite for non navigation items
			> menu {
				.db-navigation-item-expand-button:is(button),
				.db-navigation-item-expand-button > button {
					@include screen-sizes.screen("md") {
						&::after {
							--db-icon-after: "chevron_right";
							--db-icon-margin-start: auto;
						}

						&:is(:hover, :focus-visible),
						:has(
							~ .db-sub-navigation:is(
									:hover,
									:focus-visible,
									:focus-within
								)
						) {
							&::after {
								transform: none;
							}
						}
					}
				}
			}

			&:has([aria-current="page"]),
			&:has([data-active="true"]),
			&[aria-current="page"],
			&[data-active="true"] {
				@extend %show-db-puls-auto;

				menu {
					// hide puls for non navigation items
					:has([aria-current="page"]),
					[aria-current="page"] {
						&::after {
							display: none;
						}
					}
				}
			}

			// angular workaround: as no direct-child selector can be used, the pulse is hidden from the second level onwards
			.db-navigation-item {
				&::after {
					display: none;
				}
			}
		}
	}

	&[data-force-close="true"] {
		> menu menu {
			@include screen-sizes.screen("md") {
				display: none;
			}
		}
	}
}