/* -----------------------------------------------------------------------------
   Activity Directory Top Section
   ----------------------------------------------------------------------------- */

/* Match the groups directory spacing/layout for the activity filters row. */
.activity-head-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1.25rem;

	/* Activity search wrapper is separate from the two dropdown filter wrappers. */
	& .bb-subnav-filters-container.bb-subnav-filters-search {
		flex: 1 1 280px;
		max-width: 420px;
		margin-right: auto;

		&>.subnav-filters-opener {
			display: none;
		}

		& .subnav-filters-modal {
			border: 0 !important;
		}
	}

	& .subnav-filters-modal {
		display: inherit !important;

		& .subnav-search {
			border: 2px solid var(--color-border);
			border-radius: 3px;
			flex: 1 1 280px;
			max-width: 420px;
			margin-right: auto !important;

			& .dir-search {
				margin: 0;
			}

			& .bp-dir-search-form {
				position: relative;
				display: flex;
				align-items: center;
				width: 100%;
				margin: 0;

				/* Hide BuddyBoss pseudo search icon so only one icon is shown. */
				&::before {
					display: none !important;
				}
			}

			& input[type="search"] {
				width: 100%;
				height: 40px;
				min-height: 40px;
				background: var(--color-background-body);
				border: 2px solid var(--color-border);
				border-radius: 3px;
				padding: 0.625rem 2.5rem 0.625rem 0.75rem !important;
			}

			& .nouveau-search-submit {
				position: absolute;
				top: 50%;
				right: 0.5rem;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				width: 1.25rem;
				height: 1.25rem;
				padding: 0;
				margin: 0;
				background: transparent;
				border: 0;
				color: var(--color-bond-grey);
				transform: translateY(-50%);
				opacity: 1 !important;

				&:hover {
					color: var(--color-bond-black);
				}
			}

			& .search-form_reset {
				display: none;
			}
		}

		/* Hide loading spinner icon in the top bar; not part of the groups style pattern. */
		&>.bb-icon-loader {
			display: none;
		}

		& .bb-subnav-filters-container-main {
			display: flex;
			flex: 0 0 auto;
			margin: 0;
		}

		/* "Show"/"by" labels are omitted in the groups top controls pattern. */
		& .bb-subnav-filters-label {
			display: none;
		}

		& .bb-subnav-filters-container.bb-subnav-filters-filtering {
			margin: 0;

			/* Style BuddyBoss filter opener buttons like groups select inputs. */
			&>.subnav-filters-opener {
				position: relative !important;
				display: inline-flex !important;
				align-items: center !important;
				justify-content: flex-start !important;
				min-width: 170px !important;
				height: 40px !important;
				padding: 0 2rem 0 0.75rem !important;
				margin: 0 !important;
				background-color: var(--color-bond-grey-light) !important;
				background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23545246' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
				background-repeat: no-repeat !important;
				background-position: right 0.75rem center !important;
				background-size: 12px 8px !important;
				border: 2px solid var(--color-border) !important;
				border-radius: 3px !important;
				color: var(--color-bond-black) !important;
				font-size: 1rem !important;
				font-weight: 400 !important;
				line-height: 1.2 !important;

				& .bb-icon-angle-down {
					display: none;
				}

				& .selected {
					display: block;
					max-width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					text-transform: capitalize;
				}

				&:hover,
				&:focus {
					color: var(--color-bond-black);
				}
			}

			& .subnav-filters-opener span {
				font-size: 17px;
			}
		}

		& .component-filters {
			flex: 0 0 auto;
			margin: 0;

			& .bb-select-dropdown {
				-webkit-appearance: none;
				appearance: none;
				min-width: 170px;
				height: 40px;
				padding: 0 2rem 0 0.75rem;
				background-color: var(--color-bond-grey-light);
				background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23545246' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
				background-repeat: no-repeat;
				background-position: right 0.75rem center;
				background-size: 12px 8px;
				border: 1px solid var(--color-border);
				border-radius: 3px;
				color: var(--color-bond-black);
				line-height: 38px;

				& .bb-icon-angle-down {
					display: none;
				}

				&:hover,
				&:focus {
					color: var(--color-bond-black);
				}
			}
		}
	}
}

/* -----------------------------------------------------------------------------
   BuddyBoss "Show" filter structure fix
   ----------------------------------------------------------------------------- */

/* BuddyBoss places the filter wrapper OUTSIDE .subnav-filters-modal. */
.activity-head-bar .bb-subnav-filters-container-main {
	display: flex;
	flex: 0 0 auto;
	margin: 0;
}

.activity-head-bar .bb-subnav-filters-container-main .bb-subnav-filters-label {
	display: none;
}

.activity-head-bar .bb-subnav-filters-container.bb-subnav-filters-filtering {
	margin: 0;
}

/* Style the opener button for the exact activity filter DOM. */
.activity-head-bar .bb-subnav-filters-container.bb-subnav-filters-filtering > .subnav-filters-opener {
	position: relative !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	min-width: 170px !important;
	height: 40px !important;
	padding: 0 2rem 0 0.75rem !important;
	margin: 0 !important;
	background-color: var(--color-bond-grey-light) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23545246' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 0.75rem center !important;
	background-size: 12px 8px !important;
	border: 2px solid var(--color-border) !important;
	border-radius: 3px !important;
	color: var(--color-bond-black) !important;
	font-size: 1rem !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
}

.activity-head-bar .bb-subnav-filters-container.bb-subnav-filters-filtering > .subnav-filters-opener .bb-icon-angle-down {
	display: none;
}

.activity-head-bar .bb-subnav-filters-container.bb-subnav-filters-filtering > .subnav-filters-opener .selected {
	display: block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-transform: capitalize;
}

.activity-head-bar .bb-subnav-filters-container.bb-subnav-filters-filtering .subnav-filters-opener span {
	font-size: 17px;
}