import { computed } from "vue";
import { defineNuxtPlugin, useNuxtApp, useHead } from "#imports";
export default defineNuxtPlugin(() => {
  const nuxtApp = useNuxtApp();
  const root = computed(() => {
    return `@layer theme {
  :root, :host {
    ${[].join("\n  ")}
  }
  :root, :host, .light {
    ${[].join("\n  ")}
  }
  .dark {
    ${[].join("\n  ")}
  }
}`;
  });
  const headData = {
    style: [{
      innerHTML: () => root.value,
      tagPriority: -2,
      id: "bitrix24-ui-colors"
    }]
  };
  if (import.meta.client && nuxtApp.isHydrating && !nuxtApp.payload.serverRendered) {
    if (typeof document !== "undefined") {
      const style = document.createElement("style");
      style.innerHTML = root.value;
      style.setAttribute("data-bitrix24-ui-colors", "");
      document.head.appendChild(style);
      headData.script = [{
        innerHTML: "document.head.removeChild(document.querySelector('[data-bitrix24-ui-colors]'))"
      }];
    }
  }
  useHead(headData);
});
