.b24-field-list {
	--gap: 14px;
	--min-row-height: 25px;
	position: relative;
	display: grid;
	grid-template-columns: max-content auto;
	gap: var(--gap) 0;
	align-items: center;
	grid-auto-rows: minmax(var(--min-row-height), auto);
	font-size: var(--ui-font-size-lg);
}

.b24-field-list-row {
	display: contents;
}

.b24-field-list-title {
	display: flex;
	position: relative;
	align-self: start;
	line-height: var(--min-row-height);
	color: var(--ui-color-base-3);
	font-size: var(--ui-font-size-md);
	min-width: 162px;
	height: 100%;
	padding-right: var(--gap);
	cursor: default;
}

.b24-field-list-title-hint {
	padding-left: var(--ui-space-inline-2xs);
	padding-top: var(--ui-space-stack-2xs);
}

.b24-field-list-row:hover .b24-field-list-title {
	color: var(--ui-color-base-2);
}

.b24-field-list-title.--with-separator {
	padding: var(--gap) 0 0 0;
}

.b24-field-list-value {
	position: relative;
	min-width: 0;
}

.b24-field-list-value.--with-separator {
	padding: var(--gap) 0 0 0;
}

.b24-field-list-title.--with-separator:before,
.b24-field-list-value.--with-separator:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	height: var(--ui-border-width-thin);
	background: var(--ui-color-divider-less);
	width: calc(100% + var(--gap));
}

.b24-field-list-value.--with-separator:before {
	left: calc(var(--gap) * -1);
}