/**
 * Shared Discover sidebar navigation — rt-discover-sidebar
 *
 * BEM root: .rt-discover-sidebar
 * Used by: all four Discover pages (people, groups, events, pages)
 * Figma: sidebar nav panel present on all Discover frames
 * ---------------------------------------------------------------------- */

/* ── Outer aside ──────────────────────────────────────────────────────── */
.rt-discover-sidebar {
	flex-shrink: 0 !important;
	width: 267px !important;
}

/* ── Card container ───────────────────────────────────────────────────── */
.rt-discover-sidebar__card {
	background: #fff !important;
	border-radius: 10px !important;
	box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.05) !important;
	padding: 20px 16px !important;
	overflow: hidden !important;
}

/* ── Section heading ──────────────────────────────────────────────────── */
.rt-discover-sidebar__heading {
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	color: #1a1a1a !important;
	margin: 0 0 12px !important;
	padding: 0 !important;
}

/* ── Tab list ─────────────────────────────────────────────────────────── */
.rt-discover-sidebar__list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 2px !important;
}

/* ── Individual list item ─────────────────────────────────────────────── */
.rt-discover-sidebar__item {
	border-radius: 6px !important;
	overflow: hidden !important;
}

/* ── Active item highlight ────────────────────────────────────────────── */
.rt-discover-sidebar__item--active {
	background-color: transparent !important;
}

/* ── Tab link ─────────────────────────────────────────────────────────── */
.rt-discover-sidebar__link {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 10px 12px !important;
	text-decoration: none !important;
	color: rgba(88, 88, 88, 1) !important;
	border-radius: 6px !important;
	position: relative !important;
	transition: background-color 0.15s ease !important;
}

.rt-discover-sidebar__link:hover {
	background-color: rgba(85, 138, 245, 0.06) !important;
	color: #111827 !important;
	text-decoration: none !important;
}

.rt-discover-sidebar__item--active .rt-discover-sidebar__link {
	color: #111111 !important;
	font-weight: 600 !important;
}

/* ── Active indicator bar ─────────────────────────────────────────────── */
.rt-discover-sidebar__indicator {
	display: none !important;
	position: absolute !important;
	left: 0 !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 3px !important;
	height: 20px !important;
	background-color: #111111 !important;
	border-radius: 0 2px 2px 0 !important;
}

.rt-discover-sidebar__item--active .rt-discover-sidebar__indicator {
	display: block !important;
}

/* ── Icon ─────────────────────────────────────────────────────────────── */
.rt-discover-sidebar__icon {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
	width: 20px !important;
	height: 20px !important;
	color: rgba(88, 88, 88, 1) !important;
}

.rt-discover-sidebar__item--active .rt-discover-sidebar__icon {
	color: #111111 !important;
}

/* ── Label ────────────────────────────────────────────────────────────── */
.rt-discover-sidebar__label {
	flex: 1 !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: rgba(88, 88, 88, 1) !important;
	line-height: 1.4 !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

.rt-discover-sidebar__item--active .rt-discover-sidebar__label,
.rt-discover-sidebar__link:hover .rt-discover-sidebar__label {
	color: #111111 !important;
	font-weight: 600 !important;
}

/* ── Count badge ──────────────────────────────────────────────────────── */
.rt-discover-sidebar__count {
	flex-shrink: 0 !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	color: #558af5 !important;
	line-height: 1 !important;
}

/* =============================================================================
   RESPONSIVE — horizontal tab strip on narrow screens
   ============================================================================= */
@media (max-width: 768px) {

	/* Full-width sidebar */
	.rt-discover-sidebar {
		width: 100% !important;
	}

	/* Card becomes a compact horizontal bar */
	.rt-discover-sidebar__card {
		padding: 10px 16px !important;
	}

	/* Hide the "Discover" heading */
	.rt-discover-sidebar__heading {
		display: none !important;
	}

	/* List → single horizontal row */
	.rt-discover-sidebar__list {
		flex-direction: row !important;
		flex-wrap:      wrap !important;
		align-items:    center !important;
		gap:            0 !important;
	}

	/* Each item: flex row so ::after pipe stays inline */
	.rt-discover-sidebar__item {
		display:       flex !important;
		align-items:   center !important;
		border-radius: 0 !important;
		overflow:      visible !important;
	}

	/* Pipe separator after every item except the last */
	.rt-discover-sidebar__item:not(:last-child)::after {
		content:     '|' !important;
		color:       #D1D5DB !important;
		font-size:   14px !important;
		line-height: 1 !important;
		padding:     0 8px !important;
		flex-shrink: 0 !important;
	}

	/* Hide the left active-indicator bar (replaced by bottom border on the link) */
	.rt-discover-sidebar__indicator,
	.rt-discover-sidebar__item--active .rt-discover-sidebar__indicator {
		display: none !important;
	}

	/* Hide the icon */
	.rt-discover-sidebar__icon {
		display: none !important;
	}

	/* Compact link */
	.rt-discover-sidebar__link {
		padding:       6px 2px !important;
		gap:           4px !important;
		border-radius: 0 !important;
		border-bottom: 2px solid transparent !important;
	}

	/* Active item: bottom border instead of left bar */
	.rt-discover-sidebar__item--active .rt-discover-sidebar__link {
		border-bottom-color: #111111 !important;
		padding-bottom: 5px !important;
	}

	/* Label text */
	.rt-discover-sidebar__label {
		font-size:    13px !important;
		overflow:     visible !important;
		text-overflow: clip !important;
	}

	/* Count: wrap in parentheses → People(123) */
	.rt-discover-sidebar__count {
		font-size: 13px !important;
	}

	.rt-discover-sidebar__count::before {
		content: '(' !important;
	}

	.rt-discover-sidebar__count::after {
		content: ')' !important;
	}
}