public-ui-kolibri

@use '../../mixins/to-rem' as *; @mixin kol-pagination-styles { .kol-table-stateful { &__pagination, &__pagination-wrapper { @media (min-width: 1024px) { gap: to-rem(16); } } } .kol-pagination { .kol-button { --kolibri-spacing: #{to-rem(4)}; border-radius: 4px; &:focus { outline: none; } &:focus-visible .kol-button__text { outline: 2px solid var(--color-black); outline-offset: -4px; } &:not(:disabled):active .kol-button__text, &:not(:disabled):hover .kol-button__text { background-color: #fc0; box-shadow: 0 to-rem(2) to-rem(4) rgb(9 49 142 / 8%), 0 0 to-rem(10) rgb(9 49 142 / 4%), 0 to-rem(4) to-rem(5) rgb(9 49 142 / 4%), 0 to-rem(-4) to-rem(4) rgb(9 49 142 / 4%); border-color: #fc0; } &:disabled .kol-button__text { opacity: 0.5; cursor: not-allowed; } &__text { color: #171a22; background-color: #fc0; border-radius: 4px; min-width: var(--a11y-min-size); min-height: var(--a11y-min-size); padding: to-rem(12); font: normal normal 400 to-rem(16) / to-rem(20) Arial, sans-serif; } } &__button--selected .kol-button { &__text { opacity: 1; color: var(--color-white); background-color: var(--color-blue); border-color: var(--color-blue); font-weight: bold; text-decoration: underline; } } } }