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

@mixin component($atRoot: namespace.$defaultAtRoot) {
	display: flex;
	flex-wrap: wrap;
	padding-block: var(--pr-t-spacings-100);
	padding-inline: var(--pr-t-spacings-150);
	justify-content: flex-end;
	color: var(--pr-t-color-text-subtle);

	> *:not(:last-child) {
		margin-inline-end: var(--pr-t-spacings-100);
	}

	@at-root ($atRoot) {
		.pagination-count,
		.pagination-navigation,
		.pagination-scrolling {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
		}

		.pagination-count-separator {
			margin-block: 0;
			margin-inline: var(--pr-t-spacings-50);
		}

		.pagination-navigation {
			list-style: none;
			padding: 0;
			margin-block: 0;

			> *:not(:last-child) {
				margin-inline-end: var(--pr-t-spacings-50);
			}
		}

		.pagination-navigation-item {
			margin-inline-end: var(--pr-t-spacings-50);
		}
	}
}