@use '@lucca-front/scss/src/commons/utils/reset';
@use '@lucca-front/scss/src/commons/utils/a11y';
@use '@lucca-front/scss/src/commons/utils/namespace';

@mixin component($atRoot: namespace.$defaultAtRoot) {
	column-gap: var(--pr-t-spacings-400);
	align-items: center;
	display: flex;
	position: relative;
	flex-wrap: wrap;
	padding: var(--components-horizontalNavigation-listPadding);

	&::after {
		content: var(--components-horizontalNavigation-borderContent);
		border-block-end-width: var(--commons-divider-width);
		border-block-end-color: var(--commons-divider-color);
		border-block-end-style: solid;
		position: absolute;
		block-size: 1px;
		inset: auto 0 0;
	}

	// stylelint-disable-next-line selector-disallowed-list -- .label is deprecated
	.label {
		margin-inline-end: 0;
		background-color: var(--palettes-neutral-100);
		color: var(--palettes-neutral-700);
	}

	@at-root ($atRoot) {
		// stylelint-disable-next-line selector-disallowed-list -- .menu-containerOptional is deprecated
		.menu-containerOptional,
		.horizontalNavigation-containerOptional {
			max-inline-size: var(--commons-container-maxWidth);
			padding: var(--commons-container-padding);
		}

		// stylelint-disable-next-line selector-disallowed-list -- .menu-list is deprecated
		.menu-list,
		.horizontalNavigation-list {
			@include reset.list;

			align-items: var(--components-horizontalNavigation-listAlign);
			gap: var(--components-horizontalNavigation-listGap);
			flex-direction: var(--components-horizontalNavigation-listDirection);
			display: flex;
			flex-grow: 1;
			flex-wrap: wrap;

			.scrollBox & {
				flex-wrap: nowrap;
			}
		}

		.menu-link, // stylelint-disable-line selector-disallowed-list -- .menu-list is deprecated
		.menu-list-item-action, // stylelint-disable-line selector-disallowed-list -- .menu-link-item-action is deprecated
		.horizontalNavigation-list-item-action {
			@include reset.button;

			font: var(--components-horizontalNavigation-listItemActionFont);
			padding: var(--components-horizontalNavigation-listItemActionPadding);
			border-radius: var(--pr-t-border-radius-small);
			color: var(--components-horizontalNavigation-listItemActionColor);
			display: inline-flex;
			text-align: var(--components-horizontalNavigation-listItemActionAlign);
			transition-duration: var(--commons-animations-durations-fast);
			gap: var(--pr-t-spacings-100);
			align-items: center;
			transition-property: color;
			position: relative;
			text-decoration: none;
			inline-size: auto;
			z-index: 1;
			scroll-margin-inline: var(--pr-t-spacings-200);

			&::before {
				content: '';
				position: absolute;
				inset-block: calc(var(--components-horizontalNavigation-listItemActionPaddingBlock) - var(--pr-t-spacings-25));
				inset-inline: calc(var(--components-horizontalNavigation-listItemActionPaddingInline) - var(--pr-t-spacings-25));
				border-radius: var(--pr-t-border-radius-small);
			}

			&::after {
				background-color: var(--palettes-700, var(--palettes-product-700));
				border-radius: var(--components-horizontalNavigation-listItemActionRadius);
				transition-duration: var(--commons-animations-durations-fast);
				block-size: var(--components-horizontalNavigation-listItemActionRadiusHeight);
				inline-size: var(--components-horizontalNavigation-listItemActionRadiusWidth);
				transform: var(--components-horizontalNavigation-listItemActionTransform);
				inset: var(--components-horizontalNavigation-listItemActionInset);
				transition-property: transform;
				display: block;
				position: absolute;
				z-index: 1;
				content: '';
			}

			&:focus-visible {
				outline: none !important;

				&::before {
					@include a11y.focusVisible;
				}
			}

			&:not(.is-disabled, [disabled]) {
				&:hover {
					&:not(.is-active, [aria-current='page']) {
						color: var(--palettes-neutral-900);
					}

					// stylelint-disable-next-line selector-disallowed-list -- .label is deprecated
					.label {
						background-color: var(--palettes-100, var(--palettes-product-100));
						color: var(--palettes-700, var(--palettes-product-700));
					}

					&::after {
						--components-horizontalNavigation-listItemActionTransform: scale(0.75, 1);
					}
				}
			}

			.link-text {
				text-decoration: none;
			}
		}

		// stylelint-disable-next-line selector-disallowed-list -- .menu-link-placeholder is deprecated
		.menu-link-placeholder,
		.horizontalNavigation-link-placeholder {
			&::after {
				content: attr(data-content-after);
				display: block;
				block-size: 0;
				overflow: hidden;
				font-weight: var(--pr-t-font-fontWeight-semibold);
			}
		}
	}
}