@recursica/adapter-mui-v7 1.0.0

package/src/components/Tabs/Tabs.module.css

@@ -0,0 +1,801 @@
+/* Brand-layer exemptions (recursica-allow-brand) — see recursica-token-analyzer README.md.
+ * Outline variant's baseline-patch trick needs an opaque paint (active background is transparent by design); borrows Layer 0's surface as the default ambient layer absent a wrapping <Layer> (see IMPLEMENTATION_NOTES.md 'Outline selected-tab border'). Schema gap: no generic 'current ambient layer' token exists — flagged for the token-schema owner.
+ *   recursica-allow-brand: --recursica_brand_layer_0_properties_surface
+ * Global hover/focus/disabled state tokens (recursica_variables_scoped.css header, 'Hover & Focus states' / 'Disabled state' — implicit rule for every interactive element; components must not define their own per-component treatment).
+ *   recursica-allow-brand: --recursica_brand_states_disabled
+ *   recursica-allow-brand: --recursica_brand_states_hover_color
+ *   recursica-allow-brand: --recursica_brand_states_hover_opacity
+ */
+
+/*
+  Recursica Tabs CSS module natively binding to Figma variables.
+*/
+
+/* Unlike Mantine's .root (which internally wraps List+Panel and always spans its parent),
+   MUI's .root is only the tablist — it sits beside the panel in the consumer's own flex row for
+   vertical orientation. Stretching it to 100% width there fights the panel for space and drags
+   the border-right rail/indicator away from the tab content, so only horizontal gets full width;
+   vertical sizes to its content instead, same as Mantine's vertical .list does. */
+.root[data-orientation="horizontal"] {
+  width: 100%;
+}
+
+/* `inverted` (RecursicaTabsProps): "tabs list at the bottom ... instead of top". USAGE.md
+   already requires wrapping `Tabs`+`TabPanel` in a column-direction Flex, since `TabPanel`
+   renders as this component's actual flex sibling (not nested inside it, unlike Mantine) — so
+   `order` on this root alone reorders them visually with no DOM change needed. `.list`'s
+   margin-bottom (tabs-content-gap, see below) collapses through this root's bottom edge in the
+   default order; flip it to margin-top so the same gap lands between the (now-preceding) panel
+   and this now-trailing root instead. Scoped to horizontal only — vertical's "instead of left"
+   flip isn't exercised by any story yet. See IMPLEMENTATION_NOTES.md. */
+.root[data-orientation="horizontal"][data-inverted] {
+  order: 1;
+}
+.root[data-orientation="horizontal"][data-inverted] .list {
+  margin-bottom: 0;
+  margin-top: var(--tabs-content-gap);
+}
+
+/* Mantine's vertical .list stretches to the root's full height via flex align-items, so a
+   border-right divider on it spans the whole rail. MUI's scroller (the .list's parent) is a plain
+   block for vertical, not a flex container, so .list sizes to its own content (just the stacked
+   tabs) and a divider on it stops short at the last tab instead of running the full height —
+   spell the stretch out explicitly instead. */
+.root[data-orientation="vertical"] .list {
+  height: 100%;
+}
+
+/* Vertical `inverted`: "instead of left" — the list moves to the right, panel to the left.
+   Mirrors the horizontal[data-inverted] flip above, rotated 90°: `order: 1` pushes the list after
+   the panel in the consumer's row Flex, and the content-gap margin flips from the trailing edge
+   (margin-right, spacing the panel that used to follow) to the leading edge (margin-left, spacing
+   the panel that now precedes it). Divider/indicator side-flip lives in SELECTION INDICATOR &
+   BASELINE and BORDER RADIUS GEOMETRY below (only default/outline draw a divider; pills has
+   neither). */
+.root[data-orientation="vertical"][data-inverted] {
+  order: 1;
+}
+.root[data-orientation="vertical"][data-inverted] .list {
+  margin-right: 0;
+  margin-left: var(--tabs-content-gap);
+}
+
+/*
+  Mantine Tabs Anatomy:
+  .root
+  .list (container for tabs)
+  .tab (individual tab)
+  .panel (content)
+*/
+
+/* ---------------------------------
+   VARIANTS
+   Sizing, geometry, colors, and typography are all scoped per style (default/outline/pills) in
+   the token schema now — nothing is shared flat across variants anymore. Content-alignment,
+   space-between-tabs, and the tabs-content-gap remain additionally scoped per orientation.
+--------------------------------- */
+
+.root[data-variant="default"][data-orientation] {
+  --tabs-element-gap: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_default_properties_element-gap
+  );
+  --tabs-horizontal-padding: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_default_properties_horizontal-padding
+  );
+  --tabs-vertical-padding: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_default_properties_vertical-padding
+  );
+  --tabs-icon-size: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_default_properties_icon-size
+  );
+  --tabs-min-width: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_default_properties_min-width
+  );
+  --tabs-max-width: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_default_properties_max-width
+  );
+
+  --tabs-active-border-size: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_default_variants_selection-states_active_properties_border-size
+  ) !important;
+  --tabs-inactive-border-size: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_default_variants_selection-states_inactive_properties_border-size
+  ) !important;
+  --tabs-border-radius: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_default_properties_border-radius
+  ) !important;
+  --tabs-border-color: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_default_variants_selection-states_inactive_properties_colors_border-color
+  ) !important;
+  --tabs-color: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_default_variants_selection-states_active_properties_colors_border-color
+  ) !important;
+}
+
+.root[data-variant="default"][data-orientation="horizontal"] {
+  --tabs-content-alignment: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_default_variants_orientation_horizontal_properties_tab-content-alignment
+  );
+  --tabs-space-between-tabs: var(
+    --recursica_ui-kit_components_tabs_variants_styles_default_variants_orientation_horizontal_properties_space-between-tabs
+  );
+  --tabs-content-gap: var(
+    --recursica_ui-kit_components_tabs_variants_styles_default_variants_orientation_horizontal_properties_tabs-content-gap
+  );
+}
+.root[data-variant="default"][data-orientation="horizontal"] .list {
+  gap: var(--tabs-space-between-tabs);
+  width: 100%;
+  margin-bottom: var(--tabs-content-gap);
+}
+
+.root[data-variant="default"][data-orientation="vertical"] {
+  --tabs-content-alignment: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_default_variants_orientation_vertical_properties_tab-content-alignment
+  );
+  --tabs-space-between-tabs: var(
+    --recursica_ui-kit_components_tabs_variants_styles_default_variants_orientation_vertical_properties_space-between-tabs
+  );
+  --tabs-content-gap: var(
+    --recursica_ui-kit_components_tabs_variants_styles_default_variants_orientation_vertical_properties_tabs-content-gap
+  );
+}
+.root[data-variant="default"][data-orientation="vertical"] .list {
+  gap: var(--tabs-space-between-tabs);
+  margin-right: var(--tabs-content-gap);
+}
+
+/* Outline Variant */
+.root[data-variant="outline"][data-orientation] {
+  --tabs-element-gap: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_outline_properties_element-gap
+  );
+  --tabs-horizontal-padding: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_outline_properties_horizontal-padding
+  );
+  --tabs-vertical-padding: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_outline_properties_vertical-padding
+  );
+  --tabs-icon-size: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_outline_properties_icon-size
+  );
+  --tabs-min-width: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_outline_properties_min-width
+  );
+  --tabs-max-width: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_outline_properties_max-width
+  );
+
+  --tabs-active-border-size: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_outline_variants_selection-states_active_properties_border-size
+  ) !important;
+  --tabs-inactive-border-size: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_outline_variants_selection-states_inactive_properties_border-size
+  ) !important;
+  --tabs-border-radius: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_outline_properties_border-radius
+  ) !important;
+  --tabs-border-color: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_outline_variants_selection-states_inactive_properties_colors_border-color
+  ) !important;
+  --tabs-color: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_outline_variants_selection-states_active_properties_colors_border-color
+  ) !important;
+  --tabs-active-bg: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_outline_variants_selection-states_active_properties_colors_background-color
+  );
+  /* The active tab's own background-color token above is transparent by design (it's meant to
+     let whichever ambient Layer surface sits behind the Tabs show through). That means it can't
+     double as an opaque "eraser" for the baseline-patch trick below, which needs a real paint to
+     replace, not reveal-through. Layer 0 is the default/outermost surface a Tabs instance sits
+     on absent a wrapping <Layer>; see OUTLINE SELECTION BORDER below for why this is needed. */
+  --tabs-baseline-patch-bg: var(--recursica_brand_layer_0_properties_surface);
+}
+
+.root[data-variant="outline"][data-orientation="horizontal"] {
+  --tabs-content-alignment: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_outline_variants_orientation_horizontal_properties_tab-content-alignment
+  );
+  --tabs-space-between-tabs: var(
+    --recursica_ui-kit_components_tabs_variants_styles_outline_variants_orientation_horizontal_properties_space-between-tabs
+  );
+  --tabs-content-gap: var(
+    --recursica_ui-kit_components_tabs_variants_styles_outline_variants_orientation_horizontal_properties_tabs-content-gap
+  );
+}
+.root[data-variant="outline"][data-orientation="horizontal"] .list {
+  gap: var(--tabs-space-between-tabs);
+  width: 100%;
+  margin-bottom: var(--tabs-content-gap);
+}
+
+.root[data-variant="outline"][data-orientation="vertical"] {
+  --tabs-content-alignment: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_outline_variants_orientation_vertical_properties_tab-content-alignment
+  );
+  --tabs-space-between-tabs: var(
+    --recursica_ui-kit_components_tabs_variants_styles_outline_variants_orientation_vertical_properties_space-between-tabs
+  );
+  --tabs-content-gap: var(
+    --recursica_ui-kit_components_tabs_variants_styles_outline_variants_orientation_vertical_properties_tabs-content-gap
+  );
+}
+.root[data-variant="outline"][data-orientation="vertical"] .list {
+  gap: var(--tabs-space-between-tabs);
+  margin-right: var(--tabs-content-gap);
+}
+
+/* Pills Variant */
+.root[data-variant="pills"][data-orientation] {
+  --tabs-element-gap: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_pills_properties_element-gap
+  );
+  --tabs-horizontal-padding: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_pills_properties_horizontal-padding
+  );
+  --tabs-vertical-padding: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_pills_properties_vertical-padding
+  );
+  --tabs-icon-size: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_pills_properties_icon-size
+  );
+  --tabs-min-width: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_pills_properties_min-width
+  );
+  --tabs-max-width: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_pills_properties_max-width
+  );
+
+  --tabs-active-border-size: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_pills_variants_selection-states_active_properties_border-size
+  );
+  --tabs-inactive-border-size: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_pills_variants_selection-states_inactive_properties_border-size
+  );
+  --tabs-border-radius: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_pills_properties_border-radius
+  );
+}
+
+.root[data-variant="pills"][data-orientation="horizontal"] {
+  --tabs-content-alignment: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_pills_variants_orientation_horizontal_properties_tab-content-alignment
+  );
+  --tabs-space-between-tabs: var(
+    --recursica_ui-kit_components_tabs_variants_styles_pills_variants_orientation_horizontal_properties_space-between-tabs
+  );
+  --tabs-content-gap: var(
+    --recursica_ui-kit_components_tabs_variants_styles_pills_variants_orientation_horizontal_properties_tabs-content-gap
+  );
+}
+.root[data-variant="pills"][data-orientation="horizontal"] .list {
+  gap: var(--tabs-space-between-tabs);
+  width: 100%;
+  margin-bottom: var(--tabs-content-gap);
+}
+
+.root[data-variant="pills"][data-orientation="vertical"] {
+  --tabs-content-alignment: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_pills_variants_orientation_vertical_properties_tab-content-alignment
+  );
+  --tabs-space-between-tabs: var(
+    --recursica_ui-kit_components_tabs_variants_styles_pills_variants_orientation_vertical_properties_space-between-tabs
+  );
+  --tabs-content-gap: var(
+    --recursica_ui-kit_components_tabs_variants_styles_pills_variants_orientation_vertical_properties_tabs-content-gap
+  );
+}
+.root[data-variant="pills"][data-orientation="vertical"] .list {
+  gap: var(--tabs-space-between-tabs);
+  margin-right: var(--tabs-content-gap);
+}
+
+/* ---------------------------------
+   SELECTION INDICATOR & BASELINE
+   Mantine draws the active-tab underline natively off the shared --tabs-color var above. MUI has
+   no equivalent built-in, so we drive its own indicator slot (classes.indicator, wired in
+   Tabs.tsx) and the list's baseline border explicitly from the same vars. Pills has no underline
+   indicator — selection shows via the pill's own background/border (see COLORS & TYPOGRAPHY
+   below). Outline repurposes the indicator as a baseline patch rather than an underline (see
+   below).
+--------------------------------- */
+.root[data-variant="default"] .indicator {
+  background-color: var(--tabs-color) !important;
+}
+.root[data-variant="default"][data-orientation="horizontal"] .indicator {
+  height: var(--tabs-active-border-size) !important;
+}
+/* MUI's Tabs root has no border/padding of its own, so the list's margin-bottom (the
+   tabs-content-gap, used to space the panel below) collapses into the root's auto height instead
+   of stopping at the list's own border edge. The indicator is absolutely positioned against that
+   inflated root box, so without this offset it renders content-gap pixels below the baseline
+   instead of flush against it. */
+.root[data-variant="default"][data-orientation="horizontal"]:not(
+    [data-inverted]
+  )
+  .indicator {
+  bottom: var(
+    --recursica_ui-kit_components_tabs_variants_styles_default_variants_orientation_horizontal_properties_tabs-content-gap
+  ) !important;
+}
+/* width: same reasoning as the horizontal height above, rotated 90°.
+   right: same reasoning as the horizontal bottom offset above, rotated 90° — the list's
+   margin-right (this orientation's tabs-content-gap, spacing the panel to its right) inflates the
+   root's auto width past the list's own border-right edge. The indicator is absolutely positioned
+   against that wider box, so without this offset it renders content-gap pixels to the right of the
+   divider instead of flush against it. */
+.root[data-variant="default"][data-orientation="vertical"] .indicator {
+  width: var(--tabs-active-border-size) !important;
+  right: var(--tabs-content-gap) !important;
+}
+.root[data-variant="default"][data-orientation="horizontal"][data-inverted]
+  .indicator {
+  bottom: auto !important;
+  top: 0 !important;
+}
+/* Vertical inverted mirror of the above: the list's content-gap margin moved from right to left
+   (see .root[data-orientation="vertical"][data-inverted] .list above), so the indicator's offset
+   has to track the same edge. */
+.root[data-variant="default"][data-orientation="vertical"][data-inverted]
+  .indicator {
+  right: auto !important;
+  left: var(--tabs-content-gap) !important;
+}
+.root[data-variant="pills"] .indicator {
+  display: none !important;
+}
+
+/* Outline has no sliding underline of its own, but reuses the indicator element (already
+   positioned/sized by MUI to exactly track the selected tab, no matter which one) as a baseline
+   patch instead of hiding it — see OUTLINE SELECTION BORDER below for why a patch is needed at
+   all, and why it has to live here (in the scroller) rather than on the tab itself. */
+.root[data-variant="outline"] .indicator {
+  background-color: var(--tabs-baseline-patch-bg) !important;
+}
+.root[data-variant="outline"][data-orientation="horizontal"]:not(
+    [data-inverted]
+  )
+  .indicator {
+  height: var(--tabs-inactive-border-size) !important;
+  bottom: var(
+    --recursica_ui-kit_components_tabs_variants_styles_outline_variants_orientation_horizontal_properties_tabs-content-gap
+  ) !important;
+}
+.root[data-variant="outline"][data-orientation="horizontal"][data-inverted]
+  .indicator {
+  height: var(--tabs-inactive-border-size) !important;
+  bottom: auto !important;
+  top: calc(-1 * var(--tabs-inactive-border-size)) !important;
+}
+.root[data-variant="outline"][data-orientation="vertical"] .indicator {
+  width: var(--tabs-inactive-border-size) !important;
+  right: calc(-1 * var(--tabs-inactive-border-size)) !important;
+}
+.root[data-variant="outline"][data-orientation="vertical"][data-inverted]
+  .indicator {
+  right: auto !important;
+  left: calc(-1 * var(--tabs-inactive-border-size)) !important;
+}
+
+.root[data-variant="default"][data-orientation="horizontal"] .list,
+.root[data-variant="outline"][data-orientation="horizontal"] .list {
+  border-bottom: var(--tabs-inactive-border-size) solid var(--tabs-border-color);
+}
+.root[data-variant="default"][data-orientation="horizontal"][data-inverted]
+  .list,
+.root[data-variant="outline"][data-orientation="horizontal"][data-inverted]
+  .list {
+  border-bottom: none;
+  border-top: var(--tabs-inactive-border-size) solid var(--tabs-border-color);
+}
+.root[data-variant="default"][data-orientation="vertical"] .list,
+.root[data-variant="outline"][data-orientation="vertical"] .list {
+  border-right: var(--tabs-inactive-border-size) solid var(--tabs-border-color);
+}
+.root[data-variant="default"][data-orientation="vertical"][data-inverted] .list,
+.root[data-variant="outline"][data-orientation="vertical"][data-inverted]
+  .list {
+  border-right: none;
+  border-left: var(--tabs-inactive-border-size) solid var(--tabs-border-color);
+}
+
+/* ---------------------------------
+   TAB ELEMENT
+--------------------------------- */
+.root .tab {
+  /* MUI defaults icon+label tabs to a 72px min-height; Mantine's tab height is purely
+     content/padding-driven (auto), so without this reset MUI's row is visibly taller. */
+  min-height: auto !important;
+  min-width: var(--tabs-min-width);
+  max-width: var(--tabs-max-width);
+  padding: var(--tabs-vertical-padding) var(--tabs-horizontal-padding);
+  gap: var(--tabs-element-gap);
+  display: flex;
+  align-items: center;
+  justify-content: var(--tabs-content-alignment);
+  cursor: pointer;
+  position: relative;
+}
+
+/* Hover effect (moved to bottom for specificity, see end of file) */
+
+/* Icon support */
+.root .tab svg {
+  width: var(--tabs-icon-size);
+  height: var(--tabs-icon-size);
+}
+
+/* Disabled State */
+.root .tab[data-disabled] {
+  opacity: var(--recursica_brand_states_disabled);
+  cursor: not-allowed;
+}
+
+/* ---------------------------------
+   BORDER RADIUS GEOMETRY
+--------------------------------- */
+
+/* Pills get full radius on all sides */
+.root[data-variant="pills"] .tab {
+  border-radius: var(--tabs-border-radius);
+}
+
+/* Default & Outline Horizontal get top radius only so they sit flush on the panel */
+.root[data-variant="default"][data-orientation="horizontal"]:not(
+    [data-inverted]
+  )
+  .tab,
+.root[data-variant="outline"][data-orientation="horizontal"]:not(
+    [data-inverted]
+  )
+  .tab {
+  border-radius: var(--tabs-border-radius) var(--tabs-border-radius) 0 0;
+}
+
+/* Inverted horizontal tabs hang downwards, so bottom corners are rounded */
+.root[data-variant="default"][data-orientation="horizontal"][data-inverted]
+  .tab,
+.root[data-variant="outline"][data-orientation="horizontal"][data-inverted]
+  .tab {
+  border-radius: 0 0 var(--tabs-border-radius) var(--tabs-border-radius);
+}
+
+/* Default & Outline Vertical get left radius only so they sit flush against the right-side panel */
+.root[data-variant="default"][data-orientation="vertical"]:not([data-inverted])
+  .tab,
+.root[data-variant="outline"][data-orientation="vertical"]:not([data-inverted])
+  .tab {
+  border-radius: var(--tabs-border-radius) 0 0 var(--tabs-border-radius);
+}
+
+/* Inverted vertical tabs sit to the right of the panel, so the flush edge — and the rounded
+   corners — flip to the right side. */
+.root[data-variant="default"][data-orientation="vertical"][data-inverted] .tab,
+.root[data-variant="outline"][data-orientation="vertical"][data-inverted] .tab {
+  border-radius: 0 var(--tabs-border-radius) var(--tabs-border-radius) 0;
+}
+
+/* ---------------------------------
+   OUTLINE SELECTION BORDER
+   Mantine's outline tab marks selection with a bordered box left open on the edge that touches
+   the list's own baseline, so the box visually connects to it instead of floating above it.
+   Every tab keeps the border geometry (transparent by default) so selecting a tab doesn't shift
+   layout; only the color changes on selection. The open edge here has 0 border-width, which
+   leaves the list's own baseline border showing straight through underneath — see the indicator
+   patch in SELECTION INDICATOR & BASELINE above, which covers just that segment. (A pseudo-element
+   on the tab itself can't do this: MUI clips tab content to its own bounds for ripple containment,
+   so anything extending past the tab's box to reach the list's border gets clipped away.)
+--------------------------------- */
+.root[data-variant="outline"] .tab {
+  border-style: solid;
+  border-color: transparent;
+}
+.root[data-variant="outline"][data-orientation="horizontal"]:not(
+    [data-inverted]
+  )
+  .tab {
+  border-width: var(--tabs-inactive-border-size)
+    var(--tabs-inactive-border-size) 0 var(--tabs-inactive-border-size);
+}
+.root[data-variant="outline"][data-orientation="horizontal"][data-inverted]
+  .tab {
+  border-width: 0 var(--tabs-inactive-border-size)
+    var(--tabs-inactive-border-size) var(--tabs-inactive-border-size);
+}
+.root[data-variant="outline"][data-orientation="vertical"] .tab {
+  border-width: var(--tabs-inactive-border-size) 0
+    var(--tabs-inactive-border-size) var(--tabs-inactive-border-size);
+}
+.root[data-variant="outline"][data-orientation="vertical"][data-inverted] .tab {
+  border-width: var(--tabs-inactive-border-size)
+    var(--tabs-inactive-border-size) var(--tabs-inactive-border-size) 0;
+}
+.root[data-variant="outline"] .tab:global(.Mui-selected) {
+  border-color: var(--tabs-color) !important;
+}
+
+/* ---------------------------------
+   COLORS & TYPOGRAPHY
+   Because colors are defined per-layer and theme via generic variable structures,
+   we rely on Mantine injecting the correct data-variant attributes, but we must
+   map the colors in our CSS. Recursica handles dark/light automatically via root.
+   Typography is now scoped per style (not shared flat across variants), so each
+   variant repeats its own inactive/active text rules.
+--------------------------------- */
+
+/* Default Variant Colors & Typography */
+.root[data-variant="default"] .tab {
+  background-color: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_default_variants_selection-states_inactive_properties_colors_background-color
+  );
+  color: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_default_variants_selection-states_inactive_properties_colors_text-color
+  );
+
+  font-family: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_default_variants_selection-states_inactive_properties_text_font-family
+  );
+  font-size: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_default_variants_selection-states_inactive_properties_text_font-size
+  );
+  font-style: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_default_variants_selection-states_inactive_properties_text_font-style
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_default_variants_selection-states_inactive_properties_text_font-weight
+  );
+  letter-spacing: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_default_variants_selection-states_inactive_properties_text_letter-spacing
+  );
+  line-height: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_default_variants_selection-states_inactive_properties_text_line-height
+  );
+  text-decoration: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_default_variants_selection-states_inactive_properties_text_text-decoration
+  );
+  text-transform: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_default_variants_selection-states_inactive_properties_text_text-transform
+  );
+}
+.root[data-variant="default"] .tab svg {
+  color: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_default_variants_selection-states_inactive_properties_colors_icon-color
+  );
+}
+
+.root[data-variant="default"] .tab:global(.Mui-selected) {
+  background-color: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_default_variants_selection-states_active_properties_colors_background-color
+  ) !important;
+  color: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_default_variants_selection-states_active_properties_colors_text-color
+  ) !important;
+
+  font-family: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_default_variants_selection-states_active_properties_text_font-family
+  ) !important;
+  font-size: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_default_variants_selection-states_active_properties_text_font-size
+  ) !important;
+  font-style: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_default_variants_selection-states_active_properties_text_font-style
+  ) !important;
+  font-weight: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_default_variants_selection-states_active_properties_text_font-weight
+  ) !important;
+  letter-spacing: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_default_variants_selection-states_active_properties_text_letter-spacing
+  ) !important;
+  line-height: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_default_variants_selection-states_active_properties_text_line-height
+  ) !important;
+  text-decoration: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_default_variants_selection-states_active_properties_text_text-decoration
+  ) !important;
+  text-transform: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_default_variants_selection-states_active_properties_text_text-transform
+  ) !important;
+}
+.root[data-variant="default"] .tab:global(.Mui-selected) svg {
+  color: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_default_variants_selection-states_active_properties_colors_icon-color
+  ) !important;
+}
+
+/* Outline Variant Colors & Typography */
+.root[data-variant="outline"] .tab {
+  background-color: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_outline_variants_selection-states_inactive_properties_colors_background-color
+  );
+  color: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_outline_variants_selection-states_inactive_properties_colors_text-color
+  );
+
+  font-family: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_outline_variants_selection-states_inactive_properties_text_font-family
+  );
+  font-size: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_outline_variants_selection-states_inactive_properties_text_font-size
+  );
+  font-style: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_outline_variants_selection-states_inactive_properties_text_font-style
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_outline_variants_selection-states_inactive_properties_text_font-weight
+  );
+  letter-spacing: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_outline_variants_selection-states_inactive_properties_text_letter-spacing
+  );
+  line-height: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_outline_variants_selection-states_inactive_properties_text_line-height
+  );
+  text-decoration: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_outline_variants_selection-states_inactive_properties_text_text-decoration
+  );
+  text-transform: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_outline_variants_selection-states_inactive_properties_text_text-transform
+  );
+}
+.root[data-variant="outline"] .tab svg {
+  color: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_outline_variants_selection-states_inactive_properties_colors_icon-color
+  );
+}
+
+.root[data-variant="outline"] .tab:global(.Mui-selected) {
+  background-color: var(--tabs-active-bg) !important;
+  color: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_outline_variants_selection-states_active_properties_colors_text-color
+  ) !important;
+
+  font-family: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_outline_variants_selection-states_active_properties_text_font-family
+  ) !important;
+  font-size: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_outline_variants_selection-states_active_properties_text_font-size
+  ) !important;
+  font-style: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_outline_variants_selection-states_active_properties_text_font-style
+  ) !important;
+  font-weight: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_outline_variants_selection-states_active_properties_text_font-weight
+  ) !important;
+  letter-spacing: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_outline_variants_selection-states_active_properties_text_letter-spacing
+  ) !important;
+  line-height: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_outline_variants_selection-states_active_properties_text_line-height
+  ) !important;
+  text-decoration: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_outline_variants_selection-states_active_properties_text_text-decoration
+  ) !important;
+  text-transform: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_outline_variants_selection-states_active_properties_text_text-transform
+  ) !important;
+}
+.root[data-variant="outline"] .tab:global(.Mui-selected) svg {
+  color: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_outline_variants_selection-states_active_properties_colors_icon-color
+  ) !important;
+}
+
+/* Pills Variant Colors & Typography */
+.root[data-variant="pills"] .tab {
+  background-color: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_pills_variants_selection-states_inactive_properties_colors_background-color
+  );
+  color: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_pills_variants_selection-states_inactive_properties_colors_text-color
+  );
+  border: var(--tabs-inactive-border-size) solid
+    var(
+      --recursica_ui-kit_components_tabs-item_variants_styles_pills_variants_selection-states_inactive_properties_colors_border-color
+    );
+
+  font-family: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_pills_variants_selection-states_inactive_properties_text_font-family
+  );
+  font-size: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_pills_variants_selection-states_inactive_properties_text_font-size
+  );
+  font-style: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_pills_variants_selection-states_inactive_properties_text_font-style
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_pills_variants_selection-states_inactive_properties_text_font-weight
+  );
+  letter-spacing: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_pills_variants_selection-states_inactive_properties_text_letter-spacing
+  );
+  line-height: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_pills_variants_selection-states_inactive_properties_text_line-height
+  );
+  text-decoration: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_pills_variants_selection-states_inactive_properties_text_text-decoration
+  );
+  text-transform: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_pills_variants_selection-states_inactive_properties_text_text-transform
+  );
+}
+.root[data-variant="pills"] .tab svg {
+  color: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_pills_variants_selection-states_inactive_properties_colors_icon-color
+  );
+}
+
+.root[data-variant="pills"] .tab:global(.Mui-selected) {
+  background-color: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_pills_variants_selection-states_active_properties_colors_background-color
+  ) !important;
+  color: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_pills_variants_selection-states_active_properties_colors_text-color
+  ) !important;
+  border: var(--tabs-active-border-size) solid
+    var(
+      --recursica_ui-kit_components_tabs-item_variants_styles_pills_variants_selection-states_active_properties_colors_border-color
+    ) !important;
+
+  font-family: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_pills_variants_selection-states_active_properties_text_font-family
+  ) !important;
+  font-size: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_pills_variants_selection-states_active_properties_text_font-size
+  ) !important;
+  font-style: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_pills_variants_selection-states_active_properties_text_font-style
+  ) !important;
+  font-weight: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_pills_variants_selection-states_active_properties_text_font-weight
+  ) !important;
+  letter-spacing: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_pills_variants_selection-states_active_properties_text_letter-spacing
+  ) !important;
+  line-height: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_pills_variants_selection-states_active_properties_text_line-height
+  ) !important;
+  text-decoration: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_pills_variants_selection-states_active_properties_text_text-decoration
+  ) !important;
+  text-transform: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_pills_variants_selection-states_active_properties_text_text-transform
+  ) !important;
+}
+.root[data-variant="pills"] .tab:global(.Mui-selected) svg {
+  color: var(
+    --recursica_ui-kit_components_tabs-item_variants_styles_pills_variants_selection-states_active_properties_colors_icon-color
+  ) !important;
+}
+
+/* Content panel
+   Note: unlike .list (MUI's internal flexContainer, a true descendant of .root), TabPanel
+   renders as a DOM sibling of <Tabs>, not nested inside it — `.root .panel` would never match.
+   Scope directly off the CSS-module-scoped class name instead. */
+.panel {
+  /* Recursica doesn't define panel colors intrinsically, leaves it to child content */
+  /* MUI's TabPanel defaults to theme.spacing(3) padding; Mantine's Tabs.Panel has none, and
+     the tab-to-content gap is already carried by the list's own margin (tabs-content-gap) */
+  padding: 0 !important;
+}
+
+/* Hover state uses a pseudo-element to apply opacity to the background without fading the text.
+   No per-variant hover-color/hover-opacity tokens exist anymore; use the generic overlay tokens
+   shared across components instead. */
+.root[data-variant] .tab:not(:global(.Mui-selected)):hover::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background-color: var(--recursica_brand_states_hover_color);
+  opacity: var(--recursica_brand_states_hover_opacity);
+  pointer-events: none;
+  z-index: 0;
+}
+
+/* Ensure tab content sits above the hover background. Excludes MuiTouchRipple-root: it relies on
+   its native position:absolute to stay out of flow, and forcing it to position:relative here
+   turns it into a real flex item — inserting an extra element-gap into the tab's flex row (and
+   growing the tab's width) the first time it's clicked, permanently shifting later siblings. */
+.root .tab > *:not(:global(.MuiTouchRipple-root)) {
+  z-index: 1;
+  position: relative;
+}