/**
 * ch-blocks — shared drill-down styles (handle: ch-blocks-drilldown).
 *
 * Structural only — themes skin via the custom properties below and plain
 * selector overrides:
 *   --ch-drilldown-bg          pane background
 *   --ch-drilldown-padding     pane padding
 *   --ch-drilldown-duration    slide duration
 *   --ch-drilldown-easing      slide easing
 *   --ch-drilldown-z           pane z-index
 *
 * The host (`.ch-drilldown-open`, set by lib/drilldown.js) is the element
 * panes overlay — themes can target it to e.g. slide the underlying menu
 * list out while a pane is open. Depth is exposed as
 * [data-ch-drilldown-depth] for level-specific styling.
 */

.ch-drilldown-open {
	position: relative;
	min-height: 100%;
}

.ch-drilldown__pane {
	position: absolute;
	inset: 0;
	z-index: var( --ch-drilldown-z, 10 );
	box-sizing: border-box;
	background: var( --ch-drilldown-bg, #fff );
	padding: var( --ch-drilldown-padding, 0 );
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	outline: none;
	transform: translateX( 100% );
	transition: transform var( --ch-drilldown-duration, 0.3s )
		var( --ch-drilldown-easing, ease );
}

.ch-drilldown__pane.is-visible {
	transform: translateX( 0 );
}

.ch-drilldown__back {
	appearance: none;
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	margin: 0;
	padding: 12px 0;
	background: none;
	border: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
}

.ch-drilldown__back svg {
	width: 16px;
	height: 16px;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
}

.ch-drilldown__title {
	margin: 0 0 16px;
}

/* Mega-menu panels relocated into a pane: neutralise plate positioning so
 * the panel flows naturally inside the pane on any theme. */
.ch-drilldown__content .ch-mega-menu__panel {
	position: static;
	width: 100%;
	transform: none;
	box-shadow: none;
}

@media ( prefers-reduced-motion: reduce ) {
	.ch-drilldown__pane {
		transition: none;
	}
}