@layer clickui {.wrapper__DxhQK {
  display: inline-flex;
  padding: var(--click-badge-space-md-y) var(--click-badge-space-md-x);
  border: var(--click-badge-stroke) solid var(--click-badge-opaque-color-stroke-default);
  border-radius: var(--click-badge-radii-all);
  background-color: var(--click-badge-opaque-color-background-default);
  color: var(--click-badge-opaque-color-text-default);
  font: var(--click-badge-typography-label-md-default);
}

/* Opaque type — colors per state */

.wrapper_typestate_opaque-default__aI5-w {
  border-color: var(--click-badge-opaque-color-stroke-default);
  background-color: var(--click-badge-opaque-color-background-default);
  color: var(--click-badge-opaque-color-text-default);
}

.wrapper_typestate_opaque-success__A7jFR {
  border-color: var(--click-badge-opaque-color-stroke-success);
  background-color: var(--click-badge-opaque-color-background-success);
  color: var(--click-badge-opaque-color-text-success);
}

.wrapper_typestate_opaque-neutral__M-2Ek {
  border-color: var(--click-badge-opaque-color-stroke-neutral);
  background-color: var(--click-badge-opaque-color-background-neutral);
  color: var(--click-badge-opaque-color-text-neutral);
}

.wrapper_typestate_opaque-danger__1FP9Q {
  border-color: var(--click-badge-opaque-color-stroke-danger);
  background-color: var(--click-badge-opaque-color-background-danger);
  color: var(--click-badge-opaque-color-text-danger);
}

.wrapper_typestate_opaque-disabled__rOnZR {
  border-color: var(--click-badge-opaque-color-stroke-disabled);
  background-color: var(--click-badge-opaque-color-background-disabled);
  color: var(--click-badge-opaque-color-text-disabled);
}

.wrapper_typestate_opaque-warning__LFMbO {
  border-color: var(--click-badge-opaque-color-stroke-warning);
  background-color: var(--click-badge-opaque-color-background-warning);
  color: var(--click-badge-opaque-color-text-warning);
}

.wrapper_typestate_opaque-info__x6Bg3 {
  border-color: var(--click-badge-opaque-color-stroke-info);
  background-color: var(--click-badge-opaque-color-background-info);
  color: var(--click-badge-opaque-color-text-info);
}

/* Solid type — colors per state */

.wrapper_typestate_solid-default__xjCXm {
  border-color: var(--click-badge-solid-color-stroke-default);
  background-color: var(--click-badge-solid-color-background-default);
  color: var(--click-badge-solid-color-text-default);
}

.wrapper_typestate_solid-success__NbCJo {
  border-color: var(--click-badge-solid-color-stroke-success);
  background-color: var(--click-badge-solid-color-background-success);
  color: var(--click-badge-solid-color-text-success);
}

.wrapper_typestate_solid-neutral__dFOPR {
  border-color: var(--click-badge-solid-color-stroke-neutral);
  background-color: var(--click-badge-solid-color-background-neutral);
  color: var(--click-badge-solid-color-text-neutral);
}

.wrapper_typestate_solid-danger__zCzPE {
  border-color: var(--click-badge-solid-color-stroke-danger);
  background-color: var(--click-badge-solid-color-background-danger);
  color: var(--click-badge-solid-color-text-danger);
}

.wrapper_typestate_solid-disabled__sscAh {
  border-color: var(--click-badge-solid-color-stroke-disabled);
  background-color: var(--click-badge-solid-color-background-disabled);
  color: var(--click-badge-solid-color-text-disabled);
}

.wrapper_typestate_solid-warning__48ZTU {
  border-color: var(--click-badge-solid-color-stroke-warning);
  background-color: var(--click-badge-solid-color-background-warning);
  color: var(--click-badge-solid-color-text-warning);
}

.wrapper_typestate_solid-info__5fv-r {
  border-color: var(--click-badge-solid-color-stroke-info);
  background-color: var(--click-badge-solid-color-background-info);
  color: var(--click-badge-solid-color-text-info);
}

/* Sizes */

.wrapper_size_sm__zQIOE {
  padding: var(--click-badge-space-sm-y) var(--click-badge-space-sm-x);
  font: var(--click-badge-typography-label-sm-default);
}

.wrapper_size_md__1Uvni {
  padding: var(--click-badge-space-md-y) var(--click-badge-space-md-x);
  font: var(--click-badge-typography-label-md-default);
}

/* Content row `gap` always uses the md token regardless of the badge's actual
   `size` — matching the pre-migration behavior, where the row was never passed
   a size. Preserved verbatim. */

.content__8D6nB {
  display: inline-flex;
  max-width: 100%;
  justify-content: flex-start;
  align-items: center;
  gap: var(--click-badge-space-md-gap);
}

/* BadgeContent — wraps the IconWrapper. Sets `width: auto; overflow: hidden;`
   on the IconWrapper's root and styles the descendant <svg> with color,
   height, width, and `gap: inherit`.

   The content wrapper is keyed off `state` only — `type` and `size` are not
   applied and effectively default to `'opaque'` and `'md'`, matching the
   pre-migration behavior. So the descendant <svg> color always comes from the
   opaque-text-* tokens and dimensions are always md, regardless of the badge's
   actual `type`/`size`.

   The doubled-class selectors below (e.g. `.badgecontent.badgecontent svg`)
   raise specificity to (0,2,1) so these rules win over the Icon component's
   own `svg` rule `.<icon-class> svg { width: ... }` (specificity 0,1,1). Badge
   and Icon are both CSS Modules in the same cascade layer, and Badge's rule
   bundles earlier, so at equal specificity Icon would win on source order —
   the bump keeps BadgeContent's <svg> sizing authoritative. */

/* stylelint-disable no-descending-specificity -- doubled-class selectors below
   raise specificity so they win over the Icon component's `& svg` rule. */

.badgecontent__MlQs8 {
  width: auto;
  overflow: hidden;
}

.badgecontent__MlQs8.badgecontent__MlQs8 svg {
  width: var(--click-badge-icon-md-size-width);
  height: var(--click-badge-icon-md-size-height);
  gap: inherit;
}

.badgecontent_state_default__xvx1m.badgecontent_state_default__xvx1m svg {
  color: var(--click-badge-opaque-color-text-default);
}

.badgecontent_state_success__NuTD7.badgecontent_state_success__NuTD7 svg {
  color: var(--click-badge-opaque-color-text-success);
}

.badgecontent_state_neutral__Q0zQx.badgecontent_state_neutral__Q0zQx svg {
  color: var(--click-badge-opaque-color-text-neutral);
}

.badgecontent_state_danger__cLB2G.badgecontent_state_danger__cLB2G svg {
  color: var(--click-badge-opaque-color-text-danger);
}

.badgecontent_state_disabled__UDS4K.badgecontent_state_disabled__UDS4K svg {
  color: var(--click-badge-opaque-color-text-disabled);
}

.badgecontent_state_warning__GtYY1.badgecontent_state_warning__GtYY1 svg {
  color: var(--click-badge-opaque-color-text-warning);
}

.badgecontent_state_info__XgrAY.badgecontent_state_info__XgrAY svg {
  color: var(--click-badge-opaque-color-text-info);
}

/* stylelint-enable no-descending-specificity */

/* Close icon — rendered as an Icon, keyed off `state` only (size and type
   default), so width/height come from the default md/opaque tokens and color
   from the opaque-text-<state> token.

   The state classes below use doubled-class specificity (0,2,1) so they
   always win over Icon's own `svg` rule that sets `color: currentColor` on
   the same element at single-class specificity. Without the bump, source
   order would decide — Badge and Icon are CSS Modules in the same layer and
   Badge bundles first — so the close icon would inherit the wrapper's color
   (e.g. opaque-text-info for an info badge, but solid-text-info for a solid
   info badge). Doubled class keeps the close icon on opaque-text-* regardless. */

.closeicon__p-7mr {
  width: var(--click-badge-icon-md-size-width);
  height: var(--click-badge-icon-md-size-height);
}

.closeicon_state_default__i3VsI.closeicon_state_default__i3VsI {
  color: var(--click-badge-opaque-color-text-default);
}

.closeicon_state_success__NRfHo.closeicon_state_success__NRfHo {
  color: var(--click-badge-opaque-color-text-success);
}

.closeicon_state_neutral__MFG4R.closeicon_state_neutral__MFG4R {
  color: var(--click-badge-opaque-color-text-neutral);
}

.closeicon_state_danger__1SPLo.closeicon_state_danger__1SPLo {
  color: var(--click-badge-opaque-color-text-danger);
}

.closeicon_state_disabled__kagep.closeicon_state_disabled__kagep {
  color: var(--click-badge-opaque-color-text-disabled);
}

.closeicon_state_warning__HyEx3.closeicon_state_warning__HyEx3 {
  color: var(--click-badge-opaque-color-text-warning);
}

.closeicon_state_info__qNJkh.closeicon_state_info__qNJkh {
  color: var(--click-badge-opaque-color-text-info);
}
}