@trimble-oss/moduswebcomponents/collection/components/modus-wc-pagination/modus-wc-pagination.css

Modus Web Components is a modern, accessible UI library built with Stencil JS that provides reusable web components following Trimble's Modus design system. This updated version focuses on improved flexibility, enhanced theming options, comprehensive cust

/**
* This component uses Tailwind CSS and DaisyUI.
* Only add styles here that should not be applied by Tailwind, Daisy, or the theme.
*/
modus-wc-pagination .modus-wc-pagination {
  background-color: var(--modus-wc-color-base-100);
  color: var(--modus-wc-color-base-content);
}
modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn {
  background-color: var(--modus-wc-color-base-100);
  border-color: transparent;
}
modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn:hover {
  background-color: var(--modus-wc-color-base-100);
  color: var(--modus-wc-color-primary);
}
modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn:focus {
  background-color: var(--modus-wc-color-base-200);
  color: var(--modus-wc-color-primary);
}
modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn:active {
  background-color: var(--modus-wc-color-primary-pale);
  color: var(--modus-wc-color-primary);
}
modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn-selected {
  background-color: var(--modus-wc-color-primary-pale);
  color: var(--modus-wc-color-primary);
}
modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn-active {
  background-color: var(--modus-wc-color-primary-pale);
  color: var(--modus-wc-color-primary);
}
modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn-open {
  background-color: var(--modus-wc-color-primary-pale);
  color: var(--modus-wc-color-primary);
}
modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn.selected {
  background-color: var(--modus-wc-color-primary-pale);
  color: var(--modus-wc-color-primary);
}
modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn.active {
  background-color: var(--modus-wc-color-primary-pale);
  color: var(--modus-wc-color-primary);
}
modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn-disabled:hover {
  background-color: inherit;
}
modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn--active {
  background-color: var(--modus-wc-color-primary-pale);
  color: var(--modus-wc-color-primary);
}
modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn--selected {
  background-color: var(--modus-wc-color-primary-pale);
  color: var(--modus-wc-color-primary);
}
modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn:checked {
  background-color: var(--modus-wc-color-primary);
  color: var(--modus-wc-color-primary-content);
}
modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn.checked {
  background-color: var(--modus-wc-color-primary);
  color: var(--modus-wc-color-primary-content);
}
modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn-checked {
  background-color: var(--modus-wc-color-primary);
  color: var(--modus-wc-color-primary-content);
}
modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn.pressed {
  background-color: var(--modus-wc-color-primary);
  color: var(--modus-wc-color-primary-content);
}
modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn-pressed {
  background-color: var(--modus-wc-color-primary);
  color: var(--modus-wc-color-primary-content);
}
modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn[aria-pressed=true] {
  background-color: var(--modus-wc-color-primary);
  color: var(--modus-wc-color-primary-content);
}
modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn.modus-wc-btn-sm .modus-wc-pagination-icon {
  height: var(--modus-wc-line-height-sm);
  width: var(--modus-wc-line-height-sm);
}
modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn.modus-wc-btn-md .modus-wc-pagination-icon {
  height: var(--modus-wc-ling-height-md);
  width: var(--modus-wc-line-height-md);
}
modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn.modus-wc-btn-lg .modus-wc-pagination-icon {
  height: var(--modus-wc-line-height-lg);
  width: var(--modus-wc-line-height-lg);
}
modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-button-text {
  padding: calc(var(--modus-wc-spacing-sm) - 2px);
  width: auto !important;
}
modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn:not(:disabled) {
  background-color: var(--modus-wc-color-base-100);
  color: var(--modus-wc-color-base-content);
}
modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn:not(:disabled).modus-wc-btn-active {
  background-color: var(--modus-wc-color-primary-pale);
  color: var(--modus-wc-color-primary);
}
modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn:not(:disabled):hover:not(.modus-wc-btn-active) {
  background-color: var(--modus-wc-color-base-300);
  border-color: transparent;
}

[data-theme=modus-classic-dark] modus-wc-pagination .modus-wc-pagination,
[data-theme=modus-classic-light] modus-wc-pagination .modus-wc-pagination {
  background-color: transparent;
}
[data-theme=modus-classic-dark] modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn,
[data-theme=modus-classic-light] modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn {
  background-color: transparent;
  border: none;
  border-radius: var(--modus-wc-border-radius-md) !important;
  box-shadow: none;
}
[data-theme=modus-classic-dark] modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn.modus-wc-btn-sm,
[data-theme=modus-classic-light] modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn.modus-wc-btn-sm {
  height: var(--modus-wc-line-height-md);
  max-height: var(--modus-wc-line-height-md);
  min-height: var(--modus-wc-line-height-md);
  width: var(--modus-wc-line-height-md);
}
[data-theme=modus-classic-dark] modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn.modus-wc-btn-md,
[data-theme=modus-classic-light] modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn.modus-wc-btn-md {
  height: var(--modus-wc-line-height-lg);
  max-height: var(--modus-wc-line-height-lg);
  min-height: var(--modus-wc-line-height-lg);
  width: var(--modus-wc-line-height-lg);
}
[data-theme=modus-classic-dark] modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn.modus-wc-btn-lg,
[data-theme=modus-classic-light] modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn.modus-wc-btn-lg {
  height: var(--modus-wc-line-height-xl);
  max-height: var(--modus-wc-line-height-xl);
  min-height: var(--modus-wc-line-height-xl);
  width: var(--modus-wc-line-height-xl);
}

[data-theme=modus-classic-light] modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn:not(:disabled) {
  color: var(--modus-wc-color-trimble-gray);
}
[data-theme=modus-classic-light] modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn:not(:disabled).modus-wc-btn-active {
  background-color: var(--modus-wc-color-blue-pale);
  color: var(--modus-wc-color-blue-light);
}
[data-theme=modus-classic-light] modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn:not(:disabled):hover:not(.modus-wc-btn-active) {
  background-color: var(--modus-wc-color-gray-0);
}

[data-theme=modus-classic-dark] modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn:not(:disabled) {
  color: var(--modus-wc-color-gray-2);
}
[data-theme=modus-classic-dark] modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn:not(:disabled).modus-wc-btn-active {
  background-color: var(--modus-wc-color-highlight-blue);
  color: var(--modus-wc-color-trimble-gray);
}
[data-theme=modus-classic-dark] modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn:not(:disabled):hover:not(.modus-wc-btn-active) {
  background-color: var(--modus-wc-color-gray-8);
}