.bg__aggregation-box { /* AggregationBox.jsx */

	margin-bottom: 30px;

	/* hamburger menu containing extra options */
	.bg__agb__facet-header {
		border-bottom: 1px solid $clGreyTint;
		background-color: $clGrey;
		border-radius: 2px 2px 0 0;
		position: relative;
		color: black;
		&:hover {
			background-color: mix($clGrey, $clGreyTint, 50%);
		}

		.bg__agb__facet-title-bar {
			padding: 8px 10px 9px 10px;
			cursor: pointer;

			.bg__agb__menu-icon {
				position: absolute;
				right: 0;
				top: 2px;
				padding: 7px 6px;
				margin: 0;
				font-weight: bold;
				font-size: 16px;
			}

			.bg__agb__facet-title {
				color: black;
				font-size: 16px;
				font-family: $fontHeading;
				overflow: hidden;
				font-weight: normal;
				display: inline-block;
				text-overflow: ellipsis;
				white-space: nowrap;
				max-width: calc(100% - 5px);

				.fa-info-circle {
					font-size: 13px;
					padding-top: 6px;
					margin-left: 0px;
					margin-right: 6px;
				}
			}
		}

		ul {
			display: none;
		}

		input:checked ~ ul {
			border-top: 1px solid #d3d3d3;
			display: flex;
			width: 100%;
		}

		.bg__agb__extra-options {
			display: flex;
			color: black;
			padding: 10px 5px;
			background-color: $clGreyTint;

			.bg__agb__exclude-btn {
				cursor: pointer;
				display:flex;
				font-size: 13px;
				margin-top: 3px;
				margin-right: 7px;

				& > input {
					vertical-align: middle;
				}
				& > label {
					font-weight: normal;
					margin:0px;
					text-transform: uppercase;
					font-family: $fontHeading;
					&:hover {
						color: $clPrimary;
					}
				}
			}
			.bg__agb__sort-btn-wrapper {
				flex-grow: 2;
				display: flex;
				margin-top: 3px;
				flex-direction: row-reverse;
				.bg__agb__sort-btn {
					cursor: pointer;
					color: $clDarkGrey;
					padding: 3px 5px;
					.bg__agb__sort-active {
						color: black;
						&:hover {
							opacity: 0.7;
						}
					}
					&:hover {
						color: black;
					}
				}
			}
		}
		label {
			display: inline;
		}
		.bg__agb__remove-button {
			border-left: 1px solid $clDarkGrey;
			padding: 2px 7px;
			background-color: transparent;
			text-transform: uppercase;

			&:hover {
				color: $clPrimary;
			}
		}
	}

	/* search box on top of the list of facets*/
	.bg__agb__search-box {
	  border: 1px solid #f3f3f3;
	  display: flex;
	  justify-content: space-between;

	  .bg__agb__search-input {
	    background-color: #fdfdfd;
	    border: 0;
	    border-left-width: 2px;
	    border-radius: 2px;
	    margin-bottom: 0;
        min-width: 100px;
	    outline: 0;
	    padding: 6px 10px;
		width: 60%;

	    &::placeholder {
	      font-size: 12px;
	    }
	  }
	  .bg__agb__search-count {
	    color: #666;
	    font-size: 80%;
	    padding-top: 10px;
		margin-right: 5px;
		text-align: right;
	  }
	}

	/* ul containing all sorted facets */
	.bg__agb__facet-list {
		margin: 0;
		max-height: 560px;
		overflow: auto;
		padding-left: 0;

		.bg__agb__facet-list-item {
			transition: background-color $transition;
			background-color: $clGrey;
			word-wrap: break-word;
			font-size: 1.3rem;
			list-style-type: none;
			padding: 8px 6px 8px 8px;
			cursor: pointer;
			color: $list-item-color;
			position: relative;
			margin: 0;

			&.disabled {
				padding-left: 26px;
				cursor: default;
			}
			.elem-label {
				@include ellipses($widthSubst : '70px');
			}

			&.selected {
				background-color: mix($clPrimary, $clGrey, 25%);
				border-left: 3px solid $clPrimary;
				font-weight: 600;
				&:hover {
					background-color: mix(
						mix($clPrimary, $clGrey, 25%),
						$clGrey,
						50%
					);
					.bg__agb__checkbox {
						background-color: rgba($clPrimary, 0.4);
					}
				}
				span {
					font-weight: normal;
				}
				.bg__agb__checkbox {
					background-color: $clPrimary;
					border-color: darken($clPrimary, 10%);
				}
			}

			&:hover:not(.disabled) {
				background-color: mix($clGrey, $clGreyTint, 50%);
				.bg__agb__checkbox {
					background-color: $clPrimary;
					border-color: darken($clPrimary, 10%);
				}
			}

			// Make color red, to indicate elements will be excluded
			&.exclude {
				&.selected {
					border-color: $clRed;
					background-color: mix($clRed, $clGrey, 25%);
					&:hover {
						background-color: mix(
							mix($clRed, $clGrey, 25%),
							$clGrey,
							50%
						);
						.bg__agb__checkbox {
							background-color: rgba($clRed, 0.4);
						}
					}
					.bg__agb__checkbox {
						background-color: $clRed;
						border-color: darken($clRed, 10%);
					}
				}
				&:hover {
					.bg__agb__checkbox {
						background-color: $clRed;
						border-color: darken($clRed, 10%);
					}
				}
			}

			&.exclude {
			}

			.bg__agb__checkbox {
				transition: background-color $transition;
				display: inline-block;
				width: 12px;
				height: 12px;
				border: 1px solid $clGreyTint;
				margin-right: 6px;
				margin-top: 3px;
				vertical-align: top;
			}
		}
	}

	/* Show more/less button */
	.bg__agb__switch-view {
		background-color: $clGrey;
		border-radius: 0 0 2px 2px;
		color: $clPrimary;
		display: block;
		border-top: 1px solid mix($clGrey, $clGreyTint, 50%);
		padding: 5px 8px 5px 5px;
		text-align: right;
		cursor: pointer;
		text-decoration: none;
		&:hover {
			color: darken($clPrimary, 8%);
		}

		& > .switchViewText {
			font-family: $fontHeading;
			font-size: 12px;
			padding-left: 1rem;
			text-transform: uppercase;
		}
		& > .switchIcon {
			font-size: 1rem;
			margin-left: 0.5rem;
		}
	}

	/* count per facet */
	.bg__agb__count {
		background-color: white;
		font-size: 0.9em;
		border-radius: 25px;
		display: inline-block;
		padding: 2px 4px;
		min-width: 15px;
		vertical-align: middle;
		font-family: $fontHeading;
		float: right;
	}


}