{"version":3,"file":"badge.css.cjs","names":[],"sources":["../../../src/feedback/badge/badge.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--badge-bg, var(--_theme-backdrop));\n    --_color: var(--badge-color, var(--_theme-base));\n    --_border-color: var(--badge-border-color, var(--_theme-border));\n    --_radius: var(--badge-radius, var(--rounded-lg));\n    --_font-size: var(--badge-font-size, var(--text-xs));\n    --_font-weight: var(--badge-font-weight, var(--font-semibold));\n    --_padding-x: var(--badge-padding-x, var(--size-1-5));\n    --_padding-y: var(--badge-padding-y, var(--size-0-5));\n    --_gap: var(--badge-gap, var(--size-1));\n\n    display: inline-flex;\n    vertical-align: middle;\n  }\n\n  .badge {\n    display: inline-flex;\n    gap: var(--_gap);\n    align-items: center;\n    justify-content: center;\n\n    /* Dot-only (no text slot) gets circular shape */\n    min-width: var(--size-2);\n    max-width: var(--badge-max-width, 24ch);\n    padding: var(--_padding-y) var(--_padding-x);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--_font-size);\n    font-weight: var(--_font-weight);\n    line-height: 1;\n    color: var(--_color);\n    white-space: nowrap;\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n  }\n\n  .badge-label {\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  ::slotted([slot='icon']) {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: 1em;\n    height: 1em;\n  }\n}\n\n@layer refine.variants {\n  /* Solid (Default) - Full theme color background */\n  :host(:not([variant])),\n  :host([variant='solid']) {\n    --_bg: var(--badge-bg, var(--_theme-base));\n    --_color: var(--badge-color, var(--_theme-contrast));\n    --_border-color: var(--badge-border-color, var(--_theme-base));\n  }\n\n  /* Flat - Subtle background with theme color text */\n  :host([variant='flat']) {\n    --_bg: var(--badge-bg, color-mix(in oklch, var(--_theme-backdrop) 25%, var(--color-contrast-100)));\n    --_color: var(--badge-color, var(--_theme-base));\n    --_border-color: var(--badge-border-color, color-mix(in oklch, var(--_theme-focus) 20%, transparent));\n  }\n\n  /* Bordered - Outlined with filled background */\n  :host([variant='bordered']) {\n    --_bg: var(--badge-bg, var(--_theme-backdrop));\n    --_color: var(--badge-color, var(--_theme-base));\n    --_border-color: var(--badge-border-color, var(--_theme-border));\n  }\n\n  /* Outline - Transparent with colored border */\n  :host([variant='outline']) {\n    --_bg: var(--badge-bg, transparent);\n    --_color: var(--badge-color, var(--_theme-base));\n    --_border-color: var(--badge-border-color, var(--_theme-base));\n  }\n\n  /* Dot-only mode */\n  :host([dot]) .badge {\n    min-width: unset;\n    padding: var(--_dot-padding, var(--size-1));\n    line-height: 0;\n  }\n}\n\n@layer refine.sizes {\n  :host([size='xs']) {\n    --_padding-x: var(--size-1);\n    --_padding-y: 0px;\n    --_font-size: var(--text-2xs);\n    --_dot-padding: var(--size-0-5);\n  }\n}\n\n@layer refine.overrides {\n  /* Dot — always force badge background and border regardless of variant */\n  :host([dot]) {\n    --_bg: var(--badge-bg, var(--_theme-base));\n    --_border-color: var(--badge-border-color, var(--_theme-base));\n  }\n\n  /* ========================================\n       Anchor overlay mode\n       ======================================== */\n\n  :host([anchor]) {\n    position: relative;\n    display: inline-flex;\n  }\n\n  /*\n     * Per-direction multiplier: +1 in LTR, -1 in RTL.\n     * Used to flip the translateX offset so the badge always overflows\n     * the correct physical edge that corresponds to its logical corner.\n     */\n  :host {\n    --_dir: 1;\n  }\n\n  :host(:dir(rtl)) {\n    --_dir: -1;\n  }\n\n  /* Default position: top-end */\n  :host([anchor]) .badge {\n    position: absolute;\n    inset-inline-end: 0;\n    top: 0;\n    z-index: 1;\n    transform: translate(calc(var(--_dir) * 30%), -30%);\n  }\n\n  :host([anchor='top-start']) .badge {\n    inset-inline-start: 0;\n    inset-inline-end: unset;\n    transform: translate(calc(var(--_dir) * -30%), -30%);\n  }\n\n  :host([anchor='bottom-end']) .badge {\n    top: unset;\n    bottom: 0;\n    transform: translate(calc(var(--_dir) * 30%), 30%);\n  }\n\n  :host([anchor='bottom-start']) .badge {\n    inset-inline-start: 0;\n    inset-inline-end: unset;\n    top: unset;\n    bottom: 0;\n    transform: translate(calc(var(--_dir) * -30%), 30%);\n  }\n}\n"],"mappings":""}