public-ui-kolibri

@use '../mixins/to-rem' as *; @layer kol-theme-component { .kol-tabs { display: grid; grid-template-columns: var(--grid-template-columns); grid-template-rows: var(--grid-template-rows); &--align-right { --display: grid; --grid-template-columns: 1fr auto; --button-group-display: grid; --button-group-order: 1; } &--align-left { --display: grid; --grid-template-columns: auto 1fr; --button-group-order: 0; } &--align-bottom { --display: flex; --grid-template-rows: 1fr auto; --button-group-gap: #{to-rem(32)}; --button-group-order: 1; } &--align-top { --display: flex; --grid-template-rows: auto 1fr; --button-group-gap: #{to-rem(32)}; --button-group-order: 0; } &__button-group { display: var(--display); gap: var(--button-group-gap); order: var(--button-group-order); flex-wrap: wrap; } .kol-button { color: var(--color-subtle); background-color: transparent; border-radius: var(--border-radius); min-width: var(--a11y-min-size); min-height: var(--a11y-min-size); padding: 0; font-size: to-rem(18); font-weight: 700; line-height: 1.2; border: none; font-style: normal; &:hover { color: var(--color-primary); } &.primary, &.selected { color: var(--color-primary); } &:not(&.selected) { .kol-span__container { padding-bottom: 0.25em; } } &.selected { .kol-span__container { border-bottom: 0.25em solid; } } .kol-span__container { gap: to-rem(8); } } &__content { padding: 0.25em 0; } &__panel { height: 100%; } .kol-button-wc { width: 100%; } } }