@use '@lucca-front/icons/src/icon/exports' as icon;
@use '@lucca-front/scss/src/commons/utils/loading';
@use '@lucca-front/scss/src/commons/utils/a11y';
@use '@lucca-front/scss/src/commons/utils/color';
@use '@lucca-front/scss/src/commons/utils/media';
@use '@lucca-front/scss/src/commons/utils/keyframe';
@use '@lucca-front/scss/src/commons/utils/namespace';
@use '@lucca-front/scss/src/components/numericBadge/exports' as numericBadge;

@mixin component($atRoot: namespace.$defaultAtRoot) {
	inset-block: 0;
	inset-inline-start: 0;
	z-index: 100;
	position: fixed;
	display: flex;
	flex-direction: column;
	background-color: var(--components-navSide-fullwidth-palette-bg-color);
	padding-block-start: var(--components-navSide-padding-top);
	inline-size: var(--commons-navSide-width);
	scroll-margin-block-start: var(--commons-banner-height);

	.numericBadge {
		@include numericBadge.S;
		@include numericBadge.brand;

		margin-inline-start: auto;
	}

	.newBadge {
		margin-inline-start: auto;
	}

	@at-root ($atRoot) {
		.navSide-wrapper {
			display: flex;
			flex-direction: column;
			flex-grow: 1;
			min-block-size: 0;
		}

		.navSide-mainSection {
			flex-grow: 1;
			display: block;
			block-size: 100%;
			overflow-x: hidden;
			overflow-y: auto;
			position: relative;
			scrollbar-face-color: var(--components-navSide-scrollbar-thumb-color);
			scrollbar-arrow-color: var(--components-navSide-scrollbar-arrow-color);
			scrollbar-track-color: var(--components-navSide-scrollbar-bg-color);
			scrollbar-shadow-color: var(--components-navSide-scrollbar-thumb-color);
			scrollbar-3dlight-color: var(--components-navSide-scrollbar-thumb-color);

			&::-webkit-scrollbar-track {
				background-color: var(--components-navSide-scrollbar-bg-color);
			}

			&::-webkit-scrollbar {
				inline-size: var(--components-navSide-scrollbar-width);
			}

			&::-webkit-scrollbar-thumb {
				background-color: var(--components-navSide-scrollbar-thumb-color);
				border-radius: var(--components-navSide-scrollbar-border-radius);
			}
		}

		.navSide-scrollWrapper {
			inline-size: var(--commons-navSide-width);
			padding: var(--pr-t-spacings-100);
			margin: 0;
			list-style-type: none;
		}

		.navSide-item-link,
		.navSide-item-subMenu-link {
			cursor: pointer;
			background-color: transparent;
			border: 0;
			text-align: start;
			inline-size: 100%;
			block-size: 100%;
			align-items: center;
			display: flex;
			column-gap: var(--pr-t-spacings-150);
			text-decoration: none;
			user-select: none;
			color: var(--components-navSide-fullwidth-palette-text);
			transition-property: background-color, color;
			transition-duration: var(--commons-animations-durations-fast);
			border-radius: var(--pr-t-border-radius-default);

			&:focus-visible {
				@include a11y.focusVisible;
			}

			&:hover {
				background-color: var(--components-navSide-fullwidth-palette-hovered-bg);
				color: var(--components-navSide-fullwidth-palette-hovered-text);
			}

			&:active {
				background-color: var(--palettes-navigation-900);
			}

			.lucca-icon {
				@include icon.S;
			}
		}

		.navSide-item-link {
			font-size: var(--pr-t-font-body-S-fontSize);
			line-height: var(--pr-t-font-body-S-lineHeight);
			padding-block: var(--pr-t-spacings-150);
			padding-inline: var(--pr-t-spacings-200);
			font-weight: var(--pr-t-font-fontWeight-semibold);
		}

		.navSide-item-link-title {
			overflow-wrap: anywhere;
		}

		.navSide-item-link-badgesOptional {
			display: flex;
			column-gap: var(--pr-t-spacings-150);
			row-gap: var(--pr-t-spacings-50);
			align-items: center;
			margin-inline-start: auto;
		}

		.navSide-item-arrow {
			@include icon.S;

			transition-duration: var(--commons-animations-durations-fast);
			transition-property: transform;
			transition-timing-function: ease-out;
			margin-inline-start: auto;
			display: grid;
			place-items: center;
			flex-shrink: 0;
			transform-origin: 50% 50%;
			transform: rotate(90deg);
		}

		.navSide-item-subMenu {
			font-size: var(--components-navSide-sub-font-size);
			margin: 0;
			padding: 0;
			list-style-type: none;
			overflow: visible;
		}

		.navSide-item-subMenu-link {
			font-weight: var(--pr-t-font-fontWeight-regular);
			padding-block: var(--pr-t-spacings-100);
			padding-inline: var(--pr-t-spacings-600) var(--pr-t-spacings-200);
			font-size: var(--pr-t-font-body-S-fontSize);
			line-height: var(--pr-t-font-body-S-lineHeight);
		}

		.navSide-item-subMenu-item {
			opacity: 0;
			animation-fill-mode: forwards;
			animation-name: slideInLeft;
			animation-duration: var(--commons-animations-durations-fast);
			animation-delay: var(--delay);

			@include keyframe.slideInLeft;

			@media (prefers-reduced-motion) {
				animation: none;
				opacity: 1;
			}

			@for $i from 0 through 10 {
				&:nth-child(#{$i}n) {
					--delay: #{$i * 25ms};
				}
			}
		}

		.navSide-bottomSection {
			inline-size: var(--commons-navSide-width);
			padding: var(--pr-t-spacings-100);
			z-index: 1;

			.navSide-item-link {
				background-color: var(--components-navSide-bottom-section-palette-bg-color);
				color: var(--components-navSide-bottom-section-palette-text);
				padding-block: var(--pr-t-spacings-150);
				padding-inline: var(--pr-t-spacings-200);
				box-sizing: border-box;
				cursor: pointer;

				&:hover {
					background-color: var(--components-navSide-bottom-section-palette-hovered-bg);
					color: var(--components-navSide-bottom-section-palette-hovered-text);
				}
			}

			&:empty {
				display: none;
			}
		}

		.navSide-item-placeholder {
			align-items: center;
			display: flex;
			padding: 1em;

			&::before,
			&::after {
				display: block;
				content: '';
			}

			&::before {
				background-color: var(--palettes-navigation-700);
				border-radius: 1em;
				block-size: 1em;
				inline-size: 1em;
			}

			&::after {
				border-radius: var(--pr-t-border-radius-default);
				flex: 1 1 auto;
				block-size: 0.9em;
				margin-inline-start: 1em;

				@include loading.gradient($color: var(--palettes-navigation-700));
			}
		}
	}
}