beta-parity-react/ui/Pagination/index.css

Beta Parity React Components

:root,[data-scheme=light]{--par-color-text-primary:var(--par-gray-950);--par-color-text-primary-disabled:rgb(from var(--par-gray-950) r g b/0.5);--par-color-text-primary-inverse:var(--par-white);--par-color-text-secondary:var(--par-gray-700);--par-color-text-secondary-inverse:var(--par-gray-200);--par-color-text-helper-neutral:var(--par-gray-550);--par-color-text-helper-neutral-disabled:rgb(from var(--par-gray-550) r g b/0.5);--par-color-text-helper-adverse:var(--par-red-550);--par-color-text-helper-cautionary:var(--par-yellow-550);--par-color-text-helper-affirmative:var(--par-green-550);--par-color-text-helper-info:var(--par-blue-550);--par-color-text-surface-item-enabled:var(--par-color-text-primary);--par-color-text-surface-item-neutral-subtle-selected:var(--par-color-text-primary);--par-color-text-surface-item-neutral-pronounced-selected:var(--par-white);--par-color-text-surface-item-accent-subtle-selected:var(--par-color-text-primary);--par-color-text-surface-item-accent-pronounced-selected:var(--par-white);--par-color-text-surface-item-disabled:var(--par-color-text-primary-disabled);--par-color-text-field-placeholder:var(--par-gray-600);--par-color-text-field-alpha-placeholder:rgb(from var(--par-gray-600) r g b/0.5);--par-color-text-field-alternative-placeholder:var(--par-gray-550);--par-color-text-field-filled:var(--par-color-text-primary);--par-color-text-field-label:var(--par-color-text-secondary);--par-color-text-field-disabled:rgb(from var(--par-color-text-field-placeholder) r g b/0.5);--par-color-text-field-readonly:var(--par-color-text-primary);--par-color-text-field-invalid:var(--par-color-text-primary);--par-color-text-button:var(--par-gray-550);--par-color-icon-field-button-enabled:var(--par-gray-500);--par-color-icon-field-button-hovered:var(--par-gray-600);--par-color-icon-field-button-pressed:var(--par-gray-700);--par-color-icon-field-button-disabled:rgb(from var(--par-gray-500) r g b/0.5)}[data-scheme=dark]{--par-color-text-primary:var(--par-white);--par-color-text-primary-disabled:rgb(from var(--par-white) r g b/0.5);--par-color-text-primary-inverse:var(--par-gray-950);--par-color-text-secondary:var(--par-gray-200);--par-color-text-secondary-inverse:var(--par-gray-700);--par-color-text-helper-neutral:var(--par-gray-200);--par-color-text-helper-neutral-disabled:rgb(from var(--par-gray-200) r g b/0.5);--par-color-text-helper-adverse:var(--par-red-200);--par-color-text-helper-cautionary:var(--par-yellow-200);--par-color-text-helper-affirmative:var(--par-green-200);--par-color-text-helper-info:var(--par-blue-200);--par-color-text-surface-item-enabled:var(--par-color-text-primary);--par-color-text-surface-item-neutral-subtle-selected:var(--par-color-text-primary);--par-color-text-surface-item-neutral-pronounced-selected:var(--par-gray-950);--par-color-text-surface-item-accent-subtle-selected:var(--par-accent-200);--par-color-text-surface-item-accent-pronounced-selected:var(--par-white);--par-color-text-surface-item-disabled:var(--par-color-text-primary-disabled);--par-color-text-field-placeholder:var(--par-gray-200);--par-color-text-field-alpha-placeholder:rgb(from var(--par-gray-200) r g b/0.5);--par-color-text-field-alternative-placeholder:var(--par-gray-200);--par-color-text-field-filled:var(--par-color-text-primary);--par-color-text-field-label:var(--par-color-text-secondary);--par-color-text-field-disabled:rgb(from var(--par-color-text-field-placeholder) r g b/0.5);--par-color-text-field-readonly:var(--par-color-text-primary);--par-color-text-field-invalid:var(--par-color-text-primary);--par-color-text-button:var(--par-gray-200);--par-color-icon-field-button-enabled:var(--par-gray-200);--par-color-icon-field-button-hovered:var(--par-gray-100);--par-color-icon-field-button-pressed:var(--par-gray-100);--par-color-icon-field-button-disabled:rgb(from var(--par-gray-200) r g b/0.5)}:root,[data-scheme=light]{--par-color-bg:var(--par-white);--par-color-bg-alternative:var(--par-gray-25);--par-color-bg-surface:var(--par-gray-25);--par-color-bg-surface-inverse:var(--par-gray-950);--par-color-bg-surface-alternative:var(--par-white);--par-color-bg-surface-indicator-neutral:var(--par-neutral-500);--par-color-bg-surface-indicator-accent:var(--par-accent-500);--par-color-bg-surface-item-enabled:var(--par-transparent);--par-color-bg-surface-item-hovered:rgb(from var(--par-gray-100) r g b/0.5);--par-color-bg-surface-item-neutral-subtle-selected:var(--par-neutral-100);--par-color-bg-surface-item-neutral-subtle-selected-hovered:var(--par-neutral-200);--par-color-bg-surface-item-neutral-pronounced-selected:var(--par-neutral-900);--par-color-bg-surface-item-neutral-pronounced-selected-hovered:var(--par-neutral-800);--par-color-bg-surface-item-accent-subtle-selected:var(--par-accent-100);--par-color-bg-surface-item-accent-subtle-selected-hovered:var(--par-accent-200);--par-color-bg-surface-item-accent-pronounced-selected:var(--par-accent-500);--par-color-bg-surface-item-accent-pronounced-selected-hovered:var(--par-accent-600);--par-color-bg-field-enabled:var(--par-gray-25);--par-color-bg-field-alternative-enabled:var(--par-white);--par-color-bg-field-hovered:var(--par-gray-50);--par-color-bg-field-alternative-hovered:var(--par-gray-50);--par-color-bg-field-disabled:rgb(from var(--par-gray-25) r g b/0.5);--par-color-bg-field-alternative-disabled:rgb(from var(--par-white) r g b/0.5);--par-color-bg-field-readonly:var(--par-gray-50);--par-color-bg-field-invalid:var(--par-red-50);--par-color-bg-field-button-enabled:var(--par-transparent);--par-color-bg-field-button-hovered:rgb(from var(--par-gray-200) r g b/0.5);--par-color-bg-field-button-pressed:rgb(from var(--par-gray-300) r g b/0.5);--par-color-bg-field-button-disabled:var(--par-transparent)}[data-scheme=dark]{--par-color-bg:var(--par-gray-950);--par-color-bg-alternative:var(--par-gray-900);--par-color-bg-surface:var(--par-gray-900);--par-color-bg-surface-inverse:var(--par-white);--par-color-bg-surface-alternative:var(--par-gray-800);--par-color-bg-surface-indicator-neutral:var(--par-neutral-500);--par-color-bg-surface-indicator-accent:var(--par-accent-500);--par-color-bg-surface-item-enabled:var(--par-transparent);--par-color-bg-surface-item-hovered:rgb(from var(--par-gray-700) r g b/0.5);--par-color-bg-surface-item-neutral-subtle-selected:rgb(from var(--par-gray-600) r g b/0.5);--par-color-bg-surface-item-neutral-subtle-selected-hovered:rgb(from var(--par-gray-500) r g b/0.5);--par-color-bg-surface-item-neutral-pronounced-selected:var(--par-gray-100);--par-color-bg-surface-item-neutral-pronounced-selected-hovered:var(--par-gray-200);--par-color-bg-surface-item-accent-subtle-selected:rgb(from var(--par-gray-600) r g b/0.5);--par-color-bg-surface-item-accent-subtle-selected-hovered:rgb(from var(--par-gray-500) r g b/0.5);--par-color-bg-surface-item-accent-pronounced-selected:var(--par-accent-500);--par-color-bg-surface-item-accent-pronounced-selected-hovered:var(--par-accent-600);--par-color-bg-field-enabled:var(--par-gray-900);--par-color-bg-field-alternative-enabled:var(--par-gray-800);--par-color-bg-field-hovered:var(--par-gray-800);--par-color-bg-field-alternative-hovered:var(--par-gray-700);--par-color-bg-field-disabled:rgb(from var(--par-gray-900) r g b/0.5);--par-color-bg-field-alternative-disabled:rgb(from var(--par-gray-800) r g b/0.5);--par-color-bg-field-readonly:var(--par-gray-800);--par-color-bg-field-invalid:var(--par-red-900);--par-color-bg-field-button-enabled:var(--par-transparent);--par-color-bg-field-button-hovered:rgb(from var(--par-gray-700) r g b/0.5);--par-color-bg-field-button-pressed:rgb(from var(--par-gray-600) r g b/0.5);--par-color-bg-field-button-disabled:var(--par-transparent)}:root,[data-scheme=light]{--par-color-focus-ring:var(--par-black);--par-color-border-surface:var(--par-gray-200);--par-color-border-surface-inverse:var(--par-gray-600);--par-color-border-field-enabled:var(--par-gray-200);--par-color-border-field-alpha-enabled:rgb(from var(--par-gray-200) r g b/0.5);--par-color-border-field-hovered:var(--par-gray-300);--par-color-border-field-readonly:var(--par-color-border-field-enabled);--par-color-border-field-invalid:var(--par-red-500);--par-color-border-field-disabled:rgb(from var(--par-color-border-field-enabled) r g b/0.5);--par-color-border-field-focused:var(--par-color-focus-ring);--par-outlined-surface-item-focused:var(--par-color-focus-ring)}[data-scheme=dark]{--par-color-focus-ring:var(--par-white);--par-color-border-surface:var(--par-gray-600);--par-color-border-surface-inverse:var(--par-gray-200);--par-color-border-field-enabled:var(--par-gray-600);--par-color-border-field-alpha-enabled:rgb(from var(--par-gray-600) r g b/0.5);--par-color-border-field-hovered:var(--par-gray-500);--par-color-border-field-readonly:var(--par-color-border-field-enabled);--par-color-border-field-invalid:var(--par-red-200);--par-color-border-field-disabled:rgb(from var(--par-color-border-field-enabled) r g b/0.5);--par-color-border-field-focused:var(--par-color-focus-ring);--par-outlined-surface-item-focused:var(--par-color-focus-ring)}.pagination{align-items:center;display:flex;gap:.25rem;width:-moz-fit-content;width:fit-content}.pagination.bordered{border-color:var(--par-color-border-pagination-item);border-radius:.375rem;border-width:1px;gap:0}.pagination li{height:2.5rem}.pagination li,.pagination-item{align-items:center;display:flex;position:relative;width:-moz-fit-content;width:fit-content}.pagination-item{background-color:var(--par-color-bg-pagination-item-enabled);border-radius:.25rem;color:var(--par-color-text-pagination-item-page-enabled);cursor:pointer;font-family:IBM Plex Mono,Menlo,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier,monospace;font-size:.875rem;font-weight:400;height:100%;justify-content:center;letter-spacing:.02em;line-height:1.25rem;min-width:2.5rem;padding-left:.25rem;padding-right:.25rem;transition-duration:.2s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:cubic-bezier(0,0,.2,1)}.pagination-item:focus-visible{z-index:10}.pagination.bordered .pagination-item{border-radius:0}.pagination.bordered li:after{background-color:var(--par-color-border-pagination-item);display:inline-block;height:100%;width:1px;--tw-content:"";content:var(--tw-content)}.pagination.bordered li:last-child:after{display:none}.pagination.bordered li:first-child .pagination-item{border-bottom-left-radius:.375rem;border-top-left-radius:.375rem}.pagination.bordered li:last-child .pagination-item{border-bottom-right-radius:.375rem;border-top-right-radius:.375rem}.pagination-page-number{position:relative}.pagination-page-number:before{bottom:0;height:.125rem;left:50%;position:absolute;transform-origin:center;width:0;--tw-translate-x:-50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transition-duration:.2s;transition-property:width;transition-timing-function:cubic-bezier(.4,0,.2,1);--tw-content:"";content:var(--tw-content)}.pagination-item.active .pagination-page-number{font-weight:600}.pagination-item.active .pagination-page-number:before{content:var(--tw-content);width:100%}.pagination.neutral .pagination-item.active{background-color:var(--par-color-bg-pagination-item-selected-neutral);color:var(--par-color-text-pagination-item-page-selected-neutral)}.pagination.neutral .pagination-item.active .pagination-page-number:before{background-color:var(--par-color-text-pagination-item-page-selected-neutral)}.pagination.accent .pagination-item.active{background-color:var(--par-color-bg-pagination-item-selected-accent);color:var(--par-color-text-pagination-item-page-selected-accent)}.pagination.accent .pagination-item.active .pagination-page-number:before{background-color:var(--par-color-text-pagination-item-page-selected-accent)}.pagination-item:hover{background-color:var(--par-color-bg-pagination-item-hovered);color:var(--par-color-text-pagination-item-page-hovered)}.pagination-item:disabled{background-color:var(--par-color-bg-pagination-item-disabled)!important;color:var(--par-color-text-pagination-item-page-disabled)!important;cursor:not-allowed}.pagination-item.pagination-end:disabled,.pagination-item.pagination-next:disabled,.pagination-item.pagination-prev:disabled,.pagination-item.pagination-start:disabled{background-color:var(--par-color-bg-pagination-item-disabled)!important;color:var(--par-color-text-pagination-item-control-disabled)!important}.pagination-item.pagination-end,.pagination-item.pagination-next,.pagination-item.pagination-prev,.pagination-item.pagination-start{color:var(--par-color-text-pagination-item-control-enabled)}.pagination-separator{background-color:var(--par-color-border-pagination-item);height:2.5rem;width:1px}.pagination-menu{max-height:14rem;width:-moz-fit-content!important;width:fit-content!important}.pagination-item.menu-item{min-width:2rem!important}.pagination-item.menu-item:hover{background-color:var(--par-color-bg-surface-item-hovered)}