Suggestion Card

.pds-suggestion-card {
	--suggestion-card-actions-gap: var(--pds-spacing-m);
	--suggestion-card-gap: var(--pds-spacing-s);

	font-family: var(--pds-typography-ff-default);
	font-size: var(--pds-typography-size-s);
	line-height: var(--pds-typography-lh-m);
}

.pds-suggestion-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--suggestion-card-gap);
}

/* The type comes from the PDS `pds-heading-m` class on the element. */
.pds-suggestion-card__title {
	margin: 0;
}

.pds-suggestion-card__description {
	color: var(--pds-color-foreground-default-secondary);
	margin: 0;
}

.pds-suggestion-card__changes {
	display: flex;
	flex-direction: column;
	gap: var(--pds-spacing-m);
}

/* The space above the buttons is larger than the gap between the other
   sections: the body gap plus this margin adds up to the actions gap. */
.pds-suggestion-card__footer {
	margin-block-start: calc(
		var(--suggestion-card-actions-gap) - var(--suggestion-card-gap)
	);
}

.pds-suggestion-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pds-spacing-2xs);
}

/* Accepted: the actions are replaced by a result line. */
.pds-suggestion-card__result {
	align-items: center;
	color: var(--pds-color-status-success-foreground);
	display: flex;
	font-weight: var(--pds-typography-fw-medium);
	gap: var(--pds-spacing-2xs);
}

.pds-suggestion-card__result-icon {
	flex-shrink: 0;
}

/* One change: the field name over before and after columns. */
.pds-suggestion-change {
	display: flex;
	flex-direction: column;
	gap: var(--pds-spacing-2xs);
}

.pds-suggestion-change__field {
	font-size: var(--pds-typography-size-xs);
	font-weight: var(--pds-typography-fw-semibold);
	margin: 0;
}

.pds-suggestion-change__values {
	display: grid;
	gap: var(--pds-spacing-s);
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	margin: 0;
}

.pds-suggestion-change__value {
	min-width: 0;
}

.pds-suggestion-change__value-label {
	font-size: var(--pds-typography-size-2xs);
	font-weight: var(--pds-typography-fw-bold);
	letter-spacing: var(--pds-typography-ls-l);
	text-transform: uppercase;
}

.pds-suggestion-change__value-text {
	margin: 0;
	overflow-wrap: anywhere;
}

.pds-suggestion-change__value--before {
	color: var(--pds-color-status-critical-foreground);
}

.pds-suggestion-change__value--after {
	color: var(--pds-color-status-success-foreground);
}

.pds-suggestion-change__value--after .pds-suggestion-change__value-text {
	font-weight: var(--pds-typography-fw-semibold);
}