/*!
 * @be-partner-labs/ds v1.8.0 — components/pagination
 * © 2026 Be Partner Labs. MIT License.
 *
 * CDN:  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@be-partner-labs/ds@1.8.0/dist/components/pagination.min.css">
 * npm:  @import "@be-partner-labs/ds/components/pagination";
 * Docs: https://ds.bepartnerlabs.com/components/pagination/
 */
@layer bp-tokens, bp-reset, bp-grid, bp-components, bp-utilities;

@layer bp-components {
	/* ─── Public API ─────────────────────────────────────────── */
	/*
	 * --pagination-color:      item text color (default: --bp-color-text)
	 * --pagination-background: active page background (default: --bp-primary)
	 * --pagination-border:     item border (default: 1px solid --bp-color-border)
	 * --pagination-radius:     item border radius (default: --bp-radius-md)
	 * --pagination-size:       item min size (default: 2.25rem)
	 * --pagination-gap:        gap between items (default: --bp-space-1)
	 *
	 * Active state: re-declare --pagination-color / --pagination-background in your own [aria-current] selector.
	 */

	/* ─── Root ───────────────────────────────────────────────── */
	.bp-pagination {
		--_color: var(--pagination-color, var(--bp-color-text));
		--_border: var(--pagination-border, 1px solid var(--bp-color-border));
		--_radius: var(--pagination-radius, var(--bp-radius-md));
		--_size: var(--pagination-size, 2.25rem);
		--_gap: var(--pagination-gap, var(--bp-space-1));

		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--_gap);
		list-style: none;
		margin: 0;
		padding: 0;
	}

	/* ─── Items ──────────────────────────────────────────────── */
	.bp-pagination__item {
		display: flex;
	}

	/* ─── Links and buttons ──────────────────────────────────── */
	.bp-pagination__link {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: var(--_size);
		min-height: var(--_size);
		padding-inline: var(--bp-space-2);
		border: var(--_border);
		border-radius: var(--_radius);
		color: var(--_color);
		text-decoration: none;
		font-size: var(--bp-text-sm);
		font-weight: var(--bp-font-medium);
		background-color: transparent;
		cursor: pointer;
		transition:
			background-color var(--bp-duration-fast) var(--bp-ease),
			color var(--bp-duration-fast) var(--bp-ease),
			border-color var(--bp-duration-fast) var(--bp-ease);
	}

	.bp-pagination__link:hover:not([aria-current]):not([aria-disabled="true"]):not(:disabled) {
		background-color: var(--bp-color-bg-subtle);
		border-color: var(--bp-primary);
	}

	.bp-pagination__link:focus-visible {
		outline: 2px solid var(--bp-primary);
		outline-offset: 2px;
	}

	/* ─── Active page ────────────────────────────────────────── */
	.bp-pagination__link[aria-current="page"] {
		--pagination-background: var(--bp-primary);
		--pagination-color: var(--bp-color-bg);
		background-color: var(--pagination-background);
		color: var(--_color);
		border-color: var(--pagination-background);
		pointer-events: none;
	}

	/* ─── Disabled ───────────────────────────────────────────── */
	.bp-pagination__link[aria-disabled="true"],
	.bp-pagination__link:disabled {
		opacity: 0.4;
		pointer-events: none;
		cursor: default;
	}

	/* ─── Ellipsis ───────────────────────────────────────────── */
	.bp-pagination__ellipsis {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: var(--_size);
		min-height: var(--_size);
		color: var(--bp-color-text-muted);
		font-size: var(--bp-text-sm);
		user-select: none;
	}
}