@use 'exports' as *;
@use '@lucca-front/scss/src/commons/utils/media';
@use '@lucca-front/scss/src/commons/function';
@use '@lucca-front/scss/src/commons/config';

.footer {
	@layer components {
		@include vars;
		@include component;
	}

	@layer mods {
		&.mod-sticky {
			@include sticky;
		}

		&.mod-narrow {
			@include narrow;
		}

		// default mod
		&:not([class*='mod-narrow']),
		&.mod-narrowAtMediaMaxXXS {
			@include media.max('XXS') {
				@include narrow;
			}
		}

		&.mod-narrowAtMediaMaxXS {
			@include media.max('XS') {
				@include narrow;
			}
		}

		&.mod-narrowAtMediaMaxS {
			@include media.max('S') {
				@include narrow;
			}
		}

		&.mod-narrowAtMediaMaxM {
			@include media.max('M') {
				@include narrow;
			}
		}

		@include media.min('S') {
			@include wide;
		}

		.dialog &,
		.lu-modal-panel & {
			@include insideDialog;
		}

		&:has(.footer-containerOptional) {
			@include withContainer;
		}

		@each $breakpoint, $value in config.$breakpoints {
			.footer-containerOptional.mod-containerMax#{$breakpoint} {
				@include withContainerMax(function.pxToRem($value));
			}
		}
	}
}