import { focusedElementContext } from "./focusedElementContext.js";
import { consume } from "@lit/context";
import { LitElement, css, html } from "lit";
import { customElement } from "lit/decorators.js";
import _decorate from "@oxc-project/runtime/helpers/decorate";
import { createRef, ref } from "lit/directives/ref.js";
let EFFocusOverlay = class EFFocusOverlay$1 extends LitElement {
	constructor(..._args) {
		super(..._args);
		this.overlay = createRef();
		this.drawOverlay = () => {
			const overlay = this.overlay.value;
			if (overlay) if (this.focusedElement) {
				overlay.style.display = "block";
				const rect = this.focusedElement.getBoundingClientRect();
				Object.assign(overlay.style, {
					top: `${rect.top}px`,
					left: `${rect.left}px`,
					width: `${rect.width}px`,
					height: `${rect.height}px`
				});
				this.animationFrame = requestAnimationFrame(this.drawOverlay);
			} else overlay.style.display = "none";
		};
	}
	static {
		this.styles = css`
    :host {
      display: block;
      position: relative;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }
    .overlay {
      position: fixed;
      outline: 2px solid var(--ef-focus-overlay-color, rgb(59, 130, 246));
      background: var(--ef-focus-overlay-background, rgb(59, 130, 246));
      outline: 2px solid var(--ef-focus-overlay-color, rgb(59, 130, 246));
      mix-blend-mode: multiply;
      opacity: 0.4;
      display: none;
    }
  `;
	}
	render() {
		return html`<div ${ref(this.overlay)} class="overlay"></div>`;
	}
	connectedCallback() {
		super.connectedCallback();
		this.drawOverlay();
	}
	disconnectedCallback() {
		super.disconnectedCallback();
		if (this.animationFrame) cancelAnimationFrame(this.animationFrame);
	}
	updated() {
		this.drawOverlay();
	}
};
_decorate([consume({
	context: focusedElementContext,
	subscribe: true
})], EFFocusOverlay.prototype, "focusedElement", void 0);
EFFocusOverlay = _decorate([customElement("ef-focus-overlay")], EFFocusOverlay);
export { EFFocusOverlay };
