:host(:not([hidden])) {
	display: block;
	width: 100%;
}

:host([column-span="1"]) {
	grid-column: span 1;
}

:host([column-span="2"]) {
	grid-column: span 2;
}

:host([column-span="3"]) {
	grid-column: span 3;
}

:host([column-span="4"]) {
	grid-column: span 4;
}

:host([column-span="5"]) {
	grid-column: span 5;
}

:host([column-span="6"]) {
	grid-column: span 6;
}

.ui5-form-item-root {
	background-color: inherit;
	color: inherit;
}

.ui5-form-item-layout {
	display: grid;
	grid-template-columns: var(--ui5-form-item-layout, 4fr 8fr 0fr);
	align-items: center;
}

.ui5-form-item-label {
	padding: var(--ui5-form-item-label-padding, 0.125rem 0);
	padding-inline-end: 0.85rem;
	justify-self: var(--ui5-form-item-label-justify, end);
}

.ui5-form-item-content {
	overflow: hidden;
	width: 100%;
	display: flex;
	padding: 0 0.25rem;
}

.ui5-form-item-content-child {
	padding-inline-end: 0.5rem;
	box-sizing: border-box;
	width: 100%;
}

:host([item-spacing="Large"]) .ui5-form-item-layout {
	min-height: var(--_ui5_form_item_min_height);
	padding-top: var(--_ui5_form_item_padding);
	padding-bottom: var(--_ui5_form_item_padding);
	box-sizing: border-box;
}

::slotted(*) {
	width: 100%;
}

@container (max-width: 600px) {
	:host {
		order: var(--ui5-form-item-order-S, unset);
	}
}

/* M  - 1 column by default, up to 2 columns */
@container (width > 600px) and (width <= 1024px) {
	:host {
		order: var(--ui5-form-item-order-M, unset);
	}

}

/* L - 2 columns by default, up to 3 columns */
@container (width > 1024px) and (width <= 1440px) {
	:host {
		order: var(--ui5-form-item-order-L, unset);
	}
}

/* XL - 3 columns by default, up to 6 */
@container (min-width: 1441px) {
	:host {
		order: var(--ui5-form-item-order-Xl, unset);
	}
}

dd {
	all: unset;
}