import {
  SolidElement,
  customElement
} from "./chunk.H53WQBDK.js";
import {
  __decorateClass
} from "./chunk.S3NI7NKU.js";

// src/components/badge/badge.ts
import { css, html } from "lit";
import { property } from "lit/decorators.js";
import cx from "classix";
var SdBadge = class extends SolidElement {
  constructor() {
    super(...arguments);
    this.size = "lg";
    this.variant = "blue";
    this.inverted = false;
  }
  render() {
    return html`<span part="base" aria-labelledby="content" class="${cx(
      "inline-flex items-center justify-center gap-x-[1px] text-center font-bold whitespace-nowrap border rounded-full select-none cursor-[inherit]",
      {
        /* variants */
        blue: !this.inverted ? "text-white  sd-6-22-0-badge--blue-color-background border-white" : "sd-6-22-0-badge--blue--inverted-color-text sd-6-22-0-badge--blue--inverted-color-background sd-6-22-0-badge--inverted-color-border",
        green: !this.inverted ? "text-white sd-6-22-0-badge--green-color-background border-white" : "sd-6-22-0-badge--green-color--inverted-text sd-6-22-0-badge--green-color--inverted-background sd-6-22-0-badge--inverted-color-border",
        red: !this.inverted ? "text-white sd-6-22-0-badge--red-color-background border-white" : "sd-6-22-0-badge--red--inverted-text sd-6-22-0-badge--red--inverted-background sd-6-22-0-badge--inverted-color-border"
      }[this.variant]
    )}"><span id="content" part="content" class="${cx(this.size === "sm" && "sr-only")}"><slot></slot></span></span>`;
  }
};
SdBadge.styles = [
  ...SolidElement.styles,
  css`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
:host{display:inline-flex;align-items:center;justify-content:center}:host([size=md]){height:var(--sd-spacing-4);min-width:var(--sd-spacing-4);font-size:.625rem}:host([size=lg]){height:calc(var(--sd-spacing-1) * 5);min-width:calc(var(--sd-spacing-1) * 5);font-size:.75rem}:host([size=sm])::part(base){height:var(--sd-spacing-2);min-width:var(--sd-spacing-2)}:host([size=md])::part(base){padding-inline:var(--sd-spacing-1)}:host([size=lg])::part(base){padding-left:.313rem;padding-right:.313rem}`
];
__decorateClass([
  property({ type: String, reflect: true })
], SdBadge.prototype, "size", 2);
__decorateClass([
  property({ type: String, reflect: true })
], SdBadge.prototype, "variant", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], SdBadge.prototype, "inverted", 2);
SdBadge = __decorateClass([
  customElement("sd-6-22-0-badge")
], SdBadge);

export {
  SdBadge
};
