@rhds/elements/elements/rh-pagination/rh-pagination-lightdom.css

Red Hat Design System Elements

rh-pagination {
  --_link-size: 50px;
  --_border-color: var(--rh-color-border-subtle-on-light, #c7c7c7);
  --_border-width: 0;
  --_border-radius: 0;
  --_border-accent-width: 0;
}

rh-pagination > ol {
  list-style-type: none;
  display: contents;
}

rh-pagination li {
  display: contents;
}

rh-pagination li > a {
  text-decoration: none;
  color: var(--rh-color-text-primary-on-light, #151515);
  font-weight: var(--rh-font-weight-body-text-medium, 500);
  outline: none;
  width: var(--_link-size);
  height: var(--_link-size);
  display: grid;
  place-content: center;
  background: var(--rh-color-surface-lighter, #f2f2f2);
  box-sizing: border-box;
}

rh-pagination li a[aria-current="page"] {
  background: var(--rh-color-surface-lightest, #ffffff);
  position: relative;

  --_border-color: #b8bbbe;
  --_border-width: 1px;
  --_border-accent-color: var(--rh-color-interactive-blue-darker, #0066cc);
}

rh-pagination li a {
  border-radius: var(--_border-radius, 0);
}

rh-pagination li a:after {
  display: var(--_border-display, none);
  content: "";
  position: absolute;
  width: var(--_link-size);
  height: var(--_link-size);
  border-width: var(--_border-width);
  border-style: solid;
  border-color: var(--_border-color);
  border-radius: var(--_border-radius);
  border-block-start-color: var(--_border-accent-color, var(--_border-color));
  border-block-start-width: var(--_border-accent-width);
}

rh-pagination li a:is(:focus, :focus-within, :focus-visible, :hover, [aria-current="page"]) {
  --_border-display: block;
}

rh-pagination li a:is(:focus, :focus-within, :focus-visible) {
  --_border-radius: var(--rh-border-radius-default, 3px);
  --_border-width: 2px;
  --_border-color:
    var(
        --rh-pagination-accent-color,
        var(--rh-color-interactive-blue-darker, #0066cc)
      );
  --_border-accent-width: 2px;
}

rh-pagination li a[aria-current="page"]:is(:focus, :focus-within, :focus-visible) {
  --_border-width: 2px;
  --_border-color: var(--rh-color-interactive-blue-darker, #0066cc);
  --_border-accent-width: 3px;
}

rh-pagination li a:hover {
  --_border-accent-color: var(--rh-color-gray-50, #707070);
}

rh-pagination li a:is([aria-current="page"], :hover) {
  --_border-accent-width: 3px;
}

rh-pagination li a[aria-current="page"]:is(:focus, :focus-within, :focus-visible):after {
  border-start-start-radius: 0;
  border-start-end-radius: 0;
}

rh-pagination[overflow="start"] li:nth-last-child(n+6):not(:first-child),
rh-pagination[overflow="end"] li:nth-child(n+6):not(:last-child),
rh-pagination[overflow="both"] li:nth-last-child(n+6):not(:first-child),
rh-pagination[overflow="both"] li:nth-child(n+6):not(:last-child) {
  display: none;
}

rh-pagination[overflow="both"] li:is(
[data-page="current"],
[data-page="previous"],
[data-page="next"]
) {
  display: contents !important;
}

rh-pagination:is([overflow="end"], [overflow="both"]) li:last-child,
rh-pagination:is([overflow="start"], [overflow="both"]) li:first-child {
  display: grid;
  grid-template-columns: var(--_link-size) var(--_link-size);
  gap: 4px;
}

rh-pagination:is([overflow="end"], [overflow="both"]) li:last-child:before,
rh-pagination:is([overflow="start"], [overflow="both"]) li:first-child:after {
  content: "…";
  width: var(--_link-size);
  height: var(--_link-size);
  padding-inline-end: 4px;
  display: flex;
  align-items: center;
  font-size: var(--rh-font-size-body-text-lg, 1.125rem);
  color: var(--rh-color-gray-40, #a3a3a3);
  justify-content: center;
  background: var(--rh-color-surface-lightest, #ffffff);
  align-self: start;
}