public-ui-kolibri

@use '../../mixins/to-rem' as *; @use '../mixins/pagination-mixin' as *; @layer kol-theme-component { @include kol-pagination-styles; .kol-button { --kolibri-spacing: #{to-rem(4)}; border-radius: 4px; &:focus { outline: none; } } .kol-button__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; .kol-button:focus-visible & { outline: 2px solid var(--color-black); outline-offset: -4px; } .kol-button:not(:disabled):active &, .kol-button:not(:disabled):hover & { 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; } .kol-pagination__button--selected & { opacity: 1; color: var(--color-white); background-color: var(--color-blue); border-color: var(--color-blue); font-weight: bold; text-decoration: underline; } .kol-button:disabled & { opacity: 0.5; cursor: not-allowed; } } }