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;
    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: visible;
    opacity: 1;
  }
  `;
  
  @property({ type: Boolean, reflect: true }) visible = false;
  
  override render() {
    return html`<div></div>`;
  }
  
}

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