/*
 * Othrs Accordion Menu
 *
 * Scoped to .othrs-accordion-menu, which the renderer always emits, so these
 * rules apply whatever `prefix` is in use. Anything cosmetic (colours, fonts,
 * spacing) is deliberately left to the theme.
 */

.othrs-accordion-menu dl,
.othrs-accordion-menu dt,
.othrs-accordion-menu dd {
	display: block;
	position: relative;
	margin: 0;
}

/* Collapsed by default. The nested <dl> is taken out of flow so a closed <dd>
   measures zero regardless of how much is inside it. */
.othrs-accordion-menu dd {
	overflow: hidden;
	height: 0;
}

.othrs-accordion-menu dd > dl {
	position: absolute;
	top: 0;
	width: 100%;
}

.othrs-accordion-menu dd.opened {
	height: auto;
}

.othrs-accordion-menu dd.opened > dl {
	position: relative;
}

/* Height is set inline by the script for the duration of a transition. */
.othrs-accordion-menu dd.opening,
.othrs-accordion-menu dd.closing {
	transition: height 0.35s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.othrs-accordion-menu dd.notransition {
	transition: none;
}

/* Before the script runs — and if it never does — show the whole tree rather
   than a menu whose sub-levels can't be reached. */
.othrs-accordion-menu.noscript dd {
	height: auto;
	overflow: visible;
}

.othrs-accordion-menu.noscript dd > dl {
	position: relative;
}

/* Toggle control, injected by the script only for items that have children. */
.othrs-accordion-menu .othrs-accordion-toggle {
	position: absolute;
	top: 0;
	right: 0;
	width: 2em;
	height: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	cursor: pointer;
	color: inherit;
	font: inherit;
	line-height: 1;
}

.othrs-accordion-menu .othrs-accordion-toggle::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0.5em;
	height: 0.5em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translate(-50%, -60%) rotate(45deg);
	transition: transform 0.2s ease;
}

.othrs-accordion-menu dt.opened > .outer > .inner > .othrs-accordion-toggle::before,
.othrs-accordion-menu dt.opened .othrs-accordion-toggle::before {
	transform: translate(-50%, -20%) rotate(-135deg);
}

.othrs-accordion-menu .othrs-accordion-toggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

/* Keep the label clear of the toggle. */
.othrs-accordion-menu dt.parent > .outer > .inner {
	padding-right: 2em;
}

@media (prefers-reduced-motion: reduce) {
	.othrs-accordion-menu dd.opening,
	.othrs-accordion-menu dd.closing,
	.othrs-accordion-menu .othrs-accordion-toggle::before {
		transition: none;
	}
}