@use '../styles/mixins';

.modula-admin-notification-center {
	display: flex;
}

// The bear avatar, with the count on its corner.
.modula-admin-notification-center__bell {
	@include mixins.button-reset;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: var(--modula-admin-radius-pill);

	&:focus-visible {
		@include mixins.focus-ring;
	}
}

.modula-admin-notification-center__avatar {
	display: block;
	width: 34px;
	height: 34px;
	border-radius: var(--modula-admin-radius-pill);
	box-shadow: 0 0 0 1px var(--modula-admin-border);
}

.modula-admin-notification-center__count {
	position: absolute;
	top: -1px;
	right: -3px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: var(--modula-admin-radius-pill);
	background: var(--modula-admin-notification-dot);
	box-shadow: 0 0 0 2px var(--modula-admin-surface);
	color: var(--modula-admin-ink-inverse);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

// The overlay is fixed inside the sticky page header, so it stacks at the
// header's level. While it is open the header rises above the WordPress
// admin menu (9990) and stays under the admin bar (99999), as in the design.
.modula-admin-page-header:has(.modula-admin-notification-center__overlay) {
	z-index: 9995;
}

// Below the WordPress admin bar, over the page and the admin menu.
.modula-admin-notification-center__overlay {
	position: fixed;
	top: var(--modula-admin-sticky-top, 0);
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	justify-content: flex-end;
}

.modula-admin-notification-center__backdrop {
	flex-grow: 1;
	background: var(--modula-admin-backdrop);
}

.modula-admin-notification-center__panel {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: 440px;
	max-width: 100%;
	height: 100%;
	overflow-y: auto;
	background: var(--modula-admin-surface);
	box-shadow: var(--modula-admin-shadow-panel);
	animation: modula-admin-offcanvas-in 0.2s ease-out both;

	@media (prefers-reduced-motion: reduce) {
		animation: none;
	}
}

@keyframes modula-admin-offcanvas-in {

	from {
		transform: translateX(40px);
		opacity: 0;
	}
}

.modula-admin-notification-center__head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 20px 20px 16px;
	border-bottom: 1px solid var(--modula-admin-border-divider);

	.modula-admin-button.is-link {
		color: var(--modula-admin-ink-soft);
		font-size: var(--modula-admin-text-caption);
	}
}

.modula-admin-notification-center__head-avatar {
	display: block;
	width: 28px;
	height: 28px;
	border-radius: var(--modula-admin-radius-pill);
}

// Outranks wp-admin's `h2`.
.modula-admin-notification-center__title {
	flex-grow: 1;
	margin: 0;
	color: var(--modula-admin-ink);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.3;
}

.modula-admin-notification-center__close {
	@include mixins.button-reset;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin-left: 6px;
	border-radius: var(--modula-admin-radius-lg);
	color: var(--modula-admin-ink-soft);

	&:hover {
		background: var(--modula-admin-surface-hover);
	}

	&:focus-visible {
		@include mixins.focus-ring;
	}
}

.modula-admin-notification-center__notice {
	margin: 0;
	padding: 12px 20px;
	border-bottom: 1px solid var(--modula-admin-border-divider);
	background: var(--modula-admin-danger-surface);
	color: var(--modula-admin-danger);
	font-size: var(--modula-admin-text-help);
}

.modula-admin-notification-center__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 40px 20px;
	color: var(--modula-admin-ink-muted);
	font-size: var(--modula-admin-text-control);
}

.modula-admin-notification-center__empty-avatar {
	display: block;
	width: 56px;
	height: 56px;
	border-radius: var(--modula-admin-radius-pill);
	opacity: 0.9;
}

.modula-admin-notification-center__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.modula-admin-notification-center__item {
	margin: 0;
	border-bottom: 1px solid var(--modula-admin-border-divider);
}

.modula-admin-notification-center__toggle {
	@include mixins.button-reset;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	box-sizing: border-box;
	width: 100%;
	padding: 14px 18px;
	text-align: left;

	&:hover {
		background: var(--modula-admin-surface-sunken);
	}

	&:focus-visible {
		@include mixins.focus-ring;
		outline-offset: -2px;
	}
}

.modula-admin-notification-center__summary {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	gap: 3px;
	min-width: 0;
}

.modula-admin-notification-center__item-title {
	color: var(--modula-admin-ink);
	font-size: var(--modula-admin-text-control);
	font-weight: 500;
	line-height: 1.35;
}

.modula-admin-notification-center__meta {
	color: var(--modula-admin-ink-muted);
	font-size: var(--modula-admin-text-caption);
}

.modula-admin-notification-center__chevron {
	display: flex;
	margin-top: 3px;
	color: var(--modula-admin-ink-muted);
	transition: transform var(--modula-admin-transition);

	.is-open > .modula-admin-notification-center__toggle & {
		transform: rotate(180deg);
	}
}

.modula-admin-notification-center__details {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 0 18px 16px;

	&[hidden] {
		display: none;
	}
}

// Producer HTML: paragraphs and links inside the message.
.modula-admin-notification-center__body {
	color: var(--modula-admin-ink-secondary);
	font-size: var(--modula-admin-text-help);
	line-height: 1.5;

	p {
		margin: 0 0 8px;
		font-size: inherit;

		&:last-child {
			margin-bottom: 0;
		}
	}

	a {
		color: var(--modula-admin-ink);
	}
}

.modula-admin-notification-center__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}