import { n as DevToolbarWindow, t as settings } from "./astro_runtime_client_dev-toolbar_entrypoint__js.js";
import { n as isDefinedIcon, t as getIconElement } from "./icons-DcM8cGs_.js";
//#region node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/badge.js
var sizes$1 = ["small", "large"];
var styles$6 = [
	"purple",
	"gray",
	"red",
	"green",
	"yellow",
	"blue"
];
var DevToolbarBadge = class extends HTMLElement {
	_size = "small";
	_badgeStyle = "purple";
	get size() {
		return this._size;
	}
	set size(value) {
		if (!sizes$1.includes(value)) {
			settings.logger.error(`Invalid size: ${value}, expected one of ${sizes$1.join(", ")}, got ${value}.`);
			return;
		}
		this._size = value;
		this.updateStyle();
	}
	get badgeStyle() {
		return this._badgeStyle;
	}
	set badgeStyle(value) {
		if (!styles$6.includes(value)) {
			settings.logger.error(`Invalid style: ${value}, expected one of ${styles$6.join(", ")}, got ${value}.`);
			return;
		}
		this._badgeStyle = value;
		this.updateStyle();
	}
	shadowRoot;
	static observedAttributes = ["badge-style", "size"];
	constructor() {
		super();
		this.shadowRoot = this.attachShadow({ mode: "open" });
		this.shadowRoot.innerHTML = `
			<style>
				.badge {
					box-sizing: border-box;
					border-radius: 4px;
					border: 1px solid transparent;
					padding: 8px;
					font-size: 12px;
					color: var(--text-color);
					height: var(--size);
					border: 1px solid var(--border-color);
					display: flex;
					align-items: center;
					justify-content: center;
					font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

					--purple-text: rgba(224, 204, 250, 1);
					--purple-border: rgba(113, 24, 226, 1);

					--gray-text: rgba(191, 193, 201, 1);
					--gray-border:rgba(191, 193, 201, 1);

					--red-text: rgba(249, 196, 215, 1);
					--red-border: rgba(179, 62, 102, 1);

					--green-text: rgba(213, 249, 196, 1);
					--green-border: rgba(61, 125, 31, 1);

					--yellow-text: rgba(249, 233, 196, 1);
					--yellow-border: rgba(181, 138, 45, 1);

					--blue-text: rgba(189, 195, 255, 1);
					--blue-border: rgba(54, 69, 217, 1);

					--large: 24px;
					--small: 20px;
				}
			</style>
			<style id="selected-style"></style>

			<div class="badge">
				<slot></slot>
			</div>
			`;
	}
	connectedCallback() {
		this.updateStyle();
	}
	attributeChangedCallback() {
		if (this.hasAttribute("badge-style")) this.badgeStyle = this.getAttribute("badge-style");
		if (this.hasAttribute("size")) this.size = this.getAttribute("size");
	}
	updateStyle() {
		const style = this.shadowRoot.querySelector("#selected-style");
		if (style) style.innerHTML = `
			.badge {
				--text-color: var(--${this.badgeStyle}-text);
				--border-color: var(--${this.badgeStyle}-border);
				--size: var(--${this.size});
			}`;
	}
};
//#endregion
//#region node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/button.js
var sizes = [
	"small",
	"medium",
	"large"
];
var styles$5 = [
	"ghost",
	"outline",
	"purple",
	"gray",
	"red",
	"green",
	"yellow",
	"blue"
];
var borderRadii = ["normal", "rounded"];
var DevToolbarButton = class extends HTMLElement {
	_size = "small";
	_buttonStyle = "purple";
	_buttonBorderRadius = "normal";
	get size() {
		return this._size;
	}
	set size(value) {
		if (!sizes.includes(value)) {
			settings.logger.error(`Invalid size: ${value}, expected one of ${sizes.join(", ")}, got ${value}.`);
			return;
		}
		this._size = value;
		this.updateStyle();
	}
	get buttonStyle() {
		return this._buttonStyle;
	}
	set buttonStyle(value) {
		if (!styles$5.includes(value)) {
			settings.logger.error(`Invalid style: ${value}, expected one of ${styles$5.join(", ")}, got ${value}.`);
			return;
		}
		this._buttonStyle = value;
		this.updateStyle();
	}
	get buttonBorderRadius() {
		return this._buttonBorderRadius;
	}
	set buttonBorderRadius(value) {
		if (!borderRadii.includes(value)) {
			settings.logger.error(`Invalid border-radius: ${value}, expected one of ${borderRadii.join(", ")}, got ${value}.`);
			return;
		}
		this._buttonBorderRadius = value;
		this.updateStyle();
	}
	static observedAttributes = [
		"button-style",
		"size",
		"button-border-radius"
	];
	shadowRoot;
	constructor() {
		super();
		this.shadowRoot = this.attachShadow({ mode: "open" });
		this.shadowRoot.innerHTML = `
			<style>
				button {
					--purple-background: rgba(113, 24, 226, 1);
					--purple-border: rgba(224, 204, 250, 0.33);
					--purple-text: #fff;

					--gray-background: rgba(52, 56, 65, 1);
					--gray-border: rgba(71, 78, 94, 1);
					--gray-text: #fff;

					--red-background: rgba(179, 62, 102, 1);
					--red-border: rgba(249, 196, 215, 0.33);
					--red-text: #fff;

					--green-background: rgba(213, 249, 196, 1);
					--green-border: rgba(61, 125, 31, 1);
					--green-text: #000;

					--yellow-background: rgba(255, 236, 179, 1);
					--yellow-border: rgba(255, 191, 0, 1);
					--yellow-text: #000;

					--blue-background: rgba(54, 69, 217, 1);
					--blue-border: rgba(189, 195, 255, 1);
					--blue-text: #fff;

					--outline-background: transparent;
					--outline-border: #fff;
					--outline-text: #fff;

					--ghost-background: transparent;
					--ghost-border: transparent;
					--ghost-text: #fff;

					--large-font-size: 16px;
					--medium-font-size: 14px;
					--small-font-size: 12px;

					--large-padding: 12px 16px;
					--large-rounded-padding: 12px 12px;
					--medium-padding: 8px 12px;
					--medium-rounded-padding: 8px 8px;
					--small-padding: 4px 8px;
					--small-rounded-padding: 4px 4px;

					--normal-border-radius: 4px;
					--rounded-border-radius: 9999px;

					border: 1px solid var(--border);
					padding: var(--padding);
					font-size: var(--font-size);
					background: var(--background);

					color: var(--text-color);
					border-radius: var(--border-radius);
					display: flex;
					align-items: center;
					justify-content: center;
				}

				button:hover {
					cursor: pointer;
				}

				::slotted(astro-dev-toolbar-icon) {
					display: inline-block;
					height: 1em;
					width: 1em;
					margin-left: 0.5em;
				}
			</style>
			<style id="selected-style"></style>

			<button>
				<slot></slot>
			</button>
		`;
	}
	connectedCallback() {
		this.updateStyle();
	}
	updateStyle() {
		const style = this.shadowRoot.querySelector("#selected-style");
		if (style) style.innerHTML = `
			button {
				--background: var(--${this.buttonStyle}-background);
				--border: var(--${this.buttonStyle}-border);
				--font-size: var(--${this.size}-font-size);
				--text-color: var(--${this.buttonStyle}-text);
				${this.buttonBorderRadius === "normal" ? "--padding: var(--" + this.size + "-padding);" : "--padding: var(--" + this.size + "-rounded-padding);"}
				--border-radius: var(--${this.buttonBorderRadius}-border-radius);
			}`;
	}
	attributeChangedCallback() {
		if (this.hasAttribute("size")) this.size = this.getAttribute("size");
		if (this.hasAttribute("button-style")) this.buttonStyle = this.getAttribute("button-style");
	}
};
//#endregion
//#region node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/card.js
var styles$4 = [
	"purple",
	"gray",
	"red",
	"green",
	"yellow",
	"blue"
];
var DevToolbarCard = class extends HTMLElement {
	link;
	clickAction;
	shadowRoot;
	_cardStyle = "purple";
	get cardStyle() {
		return this._cardStyle;
	}
	set cardStyle(value) {
		if (!styles$4.includes(value)) {
			settings.logger.error(`Invalid style: ${value}, expected one of ${styles$4.join(", ")}, got ${value}.`);
			return;
		}
		this._cardStyle = value;
		this.updateStyle();
	}
	static observedAttributes = ["card-style"];
	constructor() {
		super();
		this.shadowRoot = this.attachShadow({ mode: "open" });
		this.link = this.getAttribute("link");
	}
	attributeChangedCallback() {
		if (this.hasAttribute("card-style")) this.cardStyle = this.getAttribute("card-style");
		this.updateStyle();
	}
	updateStyle() {
		const style = this.shadowRoot.querySelector("#selected-style");
		if (style) style.innerHTML = `
				:host {
					--hover-background: var(--${this.cardStyle}-hover-background);
					--hover-border: var(--${this.cardStyle}-hover-border);
				}
			`;
	}
	connectedCallback() {
		const element = this.link ? "a" : this.clickAction ? "button" : "div";
		this.shadowRoot.innerHTML += `
			<style>
				:host {
					--purple-hover-background: rgba(136, 58, 234, 0.33);
					--purple-hover-border: 1px solid rgba(113, 24, 226, 1);

					--gray-hover-background: rgba(191, 193, 201, 0.33);
					--gray-hover-border: 1px solid rgba(191, 193, 201, 1);

					--red-hover-background: rgba(249, 196, 215, 0.33);
					--red-hover-border: 1px solid rgba(179, 62, 102, 1);

					--green-hover-background: rgba(213, 249, 196, 0.33);
					--green-hover-border: 1px solid rgba(61, 125, 31, 1);

					--yellow-hover-background: rgba(255, 236, 179, 0.33);
					--yellow-hover-border: 1px solid rgba(255, 191, 0, 1);

					--blue-hover-background: rgba(189, 195, 255, 0.33);
					--blue-hover-border: 1px solid rgba(54, 69, 217, 1);
				}

				:host>a, :host>button, :host>div {
					box-sizing: border-box;
					padding: 16px;
					display: block;
					border-radius: 8px;
					border: 1px solid rgba(35, 38, 45, 1);
					color: rgba(191, 193, 201, 1);
					text-decoration: none;
					background-color: #13151A;
					box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.10), 0px 4px 4px 0px rgba(0, 0, 0, 0.09), 0px 10px 6px 0px rgba(0, 0, 0, 0.05), 0px 17px 7px 0px rgba(0, 0, 0, 0.01), 0px 26px 7px 0px rgba(0, 0, 0, 0.00);
					width: 100%;
    			height: 100%;
				}

				h1, h2, h3, h4, h5, h6 {
					color: #fff;
					font-weight: 600;
				}

				a:hover, button:hover {
					background: var(--hover-background);
					border: var(--hover-border);
				}

				svg {
					display: block;
					margin: 0 auto;
				}

				span {
					margin-top: 8px;
					display: block;
					text-align: center;
				}
			</style>
			<style id="selected-style"></style>

			<${element}${this.link ? ` href="${this.link}" target="_blank"` : ``} id="astro-overlay-card">
				<slot />
			</${element}>
		`;
		this.updateStyle();
		if (this.clickAction) this.shadowRoot.getElementById("astro-overlay-card")?.addEventListener("click", this.clickAction);
	}
};
//#endregion
//#region node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/highlight.js
var styles$3 = [
	"purple",
	"gray",
	"red",
	"green",
	"yellow",
	"blue"
];
var DevToolbarHighlight = class extends HTMLElement {
	icon;
	_highlightStyle = "purple";
	get highlightStyle() {
		return this._highlightStyle;
	}
	set highlightStyle(value) {
		if (!styles$3.includes(value)) {
			settings.logger.error(`Invalid style: ${value}, expected one of ${styles$3.join(", ")}, got ${value}.`);
			return;
		}
		this._highlightStyle = value;
		this.updateStyle();
	}
	static observedAttributes = ["highlight-style"];
	shadowRoot;
	constructor() {
		super();
		this.shadowRoot = this.attachShadow({ mode: "open" });
		this.icon = this.hasAttribute("icon") ? this.getAttribute("icon") : void 0;
		this.shadowRoot.innerHTML = `
			<style>
				:host {
					--purple-background: linear-gradient(180deg, rgba(224, 204, 250, 0.33) 0%, rgba(224, 204, 250, 0.0825) 100%);
					--purple-border: 1px solid rgba(113, 24, 226, 1);

					--gray-background: linear-gradient(180deg, rgba(191, 193, 201, 0.33) 0%, rgba(191, 193, 201, 0.0825) 100%);
					--gray-border: 1px solid rgba(191, 193, 201, 1);

					--red-background: linear-gradient(180deg, rgba(249, 196, 215, 0.33) 0%, rgba(249, 196, 215, 0.0825) 100%);
					--red-border: 1px solid rgba(179, 62, 102, 1);

					--green-background: linear-gradient(180deg, rgba(213, 249, 196, 0.33) 0%, rgba(213, 249, 196, 0.0825) 100%);
					--green-border: 1px solid rgba(61, 125, 31, 1);

					--yellow-background: linear-gradient(180deg, rgba(255, 236, 179, 0.33) 0%, rgba(255, 236, 179, 0.0825) 100%);
					--yellow-border: 1px solid rgba(181, 138, 45, 1);

					--blue-background: linear-gradient(180deg, rgba(189, 195, 255, 0.33) 0%, rgba(189, 195, 255, 0.0825) 100%);
					--blue-border: 1px solid rgba(54, 69, 217, 1);

					border-radius: 4px;
					display: block;
					width: 100%;
					height: 100%;
					position: absolute;
					z-index: 2000000000;

					background: var(--background);
					border: var(--border);
				}

				.icon {
					width: 24px;
					height: 24px;
					color: white;
					background: linear-gradient(0deg, #B33E66, #B33E66), linear-gradient(0deg, #351722, #351722);
					border: 1px solid rgba(53, 23, 34, 1);
					border-radius: 9999px;
					display: flex;
					justify-content: center;
					align-items: center;
					position: absolute;
					top: -15px;
					right: -15px;
				}
			</style>
			<style id="selected-style"></style>
		`;
	}
	updateStyle() {
		const style = this.shadowRoot.querySelector("#selected-style");
		if (style) style.innerHTML = `
			:host {
				--background: var(--${this.highlightStyle}-background);
				--border: var(--${this.highlightStyle}-border);
			}`;
	}
	attributeChangedCallback() {
		if (this.hasAttribute("highlight-style")) this.highlightStyle = this.getAttribute("highlight-style");
	}
	connectedCallback() {
		this.updateStyle();
		if (this.icon) {
			let iconContainer = document.createElement("div");
			iconContainer.classList.add("icon");
			let iconElement;
			if (isDefinedIcon(this.icon)) iconElement = getIconElement(this.icon);
			else {
				iconElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
				iconElement.setAttribute("viewBox", "0 0 16 16");
				iconElement.innerHTML = this.icon;
			}
			if (iconElement) {
				iconElement?.style.setProperty("width", "16px");
				iconElement?.style.setProperty("height", "16px");
				iconContainer.append(iconElement);
				this.shadowRoot.append(iconContainer);
			}
		}
	}
};
//#endregion
//#region node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/icon.js
var DevToolbarIcon = class extends HTMLElement {
	_icon = void 0;
	shadowRoot;
	get icon() {
		return this._icon;
	}
	set icon(name) {
		this._icon = name;
		this.buildTemplate();
	}
	constructor() {
		super();
		this.shadowRoot = this.attachShadow({ mode: "open" });
		if (this.hasAttribute("icon")) this.icon = this.getAttribute("icon");
		else this.buildTemplate();
	}
	getIconHTML(icon) {
		if (icon && isDefinedIcon(icon)) return getIconElement(icon)?.outerHTML ?? "";
		return "<slot />";
	}
	buildTemplate() {
		this.shadowRoot.innerHTML = `
			<style>
				svg {
					width: 100%;
					height: 100%;
				}

				@media (forced-colors: active) {
					svg path[fill="#fff"] {
						fill: black;
					}
				}
			</style>
${this.getIconHTML(this._icon)}`;
	}
};
//#endregion
//#region node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/radio-checkbox.js
var styles$2 = [
	"purple",
	"gray",
	"red",
	"green",
	"yellow",
	"blue"
];
var DevToolbarRadioCheckbox = class extends HTMLElement {
	_radioStyle = "purple";
	input;
	shadowRoot;
	get radioStyle() {
		return this._radioStyle;
	}
	set radioStyle(value) {
		if (!styles$2.includes(value)) {
			console.error(`Invalid style: ${value}, expected one of ${styles$2.join(", ")}.`);
			return;
		}
		this._radioStyle = value;
		this.updateStyle();
	}
	static observedAttributes = [
		"radio-style",
		"checked",
		"disabled",
		"name",
		"value"
	];
	constructor() {
		super();
		this.shadowRoot = this.attachShadow({ mode: "open" });
		this.shadowRoot.innerHTML = `
		<style>
			:host {
				--purple-unchecked: rgba(224, 204, 250, 0.33);
				--purple-checked: rgba(224, 204, 250, 1);

				--gray-unchecked: rgba(191, 193, 201, 0.33);
				--gray-checked: rgba(191, 193, 201, 1);

				--red-unchecked: rgba(249, 196, 215, 0.33);
				--red-checked: rgba(179, 62, 102, 1);

				--green-unchecked: rgba(213, 249, 196, 0.33);
				--green-checked: rgba(61, 125, 31, 1);

				--yellow-unchecked: rgba(255, 236, 179, 0.33);
				--yellow-checked: rgba(181, 138, 45, 1);

				--blue-unchecked: rgba(189, 195, 255, 0.33);
				--blue-checked: rgba(54, 69, 217, 1);
			}

			input[type="radio"] {
				appearance: none;
				-webkit-appearance: none;
				display: flex;
				align-content: center;
				justify-content: center;
				border: 2px solid var(--unchecked-color);
				border-radius: 9999px;
				width: 16px;
				height: 16px;
			}

			input[type="radio"]::before {
				content: "";
				background-color: var(--checked-color);
				width: 8px;
				height: 8px;
				border-radius: 9999px;
				visibility: hidden;
				margin: 2px;
			}

			input[type="radio"]:checked {
				border-color: var(--checked-color);
			}

			input[type="radio"]:checked::before {
				visibility: visible;
			}
		</style>
		<style id="selected-style"></style>
		`;
		this.input = document.createElement("input");
		this.input.type = "radio";
		this.shadowRoot.append(this.input);
	}
	connectedCallback() {
		this.updateInputState();
		this.updateStyle();
	}
	updateStyle() {
		const styleElement = this.shadowRoot.querySelector("#selected-style");
		if (styleElement) styleElement.innerHTML = `
				:host {
					--unchecked-color: var(--${this._radioStyle}-unchecked);
					--checked-color: var(--${this._radioStyle}-checked);
				}
			`;
	}
	updateInputState() {
		this.input.checked = this.hasAttribute("checked");
		this.input.disabled = this.hasAttribute("disabled");
		this.input.name = this.getAttribute("name") || "";
		this.input.value = this.getAttribute("value") || "";
	}
	attributeChangedCallback() {
		if (this.hasAttribute("radio-style")) this.radioStyle = this.getAttribute("radio-style");
		this.updateInputState();
	}
};
//#endregion
//#region node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/select.js
var styles$1 = [
	"purple",
	"gray",
	"red",
	"green",
	"yellow",
	"blue"
];
var DevToolbarSelect = class extends HTMLElement {
	shadowRoot;
	element;
	_selectStyle = "gray";
	get selectStyle() {
		return this._selectStyle;
	}
	set selectStyle(value) {
		if (!styles$1.includes(value)) {
			settings.logger.error(`Invalid style: ${value}, expected one of ${styles$1.join(", ")}.`);
			return;
		}
		this._selectStyle = value;
		this.updateStyle();
	}
	static observedAttributes = ["select-style"];
	constructor() {
		super();
		this.shadowRoot = this.attachShadow({ mode: "open" });
		this.shadowRoot.innerHTML = `
      <style>
        :host {
          --purple-text: rgba(224, 204, 250, 1);
					--purple-border: rgba(113, 24, 226, 1);

          --gray-text: rgba(191, 193, 201, 1);
					--gray-border:rgba(191, 193, 201, 1);

					--red-text: rgba(249, 196, 215, 1);
					--red-border: rgba(179, 62, 102, 1);

					--green-text: rgba(213, 249, 196, 1);
					--green-border: rgba(61, 125, 31, 1);

					--yellow-text: rgba(249, 233, 196, 1);
					--yellow-border: rgba(181, 138, 45, 1);

					--blue-text: rgba(189, 195, 255, 1);
					--blue-border: rgba(54, 69, 217, 1);

          --text-color: var(--gray-text);
          --border-color: var(--gray-border);
        }
        select {
          appearance: none;
          text-align-last: center;
          display: inline-block;
          font-family: system-ui, sans-serif;
          font-size: 14px;
          padding: 4px 24px 4px 8px;
          border: 1px solid var(--border-color);
          border-radius: 4px;
          color: var(--text-color);
          background-color: transparent;
          background-image:
            linear-gradient(45deg, transparent 50%, var(--text-color) 50%),
            linear-gradient(135deg, var(--text-color) 50%, transparent 50%);
          background-position:
            calc(100% - 12px) calc(1em - 2px),
            calc(100% - 8px) calc(1em - 2px);
          background-size: 4px 4px;
          background-repeat: no-repeat;
        }
      </style>
      <style id="selected-style"></style>
      <slot></slot>
    `;
		this.element = document.createElement("select");
		this.shadowRoot.addEventListener("slotchange", (event) => {
			if (event.target instanceof HTMLSlotElement) this.element.append(...event.target.assignedNodes());
		});
	}
	connectedCallback() {
		this.element.name = "dev-toolbar-select";
		this.shadowRoot.append(this.element);
		this.updateStyle();
	}
	attributeChangedCallback() {
		if (this.hasAttribute("select-style")) this.selectStyle = this.getAttribute("select-style");
	}
	updateStyle() {
		const style = this.shadowRoot.querySelector("#selected-style");
		if (style) style.innerHTML = `
        :host {
          --text-color: var(--${this.selectStyle}-text);
          --border-color: var(--${this.selectStyle}-border);
        }
      `;
	}
};
//#endregion
//#region node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/toggle.js
var styles = [
	"purple",
	"gray",
	"red",
	"green",
	"yellow",
	"blue"
];
var DevToolbarToggle = class extends HTMLElement {
	shadowRoot;
	input;
	_toggleStyle = "gray";
	get toggleStyle() {
		return this._toggleStyle;
	}
	set toggleStyle(value) {
		if (!styles.includes(value)) {
			settings.logger.error(`Invalid style: ${value}, expected one of ${styles.join(", ")}.`);
			return;
		}
		this._toggleStyle = value;
		this.updateStyle();
	}
	static observedAttributes = ["toggle-style"];
	constructor() {
		super();
		this.shadowRoot = this.attachShadow({ mode: "open" });
		this.shadowRoot.innerHTML = `
		<style>
			:host {
				--purple-bg-on: rgba(113, 24, 226, 1);
				--purple-border-off: rgba(113, 24, 226, 1);
				--purple-border-on: rgba(224, 204, 250, 1);

				--gray-bg-on: rgba(61, 125, 31, 1);
				--gray-border-off: rgba(145, 152, 173, 1);
				--gray-border-on: rgba(213, 249, 196, 1);

				--red-bg-on: rgba(179, 62, 102, 1);
				--red-border-off: rgba(179, 62, 102, 1);
				--red-border-on: rgba(249, 196, 215, 1);

				--green-bg-on: rgba(61, 125, 31, 1);
				--green-border-off: rgba(61, 125, 31, 1);
				--green-border-on: rgba(213, 249, 196, 1);

				--yellow-bg-on: rgba(181, 138, 45, 1);
				--yellow-border-off: rgba(181, 138, 45, 1);
				--yellow-border-on: rgba(255, 236, 179, 1);

				--blue-bg-on: rgba(54, 69, 217, 1);
				--blue-border-off: rgba(54, 69, 217, 1);
				--blue-border-on: rgba(189, 195, 255, 1);
			}

			input {
				appearance: none;
				width: 32px;
				height: 20px;
				border: 1px solid var(--border-off);
				transition: background-color 0.2s ease, border-color 0.2s ease;
				border-radius: 9999px;
			}

			input::after {
				content: '';
				width: 16px;
				display: inline-block;
				height: 16px;
				background-color: var(--border-off);
				border-radius: 9999px;
				transition: transform 0.2s ease, background-color 0.2s ease;
				top: 1px;
				left: 1px;
				position: relative;
			}

			@media (forced-colors: active) {
				input::after {
					border: 1px solid black;
					top: 0px;
					left: 0px;
				}
			}

			input:checked {
				border: 1px solid var(--border-on);
				background-color: var(--bg-on);
			}

			input:checked::after {
				transform: translateX(12px);
				background: var(--border-on);
			}
		</style>
		<style id="selected-style"></style>
		`;
		this.input = document.createElement("input");
	}
	attributeChangedCallback() {
		if (this.hasAttribute("toggle-style")) this.toggleStyle = this.getAttribute("toggle-style");
	}
	updateStyle() {
		const style = this.shadowRoot.querySelector("#selected-style");
		if (style) style.innerHTML = `
			:host {
				--bg-on: var(--${this.toggleStyle}-bg-on);
				--border-off: var(--${this.toggleStyle}-border-off);
				--border-on: var(--${this.toggleStyle}-border-on);
			}
		`;
	}
	connectedCallback() {
		this.input.type = "checkbox";
		this.input.name = "dev-toolbar-toggle";
		this.shadowRoot.append(this.input);
		this.updateStyle();
	}
	get value() {
		return this.input.value;
	}
	set value(val) {
		this.input.value = val;
	}
};
//#endregion
//#region node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/tooltip.js
var DevToolbarTooltip = class extends HTMLElement {
	sections = [];
	shadowRoot;
	constructor() {
		super();
		this.shadowRoot = this.attachShadow({ mode: "open" });
	}
	connectedCallback() {
		this.shadowRoot.innerHTML = `
			<style>
			:host {
				position: absolute;
				display: none;
				color: white;
				background: linear-gradient(0deg, #310A65, #310A65), linear-gradient(0deg, #7118E2, #7118E2);
				border: 1px solid rgba(113, 24, 226, 1);
				border-radius: 4px;
				padding: 0;
				font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
				font-size: 14px;
				margin: 0;
				z-index: 2000000001;
				max-width: 45ch;
				width: fit-content;
				min-width: 30ch;
				box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.30), 0px 1px 2px 0px rgba(0, 0, 0, 0.29), 0px 4px 4px 0px rgba(0, 0, 0, 0.26), 0px 10px 6px 0px rgba(0, 0, 0, 0.15), 0px 17px 7px 0px rgba(0, 0, 0, 0.04), 0px 26px 7px 0px rgba(0, 0, 0, 0.01);
			}

			:host([data-show="true"]) {
				display: block;
			}

			svg {
				vertical-align: bottom;
				margin-inline-end: 4px;
			}

			hr {
				border: 1px solid rgba(136, 58, 234, 0.33);
				padding: 0;
				margin: 0;
			}

			section {
				padding: 8px;
			}

			.section-content {
				max-height: 250px;
    		overflow-y: auto;
			}

			.modal-title {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.modal-main-title {
				font-weight: bold;
			}

			.modal-title + div {
				margin-top: 8px;
			}

			.modal-cta {
				display: block;
				font-weight: bold;
				font-size: 0.9em;
			}

			.clickable-section {
				background: rgba(113, 24, 226, 1);
				padding: 8px;
				border: 0;
				color: white;
				font-family: system-ui, sans-serif;
				text-align: left;
				line-height: 1.2;
				white-space: nowrap;
				text-decoration: none;
				margin: 0;
				width: 100%;
			}

			.clickable-section:hover {
				cursor: pointer;
			}

			pre, code {
				background: rgb(78, 27, 145);
				font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
				border-radius: 2px;
				font-size: 14px;
				padding: 2px;
			}
			pre {
				padding: 1em;
				margin: 0 0;
				overflow: auto;
			}
			`;
		const fragment = new DocumentFragment();
		this.sections.forEach((section, index) => {
			const sectionElement = section.clickAction ? document.createElement("button") : document.createElement("section");
			if (section.clickAction) {
				sectionElement.classList.add("clickable-section");
				sectionElement.addEventListener("click", async () => {
					await section.clickAction();
				});
			}
			sectionElement.innerHTML = `
				${section.title ? `<div class="modal-title"><span class="modal-main-title">
						${section.icon ? this.getElementForIcon(section.icon) : ""}${section.title}</span>${section.inlineTitle ?? ""}</div>` : ""}
				${section.content ? `<div class="section-content">${section.content}</div>` : ""}
				${section.clickDescription ? `<span class="modal-cta">${section.clickDescription}</span>` : ""}
			`;
			fragment.append(sectionElement);
			if (index < this.sections.length - 1) fragment.append(document.createElement("hr"));
		});
		this.shadowRoot.append(fragment);
	}
	getElementForIcon(icon) {
		let iconElement;
		if (isDefinedIcon(icon)) iconElement = getIconElement(icon);
		else {
			iconElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
			iconElement.setAttribute("viewBox", "0 0 16 16");
			iconElement.innerHTML = icon;
		}
		iconElement?.style.setProperty("width", "16px");
		iconElement?.style.setProperty("height", "16px");
		return iconElement?.outerHTML ?? "";
	}
};
//#endregion
export { DevToolbarBadge, DevToolbarButton, DevToolbarCard, DevToolbarHighlight, DevToolbarIcon, DevToolbarRadioCheckbox, DevToolbarSelect, DevToolbarToggle, DevToolbarTooltip, DevToolbarWindow };