public-ui-kolibri

@use '../../mixins/to-rem' as *; @mixin kol-button($block-classname) { .#{$block-classname} { $root: &; --kolibri-spacing: #{to-rem(4)}; --text-focus-outline-color: var(--color-white); border-radius: 4px; text-decoration: none; appearance: none; &--primary { --text-background-color: #0e47cb; --text-color: #fff; --text-focus-outline-color: #fff; &:not(:disabled):hover { --text-background-color: #3e6cd5; } } &--secondary { --text-background-color: #fff; --text-color: #0e47cb; --text-border-color: #0e47cb; --text-focus-outline-color: #fff; &:not(:disabled):hover { --text-color: #0e47cb; } } &--normal { --text-background-color: #fc0; --text-color: #171a22; --text-focus-outline-color: #000; --text-border-color: #fc0; &:not(:disabled):hover { --text-background-color: #fc0; } } &--danger { --text-background-color: var(--color-red); --text-border-color: var(--color-red); --text-color: var(--color-white); &:not(:disabled):hover { --text-background-color: var(--color-red); --text-border-color: var(--color-red); } } &--ghost { --text-color: #0e47cb; --text-focus-outline-color: #0e47cb; &:not(:disabled):hover { --text-color: #0e47cb; } } &:focus { outline: none; } &__text { color: var(--text-color); background-color: var(--text-background-color); border-color: var(--text-border-color); border-radius: 4px; min-width: var(--a11y-min-size); min-height: var(--a11y-min-size); margin: 0; padding: to-rem(12); font: normal normal 400 to-rem(16) / to-rem(20) arial, sans-serif; font-weight: 400; line-height: 1.2; &:active, &:not(:disabled):hover { 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%); } @at-root #{$root}--secondary & { padding: calc(to-rem(12) - to-rem(2)) calc(to-rem(16) - to-rem(2)); border: 2px solid #0e47cb; } @at-root #{$root}--secondary.button:focus-visible & { box-shadow: inset 0 0 0 to-rem(4) #0e47cb; } @at-root #{$root}:focus-visible & { outline: var(--text-focus-outline-color) solid to-rem(2); outline-offset: -4px; } @at-root #{$root}--hide-label & { .kol-span__label { display: none; } } } } }