@import "/UI/Theme.scss";

NoticePanel
{
	position: absolute;
	left: 100%;
	backdrop-filter: blur( 4px ) brightness( 0.4 );
	padding: 0.75rem 1.5rem;
	border-radius: 10px;
	font-family: $body-font;
	font-weight: 600;
	font-size: 18px;
	color: $color-text;
	gap: 10px;
	justify-content: center;
	align-items: center;
	overflow: hidden;

	.icon
	{
		font-size: 24px;
		font-family: "Material Icons";
	}

	&.progress::after
	{
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		height: 3px;
		width: 100%;
		background-color: #08f;
		animation: progress-sweep 2s ease-in-out infinite;
	}
}

@keyframes progress-sweep
{
	0%
	{
		transform: translateX( -100% );
		opacity: 1;
	}

	50%
	{
		transform: translateX( 0% );
		opacity: 1;
	}

	85%
	{
		transform: translateX( 100% );
		opacity: 1;
	}

	100%
	{
		transform: translateX( 100% );
		opacity: 0;
	}
}

span.key
{
	font-weight: 500;
	color: #fff;
	background-color: #08f;
}