// _facets.scss

.facets {

	li {
		@include transition(background-color 0.2s, color 0.2s ease-in-out);

		border-left-color: $brand-primary;
		border-right-color: $brand-primary;
		color: rgba(255,255,255,0.8);
		cursor: pointer;
		position: relative;

		&::before {
			@include transform(translateY(-50%));

			color: rgba(255,255,255,0.8);
			content: "\2023";
			font-size: 30px;
			position: absolute;
			right: 15px;
			top: 50%;
		}

		&:first-child {
			border-top-color: $brand-primary;
		}

		&:last-child {
			border-bottom-color: $brand-primary;
		}

		&:hover {
			@extend .btn-primary:hover;
		}

		&.active,
		&.active:hover {
			@extend .btn-primary.active;

			border: none;
		}

	}

	.caret {
		@include transform(translateY(-50%));

		border-bottom: 5px solid transparent;
		border-left: 5px solid lighten($brand-primary, 20%);
		border-top: 5px solid transparent;
		position: absolute;
		right: 10px;
		top: 50%;
	}

}

h4.active,
.facet.active {
	@extend .btn-primary:hover;

	border-radius: 6px;
	font-size: 16px;
	padding: 10px 15px;
	position: relative;
	text-transform: none;

	&::before {
		@include transform(translateY(-50%));

		content: "\00d7";
		cursor: pointer;
		font-size: 24px;
		position: absolute;
		right: 15px;
		top: 50%;
	}

}