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: '*';
				}
			}
		}
	}
}