// ============================================================================
// :: COLLAPSE
// ============================================================================
.m-collapse {
	position: relative;
}

// ============================================================================
// :: Elements
// ============================================================================
.m-collapse__header {
	@extend %__icon-arrow-down-s;
	position: relative;

	display: flex;
	justify-content: flex-start;
	align-items: center;

	width: 100%;
	margin: 0;
	padding: 0;

	text-align: left;

	border: none;
	background-color: transparent;

	cursor: pointer;

	&::before {
		position: absolute;
		top: 50%;
		right: 0;

		color: $text-color;


		transform: translate(-50%, -50%);
		transform-origin: center center;

		transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
	}
}

.m-collapse__header__button {
	position: absolute;
	top: 50%;
	right: -8rem;

	padding: 1.5rem 4rem;

	color: $text-color;
	background-color: transparent;
	border: none;

	transform: translate(-50%, -50%);
	transform-origin: center center;

	transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;

	cursor: pointer;
}

.m-collapse__content {
	height: 0;
	overflow: hidden;
	margin-left: 2rem;

	transition: height 0.3s ease-in-out;

	.m-collapse__content__container {
		overflow: hidden;
		padding-top: 2rem;
	}

	.m-collapse {
		overflow: hidden;

		&:nth-child(n+5) {
			height: 0;
			padding: 0;

			transition: height 0.3s ease-in-out;
		}
	}
}

// ============================================================================
// :: Modifiers
// ============================================================================
.m-collapse--section-title {
	z-index: $z-index-high;

	margin-left: 2rem;

	strong,
	.a-link {
		font-family: $font-family-beausans;
		font-size: $font-size-4x-large;
		font-weight: $font-weight-normal;
		line-height: $line-height-5x-large;
	}

	.m-collapse__header {
		z-index: $z-index-high;

		padding: 1rem 5rem 1rem 3rem;

		&::before {
			right: 1rem;

			font-size: $font-size-2x-large;
		}
	}

	.m-collapse__title {
		font-weight: $font-weight-bold;
	}

	.m-collapse__content {
		position: absolute;

		width: 100%;
		margin-left: 0;
		padding-right: 2rem;

		&::before {
			content: "";

			position: absolute;
			top: -7.2rem;
			left: 0;

			width: 100%;
			height: calc(100% + 7.2rem);

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

			transform: scaleY(0);
			transform-origin: top center;

			transition: transform 0.2s ease-in-out;
		}
	}

	.m-collapse__content__container {
		padding-top: 0;
		padding-bottom: 2rem;

		.m-list {
			@for $i from 1 through 10 {

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

			.m-list__item {
				opacity: 0;

				transform: translateY(-1rem);
			}
		}
	}
}

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

	&.is-open {

		> .m-collapse__header {

			&::before,
			.m-collapse__header__button {
				color: $text-color-primary;

				transform: translate(-50%, -50%) rotate(180deg);
			}
		}

		.m-collapse__content {
			height: auto;
		}
	}
}

.m-collapse--section-title {

	&.is-open {

		.m-collapse__content {
			overflow: visible;

			&::before {
				transform: scaleY(1);
			}
		}

		.m-collapse__content__container {

			.m-list {

				.m-list__item {
					opacity: 1;

					transform: translateY(0);
				}
			}
		}
	}
}