/* Expandable Content */

.xpnd {
	transition: height .5s ease 0s, padding .5s ease 0s, margin .5s ease 0s;
	position: relative;
	display: none;
	outline: none !important;

	/* Keep the leading title's top margin from collapsing out of the panel.
	 * Once the JS flips the panel from display:none to display:block, that
	 * margin would otherwise collapse through the wrapper and pull the title
	 * up against the paragraph above it. */
	> :first-child {
		margin-top: 0;
	}

	&.sld-opn + .rd-mr .opn,
	&:not(.sld-opn) + .rd-mr .cls {
		display: none;
	} 
	
	&[aria-hidden="false"] {
		display: block;
	}
	
	+ a.rd-mr[data-role="btn"] {
		display: inline-flex;
	}
}

html.cms-content .xpnd {
	display: block;
	visibility: visible;
}

html:not(.cms-content) [data-class-name="xpnded"] {
	&:not(:has(.cnt-stl)), &:has(.cnt-stl:empty) {
		display: none;
	}
}

/* Default chevron on the "Read More" button. Drawn as a CSS mask so its color
 * follows currentColor. Sites can override `--rd-mr-icon` (or the whole
 * `.rd-mr::after` rule) in their theme CSS to swap the glyph. The chevron
 * flips to point up when the wrapper gets the .show class (toggled by
 * passive-show-hide). */
.rd-mr {
	--rd-mr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 5.5 L4.5 4 L8 7.5 L11.5 4 L13 5.5 L8 10.5 Z'/%3E%3C/svg%3E");
}

.rd-mr::after {
	content: '';
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-left: .5em;
	background-color: currentColor;
	-webkit-mask-image: var(--rd-mr-icon);
	mask-image: var(--rd-mr-icon);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	transition: transform .3s ease;
}

[data-showhide].show .rd-mr::after {
	transform: rotate(180deg);
}