public-ui-kolibri

@use '../mixins/to-rem' as *; @use './focus-outline' as *; @mixin kol-pagination-styles { .kol-table-stateful { &__pagination, &__pagination-wrapper { @media (min-width: 1024px) { gap: to-rem(16); } } } .kol-pagination { .kol-button { &:focus .kol-button__text { @include focus-outline; } &:is(:active, :hover):not(:disabled) .kol-button__text { color: var(--color-light); background-color: var(--color-primary-variant); box-shadow: 0 2px 8px 2px rgb(8, 35, 48, 0.24); border-color: var(--color-primary-variant); } &:active .kol-button__text { color: var(--color-light); outline: none; } &__text { color: var(--color-primary); background-color: var(--color-light); border-radius: var(--border-radius); min-width: var(--a11y-min-size); min-height: var(--a11y-min-size); padding: to-rem(8); font-weight: 700; border: 1px solid var(--color-primary); text-align: center; transition-duration: 0.5s; transition-property: background-color, color, border-color; } } &__button--selected .kol-button { opacity: 1; &__text { color: var(--color-light); background-color: var(--color-primary); border: 0; } } } }