// ============================================================================
// :: FILTER
// ============================================================================
.m-filter {
	position: relative;

	display: inline-block;
	width: auto;
	padding: 1.2rem 3rem;

	border-radius: $border-radius;
	background-color: $background-color-white;
	box-shadow: $box-shadow;
}

// ============================================================================
// :: FILTER
// ============================================================================
.m-filter__content {
	margin-left: 0;
}

.m-filter__header {
	padding-right: 3rem;

	&::before {
		top: 0.7rem;
		right: 0;
	}
}

.m-filter__content__container {

	//important is used to overwrite the collapse class
	padding-top: 1rem !important; /* stylelint-disable-line */
	padding-bottom: 2rem;

	@for $i from 1 through 40 {

		.m-filter__item:nth-child(#{$i}) {
			transition: transform 0.3s ease-in-out $i * 0.06s, opacity 0.3s ease-in-out $i * 0.06s;
		}
	}

	.m-filter__item {
		margin: 1rem 0;

		opacity: 0;

		transform: translateY(-1rem);
	}
}

// ============================================================================
// :: States
// ============================================================================
.m-filter {

	&.is-open {

		padding: 1.2rem 3rem 0;

		.m-filter__header {
			padding-bottom: 1.2rem;

			border-bottom: $border-default-m-extra-light;
		}

		.m-filter__item {
			opacity: 1;

			transform: translateY(0);
		}
	}
}