public-ui-kolibri

@use '../../mixins/to-rem' as *; @layer kol-theme-component { :host { --kolibri-spacing: #{to-rem(4)}; } .kol-tabs { &__button-group { margin-bottom: to-rem(-1); border-bottom: 1px solid var(--color-grey-25); } .kol-button { margin-bottom: to-rem(-1); border: none; &:hover:not(:disabled) { .kol-span { color: var(--color-blue-130); } } &:focus { .kol-span { outline: var(--color-blue-130) solid to-rem(2); } } &.selected { .kol-span { color: var(--color-blue); box-shadow: 0 -3px var(--color-blue); border-color: var(--color-grey-25); border-style: solid; border-top-color: var(--color-blue); border-bottom-color: white; border-width: 1px; font-weight: var(--font-weight-bold); } } .kol-span { min-width: var(--a11y-min-size); min-height: var(--a11y-min-size); padding: to-rem(8); } } } }