import { customElement, DeesElement, html, type TemplateResult, css, cssManager, unsafeCSS } from '@design.estate/dees-element';
import * as domtools from '@design.estate/dees-domtools';
import * as sharedStyles from '../../styles/shared.styles.js';

@customElement('uplinternal-miniheading')
export class UplinternalMiniheading extends DeesElement {
  public static styles = [
    domtools.elementBasic.staticStyles,
    css`
      :host {
        display: block;
        font-family: ${unsafeCSS(sharedStyles.fonts.base)};
      }

      h5 {
        display: block;
        max-width: 1200px;
        margin: 0px auto;
        padding: 0px 0px ${unsafeCSS(sharedStyles.spacing.sm)} 0px;
        color: ${sharedStyles.colors.text.secondary};
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.05em;
        text-transform: uppercase;
      }
    `
  ];

  public render(): TemplateResult {
    return html`
      <h5>${this.textContent}</h5>
    `;
  }
}