/**
 * Premium Tabs extension styles.
 *
 * Layout and label options the base EE Tabs widget does not ship. The base stylesheet owns
 * the tab list, buttons and panels; everything here is keyed off a class or data attribute
 * that only the premium extension writes.
 */

.ltxe-tabs--vertical .ltxe-tabs__list {
	flex-direction: column;
	max-width: 220px;
}

.ltxe-tabs__badge {
	margin-left: 0.35rem;
	font-size: 0.75em;
	opacity: 0.85;
}

@media (max-width: 767px) {
	/*
	 * Vertical mode on a phone leaves ~100 px of content area next to a 220 px tab column,
	 * which is unusable. When the widget is vertical but NOT set to accordion-on-mobile,
	 * fall the tab list back to a wrapping horizontal row on phones so the panels get the
	 * full column width. The vertical layout is restored above 767 px by the base rule.
	 */
	.ltxe-tabs--vertical .ltxe-tabs__list {
		flex-direction: row;
		flex-wrap: wrap;
		max-width: none;
	}

	/*
	 * Accordion-on-mobile still wins for widgets that opted in — the accordion rule sits
	 * below and matches for both vertical and horizontal widgets, so it re-sets column
	 * flow (which is what accordion mode needs) after the vertical override.
	 */
	.ltxe-tabs[data-accordion-mobile="1"] .ltxe-tabs__list {
		flex-direction: column;
	}
}