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

@customElement('iu-overlay')

export class Overlay extends LitElement {
  static override styles = css`
    :host {
      transition: opacity .25s ease, visibility 1s linear;
      pointer-events: none;
      visibility: hidden;
      opacity: 0;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 40;
    }
    :host([visible]) {
      transition: opacity .25s ease, visibility 1s linear;
      visibility: visible;
      opacity: 1;
    }
  `;
  
  @property({ type: Boolean, reflect: true }) visible = false;
  
  override render() {
    return html`<div></div>`;
  }
  
}

declare global {
  interface HTMLElementTagNameMap {
    'iu-overlay': Overlay;
  }
}