{"version":3,"file":"tab-item.css.cjs","names":[],"sources":["../../../src/disclosure/tab-item/tab-item.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --tab-item-transition: var(--transition-normal);\n    --tab-item-radius: var(--rounded-lg);\n    display: inline-flex;\n    outline: none;\n  }\n\n  button {\n    position: relative;\n    display: inline-flex;\n    gap: var(--size-2);\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    min-height: var(--_touch-target);\n    padding: var(--tab-item-padding, var(--size-1-5) var(--size-4));\n    font-family: inherit;\n    font-size: var(--tab-item-font-size, var(--text-sm));\n    font-weight: var(--font-medium);\n    color: var(--tab-item-color, var(--text-color-secondary));\n    white-space: nowrap;\n    cursor: pointer;\n    user-select: none;\n    background: transparent;\n    border: none;\n    border-radius: var(--tab-item-radius);\n    transition:\n      background var(--tab-item-transition),\n      color var(--tab-item-transition),\n      box-shadow var(--tab-item-transition);\n  }\n\n  button:focus {\n    outline: none;\n  }\n\n  :host(:focus-visible) button,\n  button:focus-visible {\n    outline: var(--border-2) solid var(--_theme-focus);\n    outline-offset: 2px;\n    box-shadow: 0 0 0 3px var(--_theme-shadow);\n  }\n}\n\n@layer refine.variants {\n  /* ─── solid / default ─── */\n  :host,\n  :host([variant='solid']) {\n    --_hover-bg: var(--tab-item-hover-bg, var(--color-contrast-200));\n    --_active-bg: var(--tab-item-active-bg, var(--color-contrast-0, var(--color-canvas)));\n    --_active-color: var(--tab-item-active-color, var(--text-color-heading));\n    --_active-shadow: var(--tab-item-active-shadow, var(--shadow-xs), var(--inset-shadow-xs));\n  }\n\n  /* ─── flat ─── */\n  :host([variant='flat']) {\n    --_hover-bg: var(--tab-item-hover-bg, var(--color-contrast-200));\n    --_active-bg: var(--tab-item-active-bg, var(--color-contrast-0, var(--color-canvas)));\n    --_active-color: var(--tab-item-active-color, var(--text-color-heading));\n    --_active-shadow: var(--tab-item-active-shadow, var(--shadow-xs), var(--inset-shadow-xs));\n  }\n\n  /* ─── bordered ─── */\n  :host([variant='bordered']) {\n    --_hover-bg: var(--tab-item-hover-bg, var(--color-contrast-200));\n    --_active-bg: var(--tab-item-active-bg, var(--color-contrast-0, var(--color-canvas)));\n    --_active-color: var(--tab-item-active-color, var(--text-color-heading));\n    --_active-shadow: var(--tab-item-active-shadow, var(--shadow-xs));\n  }\n\n  /* ─── ghost ─── */\n  :host([variant='ghost']) {\n    --_hover-bg: var(--tab-item-hover-bg, var(--color-contrast-100));\n    --_active-bg: var(--tab-item-active-bg, var(--_theme-base));\n    --_active-color: var(--tab-item-active-color, var(--_theme-contrast));\n  }\n\n  /* ─── glass ─── */\n  :host([variant='glass']) {\n    --_color: var(--tab-item-color, color-mix(in oklch, var(--color-secondary-contrast) 70%, transparent));\n    --_hover-bg: var(--tab-item-hover-bg, color-mix(in oklch, var(--color-secondary-contrast) 10%, transparent));\n    --_active-bg: var(--tab-item-active-bg, color-mix(in oklch, var(--color-secondary-contrast) 15%, transparent));\n    --_active-color: var(--tab-item-active-color, var(--color-secondary-contrast));\n    --_active-shadow: var(--tab-item-active-shadow, var(--shadow-xs), var(--inset-shadow-xs));\n  }\n\n  :host([variant='glass']) button {\n    color: var(--_color);\n    text-shadow: var(--text-shadow-2xs);\n  }\n\n  :host([variant='glass']) button:hover {\n    color: var(--tab-item-active-color, var(--color-secondary-contrast));\n  }\n\n  /* ─── frost ─── */\n  :host([variant='frost']) {\n    --_hover-bg: var(--tab-item-hover-bg, color-mix(in oklch, var(--color-contrast) 10%, transparent));\n    --_active-bg: var(--tab-item-active-bg, color-mix(in oklch, var(--color-canvas) 60%, transparent));\n    --_active-color: var(--tab-item-active-color, var(--text-color-heading));\n    --_active-shadow: var(--tab-item-active-shadow, var(--shadow-xs), var(--inset-shadow-xs));\n  }\n\n  :host([variant='frost']) button {\n    color: var(--text-color-secondary);\n  }\n\n  /* ─── Shared interactive states (read per-variant --_* tokens) ─── */\n\n  :host button:hover {\n    color: var(--tab-item-active-color, var(--text-color-heading));\n    background: var(--_hover-bg);\n  }\n\n  :host([active]) button {\n    color: var(--_active-color);\n    background: var(--_active-bg);\n    box-shadow: var(--_active-shadow);\n  }\n\n  /* ─── sizes ─── */\n  :host([size='sm']) {\n    --tab-item-font-size: var(--text-xs);\n    --tab-item-padding: var(--size-1) var(--size-3);\n  }\n\n  :host(:not([size])),\n  :host([size='md']) {\n    --tab-item-font-size: var(--text-sm);\n    --tab-item-padding: var(--size-1-5) var(--size-4);\n  }\n\n  :host([size='lg']) {\n    --tab-item-font-size: var(--text-base);\n    --tab-item-padding: var(--size-2) var(--size-5);\n  }\n\n  /* ─── coarse pointer: promote one size tier for proportional scaling ─── */\n  @media (pointer: coarse) {\n    :host,\n    :host([size='md']) {\n      --tab-item-font-size: var(--text-base);\n      --tab-item-padding: var(--size-2) var(--size-5);\n    }\n\n    :host([size='sm']) {\n      --tab-item-font-size: var(--text-sm);\n      --tab-item-padding: var(--size-1-5) var(--size-4);\n    }\n  }\n\n  /* ─── disabled ─── */\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.5;\n  }\n\n  @media (forced-colors: active) {\n    /* Ensure focus ring is visible regardless of variant theme color */\n    button:focus-visible {\n      outline: 2px solid Highlight;\n      box-shadow: none;\n    }\n\n    /* Active tab: box-shadow raised indicator is stripped; use outline inste\n         ad so the selected tab remains distinguishable */\n    :host([active]) button {\n      outline: 2px solid Highlight;\n      outline-offset: -2px;\n    }\n  }\n}\n"],"mappings":""}