public-ui-kolibri

@use '../mixins/button' as *; @use '../mixins/to-rem' as *; @layer kol-theme-component { .kol-split-button { border-color: var(--color-primary); border-style: solid; border-radius: var(--border-radius); min-width: var(--a11y-min-size); min-height: var(--a11y-min-size); border-width: var(--border-width); &__button .kol-button { // Temp-Fix Hover-effect on Button clipping border .kol-span { border-bottom-left-radius: var(--border-radius); border-top-left-radius: var(--border-radius); } } &__horizontal-line { background-color: var(--color-primary); border-radius: 2px; width: to-rem(1); } &__secondary-button { height: 100%; .kol-span { border-bottom-right-radius: var(--border-radius); border-top-right-radius: var(--border-radius); } } .kol-span { min-width: var(--a11y-min-size); min-height: var(--a11y-min-size); padding: to-rem(8) to-rem(14); font-weight: 700; text-align: center; transition-duration: 0.5s; transition-property: background-color, color, border-color; } .kol-popover__content { background-color: #fff; } @include kol-button('kol-button'); &__button { .kol-button__text { border-bottom-right-radius: 0; border-top-right-radius: 0; } } &__secondary-button { .kol-button__text { border-bottom-left-radius: 0; border-top-left-radius: 0; } } .kol-button { height: 100%; &__text { height: 100%; border: none; } } } }