// =============================================================================
// :: Settings
// =============================================================================
$iconSize: 2.1rem;
$iconWeight: 0.3rem;

// =============================================================================
// :: Collapse
// =============================================================================
.c-collapse {
	position: relative;

	border-bottom: $border-width-1x-small solid $border-color-grey;
}

// =============================================================================
// :: Elements
// =============================================================================
.c-collapse__header {
	position: relative;

	display: flex;
	justify-content: space-between;
	padding: 2.4rem 2rem 2.4rem 0;

	cursor: pointer;
}

.c-collapse__title {
	margin-right: 3rem;

	font-family: $font-family-primary;
	font-size: $font-size-base;

	color: $text-color-highlight;
}

.c-collapse__button {
	position: absolute;
	top: 50%;
	right: 0;

	display: block;

	background-color: transparent;
	outline: none;
	border: none;

	transform: translateY(-50%);
}

.c-collapse__icon {
	position: relative;

	display: block;
	width: $iconSize;
	height: $iconSize;

	cursor: pointer;

	&::before,
	&::after {
		content: "";

		position: absolute;

		background-color: $background-color-purple;

		transition: transform 0.3s ease-out;
	}

	&::before {
		top: 0;
		left: 50%;

		width: $iconWeight;
		height: 100%;

		margin-left: calc(#{$iconWeight} * -0.5);
	}

	&::after {
		top: 50%;
		left: 0;

		width: 100%;
		height: $iconWeight;

		margin-top: calc(#{$iconWeight} * -0.5);
	}
}

.c-collapse__content {
	height: 0;
	overflow: hidden;

	transition: height 0.4s ease-in-out;

	pointer-events: none;
}

.c-collapse__text {
	@include extend-small-base();

	margin-bottom: 2.8rem;
}

.c-collapse__feedback {
	margin-bottom: 4rem;
}

// =============================================================================
// :: States
// =============================================================================
.c-collapse {

	&.is-open {
		padding-bottom: 2rem;

		.c-collapse__content {
			height: auto;

			pointer-events: auto;
		}

		.c-collapse__icon {

			&::before {
				transform: rotate(90deg);
			}

			&::after {
				transform: rotate(180deg);
			}
		}
	}
}