/* etp-style.css
 * Minimal styling + animation helpers for the Toggle Paragraph widget.
 *
 * Accessibility Notes:
 * - We keep content in DOM at all times; hidden attribute is applied only when collapsed.
 * - When opening, we remove hidden, animate max-height, then set max-height:none for fluid height.
 * - When closing, we animate max-height to 0, then reapply hidden.
 */

.etp-toggle-paragraph { margin: 1em 0; }
.etp-toggle-paragraph .etp-toggle-row {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	/* Ensure alignment utilities still work */
	justify-content: var(--etp-row-justify, flex-start);
}
.etp-toggle-paragraph.is-controls-hidden .etp-toggle-row { display: none; }
.etp-toggle-paragraph .etp-pre-text {
	color: #333;
	font-size: 14px;
}
.etp-toggle-paragraph .etp-toggle-button {
	background: #2271b1;
	color: #fff;
	border: none;
	padding: .5em 1em;
	cursor: pointer;
	font-size: 14px;
	border-radius: 3px;
	transition: background .2s ease-in-out;
}
.etp-toggle-paragraph .etp-toggle-button:hover,
.etp-toggle-paragraph .etp-toggle-button:focus { background: #135e96; }

/* Alignment utility classes */
.etp-align-left  { text-align: left; }
.etp-align-center{ text-align: center; }
.etp-align-right { text-align: right; }

/* Map alignment classes to row justification (best effort) */
.etp-align-left  .etp-toggle-row { --etp-row-justify: flex-start; }
.etp-align-center .etp-toggle-row { --etp-row-justify: center; }
.etp-align-right .etp-toggle-row { --etp-row-justify: flex-end; }

/* Panel animation states */
.etp-panel {
	overflow: hidden; /* Required for max-height transition */
	transition: max-height .35s ease;
}
.etp-panel.is-open { /* When open and animation settled */ }
.etp-panel.is-opening { /* Optional additional style while opening */ }
.etp-panel.is-closing { /* Optional additional style while closing */ }

/* You can customize appearance further:
.etp-toggle-paragraph .etp-label { font-weight: 600; }
*/