/**
 * Tabs — Style 5: Segmented Slider
 *
 * An iOS-style segmented control: tabs sit on a grey track and a white pill
 * slides behind the active tab. The active label turns accent-colored. Modern
 * and tactile.
 *
 * @package captain-widgets-kit
 * @since   1.3.0
 */

.captwiki-tabs.captwiki-style-5 .captwiki-tabs__nav {
	position: relative;
	display: inline-flex;
	gap: 2px;
	padding: 5px;
	background: #eceef2;
	border-radius: 14px;
	margin-bottom: 20px;
}

.captwiki-tabs.captwiki-style-5 .captwiki-tabs__tab {
	position: relative;
	z-index: 1;
	padding: 9px 22px;
	border-radius: 10px;
	color: #4b5563;
	background: transparent;
}

.captwiki-tabs.captwiki-style-5 .captwiki-tabs__tab:hover {
	color: #111827;
}

.captwiki-tabs.captwiki-style-5 .captwiki-tabs__tab.is-active {
	color: var( --captwiki-tab-accent );
}

/* The sliding white pill behind the active tab. */
.captwiki-tabs.captwiki-style-5 .captwiki-tabs__indicator {
	display: block;
	z-index: 0;
	background: #ffffff;
	border: none;
	border-radius: 10px;
	box-shadow: 0 2px 6px -1px rgba( 17, 24, 39, 0.18 );
}

/* When justified, let the segmented control span the full width. */
.captwiki-tabs.captwiki-style-5 .captwiki-tabs__nav[style*="stretch"] {
	display: flex;
	width: 100%;
}

.captwiki-tabs.captwiki-style-5 .captwiki-tabs__panel {
	padding: 4px 2px;
}
