@cbpds/web-components/dist/collection/components/cbp-pagination/cbp-pagination.css

Web components for the CBP Design System.

/* 
 * Caution: "global styles" get injected into every component and can cause file size bloat.
 * These should only include SASS variables and mixins that are not written out to CSS directly
 */
/*
* @prop 
*/
:root {
  --cbp-pagination-color: var(--cbp-color-text-darkest);
  --cbp-pagination-color-dark: var(--cbp-color-text-lightest);
}

/* 
 * Dark Mode - display dark design based on mode or context
 */
[data-cbp-theme=light] cbp-pagination[context*=dark],
[data-cbp-theme=dark] cbp-pagination:not([context=dark-inverts]):not([context=light-always]) {
  --cbp-pagination-color: var(--cbp-pagination-color-dark);
}

cbp-pagination {
  --cbp-form-field-margin-bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--cbp-space-2x);
  color: var(--cbp-pagination-color);
}
cbp-pagination [slot=cbp-pagination-items-per-page] label,
cbp-pagination [slot=cbp-pagination-pages] label {
  display: none;
}
cbp-pagination .cbp-pagination-showing-text {
  flex-grow: 1;
  font-style: italic;
}
cbp-pagination [slot=cbp-pagination-pages] cbp-button {
  --cbp-button-color-bg: var(--cbp-form-field-color-border);
  --cbp-button-color-bg-dark: var(--cbp-form-field-color-border-dark);
}

@media (max-width: 30rem) {
  cbp-pagination [slot=cbp-pagination-items-per-page] {
    display: none;
  }
}