:root
{
	--announcement-font-size: 1.4rem;
	--announcement-font-weight: 500;

	--announcement-icon-size: 2rem;

	--announcement-bg: rgba(15, 61, 103, .08);
	--announcement-border: rgba(15, 61, 103, .15);
	--announcement-text: #0F3D67;

	--announcement-success-bg: rgba(54, 184, 107, .12);
	--announcement-success-border: rgba(54, 184, 107, .25);
	--announcement-success-text: #249454;

	--announcement-warning-bg: rgba(245, 184, 46, .12);
	--announcement-warning-border: rgba(245, 184, 46, .25);
	--announcement-warning-text: #C98A00;

	--announcement-alert-bg: rgba(244, 93, 93, .12);
	--announcement-alert-border: rgba(244, 93, 93, .25);
	--announcement-alert-text: #D33B3B;
}

.header__announcement
{
	flex: 1;
	display: flex;
	justify-content: center;
	margin: 0 2rem;
}


.header__announcement--row
{
	width: 100%;
	max-width: 72rem;

	display: flex;
	align-items: center;
	gap: 1.4rem;

	padding: 1.2rem 1.6rem;

	border-radius: 1.4rem;

	transition:
		transform .2s ease,
		box-shadow .2s ease;
}

.header__announcement:hover
{
	transform: translateY(-1px);
	box-shadow: 0 8px 24px rgba(15, 61, 103, .08);
}

.header__announcement--icon
{
	flex-shrink: 0;

	display: flex;
	align-items: center;
	justify-content: center;

	width: var(--announcement-icon-size);
	height: var(--announcement-icon-size);
}

.header__announcement--icon::before
{
	display: block;
}

.header__announcement--icon--info:before
{
	content: url("/Images/Icons/Icon-Info-Circle.svg");
}

.header__announcement--icon--success:before
{
	content: url("/Images/Icons/Icon-Success.svg");
}

.header__announcement--icon--warning:before
{
	content: url("/Images/Icons/Icon-Warning.svg");
}

.header__announcement--icon--alert:before
{
	content: url("/Images/Icons/Icon-Forbidden.svg");
}

.header__announcement--text
{
	flex: 1;
	direction: rtl;
	text-align: justify;
	text-align-last: right;
	line-height: 1.8;
	font-size: 1.35rem;
	font-weight: 500;
}

.header__announcement--close
{
	flex-shrink: 0;

	width: 3rem;
	height: 3rem;

	border: 0;
	border-radius: .8rem;

	color: inherit;
	background: transparent;
	cursor: pointer;

	opacity: .55;
	transition:  opacity .2s ease, background .2s ease;
}

.header__announcement--close:hover
{
	opacity: 1;
	background: rgba(0,0,0,.05);
}

/* PRIORITIES */

.announcement--info
{
	background: var(--announcement-bg);
	border-color: var(--announcement-border);
	color: var(--announcement-text);
}

.announcement--success
{
	background: var(--announcement-success-bg);
	border-color: var(--announcement-success-border);
	color: var(--announcement-success-text);
}

.announcement--warning
{
	background: var(--announcement-warning-bg);
	border-color: var(--announcement-warning-border);
	color: var(--announcement-warning-text);
}

.announcement--alert
{
	background: var(--announcement-alert-bg);
	border-color: var(--announcement-alert-border);
	color: var(--announcement-alert-text);
}

/* TABLET */

@media (max-width: 992px)
{
	.header
	{
		gap: 15px;
	}

	.header__announcement
	{
		min-width: 180px;
		font-size: 13px;
	}
}

/* MOBILE */

@media (max-width: 768px)
{
	.header
	{
		flex-wrap: wrap;
	}

	.header__logo
	{
		order: 1;
	}

	.header__area
	{
		order: 2;
		margin-left: auto;
	}

	.header__announcement
	{
		order: 3;

		width: 100%;
		min-width: 100%;
		max-width: 100%;

		margin-top: 10px;
	}
}

/* SMALL PHONES */

@media (max-width: 480px)
{
	.header__announcement
	{
		height: auto;
		min-height: var(--announcement-height);

		padding: 12px var(--announcement-padding-x);
	}

	.header__announcement--text
	{
		white-space: normal;
		overflow: visible;
		text-overflow: unset;
		line-height: 1.5;
	}
}