/*
 * Base layout for proactive/tabs, matching the original Proactive Blocks tabs. Selectors are wrapped in :where()
 * so the theme's styles (starcore/styles/core/_tabs.scss) always take precedence.
 */
:where(.wp-block-proactive-tabs) > .tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin: 0;
	padding: 0;
	list-style: none;
}

:where(.wp-block-proactive-tabs > .tabs) > .tabs-item {
	margin: 0;
	padding: 0;
	list-style: none;
}

:where(.wp-block-proactive-tabs) .tabs-button {
	height: 100%;
	margin: 0;
	padding: 0.5em 1em;
	border: 0 solid;
	border-radius: 0;
	background: var(--wp--preset--color--primary);
	color: #fff;
	font: inherit;
	font-family: var(--wp--preset--font-family--primary, inherit);
	font-size: var(--wp--preset--font-size--body, 16px);
	cursor: pointer;
	transition: 0.15s;
}

:where(.wp-block-proactive-tabs) .tabs-button:hover,
:where(.wp-block-proactive-tabs) .tabs-button[aria-selected="true"] {
	background: var(--wp--preset--color--secondary);
}

:where(.wp-block-proactive-tabs) .tabs-button span {
	pointer-events: none;
}

:where(.wp-block-proactive-tabs) .tabs-button:focus-visible {
	outline: 2px solid var(--wp--preset--color--secondary);
	outline-offset: 2px;
}

:where(.wp-block-proactive-tabs > .tabs-container) > .tab-content {
	overflow: hidden;
}

/* Only the active panel is shown. Until the script runs, show the first one. */
:where(.wp-block-proactive-tabs > .tabs-container) > .tab-content:not(.active) {
	display: none;
}

:where(.wp-block-proactive-tabs:not(.is-ready) > .tabs-container) > .tab-content:first-child {
	display: block;
}

:where(.wp-block-proactive-tabs) .tab-content__inner {
	padding: 2rem 0;
}

:where(.wp-block-proactive-tabs) .tab-content:focus-visible {
	outline: 2px solid var(--wp--preset--color--secondary);
	outline-offset: 2px;
}