/* ==========================================================================
   THE KENDO GRID PAGER WEARS THE RECIPE'S PAGER.

   The recipe has had a complete pager all along — .al-pager and twelve parts,
   fully tokenised — and exactly one page used it: views/lab. Every real pager in
   the product is Kendo's, and this file used to restate the recipe's decisions in
   its own numbers off the legacy --al-* bridge tokens. Two descriptions of one
   control, free to drift, and they had.

   Now every value below reads --al-pagination-*, so the Kendo pager IS the recipe's
   pager rendered on Kendo's DOM. Change the recipe and this moves with it.

   Chrome only: no pager CONFIG changes here. Button count, first-last and page
   sizes stay whatever each grid declares. Note that a grid must also set
   pageable.responsive:false, or Kendo swaps the numbered buttons for a bare
   <select> whenever its container is narrow.
   ========================================================================== */

.k-pager-wrap {
	background: transparent;
	border: 0;
	border-top: var(--al-sys-control-border-width) solid var(--al-sys-color-border);
	color: var(--al-sys-color-text-muted);
	font-size: var(--al-pagination-font-size, var(--al-sys-font-size-200));
	padding: var(--al-sys-space-100) var(--al-sys-space-150);
	gap: var(--al-sys-space-50);

	/* The recipe declares these on .al-pager, which Kendo's markup never carries, so the
	   pager's own tokens are re-declared on the element that IS the pager here. Same names,
	   same values, one source: recipe-controls.css .al-pager. */
	--al-pagination-item-size: var(--al-sys-control-height-sm);
	--al-pagination-item-radius: var(--al-sys-control-radius);
	--al-pagination-item-border-width: var(--al-sys-control-border-width);
	--al-pagination-font-size: var(--al-sys-font-size-200);
	--al-pagination-item-fill: var(--al-sys-color-surface-control);
	--al-pagination-item-border-color: var(--al-sys-color-border);
	--al-pagination-item-label: var(--al-sys-color-text-primary);
}

/* Page numbers and the first/prev/next/last steps are one control at two jobs. */
.k-pager-wrap .k-pager-numbers .k-link,
.k-pager-wrap .k-pager-nav {
	border: var(--al-pagination-item-border-width) solid var(--al-pagination-item-border-color);
	border-radius: var(--al-pagination-item-radius);
	background: var(--al-pagination-item-fill);
	color: var(--al-pagination-item-label);
	min-width: var(--al-pagination-item-size);
	height: var(--al-pagination-item-size);
	line-height: var(--al-pagination-item-size);
	margin: 0 2px;
	box-shadow: none;
	transition: background var(--al-sys-motion-duration-state) var(--al-sys-motion-easing), border-color var(--al-sys-motion-duration-state) var(--al-sys-motion-easing);
}
.k-pager-wrap .k-pager-numbers .k-link:hover,
.k-pager-wrap .k-pager-nav:hover {
	background: var(--al-sys-color-surface-sunken);
	border-color: var(--al-sys-color-border-control);
}

/* The current page is the accent, filled: it is the one item in the row that is a state
   rather than a destination. */
.k-pager-wrap .k-pager-numbers .k-link.k-selected {
	background: var(--al-sys-color-accent-primary);
	border-color: var(--al-sys-color-accent-primary);
	color: var(--al-sys-color-text-on-accent);
}
.k-pager-wrap .k-pager-numbers .k-link.k-selected:hover {
	background: var(--al-sys-color-accent-primary-strong);
	border-color: var(--al-sys-color-accent-primary-strong);
}

/* Disabled first/prev on page one: quiet, and still a shape, because a step that vanishes
   moves every other step sideways. opacity:1 because the colour already says it. */
.k-pager-wrap .k-pager-nav.k-disabled {
	color: var(--al-sys-color-text-placeholder);
	background: var(--al-pagination-item-fill);
	border-color: var(--al-sys-color-border);
	opacity: 1;
}
.k-pager-wrap .k-pager-numbers .k-link .k-icon,
.k-pager-wrap .k-pager-nav .k-icon {
	color: inherit;
}

/* The ellipsis between number ranges is a fact, not a control. */
.k-pager-wrap .k-pager-numbers .k-current-page,
.k-pager-wrap .k-pager-numbers li.k-current-page {
	color: var(--al-sys-color-text-muted);
}

/* Page size, and the words beside it. */
.k-pager-wrap .k-pager-sizes {
	color: var(--al-sys-color-text-muted);
}
.k-pager-wrap .k-pager-sizes .k-dropdownlist,
.k-pager-wrap .k-pager-sizes .k-dropdown,
.k-pager-wrap .k-pager-sizes .k-picker {
	border: var(--al-pagination-item-border-width) solid var(--al-sys-color-border-control);
	border-radius: var(--al-pagination-item-radius);
	background: var(--al-pagination-item-fill);
	min-height: var(--al-pagination-item-size);
	width: 6em;
}

/* "N-M of T items". Kendo already floats it right. */
.k-pager-wrap .k-pager-info {
	color: var(--al-sys-color-text-muted);
	font-size: var(--al-pagination-font-size, var(--al-sys-font-size-200));
}