/**
 * Tabs Component Styles
 *
 * Minimal styles - buttons are styled via WordPress UI
 *
 * Usage with Gutenberg blocks:
 * 1. Create a Group block with class: extendable-tabs
 * 2. Inside, add a Buttons block for tab navigation
 * 3. Add Group blocks for each panel with class: extendable-tabs__panel
 *
 * @package Extendable
 * @since 2.0.35
 */

/* Tabs Container */
.extendable-tabs {
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* Tab Navigation - minimal layout only */
.extendable-tabs > .wp-block-buttons,
.extendable-tabs > .wp-block-uagb-buttons,
.extendable-tabs > .extendable-tabs__nav {
	margin-bottom: 0;
}

/* UAGB buttons inner wrapper */
.extendable-tabs > .wp-block-uagb-buttons .uagb-buttons__wrap {
	display: flex;
	flex-wrap: wrap;
}

/* Tab Panels - hidden by default, JS will show the active one */
.extendable-tabs__panel {
	display: none;
	padding: 1.5rem 0;
	outline: none;
}

.extendable-tabs__panel.is-active,
.extendable-tabs__panel[aria-hidden="false"] {
	display: block;
}

/* Before JS loads, show the first panel */
.extendable-tabs:not(.js-initialized) > .extendable-tabs__panel:first-of-type,
.extendable-tabs:not(.js-initialized) > .wp-block-group.extendable-tabs__panel:nth-of-type(2) {
	display: block;
}

/* Panel content spacing */
.extendable-tabs__panel > *:first-child {
	margin-top: 0;
}

.extendable-tabs__panel > *:last-child {
	margin-bottom: 0;
}

/* Columns inside panels */
.extendable-tabs__panel .wp-block-columns {
	margin-top: 0;
	margin-bottom: 0;
}

/* Animation for panel transitions */
.extendable-tabs__panel.is-active {
	animation: tabFadeIn 0.2s ease;
}

@keyframes tabFadeIn {
	from {
		opacity: 0;
		transform: translateY(4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Vertical tabs variant */
.extendable-tabs--vertical {
	flex-direction: row;
	gap: 1.5rem;
}

.extendable-tabs--vertical > .wp-block-buttons,
.extendable-tabs--vertical > .wp-block-uagb-buttons,
.extendable-tabs--vertical > .extendable-tabs__nav {
	flex-direction: column;
	flex-shrink: 0;
}

.extendable-tabs--vertical > .wp-block-uagb-buttons .uagb-buttons__wrap {
	flex-direction: column;
}

.extendable-tabs--vertical .extendable-tabs__panel {
	flex: 1;
	padding: 0;
}

/* Responsive - vertical tabs become horizontal on mobile */
@media (max-width: 768px) {
	.extendable-tabs--vertical {
		flex-direction: column;
		gap: 0;
	}

	.extendable-tabs--vertical > .wp-block-buttons,
	.extendable-tabs--vertical > .wp-block-uagb-buttons,
	.extendable-tabs--vertical > .extendable-tabs__nav {
		flex-direction: row;
		overflow-x: auto;
	}

	.extendable-tabs--vertical > .wp-block-uagb-buttons .uagb-buttons__wrap {
		flex-direction: row;
	}

	.extendable-tabs--vertical .extendable-tabs__panel {
		padding: 1.5rem 0;
	}
}