/**
 * Expander front-end styling
 *
 * Defines front-end styling. All view.css files
 * like this one only load when enqueued manually
 * or via a block.json file. You can import this
 * file into an editor.css file to apply these
 * front-end styles within the block editor.
 */

.expander__item {
	border-radius: var(--bd-rad-m) var(--bd-rad-m) 0 0;
}

.expander__item:has(+ .expander__item) {
		padding-bottom: var(--bd-rad-m);
	}

.expander__item + .expander__item.expander__item.expander__item {
		margin-top: calc(-1 * var(--bd-rad-m));
	}
.expander__label {
	cursor: pointer;
	display: block;
	width: 100%;
	border: 0;
	background-color: transparent;
	text-transform: uppercase;
	font-size: 5.3333em;
	font-weight: 700;
	font-family: var(--ff-3);
	text-align: left;
	line-height: 1.1;
}
.expander__label span {
		max-width: 100%;
		position: relative;
		display: block;
		font-size: clamp(0.33em, 3vw, 0.6em);
		padding: 1em calc(var(--wp--style--root--padding-right) + 1.9em) 0.8em
			var(--wp--style--root--padding-left);
	}
.expander__label::before {
		right: var(--wp--style--root--padding-right);
	}
.expander__frame {
	overflow: hidden;
	max-height: var(--h-auto);
	transition:
		all var(--ani-speed),
		max-height var(--ani-speed) linear;
}
.expander__content {
	transition:
		visibility 0s,
		transform calc(var(--ani-speed) * 1.5);
}

/* collapsed state */
.expander__frame:not([aria-hidden="false"]) {
		max-height: 0;
		transition:
			all var(--ani-speed),
			max-height var(--ani-speed) ease-out,
			visibility 0s 1.3s;
	}
.expander__frame:not([aria-hidden="false"]) .expander__content {
			visibility: hidden;
			transform: translateY(2em);
			transition:
				visibility 0s var(--ani-speed),
				transform calc(var(--ani-speed) * 1.5);
		}