.c-facet {
	background-color: $facet--background-color;
	padding: $facet--spacing-small;
	position: relative;
	font-size: $facet--font-size;
	color: $facet--color;

	@include media-query('sm') {
		padding: $facet--spacing-normal;
	}
}

.c-facet--small {
	font-size: $facet--font-size-small;
}

.c-facet__container {
	display: flex;
	flex-direction: column;

	@include media-query('sm') {
		flex-direction: row;
	}
}

.c-facet__label {
	display: block;
	font-weight: $facet--font-bold;
	white-space: nowrap;
	margin-right: $facet--spacing-large;
	margin-bottom: $facet--spacing-small;
}

.c-facet__item {
	margin-bottom: $facet--spacing-small;
	flex: 1 1 100%;

	@include media-query('sm') {
		margin-right: $facet--spacing-x-small;

		&:last-of-type {
			margin-right: $facet--spacing-small;
		}
	}

	@include media-query('md') {
		margin-right: $facet--spacing-normal;
		margin-bottom: 0;
		position: relative;
	}
}

.c-facet__item legend {
	width: 100%;
}

.c-facet__button {
	color: $facet--button-color;
	background: $facet--button-background;
	border: $facet--button-border;
	border-radius: $facet--button-border-radius;
	font-weight: $t-a-typography-font-weight-normal;
	margin-bottom: 0;
	width: 100%;
	height: $facet--button-height;
	position: relative;

	> svg {
		transition-duration: 0.2s;
	}

	&.is-open {
		text-decoration: none;

		svg {
			transform: rotate(180deg);
		}
	}
}

.c-facet__button--disabled {
	border-color: $facet--button-color-disabled;
	color: $facet--button-color-disabled;
	cursor: default;
}

.c-facet__selected {
	font-weight: $facet--font-bold;
}

.c-facet__ellipsis {
	text-overflow: ellipsis;
	overflow: hidden;
	text-align: left;
	position: absolute;
	left: $facet--spacing-small;
	top: 25%;
	white-space: nowrap;
	width: calc(100% - 28px); // 16px of icon + 4px extra spacing to avoid overlap of icon + 8px away from edge
}

.c-facet__icon {
	@include u-icon();
	position: absolute;
	top: 25%;
	right: $facet--spacing-small;
}

.c-facet__submit {
	background-color: $facet--submit-background-color;
	border: $facet--submit-border;
	border-radius: $facet--submit-border-radius;
	color: $facet--submit-color;
	padding: 0.6em 1em;

	&:hover {
		background: $facet--submit-background-color-hover;
		color: $facet--submit-color-hover;
	}
}

.c-facet__clear-all {
	@include u-link-underline;
	flex: 1 1 100%;
	font-size: $facet--clear-font-size;
	margin-right: $facet--spacing-normal;
	margin-bottom: $facet--spacing-normal;
	margin-top: $facet--spacing-x-small;

	.js & {
		align-self: flex-end;
		margin-top: 0;
		margin-bottom: 0;

		@include media-query('lg') {
			margin-bottom: $facet--spacing-small;
		}
	}
}


.c-facet-expander__list {
	@include u-list-reset();
}

.c-facet-expander__button-container {
	@include u-hide;
}

.js {
	.c-facet-expander {
		background-color: $facet-expander--background-color;
		box-sizing: border-box;
		padding: $facet--spacing-large;
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		z-index: 1;

		@include media-query('sm') {
			transform: translateY(8px);
		}

		@include media-query('md') {
			transform: translateY(16px);
			min-width: $facet-expander--min-width;
			width: auto;
		}
	}

	.c-facet-expander__list {
		color: $facet-expander--list-color;
		font-size: $facet--font-size;
		white-space: nowrap;
	}

	.c-facet-expander__list-item {
		margin-bottom: $facet--spacing-x-small;
	}

	.c-facet-expander__link {
		color: $facet-expander--color;

		@include media-query('sm') {
			white-space: nowrap;
		}
	}

	.c-facet-expander__link--underline {
		@include u-link-underline;
	}

	.c-facet-expander__button-container {
		@include u-show;
		margin-bottom: $facet--spacing-normal;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}

	.c-facet-expander__clear-selection {
		@include u-link-underline;
		background: none;
		color: $facet-expander--color;
		border: none;
		align-self: center;
	}
}