.bg__aggregation-list {
	font-size: 14px;
	.bg__agl__tab-new {
		margin-bottom: 5px;
		& > button {
			color: $clPrimary;
			background-color: white;
			transition: background-color $transition;
			&:hover {
				color: darken($clPrimary, 8%);
			}
		}
	}

	/* for the selected facets above the AggregationBoxes */

	.bg__agl__selected-facets {
		margin-bottom: 10px;

		.bg__agl__selected-item {
			border: 1px solid $clGreyTint;
			border-radius: 2px;
			border-left: 3px solid $clPrimary;
			margin-bottom: 3px;
			padding: 6px 2px 6px 1rem;
			word-wrap: break-word;
			text-overflow: ellipsis;

			.elem-label {
				@include ellipses($widthSubst : '70px');
			}

			.fa-times {
				cursor: pointer;
				float: right;
				padding: 4px 5px;
				&:hover {
					opacity: 0.8;
				}
			}
			.bg__agl__count {
				margin-right: 2px;
				background-color: $clGrey;
				font-size: 0.9em;
				border-radius: 25px;
				display: inline-block;
				padding: 2px 4px;
				min-width: 15px;
				vertical-align: middle;
				font-family: $fontHeading;
				float: right;
			}

			&.exclude {
				border-left: 3px solid $clRed;
			}
		}
	}

	/* for empty facets blocks */
	.bg__agl__empty-facet-block {
		margin-bottom: 15px;
		background-color: $clGrey;
		color: black;
		border: 1px solid $clGreyTint;
		border-radius: 0;

		.bg__agl__title-wrapper {
			display: flex;
			padding: 8px 10px 9px;
			.fa-info-circle {
				padding-top:6px;
				font-size: 13px;
			}

			.bg__agl__facet-title {
				padding:0px 5px;
				text-overflow: ellipsis;
				white-space: nowrap;
				font-size: 16px;
				font-family: $fontHeading;
				overflow: hidden;
				font-weight: normal;
			}

			.fa-times {
				padding-top:6px;
				cursor: pointer;
			}
		}
	}
}