/* -----------------------------------------------------------------------------
   Single Group Feed Topics
   ----------------------------------------------------------------------------- */

.activity.single-group {
	padding-top: 0;
}

.bond-group-feed .activity-topic-selector {
	margin: 0;

	& > ul {
		display: flex;
		flex-wrap: wrap;
		gap: 0.75rem 1rem;
		margin: 0;
		padding: 0 0 1.5rem;
		list-style: none;

		& > li {
			position: relative;
			margin: 0;
			padding: 0;

			& > a {
				display: inline-flex;
				align-items: center;
				min-height: 32px;
				max-width: 16rem;
				padding: 0.25rem 0.75rem;
				overflow: hidden;
				border: 1px solid var(--color-bond-red);
				border-radius: 4px;
				background: #fff;
				color: var(--color-bond-red);
				font-size: 0.9rem;
				line-height: 1.3;
				text-decoration: none;
				text-overflow: ellipsis;
				white-space: nowrap;

				&:hover,
				&:focus-visible {
					border-color: #b6002d;
					color: #b6002d;
				}

				&.selected,
				&.active {
					background: #b6002d;
					border-color: #b6002d;
					color: #fff;

					&:hover,
					&:focus-visible {
						color: #fff;
					}
				}

				&.more-action-button {
					display: inline-flex;
					align-items: center;
					gap: 0.375rem;
				}

				& [class*="bb-icon"] {
					color: currentColor;
					font-size: 16px;
					line-height: 1;
				}
			}
		}

		& .bb_nav_more_dropdown {
			position: absolute;
			top: calc(100% + 0.5rem);
			left: 0;
			z-index: 99;
			display: none;
			min-width: 14rem;
			max-width: 16rem;
			max-height: 14.375rem;
			margin: 0;
			padding: 0.5rem 0;
			list-style: none;
			overflow: auto;
			border: 1px solid var(--color-border);
			border-radius: 4px;
			background: #fff;
			box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);

			&.open,
			&.active {
				display: block;
			}

			& li {
				margin: 0;
				padding: 0;
			}

			& a {
				display: block;
				padding: 0.5rem 0.75rem;
				color: var(--color-bond-grey);
				font-size: 0.8125rem;
				line-height: 1.3;
				text-decoration: none;

				&:hover,
				&:focus-visible {
					background: #f4f4f2;
					color: #b6002d;
				}
			}
		}
	}
}