/**
 * Elementor Menu Rail — structural frontend styles.
 *
 * Rules for this file (epic §5, §8.10, §10):
 *
 * 1. Structure only. No colors, no fonts, no borders — every one of those comes
 *    from an Elementor control's `selectors` array, so the editor owns them.
 * 2. CSS logical properties ONLY. No margin-left, padding-right, left, right,
 *    text-align: left/right. This is what lets the plugin ship without a
 *    separate -rtl stylesheet; a physical property here silently breaks RTL.
 * 3. No selector may depend on the widget's inner wrapper existing, because the
 *    e_optimized_markup experiment removes it.
 */

.emr-rail {
	display: flex;
	align-items: center;
	gap: var( --emr-btn-gap, 12px );
	inline-size: 100%;
	min-inline-size: 0;
}

.emr-track {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	gap: var( --emr-gap, 26px );
	min-inline-size: 0;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;

	/* Hide the scrollbar without hiding the ability to scroll. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.emr-track::-webkit-scrollbar {
	display: none;
}

.emr-item {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	flex: 0 0 auto;
	white-space: nowrap;
	text-decoration: none;
	scroll-snap-align: start;

	/* Transparent by default so a border set on any state does not shift layout
	   when it becomes visible — the reference pattern's behaviour. */
	border: 0 solid transparent;

	transition:
		color var( --emr-transition, 0.2s ) ease,
		background-color var( --emr-transition, 0.2s ) ease,
		border-color var( --emr-transition, 0.2s ) ease;
}

.emr-item__icon {
	display: inline-flex;
	align-items: center;
	line-height: 1;

	/* Inherit by default so the per-item Icon Color control can stay empty and
	   the icon simply follows the label. Setting that control writes a color
	   onto this element, which the SVG picks up via fill: currentColor below. */
	color: inherit;
}

.emr-item__icon svg {
	inline-size: 1em;
	block-size: 1em;
	fill: currentColor;
}

.emr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	background: none;
	border: 0 solid transparent;
	color: inherit;
	font: inherit;
	line-height: 1;
	cursor: pointer;
	font-size: var( --emr-btn-icon-size, 14px );

	transition:
		color var( --emr-transition, 0.2s ) ease,
		background-color var( --emr-transition, 0.2s ) ease,
		border-color var( --emr-transition, 0.2s ) ease,
		opacity var( --emr-transition, 0.2s ) ease;
}

.emr-btn:disabled {
	cursor: default;
	opacity: 0.35;
}

.emr-btn svg {
	inline-size: 1em;
	block-size: 1em;
	fill: currentColor;
}

/* Mirror the prev/next glyphs in RTL, where "forward" points the other way. */
[dir="rtl"] .emr-btn svg,
[dir="rtl"] .emr-btn i {
	transform: scaleX( -1 );
}

/* Keyboard focus must stay visible even if a theme resets outlines. */
.emr-item:focus-visible,
.emr-btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

@media ( prefers-reduced-motion: reduce ) {
	.emr-item,
	.emr-btn {
		transition-duration: 0.01ms;
	}

	.emr-track {
		scroll-behavior: auto;
	}
}