@plexui/ui 0.19.0 → 0.20.0

package/dist/es/components/Tabs/Tabs.module.css

@@ -1,672 +0,0 @@
-@layer components {.Tabs {
-  position: relative;
-  display: inline-flex;
-  flex-wrap: nowrap;
-  gap: var(--segmented-control-gap);
-  font-size: var(--segmented-control-font-size);
-  font-weight: var(--segmented-control-font-weight);
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-  vertical-align: middle;
-  white-space: nowrap;
-}
-
-  .Tabs::-webkit-scrollbar {
-    width: 0;
-    height: 0;
-  }
-
-  .Tabs::-webkit-scrollbar-track,
-  .Tabs::-webkit-scrollbar-thumb {
-    background: transparent;
-  }
-
-  /* =============================================
-    Variant: Segmented (default — existing behavior)
-  ============================================= */
-  .Tabs:where([data-variant="segmented"]) {
-    overflow: auto;
-    height: var(--segmented-control-size);
-    padding: var(--segmented-control-gutter);
-    border-radius: var(--segmented-control-radius);
-    background: var(--segmented-control-background);
-  }
-
-  .Tabs:where([data-variant="segmented"]:not([data-pill])) {
-    --segmented-control-option-radius: calc(
-      var(--segmented-control-radius) - var(--segmented-control-gutter)
-    );
-  }
-
-  .Tabs:where([data-variant="segmented"][data-pill]) {
-    border-radius: var(--radius-full);
-    --segmented-control-option-radius: var(--radius-full);
-  }
-
-  .Tabs:where([data-variant="segmented"][data-block]) {
-    overflow: hidden;
-    display: flex;
-    width: 100%;
-    white-space: normal;
-  }
-
-  /* =============================================
-    Variant: Underline
-  ============================================= */
-  .Tabs:where([data-variant="underline"]) {
-    --segmented-control-option-radius: 0;
-
-    overflow: auto;
-    height: var(--segmented-control-size);
-    padding: 0;
-    border-radius: 0;
-    background: transparent;
-    gap: 0;
-    border-bottom: 1px solid var(--tabs-underline-border-color);
-  }
-
-  .Tabs:where([data-variant="underline"][data-block]) {
-    overflow: hidden;
-    display: flex;
-    width: 100%;
-    white-space: normal;
-  }
-
-  /* =============================================
-    Variant: Underline flush
-  ============================================= */
-  .Tabs:where([data-variant="underline"][data-flush]) {
-    gap: var(--segmented-control-option-gutter);
-    border-bottom: none;
-  }
-
-  .Tabs:where([data-variant="underline"][data-flush][data-block]) {
-    gap: 0;
-  }
-
-  /* =============================================
-    Vertical orientation
-  ============================================= */
-  .Tabs:where([data-orientation="vertical"]) {
-    flex-direction: column;
-    height: auto;
-    width: -moz-fit-content;
-    width: fit-content;
-    white-space: nowrap;
-  }
-
-  .Tabs:where([data-orientation="vertical"][data-variant="segmented"]) {
-    overflow-y: auto;
-    overflow-x: hidden;
-  }
-
-  .Tabs:where([data-orientation="vertical"][data-variant="underline"]) {
-    overflow-y: auto;
-    overflow-x: hidden;
-    border-bottom: none;
-    border-left: 1px solid var(--tabs-underline-border-color);
-  }
-
-  .Tabs:where([data-orientation="vertical"][data-block]) {
-    width: 100%;
-  }
-
-  .Tabs:where([data-orientation="vertical"][data-variant="segmented"][data-pill]) {
-    border-radius: calc(var(--segmented-control-size) / 2);
-    --segmented-control-option-radius: calc(var(--segmented-control-size) / 2);
-  }
-
-  /* =============================================
-    Sizes
-  ============================================= */
-  .Tabs:where([data-size="3xs"]) {
-    --segmented-control-size: var(--control-size-3xs);
-    --segmented-control-font-size: var(--control-font-size-sm);
-    --segmented-control-radius: var(--control-radius-sm);
-    --segmented-control-option-gutter: var(--control-gutter-xs);
-    /* Icon and content */
-    --segmented-control-icon-size: var(--control-icon-size-xs);
-    --segmented-control-content-gap: var(--button-gap-sm);
-    --segmented-control-icon-offset: -1px;
-    --segmented-control-badge-offset: -1px;
-    /* Badge tokens — inherited from badge-size-2xs */
-    --option-badge-size: var(--badge-size-2xs);
-    --option-badge-gutter: var(--badge-gutter-2xs);
-    --option-badge-font-size: var(--badge-font-size-2xs);
-    --option-badge-font-weight: var(--badge-font-weight-2xs);
-    --option-badge-tracking: var(--badge-tracking-2xs);
-    --option-badge-radius: var(--badge-radius-2xs);
-  }
-
-  .Tabs:where([data-size="2xs"]) {
-    --segmented-control-size: var(--control-size-2xs);
-    --segmented-control-font-size: var(--control-font-size-sm);
-    --segmented-control-radius: var(--control-radius-sm);
-    --segmented-control-option-gutter: var(--control-gutter-xs);
-    /* Icon and content */
-    --segmented-control-icon-size: var(--control-icon-size-sm);
-    --segmented-control-content-gap: var(--button-gap-md);
-    --segmented-control-icon-offset: -1px;
-    --segmented-control-badge-offset: -1px;
-    /* Badge tokens — inherited from badge-size-2xs */
-    --option-badge-size: var(--badge-size-2xs);
-    --option-badge-gutter: var(--badge-gutter-2xs);
-    --option-badge-font-size: var(--badge-font-size-2xs);
-    --option-badge-font-weight: var(--badge-font-weight-2xs);
-    --option-badge-tracking: var(--badge-tracking-2xs);
-    --option-badge-radius: var(--badge-radius-2xs);
-  }
-
-  .Tabs:where([data-size="xs"]) {
-    --segmented-control-size: var(--control-size-xs);
-    --segmented-control-font-size: var(--control-font-size-md);
-    --segmented-control-radius: var(--control-radius-sm);
-    --segmented-control-option-gutter: var(--control-gutter-xs);
-    /* Icon and content */
-    --segmented-control-icon-size: var(--control-icon-size-sm);
-    --segmented-control-content-gap: var(--button-gap-md);
-    --segmented-control-icon-offset: -1px;
-    --segmented-control-badge-offset: -1px;
-    /* Badge tokens — inherited from badge-size-xs */
-    --option-badge-size: var(--badge-size-xs);
-    --option-badge-gutter: var(--badge-gutter-xs);
-    --option-badge-font-size: var(--badge-font-size-xs);
-    --option-badge-font-weight: var(--badge-font-weight-xs);
-    --option-badge-tracking: var(--badge-tracking-xs);
-    --option-badge-radius: var(--badge-radius-xs);
-  }
-
-  .Tabs:where([data-size="sm"]) {
-    --segmented-control-size: var(--control-size-sm);
-    --segmented-control-font-size: var(--control-font-size-md);
-    --segmented-control-radius: var(--control-radius-sm);
-    --segmented-control-option-gutter: var(--control-gutter-sm);
-    /* Icon and content */
-    --segmented-control-icon-size: var(--control-icon-size-md);
-    --segmented-control-content-gap: var(--button-gap-md);
-    --segmented-control-icon-offset: -1px;
-    --segmented-control-badge-offset: -1px;
-    /* Badge tokens — inherited from badge-size-sm */
-    --option-badge-size: var(--badge-size-sm);
-    --option-badge-gutter: var(--badge-gutter-sm);
-    --option-badge-font-size: var(--badge-font-size-sm);
-    --option-badge-font-weight: var(--badge-font-weight-sm);
-    --option-badge-tracking: var(--badge-tracking-sm);
-    --option-badge-radius: var(--badge-radius-sm);
-  }
-
-  .Tabs:where([data-size="md"]) {
-    --segmented-control-size: var(--control-size-md);
-    --segmented-control-font-size: var(--control-font-size-md);
-    --segmented-control-radius: var(--control-radius-md);
-    --segmented-control-option-gutter: var(--control-gutter-md);
-    /* Icon and content */
-    --segmented-control-icon-size: var(--control-icon-size-md);
-    --segmented-control-content-gap: var(--button-gap-lg);
-    --segmented-control-icon-offset: -1px;
-    --segmented-control-badge-offset: -1px;
-    /* Badge tokens — inherited from badge-size-md */
-    --option-badge-size: var(--badge-size-md);
-    --option-badge-gutter: var(--badge-gutter-md);
-    --option-badge-font-size: var(--badge-font-size-md);
-    --option-badge-font-weight: var(--badge-font-weight-md);
-    --option-badge-tracking: var(--badge-tracking-md);
-    --option-badge-radius: var(--badge-radius-md);
-  }
-
-  .Tabs:where([data-size="lg"]) {
-    --segmented-control-size: var(--control-size-lg);
-    --segmented-control-font-size: var(--control-font-size-md);
-    --segmented-control-radius: var(--control-radius-lg);
-    --segmented-control-option-gutter: var(--control-gutter-md);
-    /* Icon and content */
-    --segmented-control-icon-size: var(--control-icon-size-md);
-    --segmented-control-content-gap: var(--button-gap-lg);
-    --segmented-control-icon-offset: -1px;
-    --segmented-control-badge-offset: -1px;
-    /* Badge tokens — inherited from badge-size-md */
-    --option-badge-size: var(--badge-size-md);
-    --option-badge-gutter: var(--badge-gutter-md);
-    --option-badge-font-size: var(--badge-font-size-md);
-    --option-badge-font-weight: var(--badge-font-weight-md);
-    --option-badge-tracking: var(--badge-tracking-md);
-    --option-badge-radius: var(--badge-radius-md);
-  }
-
-  .Tabs:where([data-size="xl"]) {
-    --segmented-control-size: var(--control-size-xl);
-    --segmented-control-font-size: var(--control-font-size-md);
-    --segmented-control-radius: var(--control-radius-xl);
-    --segmented-control-option-gutter: var(--control-gutter-lg);
-    /* Icon and content */
-    --segmented-control-icon-size: var(--control-icon-size-md);
-    --segmented-control-content-gap: var(--button-gap-lg);
-    --segmented-control-icon-offset: -1px;
-    --segmented-control-badge-offset: -1px;
-    /* Badge tokens — inherited from badge-size-md */
-    --option-badge-size: var(--badge-size-md);
-    --option-badge-gutter: var(--badge-gutter-md);
-    --option-badge-font-size: var(--badge-font-size-md);
-    --option-badge-font-weight: var(--badge-font-weight-md);
-    --option-badge-tracking: var(--badge-tracking-md);
-    --option-badge-radius: var(--badge-radius-md);
-  }
-
-  .Tabs:where([data-size="2xl"]) {
-    --segmented-control-size: var(--control-size-2xl);
-    --segmented-control-font-size: var(--control-font-size-lg);
-    --segmented-control-radius: var(--control-radius-xl);
-    --segmented-control-option-gutter: var(--control-gutter-xl);
-    /* Icon and content */
-    --segmented-control-icon-size: var(--control-icon-size-lg);
-    --segmented-control-content-gap: var(--button-gap-lg);
-    --segmented-control-icon-offset: -2px;
-    --segmented-control-badge-offset: -2px;
-    /* Badge tokens — inherited from badge-size-lg */
-    --option-badge-size: var(--badge-size-lg);
-    --option-badge-gutter: var(--badge-gutter-lg);
-    --option-badge-font-size: var(--badge-font-size-lg);
-    --option-badge-font-weight: var(--badge-font-weight-lg);
-    --option-badge-tracking: var(--badge-tracking-lg);
-    --option-badge-radius: var(--badge-radius-lg);
-  }
-
-  .Tabs:where([data-size="3xl"]) {
-    --segmented-control-size: var(--control-size-3xl);
-    --segmented-control-font-size: var(--control-font-size-lg);
-    --segmented-control-radius: var(--control-radius-xl);
-    --segmented-control-option-gutter: var(--control-gutter-xl);
-    /* Icon and content */
-    --segmented-control-icon-size: var(--control-icon-size-lg);
-    --segmented-control-content-gap: var(--button-gap-lg);
-    --segmented-control-icon-offset: -2px;
-    --segmented-control-badge-offset: -2px;
-    /* Badge tokens — inherited from badge-size-lg */
-    --option-badge-size: var(--badge-size-lg);
-    --option-badge-gutter: var(--badge-gutter-lg);
-    --option-badge-font-size: var(--badge-font-size-lg);
-    --option-badge-font-weight: var(--badge-font-weight-lg);
-    --option-badge-tracking: var(--badge-tracking-lg);
-    --option-badge-radius: var(--badge-radius-lg);
-  }
-
-  /* =============================================
-    Gutter sizes (segmented variant only)
-  ============================================= */
-  .Tabs:where([data-gutter-size="2xs"]) {
-    --segmented-control-option-gutter: var(--control-gutter-2xs);
-  }
-
-  .Tabs:where([data-gutter-size="xs"]) {
-    --segmented-control-option-gutter: var(--control-gutter-xs);
-  }
-
-  .Tabs:where([data-gutter-size="sm"]) {
-    --segmented-control-option-gutter: var(--control-gutter-sm);
-  }
-
-  .Tabs:where([data-gutter-size="md"]) {
-    --segmented-control-option-gutter: var(--control-gutter-md);
-  }
-
-  .Tabs:where([data-gutter-size="lg"]) {
-    --segmented-control-option-gutter: var(--control-gutter-lg);
-  }
-
-  .Tabs:where([data-gutter-size="xl"]) {
-    --segmented-control-option-gutter: var(--control-gutter-xl);
-  }/* =============================================
-  Tab (trigger item)
-============================================= */.Tab {
-  position: relative;
-  padding: 0 var(--segmented-control-option-gutter);
-  color: var(--color-text-secondary);
-  cursor: pointer;
-  line-height: 1;
-  display: flex;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  transition-duration: var(--transition-duration-basic);
-  transition-property: opacity, background-color, color;
-  transition-timing-function: var(--transition-ease-basic);
-}
-
-  .Tab:focus {
-    outline: 0;
-  }
-
-  /* =============================================
-    Segmented variant — Tab styles
-  ============================================= */
-  :where(.Tabs[data-variant="segmented"]) .Tab {
-    border-radius: var(--segmented-control-option-radius);
-  }
-
-  :where(.Tabs[data-variant="segmented"][data-block]) .Tab {
-    flex: 1;
-  }
-
-  :where(.Tabs[data-variant="segmented"][data-pill]) .Tab {
-    min-width: calc(var(--segmented-control-size) - 2 * var(--segmented-control-gutter));
-    padding: 0 calc(var(--segmented-control-option-gutter) * var(--control-gutter-pill-scaling));
-  }
-
-  /* Hover highlight pseudo-element (segmented only) */
-  :where(.Tabs[data-variant="segmented"]) .Tab::before {
-    position: absolute;
-    inset: var(--segmented-control-option-highlight-gutter);
-    border-radius: var(--segmented-control-option-radius);
-    background: var(--segmented-control-option-highlight-background-color);
-    content: "";
-    opacity: 0;
-    pointer-events: none;
-    transform: scale(1);
-    transition-duration: var(--transition-duration-basic);
-    transition-property: opacity, transform;
-    transition-timing-function: var(--transition-ease-basic);
-    will-change: transform;
-  }
-
-  :where(.Tabs[data-variant="segmented"]) .Tab:active::before {
-    transform: scale(var(--scale), 0.97);
-  }
-    @media (hover: hover) and (pointer: fine) {:where(.Tabs[data-variant="segmented"]) .Tab[data-state="off"]:where(:not([disabled])):hover {
-      color: var(--color-text);
-}
-
-      :where(.Tabs[data-variant="segmented"]) .Tab[data-state="off"]:where(:not([disabled])):hover::before {
-        opacity: 0.5;
-      }
-}
-
-    :where(.Tabs[data-variant="segmented"]) .Tab[data-state="off"]:where(:not([disabled])):focus-visible {
-      color: var(--color-text);
-      outline: 2px solid var(--color-ring);
-    }
-
-    :where(.Tabs[data-variant="segmented"]) .Tab[data-state="off"]:where(:not([disabled])):active::before {
-      opacity: 0.75;
-    }
-
-  /* =============================================
-    Underline variant — Tab styles
-  ============================================= */
-  :where(.Tabs[data-variant="underline"]) .Tab {
-    border-radius: 0;
-  }
-
-  :where(.Tabs[data-variant="underline"][data-block]) .Tab {
-    flex: 1;
-  }
-    @media (hover: hover) and (pointer: fine) {:where(.Tabs[data-variant="underline"]) .Tab[data-state="off"]:where(:not([disabled])):hover {
-      color: var(--color-text);
-}
-}
-
-    :where(.Tabs[data-variant="underline"]) .Tab[data-state="off"]:where(:not([disabled])):focus-visible {
-      color: var(--color-text);
-      outline: 2px solid var(--color-ring);
-      outline-offset: -2px;
-    }
-
-  /* Flush underline variant — Tab styles */
-  :where(.Tabs[data-variant="underline"][data-flush]) .Tab {
-    padding: 0;
-  }
-
-  /* =============================================
-    Vertical orientation — Tab styles
-  ============================================= */
-  :where(.Tabs[data-orientation="vertical"]) .Tab {
-    justify-content: flex-start;
-    width: 100%;
-    height: var(--segmented-control-size);
-  }
-
-  :where(.Tabs[data-orientation="vertical"][data-block]) .Tab {
-    flex: none;
-  }
-
-  /* =============================================
-    Shared states
-  ============================================= */
-  .Tab[data-state="on"] {
-    color: var(--color-text);
-  }
-
-  .Tab[data-state="on"]:focus-visible {
-    outline: 2px solid var(--color-ring);
-  }
-
-  .Tab[data-disabled] {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-
-    .Tab[data-disabled]::before {
-      opacity: 0 !important;
-    }
-
-  .Tab svg {
-    display: block;
-  }/* =============================================
-  Thumb (animated indicator)
-============================================= */.TabsThumb {
-  position: absolute;
-  pointer-events: none;
-  will-change: transform;
-}
-
-  /* Segmented horizontal: background highlight */
-  :where(.Tabs[data-variant="segmented"][data-orientation="horizontal"]) .TabsThumb {
-    top: var(--segmented-control-gutter);
-    bottom: var(--segmented-control-gutter);
-    left: 0;
-    border-radius: var(--segmented-control-option-radius);
-    background: var(--segmented-control-thumb-background);
-    box-shadow: var(--segmented-control-thumb-shadow);
-  }
-
-  /* Segmented vertical: background highlight */
-  :where(.Tabs[data-variant="segmented"][data-orientation="vertical"]) .TabsThumb {
-    left: var(--segmented-control-gutter);
-    right: var(--segmented-control-gutter);
-    top: 0;
-    border-radius: var(--segmented-control-option-radius);
-    background: var(--segmented-control-thumb-background);
-    box-shadow: var(--segmented-control-thumb-shadow);
-  }
-
-  /* Underline horizontal: thin line at the bottom */
-  :where(.Tabs[data-variant="underline"][data-orientation="horizontal"]) .TabsThumb {
-    bottom: 0;
-    left: 0;
-    height: var(--tabs-underline-indicator-height);
-    border-radius: calc(var(--tabs-underline-indicator-height) / 2) calc(var(--tabs-underline-indicator-height) / 2) 0 0;
-    background: var(--tabs-underline-indicator-color);
-    box-shadow: none;
-  }
-
-  /* Underline vertical: thin line on the left */
-  :where(.Tabs[data-variant="underline"][data-orientation="vertical"]) .TabsThumb {
-    left: 0;
-    top: 0;
-    width: var(--tabs-underline-indicator-height);
-    border-radius: 0 calc(var(--tabs-underline-indicator-height) / 2) calc(var(--tabs-underline-indicator-height) / 2) 0;
-    background: var(--tabs-underline-indicator-color);
-    box-shadow: none;
-  }
-
-  /* Flush underline horizontal: 1px line, no radius */
-  :where(.Tabs[data-variant="underline"][data-flush][data-orientation="horizontal"]) .TabsThumb {
-    height: 1px;
-    border-radius: 0;
-  }
-
-  /* Flush underline vertical: 1px line, no radius */
-  :where(.Tabs[data-variant="underline"][data-flush][data-orientation="vertical"]) .TabsThumb {
-    width: 1px;
-    border-radius: 0;
-  }/* =============================================
-  Tab Content (icon + text + badge layout)
-============================================= */.TabContent {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: var(--segmented-control-content-gap);
-}
-
-  /* Icon auto-sizing (same as Button) */
-  .TabContent svg:where(:not([data-no-autosize])) {
-    width: var(--segmented-control-icon-size);
-    height: var(--segmented-control-icon-size);
-  }
-
-  /* Negative margin for icon when followed by text */
-  .TabContent svg:where(:first-child:not(:only-child)) {
-    margin-left: var(--segmented-control-icon-offset);
-  }/* =============================================
-  Tab Badge (CSS-only, no Badge component)
-============================================= */.TabBadge {
-  display: inline-flex;
-  align-items: center;
-  height: var(--option-badge-size);
-  padding: 0 var(--option-badge-gutter);
-  border-radius: var(--option-badge-radius);
-  background-color: var(--option-badge-bg);
-  color: var(--option-badge-color);
-  font-size: var(--option-badge-font-size);
-  font-weight: var(--option-badge-font-weight);
-  letter-spacing: var(--option-badge-tracking);
-  white-space: nowrap;
-  margin-right: var(--segmented-control-badge-offset);
-}
-
-  /* =============================================
-    Soft variant (default)
-  ============================================= */
-    .TabBadge[data-variant="soft"]:where([data-color="secondary"]) {
-      --option-badge-bg: var(--color-background-secondary-soft-alpha);
-      --option-badge-color: var(--color-text-secondary-soft);
-    }
-
-    .TabBadge[data-variant="soft"]:where([data-color="success"]) {
-      --option-badge-bg: var(--color-background-success-soft-alpha);
-      --option-badge-color: var(--color-text-success-soft);
-    }
-
-    .TabBadge[data-variant="soft"]:where([data-color="warning"]) {
-      --option-badge-bg: var(--color-background-warning-soft-alpha);
-      --option-badge-color: var(--color-text-warning-soft);
-    }
-
-    .TabBadge[data-variant="soft"]:where([data-color="danger"]) {
-      --option-badge-bg: var(--color-background-danger-soft-alpha);
-      --option-badge-color: var(--color-text-danger-soft);
-    }
-
-    .TabBadge[data-variant="soft"]:where([data-color="info"]) {
-      --option-badge-bg: var(--color-background-info-soft-alpha);
-      --option-badge-color: var(--color-text-info-soft);
-    }
-
-    .TabBadge[data-variant="soft"]:where([data-color="discovery"]) {
-      --option-badge-bg: var(--color-background-discovery-soft-alpha);
-      --option-badge-color: var(--color-text-discovery-soft);
-    }
-
-    .TabBadge[data-variant="soft"]:where([data-color="caution"]) {
-      --option-badge-bg: var(--color-background-caution-soft-alpha);
-      --option-badge-color: var(--color-text-caution-soft);
-    }
-
-  /* =============================================
-    Solid variant
-  ============================================= */
-    .TabBadge[data-variant="solid"]:where([data-color="secondary"]) {
-      --option-badge-bg: var(--color-background-secondary-solid);
-      --option-badge-color: var(--color-text-secondary-solid);
-    }
-
-    .TabBadge[data-variant="solid"]:where([data-color="success"]) {
-      --option-badge-bg: var(--color-background-success-solid);
-      --option-badge-color: var(--color-text-success-solid);
-    }
-
-    .TabBadge[data-variant="solid"]:where([data-color="warning"]) {
-      --option-badge-bg: var(--color-background-warning-solid);
-      --option-badge-color: var(--color-text-warning-solid);
-    }
-
-    .TabBadge[data-variant="solid"]:where([data-color="danger"]) {
-      --option-badge-bg: var(--color-background-danger-solid);
-      --option-badge-color: var(--color-text-danger-solid);
-    }
-
-    .TabBadge[data-variant="solid"]:where([data-color="info"]) {
-      --option-badge-bg: var(--color-background-info-solid);
-      --option-badge-color: var(--color-text-info-solid);
-    }
-
-    .TabBadge[data-variant="solid"]:where([data-color="discovery"]) {
-      --option-badge-bg: var(--color-background-discovery-solid);
-      --option-badge-color: var(--color-text-discovery-solid);
-    }
-
-    .TabBadge[data-variant="solid"]:where([data-color="caution"]) {
-      --option-badge-bg: var(--color-background-caution-solid);
-      --option-badge-color: var(--color-text-caution-solid);
-    }
-
-  /* =============================================
-    Outline variant
-  ============================================= */
-  .TabBadge[data-variant="outline"] {
-    background-color: transparent;
-    box-shadow: 0 0 0 1px var(--option-badge-border) inset;
-  }
-
-    .TabBadge[data-variant="outline"]:where([data-color="secondary"]) {
-      --option-badge-border: var(--color-border-secondary-outline);
-      --option-badge-color: var(--color-text-secondary-outline);
-    }
-
-    .TabBadge[data-variant="outline"]:where([data-color="success"]) {
-      --option-badge-border: var(--color-border-success-outline);
-      --option-badge-color: var(--color-text-success-outline);
-    }
-
-    .TabBadge[data-variant="outline"]:where([data-color="warning"]) {
-      --option-badge-border: var(--color-border-warning-outline);
-      --option-badge-color: var(--color-text-warning-outline);
-    }
-
-    .TabBadge[data-variant="outline"]:where([data-color="danger"]) {
-      --option-badge-border: var(--color-border-danger-outline);
-      --option-badge-color: var(--color-text-danger-outline);
-    }
-
-    .TabBadge[data-variant="outline"]:where([data-color="info"]) {
-      --option-badge-border: var(--color-border-info-outline);
-      --option-badge-color: var(--color-text-info-outline);
-    }
-
-    .TabBadge[data-variant="outline"]:where([data-color="discovery"]) {
-      --option-badge-border: var(--color-border-discovery-outline);
-      --option-badge-color: var(--color-text-discovery-outline);
-    }
-
-    .TabBadge[data-variant="outline"]:where([data-color="caution"]) {
-      --option-badge-border: var(--color-border-caution-outline);
-      --option-badge-color: var(--color-text-caution-outline);
-    }
-
-  /* =============================================
-    Pill
-  ============================================= */
-  .TabBadge[data-pill] {
-    border-radius: var(--radius-full);
-    padding: 0 calc(var(--option-badge-gutter) * var(--control-gutter-pill-scaling));
-  }
-}