.group {
	overflow: hidden;
	border-color: var(--wl-color-border);
	background: var(--wl-color-subtle);
}

.flat {
	background: var(--wl-color-surface);
}

.flat > :first-child {
	border: 0;
	background: transparent;
}

.flat .accounts {
	padding-bottom: var(--mantine-spacing-md);
}

.flat .accountRow {
	padding-block: var(--mantine-spacing-md);
}

.flat .accountRow:last-child {
	padding-bottom: 0;
}

.flat .accountRow > :first-child {
	min-width: 0;
	overflow-wrap: anywhere;
}

.positive {
	color: var(--wl-color-positive);
}

.negative {
	color: var(--wl-color-negative);
}

.accounts {
	padding: 0 var(--mantine-spacing-md) var(--mantine-spacing-sm);
	list-style: none;
}

.accountRow {
	display: flex;
	gap: var(--mantine-spacing-sm);
	align-items: center;
	justify-content: space-between;
	padding: var(--mantine-spacing-sm) 0;
	border-top: 1px solid var(--wl-color-border);
}

.accountValue {
	flex-shrink: 0;
	text-align: right;
	white-space: nowrap;
}

.accountCardRow {
	display: flex;
	gap: var(--mantine-spacing-sm);
	align-items: center;
	justify-content: space-between;
	padding: var(--mantine-spacing-sm) var(--mantine-spacing-md);
	border-color: var(--wl-color-border);
	background: var(--wl-color-surface);
}

@media (max-width: 36em) {
	.accountRow {
		align-items: flex-start;
	}

	.flat .accountRow {
		flex-wrap: wrap;
	}

	.flat .accountValue {
		white-space: normal;
	}
}