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

declare global {
  interface HTMLElementTagNameMap {
    'shx-button': ShxButton;
  }
}

@customElement('shx-button')
export class ShxButton extends DeesElement {
  public static demo = () => html`<shx-button>Open console</shx-button>`;
  public static demoGroups = ['smarthome.exchange primitives'];

  public static styles = [
    ...shxElementStyles,
    css`
      :host {
        display: inline-flex;
      }
      button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 34px;
        padding: 0 14px;
        border: 1px solid var(--shx-accent);
        border-radius: 7px;
        background: var(--shx-accent);
        color: #fff;
        font: 600 13px/1 var(--shx-font);
        letter-spacing: -0.01em;
        cursor: pointer;
      }
      button:hover {
        filter: brightness(1.08);
      }
    `,
  ];

  public render() {
    return html`<button part="button"><slot></slot></button>`;
  }
}