<commit_before>/*doc
---
title: Pagination
name: uiPager
category: UI Components
---
Please review the pagination markup examples carefully;
the markup patterns presented here encourage accessibility.

Unicode arrows are for demonstration only; in production,
use a suitable SVG icon for "previous" and "next" controls.

```html_example
<ul role="navigation" class="pagination">
	<li class="pagination-page pagination-page--control">
		<span class="visibility--a11yHide">No previous pages</span>
	</li>
	<li class="pagination-page">
		<a href="#" class="page-label"><span class="visibility--a11yHide">Page </span>1</a>
	</li>
	<li class="pagination-page pagination-page--current">
		<span class="page-label">2 <em class="visibility--a11yHide">Current page</em></span>
	</li>
	<li class="pagination-page">
		<a href="#" class="page-label"><span class="visibility--a11yHide">Page </span>3</a>
	</li>
	<li class="pagination-page">
		<a href="#" class="page-label"><span class="visibility--a11yHide">Page </span>4</a>
	</li>
	<li class="pagination-page pagination-page--control">
		<a href="#" class="page-label" rel="next">→</a>
	</li>
</ul>

<ul role="navigation" class="pagination">
	<li class="pagination-page pagination-page--control">
		<a href="#" class="page-label" rel="prev">←</a>
	</li>
	<li class="pagination-page">
		<a href="#" class="page-label"><span class="visibility--a11yHide">Page </span>6</a>
	</li>
	<li class="pagination-page">
		<a href="#" class="page-label"><span class="visibility--a11yHide">Page </span>7</a>
	</li>
	<li class="pagination-page pagination-page--current">
		<span class="page-label">8 <em class="visibility--a11yHide">Current page</em></span>
	</li>
	<li class="pagination-page">
		<a href="#" class="page-label"><span class="visibility--a11yHide">Page </span>9</a>
	</li>
	<li class="pagination-page pagination-page--control">
		<a href="#" class="page-label" rel="next">→</a>
	</li>
</ul>

<ul role="navigation" class="pagination">
	<li class="pagination-page pagination-page--control">
		<a href="#" class="page-label" rel="prev">←</a>
	</li>
	<li class="pagination-page">
		<a href="#" class="page-label"><span class="visibility--a11yHide">Page </span>10</a>
	</li>
	<li class="pagination-page">
		<a href="#" class="page-label"><span class="visibility--a11yHide">Page </span>11</a>
	</li>
	<li class="pagination-page">
		<a href="#" class="page-label"><span class="visibility--a11yHide">Page </span>12</a>
	</li>
	<li class="pagination-page pagination-page--current">
		<span class="page-label">13 <em class="visibility--a11yHide">Current page</em></span>
	</li>
	<li class="pagination-page pagination-page--control">
		<span class="visibility--a11yHide">End of pages</span>
	</li>
</ul>
```

## Page item variants
A class of `pagination-page` is **required** for pagination list items. The following
classes are optional variants:

Class                        | Description
---------------------------- | ------------------------------------------------------------
`.pagination-page--current`  | used to indicate current page
`.pagination-page--control`  | used to indicate the page item as a "previous" or "next" control
*/

$_bpPagination: medium;

.pagination {
	@extend %list--reset;
	@extend %chunk;
	@extend %align--center;
	@include flexParent('row');
	@include justify-content(space-around);
}

.pagination-page {
	min-width: $media-s;

	// set even distribution of space for all items
	@include flex-grow(0);
	@include flex-shrink(0);

	// for vertical text alignment of `page-label`
	@include align-items(center);
	@include justify-content(center);

	// hide all items by default on small sizes;
	display: none;
	@include atMediaUp($_bpPagination) {
		@include display(flex);
	}
}

.pagination-page--current,
.pagination-page--control {
	// always show the current page
	// and prev/next controls
	@include display(flex);
}

.page-label {
	@include color-all($C_textSecondary);
	display: block;
	color: $C_textSecondary;
	border-radius: $space-2;
	padding: $space-half;
	min-width: $media-xs;

	&:hover,
	&:active {
		background: $C_lightGray;
	}
	.inverted & {
		@include color-all($C_textSecondaryInverted);
	}

	@include atMediaUp($_bpPagination) {
		.pagination-page--current & {
			color: $C_textPrimaryInverted;
			background: $C_link;
		}
	}
}

<commit_msg>add buttonPersonality to page labels<commit_after>/*doc
---
title: Pagination
name: uiPager
category: UI Components
---
Please review the pagination markup examples carefully;
the markup patterns presented here encourage accessibility.

Unicode arrows are for demonstration only; in production,
use a suitable SVG icon for "previous" and "next" controls.

```html_example
<ul role="navigation" class="pagination">
	<li class="pagination-page pagination-page--control">
		<span class="visibility--a11yHide">No previous pages</span>
	</li>
	<li class="pagination-page">
		<a href="#" class="page-label"><span class="visibility--a11yHide">Page </span>1</a>
	</li>
	<li class="pagination-page pagination-page--current">
		<span class="page-label">2 <em class="visibility--a11yHide">Current page</em></span>
	</li>
	<li class="pagination-page">
		<a href="#" class="page-label"><span class="visibility--a11yHide">Page </span>3</a>
	</li>
	<li class="pagination-page">
		<a href="#" class="page-label"><span class="visibility--a11yHide">Page </span>4</a>
	</li>
	<li class="pagination-page pagination-page--control">
		<a href="#" class="page-label" rel="next">→</a>
	</li>
</ul>

<ul role="navigation" class="pagination">
	<li class="pagination-page pagination-page--control">
		<a href="#" class="page-label" rel="prev">←</a>
	</li>
	<li class="pagination-page">
		<a href="#" class="page-label"><span class="visibility--a11yHide">Page </span>6</a>
	</li>
	<li class="pagination-page">
		<a href="#" class="page-label"><span class="visibility--a11yHide">Page </span>7</a>
	</li>
	<li class="pagination-page pagination-page--current">
		<span class="page-label">8 <em class="visibility--a11yHide">Current page</em></span>
	</li>
	<li class="pagination-page">
		<a href="#" class="page-label"><span class="visibility--a11yHide">Page </span>9</a>
	</li>
	<li class="pagination-page pagination-page--control">
		<a href="#" class="page-label" rel="next">→</a>
	</li>
</ul>

<ul role="navigation" class="pagination">
	<li class="pagination-page pagination-page--control">
		<a href="#" class="page-label" rel="prev">←</a>
	</li>
	<li class="pagination-page">
		<a href="#" class="page-label"><span class="visibility--a11yHide">Page </span>10</a>
	</li>
	<li class="pagination-page">
		<a href="#" class="page-label"><span class="visibility--a11yHide">Page </span>11</a>
	</li>
	<li class="pagination-page">
		<a href="#" class="page-label"><span class="visibility--a11yHide">Page </span>12</a>
	</li>
	<li class="pagination-page pagination-page--current">
		<span class="page-label">13 <em class="visibility--a11yHide">Current page</em></span>
	</li>
	<li class="pagination-page pagination-page--control">
		<span class="visibility--a11yHide">End of pages</span>
	</li>
</ul>
```

## Page item variants
A class of `pagination-page` is **required** for pagination list items. The following
classes are optional variants:

Class                        | Description
---------------------------- | ------------------------------------------------------------
`.pagination-page--current`  | used to indicate current page
`.pagination-page--control`  | used to indicate the page item as a "previous" or "next" control
*/

$_bpPagination: medium;

.pagination {
	@extend %list--reset;
	@extend %chunk;
	@extend %align--center;
	@include flexParent('row');
	@include justify-content(space-around);
}

.pagination-page {
	min-width: $media-s;

	// set even distribution of space for all items
	@include flex-grow(0);
	@include flex-shrink(0);

	// for vertical text alignment of `page-label`
	@include align-items(center);
	@include justify-content(center);

	// hide all items by default on small sizes;
	display: none;
	@include atMediaUp($_bpPagination) {
		@include display(flex);
	}
}

.pagination-page--current,
.pagination-page--control {
	// always show the current page
	// and prev/next controls
	@include display(flex);
}

.page-label {
	@extend %buttonPersonality;
	@include color-all($C_textSecondary);
	display: block;
	color: $C_textSecondary;
	border-radius: $space-2;
	padding: $space-half;
	min-width: $media-xs;

	&:hover,
	&:active {
		background: $C_lightGray;
	}
	.inverted & {
		@include color-all($C_textSecondaryInverted);
	}

	@include atMediaUp($_bpPagination) {
		.pagination-page--current & {
			color: $C_textPrimaryInverted;
			background: $C_link;
		}
	}
}


{'fraction_non_alphanumeric': 0.20600414078674947, 'fraction_numerical': 0.01081205429031516, 'mean_word_length': 4.2379518072289155, 'pattern_counts': {'":': 0, '<': 207, '<?xml version=': 0, '>': 207, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4651269', 'n_tokens_mistral': 3104, 'n_tokens_neox': 2954, 'n_words': 668}