/**
 * Expandable Text widget.
 *
 * The text is clamped to --am-et-lines lines (set per breakpoint from the
 * panel) until the toggle expands it.
 */

.am-kit-expandable-text__content {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--am-et-lines, 4);
	line-clamp: var(--am-et-lines, 4);
	overflow: hidden;
	transition: height var(--am-et-duration, 400ms) ease;
}

.am-kit-expandable-text.is-expanded .am-kit-expandable-text__content {
	display: block;
	-webkit-line-clamp: unset;
	line-clamp: none;
	overflow: visible;
}

/* The script pins a pixel height while sliding; the excess must stay hidden. */
.am-kit-expandable-text.is-animating .am-kit-expandable-text__content {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.am-kit-expandable-text__content {
		transition: none;
	}
}

/*
 * The parent theme styles every [type=button] as a bordered pill that fills
 * on hover; the toggle is a plain text link. Two classes so these rules beat
 * the theme's [type=button]:hover regardless of stylesheet order.
 */
.am-kit-expandable-text .am-kit-expandable-text__toggle,
.am-kit-expandable-text .am-kit-expandable-text__toggle:hover,
.am-kit-expandable-text .am-kit-expandable-text__toggle:focus {
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	white-space: normal;
}

.am-kit-expandable-text .am-kit-expandable-text__toggle {
	/*
	 * Block + fit-content keeps the hit area to the label while auto side
	 * margins center it, so the text Alignment control never moves it.
	 */
	display: block;
	width: fit-content;
	margin: 8px auto 0;
	text-align: center;
	cursor: pointer;
}

.am-kit-expandable-text .am-kit-expandable-text__toggle[hidden] {
	display: none;
}