<commit_before>/*
Accordian

Media queries are at the bottom of `f-accordian.css`.

<pre>
BLOCK f-accordian
MODIFIER f-accordian_open
	ELEMENT f-accordian__cuff-wrapper
		ELEMENT f-accordian__cuff-text
		ELEMENT f-accordian__arrow
	ELEMENT f-accordian__text
</pre>

```
<div class="f-content"> <!-- only here for the style guide - should not be used on the website -->

<article class="f-accordian">
	<h2 class="f-accordian__heading">Hej</h2>
	<a class="f-accordian__arrow" onclick="this.parentElement.classList.toggle('f-accordian_open');"><div></div></a>
	<div class="f-accordian__cuff-wrapper">
		<div class="f-row f-row_6">
			<div class="f-row__cell-4 f-row__cell-mobile">
				<p class="f-accordian__cuff-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum molestias reprehenderit, commodi!</p>
			</div>
		</div>
	</div>

	<div class="f-accordian__text">
		<section class="f-text">
			<h2 class="f-text__heading">Lorem ipsum dolor sit amet</h2>
			<p class="f-text__text">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error minima a aperiam rerum, pariatur. Veniam unde id quo molestiae possimus soluta dignissimos magni sit eos dolore nihil, blanditiis animi maxime! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia deleniti itaque eum iste, quos quae debitis odit at. Reprehenderit illum nihil doloribus nostrum, magni quibusdam laudantium autem eveniet voluptas est.
			</p>
			<h2 class="f-text__heading">Lorem ipsum dolor sit amet</h2>
			<p class="f-text__text">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error minima a aperiam rerum, pariatur. Veniam unde id quo molestiae possimus soluta dignissimos magni sit eos dolore nihil, blanditiis animi maxime! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia deleniti itaque eum iste, quos quae debitis odit at. Reprehenderit illum nihil doloribus nostrum, magni quibusdam laudantium autem eveniet voluptas est.
			</p>
			<p class="f-text__text">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error minima a aperiam rerum, pariatur. Veniam unde id quo molestiae possimus soluta dignissimos magni sit eos dolore nihil, blanditiis animi maxime! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia deleniti itaque eum iste, quos quae debitis odit at. Reprehenderit illum nihil doloribus nostrum, magni quibusdam laudantium autem eveniet voluptas est.
			</p>
		</section>
	</div>
</article>

<article class="f-accordian f-accordian_open">
	<h2 class="f-accordian__heading">Privacy</h2>
	<a class="f-accordian__arrow" onclick="this.parentElement.classList.toggle('f-accordian_open');"><div></div></a>
	<div class="f-accordian__cuff-wrapper">
		<div class="f-row f-row_6">
			<div class="f-row__cell-4 f-row__cell-mobile">
				<p class="f-accordian__cuff-text">Ab ea tempore, in cupiditate quod, facere accusantium laboriosam obcaecati recusandae consectetur maiores vero debitis sequi eveniet ipsa!</p>
			</div>
		</div>
	</div>
	<div class="f-accordian__text">
		<section class="f-text">
			<h2 class="f-text__heading">Lorem ipsum dolor sit amet</h2>
			<p class="f-text__text">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error minima a aperiam rerum, pariatur. Veniam unde id quo molestiae possimus soluta dignissimos magni sit eos dolore nihil, blanditiis animi maxime! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia deleniti itaque eum iste, quos quae debitis odit at. Reprehenderit illum nihil doloribus nostrum, magni quibusdam laudantium autem eveniet voluptas est.
			</p>
			<p class="f-text__text">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error minima a aperiam rerum, pariatur. Veniam unde id quo molestiae possimus soluta dignissimos magni sit eos dolore nihil, blanditiis animi maxime! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia deleniti itaque eum iste, quos quae debitis odit at. Reprehenderit illum nihil doloribus nostrum, magni quibusdam laudantium autem eveniet voluptas est.
			</p>
			<h2 class="f-text__heading">Lorem ipsum dolor sit amet</h2>
			<p class="f-text__text">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error minima a aperiam rerum, pariatur. Veniam unde id quo molestiae possimus soluta dignissimos magni sit eos dolore nihil, blanditiis animi maxime! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia deleniti itaque eum iste, quos quae debitis odit at. Reprehenderit illum nihil doloribus nostrum, magni quibusdam laudantium autem eveniet voluptas est.
			</p>
			<p class="f-text__text">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error minima a aperiam rerum, pariatur. Veniam unde id quo molestiae possimus soluta dignissimos magni sit eos dolore nihil, blanditiis animi maxime! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia deleniti itaque eum iste, quos quae debitis odit at. Reprehenderit illum nihil doloribus nostrum, magni quibusdam laudantium autem eveniet voluptas est.
			</p>
			<h2 class="f-text__heading">Lorem ipsum dolor sit amet</h2>
			<p class="f-text__text">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error minima a aperiam rerum, pariatur. Veniam unde id quo molestiae possimus soluta dignissimos magni sit eos dolore nihil, blanditiis animi maxime! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia deleniti itaque eum iste, quos quae debitis odit at. Reprehenderit illum nihil doloribus nostrum, magni quibusdam laudantium autem eveniet voluptas est.
			</p>
			<p class="f-text__text">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error minima a aperiam rerum, pariatur. Veniam unde id quo molestiae possimus soluta dignissimos magni sit eos dolore nihil, blanditiis animi maxime! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia deleniti itaque eum iste, quos quae debitis odit at. Reprehenderit illum nihil doloribus nostrum, magni quibusdam laudantium autem eveniet voluptas est.
			</p>
			<h2 class="f-text__heading">Lorem ipsum dolor sit amet</h2>
			<p class="f-text__text">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error minima a aperiam rerum, pariatur. Veniam unde id quo molestiae possimus soluta dignissimos magni sit eos dolore nihil, blanditiis animi maxime! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia deleniti itaque eum iste, quos quae debitis odit at. Reprehenderit illum nihil doloribus nostrum, magni quibusdam laudantium autem eveniet voluptas est.
			</p>
		</section>
	</div>
</article>

<article class="f-accordian">
	<h2 class="f-accordian__heading">Hej</h2>
	<a class="f-accordian__arrow" onclick="this.parentElement.classList.toggle('f-accordian_open');"><div></div></a>
	<div class="f-accordian__cuff-wrapper">
		<div class="f-row f-row_6">
			<div class="f-row__cell-4 f-row__cell-mobile">
				<p class="f-accordian__cuff-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum molestias reprehenderit, commodi. Ab ea tempore, in cupiditate quod, facere accusantium laboriosam obcaecati recusandae consectetur maiores vero debitis sequi eveniet ipsa!</p>
			</div>
		</div>
	</div>
	<div class="f-accordian__text">
		<section class="f-text">
			<h2 class="f-text__heading">Lorem ipsum dolor sit amet</h2>
			<p class="f-text__text">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error minima a aperiam rerum, pariatur. Veniam unde id quo molestiae possimus soluta dignissimos magni sit eos dolore nihil, blanditiis animi maxime! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia deleniti itaque eum iste, quos quae debitis odit at. Reprehenderit illum nihil doloribus nostrum, magni quibusdam laudantium autem eveniet voluptas est.
			</p>
		</section>
	</div>
</article>

</div><!-- only here for the style guide - should not be used on the website -->
```
*/
@import "../variables";

.f-accordian {
	position: relative;

	margin: 0 0 2rem 0;
	padding: .5rem;
	/*height: 12.2rem;*/

	border: .3rem solid var(--color-grey-light);
	border-radius: .5rem;

	overflow: hidden;
	transition: 250ms height, 250ms border-color;
}

.f-accordian__heading {
	margin: 0;

	color: var(--color-grey-dark);
	font-size: 3.6rem;
	font-weight: normal;
	line-height: 3.6rem;

	transition: 250ms color;
}

.f-accordian__cuff-wrapper {
	position:relative;

	margin-bottom: 3.4rem;
}

.f-accordian__cuff-text {
	margin: 0;
	height: 6.4rem;

	color: var(--color-grey-dark);
	font-size: 1.8rem;
	font-weight: light;
	line-height: 2.4rem;

	transition: 250ms color;
}

.f-accordian__arrow {
	display: block;
	position: absolute;
	top: 0;
	right: 0;

	height: 100%;
	width: 23rem;

	cursor: pointer;
	z-index: 10; /* KLUDGE: lift arrow to be above f-row */
}
.f-accordian__arrow div {
	/*TODO: make this a pseudo element. content: "";*/
	position: absolute;
	top: 6rem;
	right: 50%;

	width: 3rem;
	height: 3rem;

	border-bottom: 5px solid var(--color-grey-light);
	border-right: 5px solid var(--color-grey-light);

	transform: rotate(-135deg);
	transition: 250ms transform, 250ms color;
}

.f-accordian__text > * {
	/*overflow: hidden;*/
	transform: scaleY(0);
	transform-origin: top;
	transition: transform 250ms ease, height 250ms ease;
}
/*.f-accordian__text > * {
	margin-top: calc(-100% - 14.3rem);

	transition: margin-top 250ms;
}*/

/* ### .f-accordian_open
  .f-accordian_open is the modifier for an open accordian
*/
.f-accordian_open .f-accordian__text > * {	
	transform: scaleY(1);	
}

.f-accordian_open, .f-accordian_open .f-accordian__arrow div {
	border-color: var(--color-red);
}

.f-accordian_open .f-accordian__arrow {
	height: 14rem;
}

.f-accordian_open .f-accordian__heading,
.f-accordian_open .f-accordian__cuff-text {
	color: var(--color-red);
}
/*.f-accordian_open .f-accordian__cuff-text {
	height: unset;
}*/
.f-accordian_open .f-accordian__arrow div {
	transform: rotate(45deg);
}<commit_msg>made the open/close with max-height - this will work as long the content is not too long<commit_after>/*
Accordian

Media queries are at the bottom of `f-accordian.css`.

<pre>
BLOCK f-accordian
MODIFIER f-accordian_open
	ELEMENT f-accordian__cuff-wrapper
		ELEMENT f-accordian__cuff-text
		ELEMENT f-accordian__arrow
	ELEMENT f-accordian__text
</pre>

```
<div class="f-content"> <!-- only here for the style guide - should not be used on the website -->

<article class="f-accordian">
	<h2 class="f-accordian__heading">Hej</h2>
	<a class="f-accordian__arrow" onclick="this.parentElement.classList.toggle('f-accordian_open');"><div></div></a>
	<div class="f-accordian__cuff-wrapper">
		<div class="f-row f-row_6">
			<div class="f-row__cell-4 f-row__cell-mobile">
				<p class="f-accordian__cuff-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum molestias reprehenderit, commodi!</p>
			</div>
		</div>
	</div>

	<div class="f-accordian__text">
		<section class="f-text">
			<h2 class="f-text__heading">Lorem ipsum dolor sit amet</h2>
			<p class="f-text__text">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error minima a aperiam rerum, pariatur. Veniam unde id quo molestiae possimus soluta dignissimos magni sit eos dolore nihil, blanditiis animi maxime! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia deleniti itaque eum iste, quos quae debitis odit at. Reprehenderit illum nihil doloribus nostrum, magni quibusdam laudantium autem eveniet voluptas est.
			</p>
			<h2 class="f-text__heading">Lorem ipsum dolor sit amet</h2>
			<p class="f-text__text">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error minima a aperiam rerum, pariatur. Veniam unde id quo molestiae possimus soluta dignissimos magni sit eos dolore nihil, blanditiis animi maxime! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia deleniti itaque eum iste, quos quae debitis odit at. Reprehenderit illum nihil doloribus nostrum, magni quibusdam laudantium autem eveniet voluptas est.
			</p>
			<p class="f-text__text">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error minima a aperiam rerum, pariatur. Veniam unde id quo molestiae possimus soluta dignissimos magni sit eos dolore nihil, blanditiis animi maxime! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia deleniti itaque eum iste, quos quae debitis odit at. Reprehenderit illum nihil doloribus nostrum, magni quibusdam laudantium autem eveniet voluptas est.
			</p>
		</section>
	</div>
</article>

<article class="f-accordian f-accordian_open">
	<h2 class="f-accordian__heading">Privacy</h2>
	<a class="f-accordian__arrow" onclick="this.parentElement.classList.toggle('f-accordian_open');"><div></div></a>
	<div class="f-accordian__cuff-wrapper">
		<div class="f-row f-row_6">
			<div class="f-row__cell-4 f-row__cell-mobile">
				<p class="f-accordian__cuff-text">Ab ea tempore, in cupiditate quod, facere accusantium laboriosam obcaecati recusandae consectetur maiores vero debitis sequi eveniet ipsa!</p>
			</div>
		</div>
	</div>
	<div class="f-accordian__text">
		<section class="f-text">
			<h2 class="f-text__heading">Lorem ipsum dolor sit amet</h2>
			<p class="f-text__text">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error minima a aperiam rerum, pariatur. Veniam unde id quo molestiae possimus soluta dignissimos magni sit eos dolore nihil, blanditiis animi maxime! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia deleniti itaque eum iste, quos quae debitis odit at. Reprehenderit illum nihil doloribus nostrum, magni quibusdam laudantium autem eveniet voluptas est.
			</p>
			<p class="f-text__text">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error minima a aperiam rerum, pariatur. Veniam unde id quo molestiae possimus soluta dignissimos magni sit eos dolore nihil, blanditiis animi maxime! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia deleniti itaque eum iste, quos quae debitis odit at. Reprehenderit illum nihil doloribus nostrum, magni quibusdam laudantium autem eveniet voluptas est.
			</p>
			<h2 class="f-text__heading">Lorem ipsum dolor sit amet</h2>
			<p class="f-text__text">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error minima a aperiam rerum, pariatur. Veniam unde id quo molestiae possimus soluta dignissimos magni sit eos dolore nihil, blanditiis animi maxime! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia deleniti itaque eum iste, quos quae debitis odit at. Reprehenderit illum nihil doloribus nostrum, magni quibusdam laudantium autem eveniet voluptas est.
			</p>
			<p class="f-text__text">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error minima a aperiam rerum, pariatur. Veniam unde id quo molestiae possimus soluta dignissimos magni sit eos dolore nihil, blanditiis animi maxime! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia deleniti itaque eum iste, quos quae debitis odit at. Reprehenderit illum nihil doloribus nostrum, magni quibusdam laudantium autem eveniet voluptas est.
			</p>
			<h2 class="f-text__heading">Lorem ipsum dolor sit amet</h2>
			<p class="f-text__text">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error minima a aperiam rerum, pariatur. Veniam unde id quo molestiae possimus soluta dignissimos magni sit eos dolore nihil, blanditiis animi maxime! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia deleniti itaque eum iste, quos quae debitis odit at. Reprehenderit illum nihil doloribus nostrum, magni quibusdam laudantium autem eveniet voluptas est.
			</p>
			<p class="f-text__text">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error minima a aperiam rerum, pariatur. Veniam unde id quo molestiae possimus soluta dignissimos magni sit eos dolore nihil, blanditiis animi maxime! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia deleniti itaque eum iste, quos quae debitis odit at. Reprehenderit illum nihil doloribus nostrum, magni quibusdam laudantium autem eveniet voluptas est.
			</p>
			<h2 class="f-text__heading">Lorem ipsum dolor sit amet</h2>
			<p class="f-text__text">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error minima a aperiam rerum, pariatur. Veniam unde id quo molestiae possimus soluta dignissimos magni sit eos dolore nihil, blanditiis animi maxime! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia deleniti itaque eum iste, quos quae debitis odit at. Reprehenderit illum nihil doloribus nostrum, magni quibusdam laudantium autem eveniet voluptas est.
			</p>
		</section>
	</div>
</article>

<article class="f-accordian">
	<h2 class="f-accordian__heading">Hej</h2>
	<a class="f-accordian__arrow" onclick="this.parentElement.classList.toggle('f-accordian_open');"><div></div></a>
	<div class="f-accordian__cuff-wrapper">
		<div class="f-row f-row_6">
			<div class="f-row__cell-4 f-row__cell-mobile">
				<p class="f-accordian__cuff-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum molestias reprehenderit, commodi. Ab ea tempore, in cupiditate quod, facere accusantium laboriosam obcaecati recusandae consectetur maiores vero debitis sequi eveniet ipsa!</p>
			</div>
		</div>
	</div>
	<div class="f-accordian__text">
		<section class="f-text">
			<h2 class="f-text__heading">Lorem ipsum dolor sit amet</h2>
			<p class="f-text__text">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error minima a aperiam rerum, pariatur. Veniam unde id quo molestiae possimus soluta dignissimos magni sit eos dolore nihil, blanditiis animi maxime! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia deleniti itaque eum iste, quos quae debitis odit at. Reprehenderit illum nihil doloribus nostrum, magni quibusdam laudantium autem eveniet voluptas est.
			</p>
		</section>
	</div>
</article>

</div><!-- only here for the style guide - should not be used on the website -->
```
*/
@import "../variables";

.f-accordian {
	position: relative;

	margin: 0 0 2rem 0;
	padding: .5rem;
	/*height: 12.2rem;*/

	border: .3rem solid var(--color-grey-light);
	border-radius: .5rem;

	overflow: hidden;
	transition: 250ms height, 250ms border-color;
}

.f-accordian__heading {
	margin: 0;

	color: var(--color-grey-dark);
	font-size: 3.6rem;
	font-weight: normal;
	line-height: 3.6rem;

	transition: 250ms color;
}

.f-accordian__cuff-wrapper {
	position:relative;

	margin-bottom: 3.4rem;
}

.f-accordian__cuff-text {
	margin: 0;
	height: 6.4rem;

	color: var(--color-grey-dark);
	font-size: 1.8rem;
	font-weight: light;
	line-height: 2.4rem;

	transition: 250ms color;
}

.f-accordian__arrow {
	display: block;
	position: absolute;
	top: 0;
	right: 0;

	height: 100%;
	width: 23rem;

	cursor: pointer;
	z-index: 10; /* KLUDGE: lift arrow to be above f-row */
}
.f-accordian__arrow div {
	/*TODO: make this a pseudo element. content: "";*/
	position: absolute;
	top: 6rem;
	right: 50%;

	width: 3rem;
	height: 3rem;

	border-bottom: 5px solid var(--color-grey-light);
	border-right: 5px solid var(--color-grey-light);

	transform: rotate(-135deg);
	transition: 250ms transform, 250ms color;
}

.f-accordian__text {
	max-height: 0;
	transition: 250ms max-height linear;
	overflow: hidden;
	/*transform: scaleY(0);
	transform-origin: top;
	transition: transform 250ms ease, height 250ms ease;*/
}
/*.f-accordian__text > * {
	margin-top: calc(-100% - 14.3rem);

	transition: margin-top 250ms;
}*/

/* ### .f-accordian_open
  .f-accordian_open is the modifier for an open accordian
*/
.f-accordian_open .f-accordian__text {	
	/*transform: scaleY(1);*/
	max-height: 50rem;
}

.f-accordian_open, .f-accordian_open .f-accordian__arrow div {
	border-color: var(--color-red);
}

.f-accordian_open .f-accordian__arrow {
	height: 14rem;
}

.f-accordian_open .f-accordian__heading,
.f-accordian_open .f-accordian__cuff-text {
	color: var(--color-red);
}
/*.f-accordian_open .f-accordian__cuff-text {
	height: unset;
}*/
.f-accordian_open .f-accordian__arrow div {
	transform: rotate(45deg);
}
{'fraction_non_alphanumeric': 0.10075893748751748, 'fraction_numerical': 0.011084481725584181, 'mean_word_length': 4.552813972830607, 'pattern_counts': {'":': 0, '<': 207, '<?xml version=': 0, '>': 211, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 110, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3077243', 'n_tokens_mistral': 8180, 'n_tokens_neox': 7336, 'n_words': 2233}