/* pc-notification-bell / pc-notification-inbox (web notification inbox) */

pc-notification-bell,
pc-notification-inbox,
.rd-notifbell-row,
.rd-notifbell-row * {
	box-sizing: border-box;
}

/* Header context: the neighbors (.msg_header_icon 30px box, pc-help) sit on
   vertical-align:top with margin-top 20px — center-match the 36px bell box. */
.new_header pc-notification-bell {
	vertical-align: top;
	margin-top: 17px;
	margin-right: 20px;
}

.rd-notifbell-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* fixed box: badge appearing/disappearing must never shift the header */
	width: 36px;
	height: 36px;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
	vertical-align: middle;
}

.rd-notifbell-btn .rd-icon-bell::before {
	margin-right: 0; /* icon base rule adds 4px for text buttons — not wanted centered */
	width: 24px;
	height: 24px;
}

.rd-notifbell-badge {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 14px;
	height: 14px;
	padding: 0 3px;
	border-radius: 7px;
	background-color: var(--rd-primary-active);
	color: var(--rd-font-light); /* --rd-font-light IS white (see foundation.css) */
	font-size: 10px;
	font-weight: var(--rd-fontweights-open-sans-2);
	line-height: 1;
	pointer-events: none;
}

.rd-notifbell-header {
	padding: var(--rd-spacing-md);
	border-bottom: var(--rd-borderwidth-border-default) solid var(--rd-gray-200);
}

.rd-notifbell-header h3 {
	/* global heading styles bring their own margins/sizes — pin them down */
	margin: 0;
	padding: 0;
	color: var(--rd-font-dark);
	font-size: var(--rd-fontsize-6);
	font-weight: var(--rd-fontweights-open-sans-2);
	line-height: var(--rd-lineheights-0);
}

.rd-notifbell-row {
	display: flex;
	align-items: flex-start;
	gap: var(--rd-spacing-md);
	width: 100%;
	padding: var(--rd-spacing-md);
	border: none;
	border-bottom: var(--rd-borderwidth-border-default) solid var(--rd-gray-200);
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	text-decoration: none;
	cursor: default;
}

a.rd-notifbell-row,
button.rd-notifbell-row {
	cursor: pointer;
}

a.rd-notifbell-row:hover,
button.rd-notifbell-row:hover {
	background-color: var(--rd-gray-100);
	text-decoration: none;
}

.rd-notifbell-row-unread,
a.rd-notifbell-row-unread:hover,
button.rd-notifbell-row-unread:hover {
	background-color: var(--rd-primary-inactive);
}

.rd-notifbell-row-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--rd-gray-100);
}

.rd-notifbell-row-icon [class^="rd-icon-"]::before,
.rd-notifbell-row-icon [class*=" rd-icon-"]::before {
	margin-right: 0;
}

.rd-notifbell-row-main {
	flex: 1;
	min-width: 0;
	display: block;
}

.rd-notifbell-row-top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--rd-spacing-sm);
}

.rd-notifbell-row-title {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--rd-font-dark);
	font-size: var(--rd-fontsize-4);
	line-height: var(--rd-lineheights-0);
}

.rd-notifbell-row-title-unread {
	font-weight: var(--rd-fontweights-open-sans-2);
}

.rd-notifbell-row-time {
	flex-shrink: 0;
	color: var(--rd-gray-500);
	font-size: var(--rd-fontsize-3);
	line-height: var(--rd-lineheights-0);
	white-space: nowrap;
}

.rd-notifbell-row-body {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--rd-gray-500);
	font-size: var(--rd-fontsize-4);
	line-height: var(--rd-lineheights-0);
	margin-top: var(--rd-spacing-xx-sm);
}

.rd-notifbell-actions {
	padding: var(--rd-spacing-md);
}

.rd-notifbell-markall {
	display: block;
	width: 100%;
	padding: var(--rd-spacing-sm) var(--rd-spacing-md);
	border: var(--rd-borderwidth-border-default) solid var(--rd-gray-200);
	border-radius: var(--rd-borderradius-border-md);
	background: none;
	cursor: pointer;
	color: var(--rd-primary-active);
	font-size: var(--rd-fontsize-4);
	font-weight: var(--rd-fontweights-open-sans-1);
	text-align: center;
}

.rd-notifbell-markall:hover {
	background-color: var(--rd-gray-100);
}

.rd-notifbell-empty {
	padding: var(--rd-spacing-x-big) var(--rd-spacing-md);
	text-align: center;
	color: var(--rd-gray-500);
	font-size: var(--rd-fontsize-4);
}

/* appv2 header (pc-appv3-header): the bell hosts inside the round white 40px button next to
   the profile picture, so the 36px button centers in it. */
pc-notification-bell.rd-app-profile-bar-bell {
	align-items: center;
	justify-content: center;
}