import * as plugins from '../../plugins.js';

import {
  customElement,
  html,
  DeesElement,
  property,
  type TemplateResult,
  cssManager,
  css,
  unsafeCSS,
  type CSSResult,
  state,
} from '@design.estate/dees-element';

@customElement('cloudly-sectionheading')
export class CloudlySectionheading extends DeesElement {
  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        display: grid;
        grid-template-columns: min-content min-content;
      }

      h1 {
        font-family: 'Cal Sans';
        letter-spacing: 0.025em;
        margin: 0px;
        margin-bottom: 16px;
        white-space: nowrap;
      }

      .flag {
        border-radius: 4px;
        background: #8a0183;
        height: 20px;
        padding: 2px 4px;
        margin-left: 16px;
        font-size: 12px;
        transform: translateY(12px);
        white-space: nowrap;
      }
    `,
  ]

  public render() {
    return html`
      <h1><slot></slot></h1>
      <div class="flag">stability: alpha</div>
    `;
  }
}