.wc-block-components-validation-error {
	@include font-size(smaller);
	color: $alert-red;
	max-width: 100%;
	white-space: normal;

	> p {
		margin: 0;
		padding: $gap-smaller 0 0 0;
		display: flex;
		align-items: center;
		gap: 2px;
	}

	svg {
		fill: currentColor;
		width: 1.5em;
		height: 1.5em;
		margin-top: -1px;
	}
}

.has-dark-controls .wc-block-components-validation-error {
	color: color.adjust($alert-red, $lightness: 30%);
}

.wc-block-components-select + .wc-block-components-validation-error {
	margin-bottom: $gap-large;
}