@use 'sass:map';
@use '@lucca-front/scss/src/commons/core';
@use '@lucca-front/scss/src/commons/config';
@use '@lucca-front/scss/src/commons/utils/a11y';
@use '@lucca-front/scss/src/commons/utils/namespace';
@use '@lucca-front/scss/src/commons/utils/color';

@mixin body {
	background-color: var(--commons-background-base);
	color: var(--pr-t-color-text);
	font: var(--pr-t-font-body-M);
	text-rendering: geometricPrecision;
	inline-size: calc(100% - var(--commons-pushPanel-inlineSize));

	@supports (-webkit-touch-callout: none) {
		min-block-size: -webkit-fill-available;
	}
}

@mixin html {
	block-size: -webkit-fill-available;
}

@mixin base($atRoot: namespace.$defaultAtRoot) {
	@at-root ($atRoot) {
		@if config.$fontFamily {
			@include core.fontFace(config.$fontFamily, config.$fontWeights, config.$fontStyles);
		}

		@if config.$fontFamilyBrand {
			@include core.fontFace(config.$fontFamilyBrand, config.$fontWeightsBrand, config.$fontStylesBrand);
		}

		@if config.$fontFamilyCursive {
			@include core.fontFace(config.$fontFamilyCursive, config.$fontWeightsCursive, config.$fontStylesCursive);
		}

		*,
		::after,
		::before {
			box-sizing: border-box;
		}

		::placeholder {
			opacity: 1;
			text-rendering: geometricPrecision;
		}

		@if config.$isNamespaced {
			// stylelint-disable-next-line block-no-redundant-nested-style-rules -- & references the selector calling this mixin.
			& {
				@include body;
				@include html;
			}
		} @else {
			html {
				@include html;
			}

			body {
				@include body;
			}
		}

		p {
			margin: 0;

			@if config.$deprecatedSpacings {
				margin-block-end: var(--pr-t-spacings-150);
			}
		}

		ul,
		ol {
			margin: 0;
			padding-inline-start: var(--pr-t-spacings-400);

			@if config.$deprecatedSpacings {
				margin-block-end: var(--pr-t-spacings-150);
			}
		}

		abbr {
			&[title] {
				border: none;
				text-decoration: none;
			}
		}

		a {
			color: var(--commons-text-link-color);
			cursor: pointer;
			text-decoration: underline;

			&:hover {
				color: var(--commons-text-link-hover);
			}

			&:focus-visible {
				@include a11y.focusVisible($borderRadius: var(--pr-t-border-radius-small));
			}
		}

		input {
			text-rendering: inherit;
		}

		button,
		button[type] {
			text-rendering: inherit;

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

		strong,
		b {
			font-weight: var(--pr-t-font-fontWeight-semibold);
		}

		mark {
			background-color: var(--palettes-100, var(--palettes-product-100));
			border-radius: var(--pr-t-border-radius-default);
		}

		@each $palette in config.$palettesAll {
			$paletteExists: map.get(config.$palettesInterpolation, $palette);

			@if $paletteExists {
				.palette-#{$palette} {
					@include color.palette($name: $palette, $palette: $paletteExists);
				}
			}
		}

		@each $productName, $productMap in config.$palettesAssets {
			.palette-#{$productName} {
				--palettes-assets-primary-lighter: var(--palettes-#{$productName}-50);
				--palettes-assets-primary-light: var(--palettes-#{$productName}-100);
				--palettes-assets-primary-dark: var(--palettes-#{$productName}-200);

				@each $level, $palette in $productMap {
					@if $level == 'secondary' {
						--palettes-assets-secondary-lighter: var(--palettes-#{$palette}-50);
						--palettes-assets-secondary-light: var(--palettes-#{$palette}-100);
					}

					@if $level == 'brand' {
						--palettes-assets-brand-lighter: var(--palettes-#{$palette}-50);
						--palettes-assets-brand-light: var(--palettes-#{$palette}-100);
						--palettes-assets-brand-dark: var(--palettes-#{$palette}-200);
					}
				}
			}
		}
	}
}