/**
 * @license
 * Copyright 2019 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */

import {LitElement, html, css, unsafeCSS} from 'lit';
import {customElement, property} from 'lit/decorators.js';
import { breakpoints } from '../../breakpoints';

@customElement('iu-footer-column')

export class FooterColumn extends LitElement {
  static override styles = css`
    :host{
      display: block;
      color: #fff;
    }
    p{
        font: var(--iu-f-0);
        margin: 0;
    }
    @media ${unsafeCSS(breakpoints.md)} {
        p{
            font: var(--iu-f-1);
        }
    }
    ::slotted(ul){
        margin: 0;
        list-style-type: none;
        padding: 0;
    }
  `;

  @property() heading? : string;

  override render() {
    return html`
        ${this.heading && html`<p><strong>${this.heading}</strong></p>`}
        <slot></slot>
    `;
  }

}

declare global {
  interface HTMLElementTagNameMap {
    'iu-footer-column': FooterColumn;
  }
}