/**
 * Tabs — Style 3: Vertical
 *
 * Tabs stack in a left rail; content fills the panel to the right. The active
 * item gets an accent tint and a left accent bar. Collapses to stacked on
 * small screens.
 *
 * @package captain-widgets-kit
 * @since   1.3.0
 */

.captwiki-tabs.captwiki-style-3 {
	display: flex;
	gap: 24px;
	align-items: flex-start;
}

.captwiki-tabs.captwiki-style-3 .captwiki-tabs__nav {
	flex: 0 0 220px;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 4px;
}

.captwiki-tabs.captwiki-style-3 .captwiki-tabs__tab {
	justify-content: flex-start;
	width: 100%;
	padding: 14px 16px;
	text-align: left;
	border-radius: 10px;
	border-left: 3px solid transparent;
}

.captwiki-tabs.captwiki-style-3 .captwiki-tabs__tab:hover {
	background: #f4f5f7;
	color: #111827;
}

.captwiki-tabs.captwiki-style-3 .captwiki-tabs__tab.is-active {
	color: var( --captwiki-tab-accent );
	background: color-mix( in srgb, var( --captwiki-tab-accent ) 12%, #ffffff );
	border-left-color: var( --captwiki-tab-accent );
}

.captwiki-tabs.captwiki-style-3 .captwiki-tabs__panels {
	flex: 1 1 auto;
	min-width: 0;
	background: #ffffff;
	border: 1px solid #eef0f4;
	border-radius: 14px;
}

.captwiki-tabs.captwiki-style-3 .captwiki-tabs__panel {
	padding: 26px;
}

@media ( max-width: 767px ) {
	.captwiki-tabs.captwiki-style-3 {
		flex-direction: column;
	}

	.captwiki-tabs.captwiki-style-3 .captwiki-tabs__nav {
		flex: 1 1 auto;
		width: 100%;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.captwiki-tabs.captwiki-style-3 .captwiki-tabs__tab {
		width: auto;
	}
}
