@use "@wordpress/base-styles/colors" as *;
@use "@wordpress/base-styles/variables" as *;

.dataforms-layouts-regular__field {
	width: 100%;
	min-height: $grid-unit-40;
	justify-content: flex-start !important;
	align-items: flex-start !important;

	.components-base-control__label,
	.components-input-control__label,
	.components-form-token-field__label {
		color: $gray-900;
	}
}

.dataforms-layouts-regular__field-label {
	width: 38%;
	flex-shrink: 0;
	min-height: $grid-unit-40;
	display: flex;
	align-items: center;
	line-height: $grid-unit-05 * 5;
	hyphens: auto;

	&--label-position-side {
		align-self: center;
	}

	.components-base-control__label {
		margin-bottom: 0;
	}
}

.dataforms-layouts-regular__field-control {
	flex-grow: 1;
	min-height: $grid-unit-40;
	display: flex;
	align-items: center;
}