/* Argyle Tabs Style Extensions — front-end + editor-canvas CSS
 * Consumes CSS custom properties written by src/editor.js onto
 * .wp-block-tab-list (core's own Tabs > Tab List block). Two
 * mutually-exclusive selected-tab indicator modes:
 *
 *  - Underline (default, matches core's stock look, NO data attribute
 *    present in markup — this is the plain/unmodified state so that a
 *    block saved before this plugin existed re-validates byte-for-byte):
 *    overrides core's hardcoded `currentColor` underline with an
 *    admin-chosen color, applied unconditionally so it "just works" even
 *    though nothing in the markup marks this mode explicitly.
 *  - [data-selected-indicator-style="fill"] (optional, only stamped when
 *    explicitly chosen): recolors the ENTIRE selected tab button's
 *    background + text color instead of an underline.
 *
 * Neither core's own stylesheet nor markup is modified directly — this file
 * only adds overriding selectors of equal/greater specificity.
 */

.wp-block-tab-list {
	/* Defaults — overridden per-block via inline custom properties set from
	   the "Selected Tab Indicator" / "Tab Label Typography" Inspector panels.
	   Falling back to `currentColor` keeps core's original underline look
	   untouched when the admin hasn't picked a custom underline color. */
	--atse-underline-color: currentColor;
}

.wp-block-tab-list button {
	font-weight: var( --atse-font-weight, inherit );
	font-style: var( --atse-font-style, inherit );
}

/* --- Underline mode (default — no data attribute in markup) ---
   Applied unconditionally; harmless no-op (falls back to currentColor,
   identical to core's own behavior) when no custom color was chosen. The
   :not([data-selected-indicator-style="fill"]) guard ensures this never
   fights with Fill mode's own underline-suppression rule below. */
.wp-block-tab-list:not([data-selected-indicator-style="fill"]) button[aria-selected=true]::before {
	border-bottom-color: var( --atse-underline-color );
}

/* --- Background Fill mode (optional alternative to underline) --- */
.wp-block-tab-list[data-selected-indicator-style="fill"] button[aria-selected=true]::before {
	/* Suppress core's default underline entirely in fill mode. */
	border-bottom: none;
	content: none;
}

.wp-block-tab-list[data-selected-indicator-style="fill"] button {
	border-radius: 4px 4px 0 0;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.wp-block-tab-list[data-selected-indicator-style="fill"] button[aria-selected=true] {
	/* !important required: every tab button already carries WordPress's own
	   global-styles preset classes (e.g. has-accent-background-color,
	   has-accent-text-color) applied from the block's base Color settings,
	   and WordPress core generates THOSE preset-color rules with
	   !important — confirmed live on argylewi.gov page 10495:
	   `.has-accent-background-color{background-color:...!important}` and
	   `.has-accent-text-color{color:...!important}` are both present in
	   the page's own inline global-styles <style> block. A plain
	   (non-!important) declaration here, even with a more specific
	   selector, still LOSES to an !important rule regardless of
	   specificity — that's why the fill colors weren't visibly changing
	   on click even though the saved attributes, CSS custom properties,
	   and this selector were all otherwise correct. */
	background-color: var( --atse-selected-bg, currentColor ) !important;
	color: var( --atse-selected-text, #fff ) !important;
}