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

@customElement('iu-header-navbar-submenu')

export class SiteHeaderNavbarSubmenu extends LitElement {
  get container() {
    return this.shadowRoot?.querySelector('div');
  }
  static override styles = css`
    :host{
      display: block;
    }
    div{
      box-sizing: border-box;
      pointer-events: none;
      visibility: hidden;
      opacity: 0;
      position: absolute;
      transform: translateZ(0) translateY(calc(100% - 2px));
      bottom: 0;
      left: 0;
      // width: 100%;
      background: #fff;
    }
    :host > div > ul {
      list-style-type: none;
      margin: 0;
      padding-top: var(--iu-spacing-6);
      padding-bottom: var(--iu-spacing-7);
      padding-left: var(--iu-grid-offset);
      padding-right: var(--iu-grid-gutter);
      orphans: 1;
      columns: 3;
      column-gap: var(--iu-grid-gutter);
    }
    :host(.is-active) div{
      pointer-events: auto;
      visibility: visible;
      opacity: 1;
    }
    :host(.is-closing) div{
    }
    ::slotted(*){
      opacity: 1;
    }
    :host(.is-active.is-closing) ::slotted(*) {
      transition: opacity .1s ease;
      opacity: 0;
    }
  `;

  override render() {
    return html`
      <div>
        <ul>
            <slot>
        </ul>
      </div>
    `;
  }

}

declare global {
  interface HTMLElementTagNameMap {
    'iu-header-navbar-submenu': SiteHeaderNavbarSubmenu;
  }
}