.kkart-block-components-validation-error {
	@include font-size(smaller);
	color: $alert-red;
	max-width: 100%;
	position: absolute;
	top: calc(100% - 1px);
	white-space: normal;

	> p {
		align-items: center;
		display: flex;
		line-height: 12px; // This allows two lines in a 24px bottom margin.
		margin: 0;
		min-height: 24px;
		padding: 0;
	}
}

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