@import "@Themes/constants.scss";

.root {
	display: flex;
	flex-direction: column;
	width: 390px;
	max-height: 80vh;
	background-color: $white;
	box-shadow: $shadow-nav;
	padding: 24px;
	position: absolute;
	top: 107px;
	right: 56px;
	animation: smooth-appear 0.2s ease forwards;

	@keyframes smooth-appear {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}

	.notification-header {
		width: 100%;
		display: inline-flex;
		justify-content: space-between;
		.close-icon {
			cursor: pointer;
		}
	}

	.notification-subheader {
		display: flex;
		align-items: center;
		gap: 8px;
		text-decoration: underline;
		text-underline-offset: 2px;
		color: var(--pink-flash);
		cursor: pointer;
	}

	.notification-body {
		margin-top: 24px;
		overflow: hidden;
		overflow-y: auto;

		.missing-notification {
			padding: 56px 0;
			text-align: center;
		}
	}

	@media (max-width: $screen-s) {
		width: 100%;
		left: 0;
	}
}

.background {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: transparent;
}