
.bb-rl-header {
	background-color: var(--bb-rl-background-color);
	border-bottom: 1px solid var(--bb-rl-border-secondary-color);
	padding: var(--bb-rl-space-200) var(--bb-rl-space-400);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: var(--bb-rl-z-index-fixed);

	body.admin-bar & {
		top: 32px;
	}

	.bb-rl-left-panel-mobile {
		display: none;
	}
}

.bb-readylaunch-menu {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1;
	justify-content: center;
	min-width: 0;

	> li {

		&:not(:last-child) {
			margin-right: var(--bb-rl-space-200);
		}

		> a {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			font-size: 0.85rem;
			text-align: center;
			cursor: pointer;
			border-radius: var(--bb-rl-radius-sm);
			padding: var(--bb-rl-space-100) var(--bb-rl-space-200);
			transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
			background-color: transparent;
			color: var(--bb-rl-text-color);
			border: none;
			white-space: nowrap;

			&:focus {
				outline: none;
			}

			&:focus-visible {
				outline: 2px solid var(--bb-rl-border-quinery-color);
			}
		}

		&:hover > a {
			background-color: var(--bb-rl-background-secondary-hover-color);
		}

		&.current-menu-item > a {
			font-weight: 600;
			background-color: var(--bb-rl-background-secondary-hover-color);
		}
	}

	.menu-item {

		&.menu-item-has-children {
			position: relative;
		}

		> .sub-menu {
			background: var(--bb-rl-background-color);
			border: 1px solid var(--bb-rl-border-secondary-color);
			box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.12);
			border-radius: var(--bb-rl-radius-md);
			list-style: none;
			padding: var(--bb-rl-space-100) 0;
			position: absolute;
			left: 0;
			top: 100%;
			margin: 0;
			min-width: 168px;
			opacity: 0;
			visibility: hidden;
			z-index: 100;

			.menu-item {

				a {
					color: var(--bb-rl-text-color);
					display: block;
					font-size: 0.85rem;
					line-height: 1.4;
					margin-bottom: 1px;
					border-radius: var(--bb-rl-radius-sm);
					padding: var(--bb-rl-space-100) var(--bb-rl-space-200);
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					width: 100%;
				}

				&:hover {

					> a {
						background-color: var(--bb-rl-background-secondary-hover-color);
					}

					> .sub-menu {
						top: 0;
						left: -2px;
						right: inherit;
						transform: translateX(100%);
					}
				}

				&.menu-item-has-children {
					position: relative;

					> a {
						padding-right: var(--bb-rl-space-300);
					}

					&:after {
						content: "\e13a";
						display: block;
						position: absolute;
						right: var(--bb-rl-space-200);
						top: 50%;
						transform: translateY(-50%);
						font-family: bb-icons-rl;
						font-size: var(--bb-rl-font-size-base);
						color: var(--bb-rl-icon-secondary-color);
					}
				}
			}
		}

		&:hover > .sub-menu {
			opacity: 1;
			visibility: visible;
		}
	}
}

.bb-readylaunch-mobile-menu__wrap {
	display: none;
}

.bb-rl-site-branding {

	img {
		max-width: 130px;
		max-height: 32px;
		object-fit: contain;
	}

	.site-title {
		font-size: 18px;
		font-weight: 600;

		a {
			color: var(--bb-rl-text-color);

			&:focus-visible {
				outline: 2px solid var(--bb-rl-border-quinery-color);
			}
		}
	}
}

body {

	&.bb-rl-dark-mode {

		.bb-rl-site-branding {

			.bb-rl-light-logo-text,
			.bb-rl-light-logo {
				display: none;
			}
		}

	}

	&:not(.bb-rl-dark-mode) {

		.bb-rl-site-branding {

			.bb-rl-dark-logo-text,
			.bb-rl-dark-logo {
				display: none;
			}
		}
	}
}

.header-aside {

	.header-aside-inner {
		gap: var(--bb-rl-space-100);
	}

	.notification-wrap {
		position: relative;

		.notification-dropdown {
			background: var(--bb-rl-background-color);
			border: 1px solid var(--bb-rl-border-secondary-color);
			box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
			border-radius: var(--bb-rl-radius-lg);
			list-style: none;
			position: absolute;
			right: -15px;
			top: calc(100% + 8px);
			margin: 0;
			min-width: 480px;
			opacity: 0;
			visibility: hidden;
			z-index: 0;
			display: none;

			.bb-rl-loader {
				margin: 20px auto;
				display: table;
			}
		}

		&.selected {

			.notification-dropdown {
				opacity: 1;
				visibility: visible;
				z-index: var(--bb-rl-z-index-dropdown);
				display: block;
			}

			.notification-link {
				background-color: var(--bb-rl-background-secondary-hover-color);

				> span:before,
				> span:after {
					display: none;
				}
			}
		}

		.notification-header {
			padding: var(--bb-rl-space-100) 0;
			margin: var(--bb-rl-space-100) var(--bb-rl-space-200);
			border-bottom: 1px solid var(--bb-rl-border-secondary-color);

			h2 {
				color: var(--bb-rl-text-color);
				font-size: 1rem;
				font-weight: 500;
			}

			.notification-header-action {
				color: var(--bb-rl-icon-secondary-color);
				font-size: 1rem;
			}

			.delete-all,
			.message-view-all-link {
				margin-left: auto;
				margin-right: var(--bb-rl-space-200);
				border-radius: var(--bb-rl-radius-md);
				padding: var(--bb-rl-space-50) var(--bb-rl-space-100);
				font-size: var(--bb-rl-font-size-sm);
				font-weight: 400;
			}

			.mark-read-all {
				color: var(--bb-rl-text-color);
				cursor: pointer;
				background: transparent;
				border: 0;

				[class*="bb-icons-rl"] {
					opacity: 0.6;
				}
			}
		}

		.notification-header-actions {
			display: flex;
			align-items: center;
			gap: var(--bb-rl-space-200);
		}
	}

	.notification-link {
		display: inline-block;
		padding: 4px;
		border-radius: var(--bb-rl-radius-md);

		&:focus {
			outline: none;
		}

		&:focus-visible {
			outline: 2px solid var(--bb-rl-border-quinery-color);
		}

		> span {
			display: flex;
		}

		[class*="bb-icons-rl"] {
			color: var(--bb-rl-icon-secondary-color);
			font-size: 24px;
		}

		.count {
			font-style: normal;
			font-weight: 600;
			color: var(--bb-rl-text-white-color);
			letter-spacing: -0.55px;
			background-color: var(--bb-rl-primary-color);
			border-radius: var(--bb-rl-radius-full);
			line-height: 1.6;
			font-size: 9px;
			top: calc(50% - 20px);
			right: -4px;
			padding: 1px 6px;
			position: absolute;
			box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.15);
		}
	}

	.user-wrap {
		margin-left: var(--bb-rl-space-300);
		position: relative;

		.avatar {
			max-width: 32px;
			height: auto;
			object-fit: contain;
			border-radius: var(--bb-rl-radius-full);
		}

		.bb-rl-profile-dropdown {
			display: none;
		}

		.user-link {

			&:focus-visible {
				outline: 2px solid var(--bb-rl-border-quinery-color);
			}
		}

		&.active {

			.bb-rl-profile-dropdown {
				display: block;
			}
		}
	}

	.bb-rl-header-search {
		font-size: 0.85rem;
		margin-right: var(--bb-rl-space-300);

		[class*="bb-icons-rl"] {
			color: var(--bb-rl-icon-secondary-color);
			font-size: 16px;
			margin-right: var(--bb-rl-space-100);
		}

		.bb-rl-header-search__label {
			white-space: nowrap;
		}

		&:focus {
			outline: none;
		}

		&:focus-visible {
			outline: 2px solid var(--bb-rl-border-quinery-color);
		}
	}

	.bp-dir-search-form {
		border-radius: var(--bb-rl-radius-md);
		margin-right: var(--bb-rl-space-300);
	}

	.bb-rl-header-buttons .signin-button:hover {
		border-bottom-color: transparent;
	}
}

// Notification Dropdown

.notification-dropdown {

	.notification-header-tabs {
		margin: 0 var(--bb-rl-space-200);
	}

	.notification-header-tab-action {
		color: var(--bb-rl-text-secondary-color);
		font-size: 0.85rem;
		font-weight: 500;
		border-radius: var(--bb-rl-radius-full);

		&:hover,
		&.active {
			color: var(--bb-rl-text-color);
			font-weight: 600;
			background-color: var(--bb-rl-background-secondary-hover-color);
		}
	}
}

.notification-list {
	max-height: 52vh;
	overflow: auto;
	overflow-x: hidden;
	padding: var(--bb-rl-space-100);

	>  li {
		display: flex;
		align-items: center;
		padding: var(--bb-rl-space-200);
		border-radius: var(--bb-rl-radius-md);
		position: relative;

		.notification-avatar {
			margin-right: var(--bb-rl-space-100);
			flex: 0 0 40px;

			img {
				display: block;
				max-width: 36px;
				height: auto;
				border-radius: var(--bb-rl-radius-full);
			}

			.thread-multiple-avatar {
				min-height: 40px;
				min-width: 40px;
				position: relative;

				img {
					max-width: 24px;
					position: absolute;
					left: 0;
					top: 0;

					+ img {
						top: auto;
						right: 0;
						bottom: 0;
						left: auto;
					}
				}
			}
		}

		&:has(.bb-rl-option-wrap.active),
		&:hover:not(.bb-rl-view-more--pagination) {
			background-color: var(--bb-rl-background-secondary-hover-color);
		}
	}

	.bb-full-link {
		font-size: 0;

		> a {
			cursor: pointer;
			font-size: 0;
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			opacity: 0;
		}
	}

	.notification-content {
		flex: 1;
		position: relative;
		width: 100%;
		overflow: hidden;

		.notification-users {
			color: var(--bb-rl-text-color);
			font-size: 0.9rem;
			line-height: 1.3;
			font-weight: 500;
			display: block;
			white-space: nowrap;
			width: calc(100% - 50px);

			a {
				color: inherit;
			}
		}

		.posted {
			color: var(--bb-rl-text-tertiary-color);
			font-size: 0.85rem;
			line-height: 1.5;

			img {
				height: 20px;
				width: 20px;
				vertical-align: middle;
			}
		}
	}

	.unread {

		&:before {
			content: "";
			background-color: var(--bb-rl-primary-color);
			border-radius: 50%;
			height: 6px;
			width: 6px;
			position: absolute;
			right: var(--bb-rl-space-100);
			bottom: 24px;
		}

		.notification-content {

			.posted {
				color: var(--bb-rl-text-color);
				font-weight: 500;
			}
		}

		&:hover:before {
			visibility: hidden;
			opacity: 0;
		}
	}

	.bb-rl-load-more {
		height: 0;
		width: 0;
		overflow: hidden;
		visibility: hidden;
	}
}

.notification-list li.bb-rl-no-messages-wrap {
	background-color: transparent;
}

.bb-rl-no-messages {
	display: flex;
	flex-direction: column;
	align-items: center;

	> [class*="bb-icons-rl"] {
		font-size: 40px;
		color: var(--bb-rl-icon-secondary-color);
		margin-bottom: var(--bb-rl-space-200);
	}

	h3 {
		font-size: 18px;
		font-weight: 600;
		margin: 0 0 var(--bb-rl-space-100);
	}

	.bb-rl-no-messages-description {
		font-size: 14px;
		color: var(--bb-rl-text-secondary-color);
		max-width: 300px;
		margin: 0 auto var(--bb-rl-space-300);
		text-align: center;
	}

	.bb-rl-no-messages-button {
		margin-bottom: var(--bb-rl-space-200);
	}

	.bb-rl-button {
		display: flex;
		align-items: center;
		gap: var(--bb-rl-space-50);
	}
}

.notification-listing {

	.notification-list li {

		.notification-avatar {
			position: relative;

			img {
				max-width: 32px;
				max-height: 32px;
				object-fit: cover;
			}
		}

		.notification-content {
			color: var(--bb-rl-text-color);
			font-size: 0.9rem;
			line-height: 1.3;
			font-weight: 500;
			max-width: calc(100% - 75px);

			a {
				color: var(--bb-rl-text-color);
			}

			.posted {
				color: var(--bb-rl-text-tertiary-color);
				display: block;
				font-size: 0.85rem;
				margin-top: 3px;
				line-height: 19px;
				font-weight: 400;
			}
		}

		&.unread:before {
			right: 27px;
			bottom: 50%;
			margin-bottom: -1px;
		}

		.actions {
			position: absolute;
			top: 50%;
			margin-top: -8px;
			right: 10px;

			> a {
				cursor: pointer;
			}
		}

		.bb-rl-option-wrap {
			opacity: 0;
			visibility: hidden;

			&__action {
				padding: 0;
				background-color: var(--bb-rl-background-secondary-hover-color);

				[class*="bb-icons-rl"] {
					color: var(--bb-rl-icon-tertiary-color);
				}
			}
		}

		.bb-rl-option-wrap.active,
		&:hover .bb-rl-option-wrap {
			opacity: 1;
			visibility: visible;
		}
	}
}

.notification-list li .notification-avatar [class*="bb-icon"] {
	height: 20px;
	width: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--bb-rl-radius-full);
	font-style: normal;
	position: absolute;
	right: 0;
	bottom: -6px;
	background-color: var(--bb-rl-background-positive-primary-color);

	&:before {
		font-family: bb-icons-rl !important;
		color: var(--bb-rl-text-white-color);
		font-size: 12px;
		opacity: 1;
		margin: 0;
	}

	&.bb-icon-comment-activity:before {
		content: "\e172";
	}

	&.bb-icon-activity:before {
		content: "\e17a";
	}

	&.bb-icon-reply:before {
		content: "\ed52";
	}

	&.bb-icon-comment-square-dots:before {
		content: "\e172";
	}

	&.bb-icon-comment-square:before {
		content: "\e16c";
	}

	&.bb-icon-poll:before {
		content: "\e150";
	}

	&.bb-icon-image:before {
		content: "\e10e";
	}
}

// Main Nav alignment
body {

	&.activity {

		.bb-readylaunch-menu {
			margin-left: 170px;
		}

		.site:not(:has(.bb-rl-activity-wrap .bb-rl-secondary-container)) {

			.bb-readylaunch-menu {
				margin-left: 320px;

				&.bb-rl-items-max {
					margin-right: var(--bb-rl-space-300);
					margin-left: 170px;
				}

				@media screen and (max-width: 1400px) {
					margin-left: 170px;

					&.bb-rl-items-max {
						margin-right: var(--bb-rl-space-100);
						margin-left: 0;
					}
				}

				@media screen and (max-width: 1280px) {
					margin-left: 0;
				}
			}
		}
	}

	&.activity,
	&.bbp-user-page,
	&.forums.singular,
	&.messages.singular {

		.bb-readylaunch-menu {
			margin-left: 170px;

			&.bb-rl-items-max {
				margin-right: var(--bb-rl-space-300);
			}

			@media screen and (max-width: 1400px) {
				margin-left: 0;
			}
		}
	}

	&.directory,
	&.forum-archive,
	&.forum.single,
	&.reply-edit,
	&.topic-edit,
	&.topic.single,
	&.group-admin.groups,
	&.my-account.profile,
	&.single-item.groups,
	&.bbp-user-page.single.my-account,
	&.notifications.single.my-account,
	&.my-account.profile.edit {

		.bb-readylaunch-menu {
			margin-left: 320px;

			&.bb-rl-items-max {
				margin-right: var(--bb-rl-space-300);
				margin-left: 170px;
			}

			@media screen and (max-width: 1400px) {
				margin-left: 170px;

				&.bb-rl-items-max {
					margin-right: var(--bb-rl-space-100);
					margin-left: 0;
				}
			}

			@media screen and (max-width: 1280px) {
				margin-left: 0;
			}
		}
	}
}

@media screen and (max-width: $lg) {

	.bb-rl-header-container {
		justify-content: flex-start;
	}

	.bb-rl-header {
		padding: var(--bb-rl-space-200);

		.bb-rl-left-panel-mobile {
			display: flex;
			align-items: center;
			color: var(--bb-rl-icon-secondary-color);
			font-size: 28px;
			margin-right: var(--bb-rl-space-200);
		}
	}

	.bb-mobile-menu-open .bb-rl-left-panel-mobile [class*="bb-icons-rl"]:before {
		content: "\e4f6";
	}

	.bb-rl-left-panel,
	.bb-readylaunch-menu,
	.bb-rl-header-search__label {
		display: none;
	}

	.bb-rl-site-branding {
		margin-right: auto;
		margin-left: auto;
	}

	.bb-readylaunch-mobile-menu__wrap {
		background-color: var(--bb-rl-background-color);
		display: block;
		position: fixed;
		left: -100%;
		top: 66px;
		bottom: 0;
		width: 100%;
		overflow: auto;
		transition: all 0.35s ease-in-out;

		body.admin-bar & {
			top: 98px;
		}

		body.bb-mobile-menu-open & {
			left: 0;
		}

		.bb-rl-left-panel {
			position: static;
			height: auto !important;
			width: auto;
			display: block;
		}

		.bb-readylaunch-mobile-menu_items {
			padding: var(--bb-rl-space-200) 0;
			margin: 0 var(--bb-rl-space-200);
			border-bottom: 1px solid var(--bb-rl-border-secondary-color);

			ul {
				list-style: none;
				margin: 0;
				padding: 0;

				li > a {
					color: var(--bb-rl-text-color);
					display: flex;
					align-items: center;
					gap: var(--bb-rl-space-100);
					padding: var(--bb-rl-space-100) var(--bb-rl-space-200);
					border-radius: var(--bb-rl-radius-md);

					&:hover {
						background-color: var(--bb-rl-background-secondary-hover-color);
					}

					> i {
						color: var(--bb-rl-icon-color);
						font-size: 20px;
					}

					.notification-label {
						font-size: var(--bb-rl-font-size-sm);
						font-weight: 500;
						line-height: 1.4;
					}

					.count {
						display: inline-flex;
						margin-left: auto;
						border-radius: var(--bb-rl-radius-sm);
						padding: var(--bb-rl-space-50) var(--bb-rl-space-100);
						background-color: var(--bb-rl-background-tertiary-color);
						font-size: var(--bb-rl-font-size-xs);
						color: var(--bb-rl-text-color);
						font-weight: 500;
						line-height: 1.4;
					}
				}
			}
		}

		.bb-rl-left-panel-widget {

			.bb-rl-list {

				h2 {
					display: flex;
					align-items: center;
					position: relative;
					margin-bottom: 0;

					&:after {
						content: "\e136";
						font-family: bb-icons-rl;
						font-size: 16px;
						font-weight: 400;
						color: var(--bb-rl-icon-tertiary-color);
						margin-left: var(--bb-rl-space-100);
					}

					&:before {
						content: "\e3d4";
						font-family: bb-icons-rl;
						font-size: 16px;
						font-weight: 700;
						color: var(--bb-rl-icon-tertiary-color);
						margin-left: var(--bb-rl-space-100);
						position: absolute;
						right: 0;
						top: 50%;
						transform: translateY(-50%);
					}
				}

				> ul {
					display: none;
				}
			}

			&.is-open {

				> .bb-rl-list {

					ul {
						display: block;
					}

					h2 {
						margin-bottom: var(--bb-rl-space-200);

						&:after {
							transform: rotate(180deg);
						}

						&:before {
							content: "\e32a";
						}
					}
				}
			}
		}

		.bp-dir-search-form {
			display: block;
			margin: var(--bb-rl-space-200) var(--bb-rl-space-400) 0;
			border-radius: var(--bb-rl-radius-base);

			&:before {
				font-size: 20px;
				color: var(--bb-rl-icon-secondary-color);
				position: absolute;
				left: 12px;
				top: 50%;
				transform: translateY(-50%);
			}

			button[type="submit"] {
				top: 50%;
				transform: translateY(-50%);
				opacity: 0;
				height: auto;
			}
		}

		.bb-rl-network-search-bar {
			padding: var(--bb-rl-space-100) var(--bb-rl-space-200) var(--bb-rl-space-100) var(--bb-rl-space-500);
			position: relative;

			input#mobile-search {
				color: var(--bb-rl-text-color);
				font-size: 14px;
				font-weight: 400;
				padding: 0;
				border-radius: 0;

				&:-webkit-input-placeholder {
					color: var(--bb-rl-text-tertiary-color);
				}
			}
		}
	}


	.bb-rl-mobile-user-name {
		color: var(--bb-rl-text-color);
		font-size: 1rem;
		font-weight: 500;
	}

	.bb-rl-my-account-link a {
		color: var(--bb-rl-text-tertiary-color);
		font-size: 0.85rem;
		font-weight: 500;
	}

	.header-aside {

		.dir-search,
		.bb-rl-header-search {
			display: none;
		}

		.notification-wrap,
		.bb-message-dropdown-notification {
			display: none;
		}
	}

	.bb-readylaunch-mobile-menu {
		list-style: none;
		padding: var(--bb-rl-space-200) 0;
		margin: 0 var(--bb-rl-space-200);
		border-bottom: 1px solid var(--bb-rl-border-secondary-color);

		li a {
			color: var(--bb-rl-text-color);
			font-size: var(--bb-rl-font-size-base);
			font-weight: 600;
			display: block;
			padding: var(--bb-rl-space-100) var(--bb-rl-space-200);
			border-radius: var(--bb-rl-radius-sm);

			&:hover {
				background-color: var(--bb-rl-background-secondary-hover-color);
			}
		}

		.menu-item.menu-item-has-children {
			position: relative;
		}

		.submenu-toggle {
			cursor: pointer;
			font-size: 20px;
			color: var(--bb-rl-text-tertiary-color);
			line-height: 30px;
			position: absolute;
			right: 10px;
			top: 4px;
			width: 30px;
			height: 30px;
			text-align: center;
		}

		.sub-menu {
			display: none;
			list-style: none;
			padding-left: var(--bb-rl-space-300);
			margin-top: var(--bb-rl-space-100);
		}

		.open-parent {

			> .sub-menu {
				display: block;
			}

			> a {
				background-color: var(--bb-rl-background-secondary-hover-color);

				.submenu-toggle {
					transform: rotate(-180deg);
				}
			}
		}
	}

}

// WP Admin Bar breakpoint
@media screen and (max-width: 782px) {

	body.admin-bar {

		.bb-rl-header {
			top: 46px;
		}

		.bb-readylaunch-mobile-menu__wrap {
			top: 112px;
		}
	}
}

@media screen and (max-width: $sm) {

	.header-aside {

		.notification-wrap {

			&.messages-wrap .notification-dropdown {
				right: -30px;
			}

			.notification-dropdown {
				right: -10px;
				min-width: 280px;
				max-width: 280px;
			}
		}
	}
}
