'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-0b1e2673.js');

const styleCss = ".sc-smoothly-popup-h{display:inline-flex;position:relative}[hidden].sc-smoothly-popup-h{display:none}.sc-smoothly-popup-h:not([visible]) aside.sc-smoothly-popup{display:none}.sc-smoothly-popup-h aside.sc-smoothly-popup{display:inline;position:absolute;padding:0.3em;background-color:rgb(238, 238, 238);border-color:rgb(238, 238, 238);border-style:solid;border-width:0.1em;border-radius:0.6em;z-index:3}[direction=down].sc-smoothly-popup-h aside.sc-smoothly-popup{top:2.2em;left:1em;box-shadow:6px 5px 9px -9px black,\n\t5px 6px 9px -9px black}[direction=up].sc-smoothly-popup-h aside.sc-smoothly-popup{bottom:2.2em;box-shadow:-6px -5px 9px -9px black,\n\t-5px -6px 9px -9px black}.sc-smoothly-popup-h:not([visible]) .background.sc-smoothly-popup{display:none}.sc-smoothly-popup-h .background.sc-smoothly-popup{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(var(--smoothly-warning-contrast), 0.5);z-index:2}.sc-smoothly-popup-h:not([visible]) .arrow.sc-smoothly-popup{display:none}.sc-smoothly-popup-h .arrow.sc-smoothly-popup{background-color:rgb(238, 238, 238);border-color:rgb(238, 238, 238);z-index:2;content:\"\";position:absolute;width:12px;height:12px;transform:rotate(45deg)}[direction=down].sc-smoothly-popup-h .arrow.sc-smoothly-popup{left:2em;top:2em;border-top-style:solid;border-top-width:1px;border-left-style:solid;border-left-width:1px}[direction=up].sc-smoothly-popup-h .arrow.sc-smoothly-popup{bottom:2em;left:1em;border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px}.sc-smoothly-popup-h .pointer.sc-smoothly-popup{cursor:pointer}";

const SmoothlyPopup = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.visible = false;
    this.direction = "down";
  }
  onClick(event) {
    this.visible = !this.visible;
  }
  render() {
    return (index.h(index.Host, null, index.h("content", { class: "pointer", onClick: (e) => this.onClick(e) }, index.h("slot", null)), index.h("div", { class: "background", onClick: (e) => this.onClick(e) }), index.h("div", { class: "arrow", onClick: (e) => this.onClick(e) }), index.h("aside", null, index.h("slot", { name: "popup" }))));
  }
};
SmoothlyPopup.style = styleCss;

exports.smoothly_popup = SmoothlyPopup;
