public-ui-kolibri

@mixin kol-field-control { .kol-field-control { $base: &; display: grid; min-height: var(--a11y-min-size); align-items: center; justify-content: left; grid-template-areas: 'input label'; grid-template-columns: auto 1fr; grid-template-rows: auto; &:has(&__hint) { grid-template-areas: 'input label' 'hint hint'; grid-template-columns: auto 1fr; grid-template-rows: auto auto; } &--label-align-left:not(&--hide-label) { grid-template-areas: 'label input'; grid-template-columns: 1fr auto; grid-template-rows: auto; &:has(.kol-field-control__hint) { grid-template-areas: 'label input' 'hint hint'; grid-template-columns: 1fr auto; grid-template-rows: auto auto; } } &__input { display: flex; min-height: var(--a11y-min-size); align-items: center; grid-area: input; } &__label { display: flex; min-height: var(--a11y-min-size); flex-grow: 1; align-items: center; cursor: pointer; grid-area: label; &--visually-hidden { height: 0; margin: 0; padding: 0; visibility: hidden; } &-text { &::after { content: ''; } } } &__tooltip { .span-label::after { content: ''; } } &__hint { grid-area: hint; } &--disabled & { &__label { opacity: 0.5; cursor: not-allowed; } } &--required & { &__label-text { &::after { content: '*'; } } &__tooltip { .span-label::after { content: '*'; } } } } }