/* ==============================================================
   Widget Search Facets
   style declarations for widget_searchFacets.xhtml
   ==============================================================*/
/* WIDGET SEARCH FACETS */
.widget-search-facets {
	&__topbar {
		h2 {
			span {}
		}
	}
	.widget {
		ul {}
		li {
			&.active {
				a {
					background-color: @bg-hover;
				}
				.row {}
				.col-11,
				.col-1 {}
				.col-1 {}
			}
		}
		a {}
	}
	/* FILTER */
	&__filter {
		top: 0;
		input, button {}
		input {
			background-color: @ci-hovercolor1;
			border-bottom: 1px solid @bg-content-box;

			&::-webkit-input-placeholder {}
			&:-moz-placeholder {}
			&::-moz-placeholder {}
			&:-ms-input-placeholder {}
			&.in {}
		}
		[data-toggle="filter-input"] {}
	}
	&__filter-input {}
	/* COLLECTION/GROUPS */
	&__collection,
	&__groups {
		ul {}
	}
	&__collection {}
	&__groups {}
	/* COLLAPSE FACETS */
    &__collapse {
        a {}
    }
	&__boolean {

	}
	&__boolean-button {
		color: @fg-general;
		border: @border;
		& when (@colorModes = true) {
			.mx-dark-mode-rules ({
				background: @bg-active;
			});
			.mx-light-mode-rules ({
				background: transparent;
			});
		}
		&:hover {
			& when (@colorModes = true) {
				.mx-dark-mode-rules ({
					color: @fg-general;
					background: @bg-hover;
				});
				.mx-light-mode-rules ({
					color: @fg-general;
					background: @bg-hover;
				});
			}
		}
		&.-active {
			& when (@colorModes = true) {
				.mx-dark-mode-rules ({
					// color: white;
					background-color: @bg-hover;
				});
				.mx-light-mode-rules ({
					background-color: @bg-hover;
				});
			}
			&:hover {
				.mx-dark-mode-rules ({
					color: @fg-general;
					background-color: @bg-hover;
				});
				.mx-light-mode-rules ({
					color: @fg-general;
					background-color: @bg-hover;
				});
			}
		}
	}
}


/* BREAKPOINT FOR LARGE DESKTOPS */
@media screen and (max-width: @largeBreakpoint) {}

/* BREAKPOINT FOR DESKTOPS */
@media screen and (max-width: @mediumBreakpoint) {}

/* BREAKPOINT FOR TABLETS */
@media screen and (max-width: @smallBreakpoint) {}

/* BREAKPOINT FOR SMARTPHONES */
@media screen and (max-width: @xSmallBreakpoint) {}
