@use 'sass:map';
@use 'sass:list';

@use '@lucca-front/scss/src/commons/config';
@use '@lucca-front/scss/src/commons/core';
@use '@lucca-front/scss/src/commons/function';
@use '@lucca-front/scss/src/commons/utils/color';
@use '@lucca-front/scss/src/commons/utils/media';

@mixin vars {
	// TOKENS : TYPO

	--pr-t-font-family: '#{config.$fontFamily}', Tahoma, sans-serif;
	--pr-t-font-family-brand: '#{config.$fontFamilyBrand}', Tahoma, sans-serif;

	@if (config.$fontFamilyCursive) {
		--pr-t-font-family-cursive: '#{config.$fontFamilyCursive}', cursive;
	}

	@include core.cssvars('pr-t-font-fontSize', config.$fontSizeVars);
	@include core.cssvars('pr-t-font-lineHeight', config.$lineHeight);
	@include core.cssvars('pr-t-font-fontWeight', config.$fontWeights);
	@include core.cssvars('pr-t-font', config.$fontTokens);

	--pr-t-font-heading-1: var(--pr-t-font-heading-1-fontWeight) var(--pr-t-font-heading-1-fontSize) / var(--pr-t-font-heading-1-lineHeight) var(--pr-t-font-family-brand);
	--pr-t-font-heading-2: var(--pr-t-font-heading-2-fontWeight) var(--pr-t-font-heading-2-fontSize) / var(--pr-t-font-heading-2-lineHeight) var(--pr-t-font-family-brand);
	--pr-t-font-heading-3: var(--pr-t-font-heading-3-fontWeight) var(--pr-t-font-heading-3-fontSize) / var(--pr-t-font-heading-3-lineHeight) var(--pr-t-font-family);
	--pr-t-font-heading-4: var(--pr-t-font-heading-4-fontWeight) var(--pr-t-font-heading-4-fontSize) / var(--pr-t-font-heading-4-lineHeight) var(--pr-t-font-family);
	--pr-t-font-highlight-XXL: var(--pr-t-font-highlight-XXL-fontWeight) var(--pr-t-font-highlight-XXL-fontSize) / var(--pr-t-font-highlight-XXL-lineHeight) var(--pr-t-font-family-brand);
	--pr-t-font-highlight-XL: var(--pr-t-font-highlight-XL-fontWeight) var(--pr-t-font-highlight-XL-fontSize) / var(--pr-t-font-highlight-XL-lineHeight) var(--pr-t-font-family-brand);
	--pr-t-font-highlight-L: var(--pr-t-font-highlight-L-fontWeight) var(--pr-t-font-highlight-L-fontSize) / var(--pr-t-font-highlight-L-lineHeight) var(--pr-t-font-family-brand);
	--pr-t-font-body-M: var(--pr-t-font-body-M-fontSize) / var(--pr-t-font-body-M-lineHeight) var(--pr-t-font-family);
	--pr-t-font-body-S: var(--pr-t-font-body-S-fontSize) / var(--pr-t-font-body-S-lineHeight) var(--pr-t-font-family);
	--pr-t-font-body-XS: var(--pr-t-font-body-XS-fontSize) / var(--pr-t-font-body-XS-lineHeight) var(--pr-t-font-family);

	// TOKENS : RADIUS

	@include core.cssvars('pr-t-border-radius', config.$borderRadiusVars);
	@include core.cssvars('pr-t-border-radius', config.$borderRadiusTokens);

	// TOKENS : ELEVATION

	@each $key, $map in config.$elevation {
		@include core.cssvars('pr-t-elevation-#{$key}', $map);
	}

	// TOKENS : SPACINGS

	@include core.cssvars('pr-t-spacings', config.$spacings);
	--pr-t-spacings-auto: auto;

	// TOKENS : COLORS

	@include core.cssvars('pr-t-color-input', config.$colorInput);
	@include core.cssvars('pr-t-color', config.$colorText);

	// VARIABLES

	@include core.cssvars('commons-borderRadius', config.$borderRadius);
	@include core.cssvars('commons-animations', config.$animations);
	@include core.cssvars('commons-animations-durations', config.$durations);
	@include core.cssvars('commons-disabled', config.$disabled);
	@include core.cssvars('commons-loading', config.$loading);
	@include core.cssvars('commons-text-link', config.$textLink);
	@include core.cssvars('breakpoints', config.$breakpoints, '-breakAt');

	@each $palette in config.$palettesAll {
		@include core.cssvars('palettes-#{$palette}', map.get(config.$palettesInterpolation, $palette));
	}

	// stylelint-disable custom-property-pattern
	--palettes-assets-primary-lighter: var(--palettes-#{config.$product}-50);
	--palettes-assets-primary-light: var(--palettes-#{config.$product}-100);
	--palettes-assets-primary-dark: var(--palettes-#{config.$product}-200);
	--palettes-assets-brand-lighter: var(--palettes-#{map.get(map.get(config.$palettesAssets, config.$product), 'brand')}-50);
	--palettes-assets-brand-light: var(--palettes-#{map.get(map.get(config.$palettesAssets, config.$product), 'brand')}-100);
	--palettes-assets-brand-dark: var(--palettes-#{map.get(map.get(config.$palettesAssets, config.$product), 'brand')}-200);
	--palettes-assets-secondary-lighter: var(--palettes-#{map.get(map.get(config.$palettesAssets, config.$product), 'secondary')}-50);
	--palettes-assets-secondary-light: var(--palettes-#{map.get(map.get(config.$palettesAssets, config.$product), 'secondary')}-100);
	// stylelint-enable custom-property-pattern

	@include core.cssvars('colors', config.$colors, '-color');
	@include core.cssvars('colors', config.$colorsRgb, '-rgb');

	--commons-banner-height: 50px;
	--commons-divider-width: 1px;
	--commons-divider-style: solid;
	--commons-divider-border: var(--commons-divider-width) var(--commons-divider-style) var(--commons-divider-color);
	--commons-border-100: var(--palettes-neutral-100);
	--commons-border-200: var(--palettes-neutral-200);
	--commons-pushPanel-inlineSize: 0px;

	// Deprecated
	--commons-font-family: '#{config.$fontFamily}', Tahoma, sans-serif;
	--commons-font-family-brand: '#{config.$fontFamilyBrand}', sans-serif;

	--commons-background-base: var(--pr-t-elevation-surface-default);

	--commons-divider-color: var(--palettes-neutral-200);

	--commons-container-padding: 0 var(--pr-t-spacings-200);
	--commons-container-maxWidth: 100rem; // 100 + 0 = 100

	--commons-navSide-width: 0px;

	/* stylelint-disable-next-line property-disallowed-list */
	--commons-navSide-compact-width: 7.5rem;
	--commons-navSide-mobile-toggle-height: 3.5rem;

	@if (config.$fontFamilyCursive) {
		--commons-font-family-cursive: '#{config.$fontFamilyCursive}', cursive;
	}

	@each $key, $map in config.$sizes {
		@include core.cssvars('sizes-#{$key}', $map);
	}

	@each $breakpoint, $value in config.$breakpoints {
		--commons-container-maxWidth#{$breakpoint}: #{function.pxToRem($value)};
	}

	@include media.min('S') {
		--commons-container-padding: 0 var(--pr-t-spacings-400);
	}

	&:has(.navSide) {
		--commons-container-maxWidth: 85rem; // 85 + 15 = 100
	}

	&:has(.navSide.mod-compact, .mod-withMenuCompact) {
		--commons-container-maxWidth: 92.5rem; // 92.5 + 7.5 = 100
	}

	@media (prefers-contrast: more) {
		@media (forced-colors: none) {
			@include color.contrasted;
		}
	}

	@if (config.$prefersContrast == 'more') {
		@media (forced-colors: none) {
			@include color.contrasted;
		}
	}

	%prefersContrastMore {
		@media (forced-colors: none) {
			@include color.contrasted;
		}
	}

	.pr-u-prefersContrastMore {
		@extend %prefersContrastMore;
	}

	// Deprecated .u- utilities
	@if config.$deprecatedUtilityPrefix {
		.u-prefersContrastMore {
			@extend %prefersContrastMore;
		}
	}
}