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

@mixin vars($atRoot: namespace.$defaultAtRoot) {
	// for this component some variables are placed in common

	--components-navSide-offset-top: 0;
	--components-navSide-padding-top: 0;
	--components-navSide-sub-font-size: 0.875rem;
	--components-navSide-submenu-max-height: 33rem;

	--components-navSide-fullwidth-palette-bg-color: var(--palettes-navigation-800);
	--components-navSide-fullwidth-palette-text: var(--palettes-neutral-0);
	--components-navSide-fullwidth-palette-selected-bg: var(--palettes-product-700);
	--components-navSide-fullwidth-palette-selected-text: var(--palettes-neutral-0);
	--components-navSide-fullwidth-palette-hovered-bg: var(--palettes-navigation-700);
	--components-navSide-fullwidth-palette-hovered-text: var(--palettes-neutral-0);
	--components-navSide-fullwidth-palette-selected-alert-color: var(--palettes-brand-200);
	--components-navSide-fullwidth-palette-selected-alert-text: var(--palettes-brand-800);

	// --components-navSide-fullwidth-palette-alert-color is deprecated
	// --components-navSide-fullwidth-palette-alert-text is deprecated
	--components-navSide-fullwidth-palette-alert-color: var(--palettes-brand-200);
	--components-navSide-fullwidth-palette-alert-text: var(--palettes-brand-800);

	--components-navSide-compact-palette-bg-color: var(--palettes-navigation-800);
	--components-navSide-compact-palette-text: var(--palettes-neutral-0);
	--components-navSide-compact-palette-selected-bg: var(--palettes-product-700);
	--components-navSide-compact-palette-selected-text: var(--palettes-neutral-0);
	--components-navSide-compact-palette-hovered-bg: var(--palettes-navigation-700);
	--components-navSide-compact-palette-hovered-text: var(--palettes-neutral-0);
	--components-navSide-compact-palette-alert-color: var(--palettes-brand-200);
	--components-navSide-compact-palette-alert-text: var(--palettes-brand-800);
	--components-navSide-compact-palette-selected-alert-color: var(--palettes-brand-200);
	--components-navSide-compact-palette-selected-alert-text: var(--palettes-brand-800);
	--components-navSide-compact-font-size: 0.875rem;

	--components-navSide-bottom-section-palette-bg-color: transparent;
	--components-navSide-bottom-section-palette-text: var(--palettes-neutral-0);
	--components-navSide-bottom-section-palette-selected-bg: #9299b0;
	--components-navSide-bottom-section-palette-selected-text: var(--palettes-neutral-0);
	--components-navSide-bottom-section-palette-hovered-bg: var(--palettes-navigation-700);
	--components-navSide-bottom-section-palette-hovered-text: var(--palettes-neutral-0);
	--components-navSide-bottom-section-palette-alert-color: #9299b0;
	--components-navSide-bottom-section-palette-alert-text: var(--palettes-neutral-0);
	--components-navSide-bottom-section-palette-selected-alert-color: #9299b0;
	--components-navSide-bottom-section-palette-selected-alert-text: var(--palettes-neutral-0);
	--components-navSide-bottom-section-height: 3.1rem;

	--components-navSide-scrollbar-width: var(--pr-t-spacings-100);
	--components-navSide-scrollbar-border-radius: 10px;
	--components-navSide-scrollbar-bg-color: var(--palettes-product-800);
	--components-navSide-scrollbar-thumb-color: var(--palettes-product-700);
	--components-navSide-scrollbar-arrow-color: var(--palettes-neutral-0);
}