/* ========================================
   @conduction/nextcloud-vue — Pagination
   ======================================== */

.cn-pagination {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: calc(4 * var(--default-grid-baseline));
	margin-top: calc(8 * var(--default-grid-baseline));
	padding: calc(5 * var(--default-grid-baseline));
	flex-wrap: nowrap;
}

.cn-pagination__info {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.cn-pagination__page-info {
	color: var(--color-text-maxcontrast);
	font-size: 0.9rem;
}

.cn-pagination__nav {
	display: flex;
	align-items: center;
	gap: calc(2 * var(--default-grid-baseline));
	flex-grow: 1;
	justify-content: center;
}

.cn-pagination__numbers {
	display: flex;
	align-items: center;
	gap: var(--default-grid-baseline);
}

.cn-pagination__ellipsis {
	padding: 0 var(--default-grid-baseline);
	color: var(--color-text-maxcontrast);
	font-size: 0.9rem;
}

.cn-pagination__page-size {
	display: flex;
	align-items: center;
	gap: calc(2 * var(--default-grid-baseline));
	flex-shrink: 0;
	min-width: 0;
}

.cn-pagination__page-size label {
	font-size: 0.9rem;
	color: var(--color-text-maxcontrast);
	white-space: nowrap;
}

.cn-pagination__page-size-select {
	min-width: 100px !important;
	max-width: 120px !important;
}

/* Backwards compatibility aliases */
.viewPagination { display: flex; justify-content: space-between; align-items: center; gap: calc(4 * var(--default-grid-baseline)); margin-top: calc(8 * var(--default-grid-baseline)); padding: calc(5 * var(--default-grid-baseline)); flex-wrap: nowrap; }

.viewPaginationInfo { display: flex; align-items: center; flex-shrink: 0; }

.viewPageInfo { color: var(--color-text-maxcontrast); font-size: 0.9rem; }

.viewPaginationNav { display: flex; align-items: center; gap: calc(2 * var(--default-grid-baseline)); flex-grow: 1; justify-content: center; }

.viewPaginationNumbers { display: flex; align-items: center; gap: var(--default-grid-baseline); }

.viewPaginationEllipsis { padding: 0 var(--default-grid-baseline); color: var(--color-text-maxcontrast); font-size: 0.9rem; }

.viewPaginationPageSize { display: flex; align-items: center; gap: calc(2 * var(--default-grid-baseline)); flex-shrink: 0; min-width: 0; }

/* Compact pagination — the widget-sized variant (`:compact="true"`). Sized to
   sit in a dashboard widget's footer rather than under an index page: no top
   margin, tight padding, and the item range on the left with a Prev/Next pair
   on the right. */
.cn-pagination.cn-pagination--compact {
	justify-content: space-between;
	gap: calc(2 * var(--default-grid-baseline));
	margin-top: 0;
	padding: calc(2 * var(--default-grid-baseline)) 0;
}

.cn-pagination--compact .cn-pagination__page-info {
	font-size: 0.8rem;
}

.cn-pagination__nav.cn-pagination__nav--compact {
	flex-grow: 0;
	justify-content: flex-end;
	gap: var(--default-grid-baseline);
}