.pagy-gem-version-7 { .pagy-nav, .pagy-nav-js, .pagy-combo-nav-js { @apply relative z-0 flex; } .pagy-nav.pagination, .pagy-nav-js.pagination, .pagy-combo-nav-js.pagination { @apply space-x-2; } .pagy-nav .page a{ @apply block; } .pagy-nav .page a, .pagy-nav .page.active a, .pagy-nav .page.prev.disabled a, .pagy-nav .page.next.disabled a, .pagy-nav-js .page a, .pagy-combo-nav-js .page a, .pagy-combo-nav-js .pagy-combo-input a { @apply rounded px-3 py-1 text-sm text-gray-500 font-semibold bg-white shadow-md border border-gray-300; &:hover{ @apply bg-gray-150; } &:active{ @apply bg-gray-200; } } .pagy-nav .page.prev.disabled a, .pagy-nav-js .page.prev.disabled a, .pagy-combo-nav-js .page.prev.disabled a, .pagy-nav .page.next.disabled a, .pagy-nav-js .page.next.disabled a, .pagy-combo-nav-js .page.next.disabled a { @apply text-gray-300 cursor-default; &:hover { @apply text-gray-300 bg-white; } &:active { @apply text-gray-300 bg-white; } } .pagy-nav .page.active a, .pagy-nav-js .page.active a { @apply text-white cursor-default bg-gray-500 border-gray-500; &:hover { @apply text-white bg-gray-500; } &:active { @apply bg-gray-500 text-white; } } } .pagy-gem-version-8-or-more { .pagy.nav { @apply relative z-0 flex space-x-2; a.gap { @apply text-gray-500; } & a:not(.gap) { @apply block rounded px-3 py-1 text-sm text-gray-500 font-semibold bg-white shadow-md border border-gray-300; &:hover{ @apply bg-gray-150; } &:active{ @apply bg-gray-200; } &.current { @apply text-white cursor-default bg-gray-500 border-gray-500; &:hover { @apply text-white bg-gray-500; } &:active { @apply bg-gray-500 text-white; } } &[aria-disabled="true"]:not(.current) { @apply bg-gray-100 text-gray-300 cursor-default; } } } }