/* --pagination-font-family --pagination-font-weight --pagination-line-height --pagination-margin-top --pagination-margin-bottom --pagination-justify-content --pagination-padding-y --pagination-padding-x --pagination-color --pagination-bg --pagination-border-width --pagination-border-color --pagination-border-radius --pagination-hover-color --pagination-hover-bg --pagination-hover-border-color --pagination-focus-color --pagination-focus-bg --pagination-active-color --pagination-active-bg --pagination-active-border-color --pagination-disabled-color --pagination-disabled-bg --pagination-disabled-border-color */ .pagination { font-family: var( --pagination-font-family, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' ); font-weight: var(--pagination-font-weight, 400); line-height: var(--pagination-line-height, 1.5); display: flex; padding-left: 0; margin-top: var(--pagination-margin-top, 0); margin-bottom: var(--pagination-margin-bottom, 0); list-style: none; justify-content: var( --pagination-justify-content, var(--pagination-justify-content-fb) ); } .pagination .page-link { position: relative; display: block; padding: var(--pagination-padding-y, 0.375rem) var(--pagination-padding-x, 0.75rem); font-size: var(--pagination-font-size, 1rem); color: var(--pagination-color, #0d6efd); text-decoration: none; background-color: var(--pagination-bg, #fff); border: var(--pagination-border-width, 1px) solid var(--pagination-border-color, #dee2e6); transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } @media (prefers-reduced-motion: reduce) { .pagination .page-link { transition: none; } } .pagination .page-link:hover { z-index: 2; color: var(--pagination-hover-color, #0a58ca); background-color: var(--pagination-hover-bg, #e9ecef); border-color: var( --pagination-hover-border-color, var(--pagination-border-color, #dee2e6) ); } .pagination .page-link:focus { z-index: 3; color: var(--pagination-focus-color, var(--pagination-hover-color, #0a58ca)); background-color: var(--pagination-focus-bg, var(--pagination-hover-bg, #e9ecef)); outline: 0; box-shadow: var( --pagination-focus-box-shadow, 0 0 0 0.25rem rgba(13, 110, 253, 0.25) ); } .pagination .active > .page-link { z-index: 3; color: var(--pagination-active-color, #fff); background-color: var(--pagination-active-bg, var(--pagination-color, #0d6efd)); border-color: var( --pagination-active-border-color, var(--pagination-color, #0d6efd) ); } .pagination .disabled > .page-link { color: var(--pagination-disabled-color, #6c757d); pointer-events: none; background-color: var(--pagination-disabled-bg, var(--pagination-bg, #fff)); border-color: var( --pagination-disabled-border-color, var(--pagination-border-color, #dee2e6) ); } .pagination .page-item:not(:first-child) .page-link { margin-left: -1px; } .pagination .page-item:first-child .page-link { border-top-left-radius: var(--pagination-border-radius, 0.375rem); border-bottom-left-radius: var(--pagination-border-radius, 0.375rem); } .pagination .page-item:last-child .page-link { border-top-right-radius: var(--pagination-border-radius, 0.375rem); border-bottom-right-radius: var(--pagination-border-radius, 0.375rem); } .pagination.pagination-lg { --pagination-padding-x: 1.5rem; --pagination-padding-y: 0.75rem; --pagination-font-size: 1.25rem; --pagination-border-radius: 0.5rem; } .pagination.pagination-sm { --pagination-padding-x: 0.5rem; --pagination-padding-y: 0.25rem; --pagination-font-size: 0.875rem; --pagination-border-radius: 0.25rem; } .pagination.justify-content-start { --pagination-justify-content-fb: flex-start; } .pagination.justify-content-end { --pagination-justify-content-fb: flex-end; } .pagination.justify-content-center { --pagination-justify-content-fb: center; }