/* Widgets - Feedback Message */
////
/// @group Widgets-Feedback_Message
/// Widgets - Feedback Message

///
.feedback-message {
	align-items: center;
	border-radius: var(--border-radius-soft);
	display: flex;
	font-size: var(--font-size-h6);
	font-weight: var(--font-regular);
	left: 50%;
	max-width: 600px;
	min-width: 400px;
	padding: var(--space-base);

	i {
		align-self: flex-start;
		font-size: var(--font-size-h5);
		margin-top: 2px;
		position: relative;
	}
}

///
.feedback-message-text {
	padding-left: var(--space-base);
}

// Mantain due to Retro Compatibility
///
div.feedback-message-error {
	background-color: var(--color-error);
}

// Mantain due to Retro Compatibility
///
div.feedback-message-info {
	background-color: var(--color-info);
}

// Mantain due to Retro Compatibility
///
div.feedback-message-success {
	background-color: var(--color-success);
}

// Mantain due to Retro Compatibility
///
div.feedback-message-warning {
	background-color: var(--color-warning);
	color: var(--color-neutral-10);
}

// Responsive --------------------------------------------------------------------
.phone {
	.feedback-message {
		animation-name: feedbackMessageSlideDownPhone;
		border-radius: 0;
		max-width: 100%;
		min-width: 100%;

		&.feedback-message-autoclose {
			animation-name: feedbackMessageSlideDownThenUpPhone;
		}
	}

	&.ios {
		.feedback-message {
			padding-top: calc(var(--os-safe-area-top) + var(--space-base));
		}
	}
}

.android[data-status-bar-height] .feedback-message {
	padding-top: calc(var(--status-bar-height) + var(--space-base));
}

// IsRTL -------------------------------------------------------------------------
.is-rtl {
	&.phone {
		.feedback-message {
			animation-name: feedbackMessageSlideDownPhoneRTL;
			border-radius: 0;
			left: 0;
			max-width: 100%;
			min-width: 100%;

			&.feedback-message-autoclose {
				animation-name: feedbackMessageSlideDownThenUpPhoneRTL;
			}
		}
	}
}

// OS HighContrast Enabled -------------------------------------------------------
///
.os-high-contrast {
	.feedback-message {
		border-width: var(--border-size-l);
		border-style: solid;

		&.feedback-message-error {
			border-color: var(--color-error);
		}
		&.feedback-message-info {
			border-color: var(--color-info);
		}
		&.feedback-message-success {
			border-color: var(--color-success);
		}
		&.feedback-message-warning {
			border-color: var(--color-warning);
		}
	}
}