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 { display: grid; .kol-button { background-color: none; outline: none; text-decoration: none; appearance: none; &__text { color: var(--color-black); background-color: var(--color-yellow); min-width: var(--a11y-min-size); min-height: var(--a11y-min-size); padding: 0.25em 0.75em; font-weight: var(--font-weight-bold); border: 2px solid var(--color-yellow); } &:not(:disabled):hover .kol-button__text { background-color: var(--color-yellow-120); border-color: var(--color-yellow-120); } &:focus .kol-button__text { outline: 2px solid var(--color-black); outline-offset: -4px; } &:disabled .kol-button__text { opacity: 0.5; cursor: not-allowed; } } &__button--selected .kol-button { &:not(:disabled) { opacity: 1; } &__text { opacity: 1; color: var(--color-white); background-color: var(--color-blue); border-color: var(--color-blue); text-decoration: underline; } } } }