/* Remove the container query from the stream filters, to prevent z-index issues */
.ipsForm--filter-inline-form{
	container: none;
}

.cStreamFilter {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12em, 1fr));
	gap: 1px;
	border-top: 1px solid var(--i-background_4);
	overflow: hidden; /* gap overflow */
}

	.cStreamFilter > li {
		position: relative;
		outline: 1px solid var(--i-background_3);
	}
		.cStreamFilter > li > a {
			display: block;
			padding: 1.3em;
			color: inherit;
		}

			.cStreamFilter > li > a:hover{
				background-color: color-mix(in srgb, var(--i-background_3) 50%, transparent);
			}
		
			.cStreamFilter > li > a.cStreamFilter_active {
				background: var(--i-primary);
				color: var(--i-primary-contrast);
			}

		.cStreamFilter__title {
			font-weight: 600;
			font-size: 1.05em;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		
			.cStreamFilter__title::after {
				content: '\f107';
				font-family: var(--i-font-awesome);
				-moz-osx-font-smoothing: grayscale;
				-webkit-font-smoothing: antialiased;
				text-rendering: auto;
				font-weight: 900;
				margin-inline-start: .6em;
				font-size: .9em;
				opacity: .6;
			}

	.cStreamFilter__blurb em {
		opacity: 0.3;
	}

	.cStreamFilter__blurb {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

/* If the filter form doesn't exist, hide the toggle button. We do this with JS too in ips.streams.main.js for older browsers, but the below prevents the button from flashing on page load */
.ipsBox--activity-stream:not(:has(#elStreamFilterForm)) [aria-controls="elStreamFilterForm"]{
	display: none;
}

/* FILTER FORM STYLES */
.cStreamForm_list > li {
	position: relative;
}

.cStreamForm_list .ipsSideMenu_item {
	padding-top: 5px;
	padding-bottom: 5px;
}

.cStreamForm_list .ipsSideMenu_item.cStream_withOptions {
	margin-inline-end: 45px;
}

.cStreamForm_list .ipsSideMenu_item.ipsSideMenu_itemActive + .cStreamForm_menu,
.cStreamForm_list .ipsSideMenu_item:not(.ipsSideMenu_itemActive):hover + .cStreamForm_menu {
	display: block;
	background: var(--i-background_5);
}

.cStreamForm_list .ipsSideMenu_item.ipsSideMenu_itemActive + .cStreamForm_menu{
	color: #fff;
	background: hsl(0 0% 100% / .1);
}

.cStreamForm_list .ipsSideMenu_item.ipsSideMenu_itemActive + .cStreamForm_menu.cStreamForm_menuActive {
	background: var(--i-background_3);
}

.cStreamForm_list li:hover a.ipsSideMenu_item:not(.ipsSideMenu_itemActive) + .cStreamForm_menu {
	opacity: 0.3;
	pointer-events: none;
}

.cStreamForm_menu {
	padding: 5px 10px;
	cursor: pointer;
	position: absolute;
	top: 0;
	display: none;
	inset-inline-end: 0;
}

.cStreamForm_list[data-filterType="type"] .ipsSideMenu_item .cStreamForm_menu + a {
	margin-inline-end: 45px;
}

.cStreamForm_nodes {
	display: block;
	padding: 5px 0;
	padding-inline-start: 12px;
	margin-inline-start: 10px;
	border-inline-start: 2px solid var(--i-background_6);
}

	.cStreamForm_nodes .ipsFieldRow {
		width: 100%;
	}