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

@mixin component($atRoot: namespace.$defaultAtRoot) {
	background-color: var(--components-footer-backgroundColor);
	padding-block: var(--components-footer-paddingBlock);
	padding-inline: var(--components-footer-paddingInline);
	box-shadow: var(--components-footer-boxShadow);
	inset-block-end: 0;
	position: var(--components-footer-position);
	overflow: var(--components-footer-overflow);
	display: var(--components-footer-display);
	justify-content: var(--components-footer-justifyContent);
	gap: var(--components-footer-gap);
	align-items: var(--components-footer-alignItems);
	flex-direction: var(--components-footer-direction);

	@at-root ($atRoot) {
		.footer-content {
			flex-grow: 1;
		}

		.footer-actions {
			margin-inline-start: var(--components-footer-actions-margin);
			display: flex;
			gap: var(--pr-t-spacings-150);
			flex-direction: var(--components-footer-direction);
		}

		.footer-containerOptional {
			flex-grow: 1;
			display: var(--components-footer-display);
			justify-content: var(--components-footer-justifyContent);
			gap: var(--components-footer-gap);
			align-items: var(--components-footer-alignItems);
			flex-direction: var(--components-footer-direction);
			padding: var(--commons-container-padding);
			max-inline-size: var(--components-footer-container-maxInlineSize);
		}
	}
}