Work/Frontend/src/components/shell/TopBar/NotificationsMenu.module.scss

.menu {
	position: absolute;
	top: calc(100% + var(--space-2));
	right: 0;
	width: min(24rem, calc(100vw - (var(--space-4) * 2)));
	display: grid;
	gap: var(--space-3);
	padding: var(--space-3);
	border: 1px solid var(--color-border-strong);
	border-radius: calc(var(--radius-lg) + (var(--space-1) / 2));
	background: color-mix(in srgb, var(--color-surface-muted) 96%, transparent);
	box-shadow: var(--shadow-strong);
	backdrop-filter: blur(var(--blur-overlay));
	z-index: var(--z-dropdown);
}

.menu.menuWorkspace {
	position: static;
	top: auto;
	right: auto;
	left: auto;
	bottom: auto;
	width: 100%;
	max-width: none;
	height: 100%;
	min-height: 0;
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
	gap: var(--space-4);
	padding: var(--space-4);
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	backdrop-filter: none;
	z-index: auto;
	overflow: hidden;
}

.header,
.footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
}

.header {
	padding-bottom: var(--space-3);
	border-bottom: 1px solid var(--color-border);
}

.headerCopy {
	min-width: 0;
	display: grid;
	gap: calc(var(--space-1) / 2);
}

.title {
	@include text-label;
	color: var(--color-text);
}

.subtitle,
.sectionLabel,
.itemMeta,
.itemTime {
	@include text-caption;
	color: var(--color-text-muted);
}

.headerAction,
.footerAction {
	@include text-caption;
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--color-text-muted);
	transition: color 160ms var(--easing-standard);
}

.headerAction:hover,
.headerAction:focus-visible,
.footerAction:hover,
.footerAction:focus-visible {
	outline: none;
	color: var(--color-text);
}

.listWrap {
	display: grid;
	gap: var(--space-3);
	max-height: min(24rem, 60vh);
	overflow-y: auto;
	padding-right: var(--space-1);
	margin-right: calc(var(--space-1) * -1);
}

.stateCard {
	display: grid;
	justify-items: start;
	gap: var(--space-2);
	padding: var(--space-3);
	border: 1px solid color-mix(in srgb, var(--color-border) 18%, transparent);
	border-radius: var(--radius-md);
	background: color-mix(in srgb, var(--color-surface) 92%, transparent);
}

.stateIcon {
	width: 2.2rem;
	height: 2.2rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: color-mix(in srgb, var(--color-surface-muted) 88%, transparent);
	color: var(--color-text);
}

.stateTitle {
	@include text-label;
	color: var(--color-text);
}

.stateCopy {
	@include text-caption;
	color: var(--color-text-muted);
}

.section {
	display: grid;
	gap: var(--space-2);
}

.section + .section {
	padding-top: var(--space-3);
	border-top: 1px solid var(--color-border);
}

.sectionLabel {
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-text-subtle);
}

.list {
	display: grid;
	gap: var(--space-1);
}

.item {
	width: 100%;
	min-width: 0;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: start;
	gap: var(--space-2);
	padding: var(--space-2);
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--color-text);
	text-align: left;
	transition:
		background-color 160ms var(--easing-standard),
		border-color 160ms var(--easing-standard),
		color 160ms var(--easing-standard);
}

.item:hover {
	background: color-mix(in srgb, var(--color-surface) 88%, transparent);
	border-color: color-mix(in srgb, var(--color-border) 20%, transparent);
}

.item:focus-visible {
	outline: none;
	background: color-mix(in srgb, var(--color-surface) 92%, transparent);
	border-color: color-mix(in srgb, var(--color-accent-soft) 52%, transparent);
	box-shadow: 0 0 0 0.12rem color-mix(in srgb, var(--color-accent-soft) 14%, transparent);
}

.itemUnread {
	background: color-mix(in srgb, var(--color-surface) 90%, transparent);
	border-color: color-mix(in srgb, var(--color-border) 16%, transparent);
}

.itemMarker,
.itemMarkerMuted {
	width: 0.5rem;
	height: 0.5rem;
	margin-top: 0.45rem;
	border-radius: 999px;
	flex-shrink: 0;
	background: color-mix(in srgb, var(--color-primary-2) 78%, white 22%);
}

.itemMarkerMuted {
	background: color-mix(in srgb, var(--color-text-subtle) 36%, transparent);
}

.itemBody {
	min-width: 0;
	display: grid;
	gap: calc(var(--space-1) / 2);
}

.itemTitle {
	@include text-label;
	color: var(--color-text);
}

.itemTime {
	padding-top: calc(var(--space-1) / 4);
	white-space: nowrap;
	color: var(--color-text-subtle);
}

.footer {
	padding-top: var(--space-3);
	border-top: 1px solid var(--color-border);
	justify-content: space-between;
	flex-wrap: wrap;
}

.menu.menuWorkspace .listWrap {
	min-height: 0;
	max-height: none;
	height: 100%;
	padding-right: 0;
	margin-right: 0;
}

.menu.menuWorkspace .header,
.menu.menuWorkspace .footer {
	padding-left: 0;
	padding-right: 0;
}

@include respond-down(mobile) {
	.menu.menuWorkspace {
		height: 100%;
		min-height: 0;
		padding: var(--space-5);
	}

	.menu.menuWorkspace .listWrap {
		min-height: 0;
		max-height: none;
	}

	.menu.menuWorkspace .item {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.menu.menuWorkspace .itemTime {
		grid-column: 2;
		padding-top: 0;
	}

	.menu.menuWorkspace .footer {
		align-items: flex-start;
		flex-direction: column;
	}

	.menu.menuWorkspace .footerAction {
		padding: var(--space-1) 0;
	}
}