/**
 * Block Name: acf/faq-item
 * Description: An FAQ accordion item
 *
 */

.block__acf-faq-item {
	border-top: 1px solid currentColor;
}

.block__acf-faq-item__header {
	position: relative;
	cursor: pointer;
}

.block__acf-faq-item__header * {
	pointer-events: none;
}

.wp-block.block__acf-faq-item h1,
.wp-block.block__acf-faq-item h2,
.wp-block.block__acf-faq-item h3,
.wp-block.block__acf-faq-item h4,
.wp-block.block__acf-faq-item h5,
.wp-block.block__acf-faq-item h6 {
	pointer-events: all;
}

.block__acf-faq-item__header::before,
.block__acf-faq-item__header::after {
	content: '';
	position: absolute;
	top: calc(50% - 1px);
	inset-inline-end: 0.75rem;
	width: 1rem;
	height: 2px;
	background-color: currentColor;
	transition: transform 0.5s ease, opacity 0.5s ease;
}

.block__acf-faq.is-loading .block__acf-faq-item__header::before,
.block__acf-faq.is-loading .block__acf-faq-item__header::after {
	transition: none !important;
}

.block__acf-faq-item__header::after {
	transform: rotate(90deg);
	opacity: 1;
}

.block__acf-faq.is-loading .block__acf-faq-item:first-of-type .block__acf-faq-item__header::before,
.block__acf-faq-item.block__acf-faq-item--open .block__acf-faq-item__header::before {
	transform: rotate(-90deg);
	opacity: 0;
}

.block__acf-faq.is-loading .block__acf-faq-item:first-of-type .block__acf-faq-item__header::after,
.block__acf-faq-item.block__acf-faq-item--open .block__acf-faq-item__header::after {
	transform: rotate(0deg);
}

.block__acf-faq-item__main {
	position: absolute;
	top: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.5s ease;
	padding-block-end: 3rem;
}

.block__acf-faq.is-loading .block__acf-faq-item:first-of-type .block__acf-faq-item__main,
.block__acf-faq-item.block__acf-faq-item--open .block__acf-faq-item__main {
	position: static;
	opacity: 1;
	pointer-events: auto;
}