public-ui-kolibri

@use '../../mixins/to-rem' as *; @mixin kol-button($block-classname) { .#{$block-classname} { $root: &; outline: none; text-decoration: none; appearance: none; &:focus { outline: var(--text-focus-outline-color) solid to-rem(2); outline-offset: -4px; } --text-focus-outline-color: var(--color-black); &--primary { --text-background-color: var(--color-blue); --text-border-color: var(--color-blue); --text-color: var(--color-white); &:focus { --text-focus-outline-color: var(--color-white); } &:not(:disabled):hover { --text-background-color: var(--color-blue-130); --text-border-color: var(--color-blue-130); } } &--secondary { --text-background-color: var(--color-white); --text-border-color: var(--color-blue); --text-color: var(--color-blue); &:focus { --text-focus-outline-color: var(--color-blue); } &:not(:disabled):hover { --text-border-color: var(--color-blue-130); --text-color: var(--color-blue-130); } } &--normal { --text-background-color: var(--color-yellow); --text-border-color: var(--color-yellow); --text-color: var(--color-black); &:not(:disabled):hover { --text-background-color: var(--color-yellow-120); --text-border-color: var(--color-yellow-120); } } &--danger { --text-background-color: var(--color-red); --text-border-color: var(--color-red); --text-color: var(--color-white); &:focus { --text-focus-outline-color: var(--color-white); } &:not(:disabled):hover { --text-background-color: var(--color-red); --text-border-color: var(--color-red); } } &--ghost { --text-background-color: transparent; --text-border-color: transparent; --text-color: var(--color-blue); &:focus { --text-focus-outline-color: var(--color-blue); } &:not(:disabled):hover { --text-background-color: unset; --text-border-color: transparent; --text-color: var(--color-blue-130); } } &__text { color: var(--text-color); background-color: var(--text-background-color); border-color: var(--text-border-color); border-style: solid; border-radius: 0; min-width: var(--a11y-min-size); min-height: var(--a11y-min-size); margin: 0; padding: 0.25em 0.75em; border-width: 2px; font-weight: var(--font-weight-bold); line-height: 1.2; @at-root #{$root}--hide-label & { .kol-span__label { display: none; } } @at-root #{$root}--secondary:focus & { outline-offset: -6px; } @at-root #{$root}--ghost:focus & { outline-offset: -2px; } } } }