/**
 * Tabs — Style 4: Folder
 *
 * Classic "file folder" tabs that sit on top of a bordered content box. The
 * active tab shares the panel's background and an accent top edge, so it reads
 * as physically connected to the content.
 *
 * @package captain-widgets-kit
 * @since   1.3.0
 */

.captwiki-tabs.captwiki-style-4 .captwiki-tabs__nav {
	gap: 4px;
	padding-left: 6px;
}

.captwiki-tabs.captwiki-style-4 .captwiki-tabs__tab {
	position: relative;
	padding: 12px 22px;
	background: #f1f2f5;
	border: 1px solid #e6e8ee;
	border-bottom: none;
	border-radius: 10px 10px 0 0;
}

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

.captwiki-tabs.captwiki-style-4 .captwiki-tabs__tab.is-active {
	color: var( --captwiki-tab-accent );
	background: #ffffff;
	border-top: 3px solid var( --captwiki-tab-accent );
	padding-top: 10px;
}

/* Active tab overlaps the panel border to look connected. */
.captwiki-tabs.captwiki-style-4 .captwiki-tabs__tab.is-active::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: #ffffff;
}

.captwiki-tabs.captwiki-style-4 .captwiki-tabs__panels {
	position: relative;
	z-index: 1;
	background: #ffffff;
	border: 1px solid #e6e8ee;
	border-radius: 0 12px 12px 12px;
}

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