@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) {
	background-color: var(--pr-t-elevation-surface-raised);
	inset-block-end: 0;
	box-shadow: var(--pr-t-elevation-shadow-overflow);
	padding-block: 0;
	padding-inline: var(--pr-t-spacings-100);
	position: sticky;

	@at-root ($atRoot) {
		.mobileNavigation-list {
			@include reset.list;

			display: flex;
		}

		.mobileNavigation-list-item {
			flex-grow: 1;
			text-align: center;
		}

		.mobileNavigation-list-item-link {
			color: var(--palettes-neutral-700);
			display: flex;
			flex-direction: column;
			font: var(--pr-t-font-body-XS);
			gap: var(--pr-t-spacings-50);
			padding-block: var(--pr-t-spacings-100);
			padding-inline: var(--pr-t-spacings-50);
			position: relative;
			text-decoration: none;

			&:focus-visible {
				@include a11y.focusVisible($offset: 0);
			}

			.lucca-icon {
				font-size: var(--pr-t-font-body-M-lineHeight);
			}

			&[aria-current='page'] {
				color: var(--palettes-product-700);
				font-weight: var(--pr-t-font-fontWeight-semibold);
			}
		}

		.mobileNavigation-list-item-link-counter {
			--components-numericBadge-background: var(--palettes-product-200);
			--components-numericBadge-color: var(--palettes-product-800);

			box-shadow: 0 0 0 2px var(--palettes-neutral-0);
			position: absolute;
			inset-inline-start: calc(50% + 5px);
			inset-block-start: 5px;
		}
	}
}