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

:root {
	--bond-bp-search-field-width: 285px;
}

.bond-bp-content {
	& #buddypress {
		& .bond-bp-directory-title {
			margin: 0 0 1.25rem;
		}

		& .activity-head-bar {
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			justify-content: space-between;
			gap: 0.75rem;
			margin-bottom: 1.25rem;

			& > .bb-icon-loader,
			& .bb-subnav-filters-label {
				display: none;
			}

			& .bb-subnav-filters-container.bb-subnav-filters-search {
				flex: 0 1 var(--bond-bp-search-field-width);
				width: var(--bond-bp-search-field-width);
				max-width: var(--bond-bp-search-field-width);
				margin: 0;

				& > .subnav-filters-opener,
				& > .bb-icon-loader {
					display: none;
				}

				& > .subnav-filters {
					display: block;
					width: 100%;
					padding: 0;
					background: transparent;
					border: 0;
					box-shadow: none;
				}

				& .subnav-search,
				& .dir-search {
					margin: 0;
				}
			}

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

			& > .bb-subnav-filters-container-main:nth-of-type(2) {
				margin-left: auto;
			}

			& .bb-subnav-filters-container-main + .bb-subnav-filters-container-main {
				margin-left: 0.75rem;
			}

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

				& > .subnav-filters-modal {
					top: calc(100% + 0.375rem);
					left: 0;
					min-width: 100%;
					padding: 0.5rem 0;
					background: var(--color-background-body);
					border: 1px solid var(--color-border);
					border-radius: 4px;
					box-shadow: 0 0.75rem 2rem rgba(55, 50, 46, 0.08);

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

					& li {
						margin: 0;
					}

					& a {
						display: block;
						padding: 0.5rem 0.75rem;
						color: var(--color-bond-black);
						font-size: 0.9375rem;
						line-height: 1.35;
						text-decoration: none;
					}

					& li.selected a,
					& a:hover,
					& a:focus {
						background: var(--color-card-background);
						color: var(--color-bond-black);
					}
				}
			}
		}
	}
}

@media (max-width: 991px) {
	.bond-bp-content #buddypress {
		& .bond-bp-directory-title {
			font-size: 2.125rem;
		}

		& .activity-head-bar {
			flex-wrap: wrap;
			align-items: stretch;

			& .bb-subnav-filters-container.bb-subnav-filters-search {
				flex: 1 1 100%;
				width: 100%;
				max-width: none;
			}

			& .bb-subnav-filters-container-main {
				flex: 0 1 calc(50% - 0.375rem);
			}

			& .bb-subnav-filters-container.bb-subnav-filters-filtering > .subnav-filters-opener {
				min-width: 0;
				width: 100%;
			}
		}
	}
}

@media (max-width: 640px) {
	.bond-bp-content #buddypress {
		& .bond-bp-directory-title {
			font-size: 1.75rem;
			line-height: 1.15;
		}

		& .activity-head-bar {
			row-gap: 0.625rem;

			& .bb-subnav-filters-container-main {
				flex: 1 1 100%;
			}

			& .bb-subnav-filters-container.bb-subnav-filters-filtering > .subnav-filters-opener {
				min-width: 0;
				width: 100%;
			}
		}
	}
}