/* --------------------------------------------------------*/

/* @group @variables */

[class*="m-pager"] {
--pager-icon-size: .75rem;
--pager-border-color: var(--color-gainsboro);
--icon-next: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="hsl(0, 0%, 100%)" d="M6 25a1 1 0 0 1-.647-1.763l12.099-10.236L5.354 2.765a1.001 1.001 0 0 1 1.292-1.528l13 11a1 1 0 0 1 0 1.528l-13 11A1.002 1.002 0 0 1 6 25z"/></svg>');
--icon-prev: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="hsl(0, 0%, 100%)" d="M19 25c-.228 0-.458-.078-.646-.236l-13-11a1.001 1.001 0 0 1 0-1.528l13-11a1 1 0 0 1 1.292 1.527L7.548 13l12.098 10.236A1 1 0 0 1 19 25z"/></svg>');
}

/* @end @variables */

/* @group @m-pager-secondary */

[class*="m-pager"] {
box-sizing: border-box;
display: grid;
grid-template-columns: 1fr 1px 1fr;
min-height: calc(.375rem * 10);
border: solid var(--pager-border-color);
border-width: 1px 0;
}

[class*="m-pager"]:before {
grid-column: 2;
grid-row: 1;
}

[class*="a-pager-link-prev"] {
grid-column: 1;
grid-row: 1;
}

[class*="a-pager-link-next"] {
grid-column: 3;
grid-row: 1;
}

[class*="m-pager"]:before {
content: '';
background-color: var(--pager-border-color);
}

/* @end @m-pager-secondary */

/* --------------------------------------------------------*/

/* @group @a-pager-link */

[class*="a-pager-link"] {
display: grid;
place-items: center center;
grid-template-columns: var(--pager-icon-size) 1fr;
gap: .75rem;
padding: calc(.75rem - 1px);
color: var(--color-text);
text-align: center;
transition: var(--link-transition);
}

[class*="a-pager-link"]:hover,
[class*="a-pager-link"]:focus {
color: var(--color-brand-action);
}

[class*="a-pager-link"]:active {
color: var(--color-brand-active);
}

[class*="a-pager-link-next"] {
direction: rtl;
}

/* @end @a-pager-link */

/* @group @a-pager-icon */

[class*="a-pager-icon"] {
display: flex;
place-items: center center;
width: var(--pager-icon-size);
height: var(--pager-icon-size);
background-color: currentColor;
-webkit-mask-size: var(--pager-icon-size);
mask-size: var(--pager-icon-size);
}

[class*="a-pager-icon-prev"] {
-webkit-mask-image: var(--icon-prev);
mask-image: var(--icon-prev);
}

[class*="a-pager-icon-next"] {
-webkit-mask-image: var(--icon-next);
mask-image: var(--icon-next);
}

/* @end @a-pager-icon */