import { DeesElement, html, customElement, css } from '@design.estate/dees-element';
import { shxElementStyles } from './tokens.js';

declare global {
  interface HTMLElementTagNameMap {
    'shx-badge': ShxBadge;
  }
}

@customElement('shx-badge')
export class ShxBadge extends DeesElement {
  public static demo = () => html`<shx-badge>local-first</shx-badge>`;
  public static demoGroups = ['smarthome.exchange primitives'];

  public static styles = [
    ...shxElementStyles,
    css`
      :host {
        display: inline-flex;
        align-items: center;
        min-height: 22px;
        padding: 0 8px;
        border: 1px solid color-mix(in srgb, var(--shx-accent), transparent 70%);
        border-radius: 999px;
        background: var(--shx-accent-soft);
        color: var(--shx-accent);
        font: 600 11px/1 var(--shx-mono);
        letter-spacing: 0.04em;
        text-transform: uppercase;
      }
    `,
  ];

  public render() {
    return html`<slot></slot>`;
  }
}