import { css } from 'lit';
import { IxTooltip } from './IxTooltip.js';

export class IxTooltipStyled extends IxTooltip {
  /*
   * Are you about to try and modify the width?
   * Don't try and do it with CSS vars, you won't get very far because this element should not be deeply nested
   * What you should do instead is add this middleware https://floating-ui.com/docs/size
   */
  static override styles = css`
    :host {
      position: fixed;
      top: 0;
      left: 0;
      width: max-content;
      z-index: 999;
    }

    .wrapper {
      opacity: 1;

      &:focus {
        outline: 0;
      }

      &.hidding {
        opacity: 0;
      }

      &:hover {
        opacity: 1;
      }
    }
  `;
}

window.customElements.define('ix-tooltip', IxTooltipStyled);