:root {
  --pagination-gap: var(--space-2);
  --pagination-control-gap: var(--space-2);
  --pagination-control-padding: var(--space-2) var(--space-3);
  --pagination-control-radius: var(--radius-8);
  --pagination-control-font: var(--font-type-label-small);
  --pagination-control-background: var(--color-clear);
  --pagination-control-foreground: var(--color-foreground);
  --pagination-current-background: var(--color-selected);
  --pagination-hover-background: var(--color-neutral-hover);
  --pagination-disabled-foreground: var(--color-disabled-foreground);
  --pagination-gap-padding: var(--space-2) var(--space-4);
  --pagination-gap-font: var(--font-type-label-small);
  --pagination-icon-size: var(--space-4);
  --pagination-rtl-transform: rotate(var(--rotate-half));
  --pagination-focus-outline: var(--focus-width) solid var(--color-focus-ring);
  --pagination-focus-inset: calc(-1 * var(--focus-width));
}

.pagination__control {
  --pagination-background: var(--pagination-control-background);
  --pagination-foreground: var(--pagination-control-foreground);
}
.pagination__control[aria-current="page"] {
  --pagination-background: var(--pagination-current-background);
}
.pagination__control[aria-disabled="true"] {
  --pagination-background: var(--color-disabled);
  --pagination-foreground: var(--pagination-disabled-foreground);
}

.pagination { display: block; inline-size: fit-content; min-inline-size: 0; max-inline-size: 100%; margin: 0; }
.pagination__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pagination-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pagination__list > li { display: flex; min-inline-size: 0; max-inline-size: 100%; }
.pagination__control {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pagination-control-gap);
  padding: var(--pagination-control-padding);
  border-radius: var(--pagination-control-radius);
  background: var(--pagination-background);
  color: var(--pagination-foreground);
  font: var(--pagination-control-font);
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.pagination__control[href]:hover:not([aria-current="page"]) { background: var(--pagination-hover-background); }
.pagination__control:focus-visible {
  outline: var(--pagination-focus-outline);
  outline-offset: var(--pagination-focus-inset);
}
.pagination__control[aria-disabled="true"] { cursor: not-allowed; }
.pagination__icon { flex: none; inline-size: var(--pagination-icon-size); block-size: var(--pagination-icon-size); }
.pagination__icon:dir(rtl) { transform: var(--pagination-rtl-transform); }
.pagination__gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--pagination-gap-padding);
  color: var(--pagination-control-foreground);
  font: var(--pagination-gap-font);
}