@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
/* Compound family aggregation: importing `cinder/tabs/styles` pulls the whole
 * Tabs family (TabList, Tab, TabPanel). Sibling-leaf paths resolve identically
 * in `src/` and the verbatim-copied `dist/` because the layout mirrors. */
@import '/assets/b156259ecf951ea64c145aa0f54c7115e89156d2e5434dff5584e0328b19afe7/components/tab/tab.css';
@import '/assets/b156259ecf951ea64c145aa0f54c7115e89156d2e5434dff5584e0328b19afe7/components/tab-list/tab-list.css';
@import '/assets/b156259ecf951ea64c145aa0f54c7115e89156d2e5434dff5584e0328b19afe7/components/tab-panel/tab-panel.css';

@layer cinder.components {
  /* ========================================
 * TABS
 * Outer wrapper provides flex layout for horizontal vs vertical orientation.
 * Contains a TabList (with role="tablist") and one or more TabPanels.
 * ======================================== */

  .cinder-tabs {
    display: flex;
    flex-direction: column;
    gap: var(--cinder-space-4);
    min-inline-size: 0;
    container-type: inline-size;
    container-name: cinder-tabs;
  }

  .cinder-tabs[data-cinder-fill] {
    flex: 1 1 auto;
    min-block-size: 0;
  }

  .cinder-tabs[data-cinder-orientation='vertical'] {
    flex-direction: row;
  }

  /* ----------------------------------------
 * Tab list
 * ---------------------------------------- */

  .cinder-tab-list {
    display: flex;
    gap: var(--cinder-space-1);
    border-bottom: 1px solid var(--cinder-border-muted);
    min-inline-size: 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }

  .cinder-tab-list[data-cinder-orientation='vertical'] {
    flex-direction: column;
    border-bottom: none;
    border-inline-end: 1px solid var(--cinder-border-muted);
    align-self: stretch;
  }

  /* ----------------------------------------
 * Tab button
 * ---------------------------------------- */

  .cinder-tab {
    appearance: none;
    background: none;
    border: none;
    padding: var(--cinder-space-2) var(--cinder-space-3);
    font: inherit;
    font-size: var(--cinder-text-sm);
    font-weight: var(--cinder-font-medium);
    color: var(--cinder-text-muted);
    cursor: pointer;
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--cinder-space-2);
    white-space: nowrap;
    border-radius: var(--cinder-radius-sm) var(--cinder-radius-sm) 0 0;
    transition:
      color var(--cinder-duration-fast) var(--cinder-ease-standard),
      background var(--cinder-duration-fast) var(--cinder-ease-standard);
  }

  /* Decorative trailing slot (badges, kbd hints, counters). Wrapped in
 * `aria-hidden="true"` in the markup so it never enters the accessible name. */
  .cinder-tab__trailing {
    display: inline-flex;
    align-items: center;
    color: var(--cinder-text-muted);
    font-size: var(--cinder-text-xs);
  }

  /* Sticky-hover suppression on touch: wrap hover-only chrome so it doesn't
 * "stick" after tap on touch devices that emulate :hover. */
  @media (hover: hover) {
    .cinder-tab:hover:not([data-cinder-disabled]) {
      color: var(--cinder-text-default);
      background: var(--cinder-surface-hover);
    }
  }

  /* Vertical tab radius — override the horizontal top-rounded/bottom-square
 * shape so the focus-ring box-shadow does not paint a tombstone in vertical
 * tablists. Emitted from `tabs.orientation` context as `data-variant`. */
  .cinder-tab[data-variant='vertical'] {
    border-radius: var(--cinder-radius-sm);
  }

  .cinder-tab[data-cinder-active] {
    color: var(--cinder-accent-text);
  }

  /* Active indicator — bottom (horizontal) / right (vertical) accent stripe. */
  .cinder-tab[data-cinder-active]::after {
    content: '';
    position: absolute;
    background: var(--cinder-accent-solid);
    pointer-events: none;
  }

  .cinder-tabs[data-cinder-orientation='horizontal'] .cinder-tab[data-cinder-active]::after,
  .cinder-tab-list[data-cinder-orientation='horizontal'] .cinder-tab[data-cinder-active]::after {
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
  }

  .cinder-tabs[data-cinder-orientation='vertical'] .cinder-tab[data-cinder-active]::after,
  .cinder-tab-list[data-cinder-orientation='vertical'] .cinder-tab[data-cinder-active]::after {
    top: 0;
    bottom: 0;
    right: -1px;
    width: 2px;
    height: auto;
  }

  /* The tab list is a clipping container: `.cinder-tab-list` sets
   * `overflow-x: auto`, and per the CSS Overflow spec a non-`visible` value on
   * one axis forces the other axis's used `overflow` to `auto` too — so the
   * list clips on BOTH axes. The list has zero block padding and a 1px
   * `border-bottom`, so the standard OUTSET focus ring (offset + ring-width
   * painted outside the tab border box) pokes past the list's content box and
   * gets clipped on the top, bottom, and trailing edges — only the first tab's
   * inline-start edge survives. Use the policy-sanctioned Strategy B-inset
   * variant: an INSET single-band ring painted entirely within the tab border
   * box, so the overflow clamp can never clip it in either orientation, with
   * zero layout shift (no padding or scroll-geometry change). The
   * `--_cinder-tab-ring` fallback hook matches the dropdown/number-input
   * inset-ring convention. */
  .cinder-tab:focus-visible {
    outline: var(--cinder-ring-width) solid transparent;
    box-shadow: inset 0 0 0 var(--cinder-ring-width)
      var(--_cinder-tab-ring, var(--cinder-ring-color));
  }

  @media (forced-colors: active) {
    /* Inset box-shadow rings vanish in Windows High Contrast Mode, so repaint
     * the outline channel with a negative offset that draws the outline INSIDE
     * the tab border box — a positive/outset offset would itself be clipped by
     * the list. `ButtonText` is the policy-correct system color for a
     * button-shaped `role="tab"` pressable (not `Highlight`). */
    .cinder-tab:focus-visible {
      outline: var(--cinder-ring-width) solid ButtonText;
      outline-offset: calc(var(--cinder-ring-width) * -1);
    }
  }

  .cinder-tab[data-cinder-disabled] {
    color: var(--cinder-text-disabled);
    cursor: not-allowed;
  }

  /* ----------------------------------------
 * Tab panel
 * ---------------------------------------- */

  .cinder-tab-panel {
    flex: 1 1 auto;
    min-block-size: 0;
    padding: var(--cinder-space-2) 0;
    outline: none;
  }

  @container cinder-tabs (max-width: 30rem) {
    .cinder-tabs[data-cinder-orientation='vertical'] {
      flex-direction: column;
    }

    .cinder-tabs[data-cinder-orientation='vertical'] .cinder-tab-list {
      flex-direction: row;
      border-inline-end: none;
      border-bottom: 1px solid var(--cinder-border-muted);
      align-self: stretch;
    }
  }

  .cinder-tab-panel:focus-visible {
    outline: var(--cinder-ring-width) solid transparent;
    box-shadow: var(--_cinder-focus-ring-shadow);
  }

  @media (forced-colors: active) {
    .cinder-tab-panel:focus-visible {
      outline: var(--cinder-ring-width) solid Highlight;
      outline-offset: 2px;
    }
  }
}