$_o-forms-error-summary-foreground-color: oPrivateColorsMix(
	'o3-color-palette-black',
	_oFormsGet('invalid-base'),
	$percentage: 12.5
);
$_o-forms-error-summary-background-color: oPrivateColorsMix(
	_oFormsGet('invalid-base'),
	$percentage: 10
);

$_o-forms-alert-icon-size: 2rem;
$_o-forms-alert-icon-inbuilt-space: $_o-forms-alert-icon-size * 0.25;

// Icon svgs are drawn to a 40px grid with 10px whitespace either side.
// This is what the size of the alert icon would be without the whitespace.
$_o-forms-true-alert-icon-size: div($_o-forms-alert-icon-size, 2);
$_o-forms-alert-icon-left-padding: $_o-forms-spacing-four;
$_o-forms-alert-icon-right-padding: $_o-forms-spacing-two;

/// @access private
/// @output styles for error summary
@mixin _oFormsErrorSummary() {
	.o-forms__error-summary {
		font-family: oPrivateFoundationGet('o3-type-body-base-font-family');
		font-size: oPrivateFoundationGet('o3-type-body-base-font-size');
		line-height: oPrivateFoundationGet('o3-type-body-base-line-height');
		font-weight: oPrivateFoundationGet('o3-type-body-base-font-weight');
		background-color: $_o-forms-error-summary-background-color;
		margin-bottom: $_o-forms-spacing-four;
		padding: $_o-forms-spacing-three;
		position: relative;
		padding-left: calc(
			$_o-forms-alert-icon-left-padding + $_o-forms-true-alert-icon-size +
				$_o-forms-alert-icon-right-padding
		);

		&:before {
			@include oPrivateIconsContent(
				$icon-name: 'warning-alt',
				$color: $_o-forms-error-summary-foreground-color,
				$size: $_o-forms-alert-icon-size
			);

			content: '';
			position: absolute;
			// Use negative margins to effectively remove the whitespace
			// from the icon svg, to to position the visible alert icon more
			// intuitively
			margin: -$_o-forms-alert-icon-inbuilt-space;
			left: $_o-forms-alert-icon-left-padding;
			// Match message padding plus a "magic" rem value to center with
			// the message.
			top: calc($_o-forms-spacing-three + 0.1rem);
		}
		.o-forms__error-summary__heading {
			font-family: oPrivateFoundationGet('o3-type-body-highlight-font-family');
			font-size: oPrivateFoundationGet('o3-type-body-highlight-font-size');
			line-height: oPrivateFoundationGet('o3-type-body-highlight-line-height');
			font-weight: oPrivateFoundationGet('o3-type-body-highlight-font-weight');
			color: $_o-forms-error-summary-foreground-color;
			margin: 0 0 $_o-forms-spacing-one;
		}

		.o-forms__error-summary__list {
			list-style-type: none;
			margin: 0;
			padding: 0;

			a {
				color: $_o-forms-error-summary-foreground-color;
				display: inline-block;
				font-weight: 400;
				margin-top: $_o-forms-spacing-one;
				text-decoration: none;
				border-bottom: 1px solid _oFormsGet('invalid-base');
			}

			.o-forms__error-summary__item-overview {
				font-family: oPrivateFoundationGet(
					'o3-type-body-highlight-font-family'
				);
				font-size: oPrivateFoundationGet('o3-type-body-highlight-font-size');
				line-height: oPrivateFoundationGet(
					'o3-type-body-highlight-line-height'
				);
				font-weight: oPrivateFoundationGet(
					'o3-type-body-highlight-font-weight'
				);
			}
		}
	}
}