import { customElement, DeesElement, html, type TemplateResult, css, cssManager, unsafeCSS } from '@design.estate/dees-element';
import * as domtools from '@design.estate/dees-domtools';
import { fonts, colors, spacing } 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(fonts.base)};
      }

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

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