.container {
	position: relative;
}

.popoverContainer {
	min-width: 300px;
	padding: 0;
	background-color: var(--color-bg);
}

.popoverContainer svg {
	width: 16px;
}

.noNotificationsContainer {
	min-height: 200px;
}

.topContainer {
	display: flex;
	justify-content: space-between;
}

.header {
	display: flex;
	align-items: center;
	font-size: var(--font-sm);
	padding-inline: var(--s-1);
	padding-bottom: var(--s-1);
	gap: var(--s-1);
}

.refreshButton {
	margin-block-end: var(--s-1);
	margin-inline-end: var(--s-1);
}

.noNotifications {
	display: grid;
	place-items: center;
	font-weight: var(--weight-semi);
	color: var(--color-text-high);
	margin-block-start: 65px;
}

.divider {
	border-color: var(--color-border);
}

.unseenDot {
	background-color: var(--color-text-accent);
	border-radius: 100%;
	width: 8px;
	height: 8px;
	position: absolute;
	top: 1px;
	left: 1px;
	outline: 2px solid var(--color-bg);
}