@use "../variables" as *;

/**
 * Panel field row
 */
.tsc-panel-field-row {
	align-items: flex-start;
	display: flex;
	flex-direction: row;
	gap: 8px;
	justify-content: space-between;
	width: 100%;

	&__label {
		align-items: center;
		display: flex;
		flex-shrink: 0;
		hyphens: auto;
		line-height: 20px;
		min-height: 32px;
		padding: 6px 0;
		width: 38%;
	}

	&__field {
		align-items: center;
		display: flex;
		flex-grow: 1;
		min-height: 32px;

		.components-button {
			height: auto;
			max-width: 100%;
			min-height: 32px;
			text-align: left;
			text-wrap: balance;
			text-wrap: pretty;
			white-space: normal;
		}
	}
}