import "./chunk-JSBRDJBE.js";

// src/tailwind.ts
import plugin from "tailwindcss/plugin";
function JsToolsTailwindPlugin() {
  return plugin(
    function({ addBase, addComponents, addUtilities }) {
      addBase({
        ".dark-js-tools-theme": {
          "--color-front-theme": "255 255 255",
          "--color-back-theme": "48 48 48",
          "--color-primary-theme": "0 153 204",
          "--color-ok-theme": "74 222 128",
          "--color-warn-theme": "251 146 60",
          "--color-error-theme": "248 113 113"
        },
        ".light-js-tools-theme": {
          "--color-front-theme": "51 51 51",
          "--color-back-theme": "255 255 255",
          "--color-primary-theme": "0 153 204",
          "--color-ok-theme": "34 197 94",
          "--color-warn-theme": "249 115 22",
          "--color-error-theme": "239 68 68"
        },
        'html[data-theme="default"]': {
          "@apply dark-js-tools-theme": {}
        },
        'html[data-theme="dark"]': {
          "@apply dark-js-tools-theme": {}
        },
        'html[data-theme="light"]': {
          "@apply light-js-tools-theme": {}
        },
        ":root": {
          "@apply bg-back text-front text-base h-screen w-screen overflow-hidden": {}
        },
        ".hoverable": {
          "@apply transition hover:backdrop-contrast-80": {}
        },
        ".clickable": {
          "@apply hoverable hover:cursor-pointer active:backdrop-contrast-60": {}
        },
        ".hoverable-group": {
          "@apply *:transition *:hover:backdrop-contrast-80": {}
        },
        ".clickable-group": {
          "@apply hoverable-group *:hover:cursor-pointer *:active:backdrop-contrast-60": {}
        }
      });
      addComponents({
        ".button": {
          "@apply clickable rounded px-2 py-1.5": {}
        },
        ".label": {
          "@apply px-2 py-1 pointer-events-none": {}
        },
        ".link": {
          "@apply px-2 py-1 underline hover:cursor-pointer": {}
        },
        ".icon": {
          "@apply p-1 rounded !leading-none": {}
        }
      });
      addUtilities({
        ".disabled": {
          filter: "opacity(50%)",
          "pointer-events": "none",
          "user-select": "none"
        },
        ".no-scrollbar": {
          "-ms-overflow-style": "none",
          "scrollbar-width": "none"
        },
        ".no-scrollbar::-webkit-scrollbar": {
          "-ms-overflow-style": "none",
          "scrollbar-width": "none"
        }
      });
    },
    {
      theme: {
        extend: {
          screens: {
            xs: "0px"
          },
          flex: Object.fromEntries(
            Array(10).fill(0).map((_, i) => [i, String(i)])
          ),
          colors: {
            front: "rgb(var(--color-front-theme) / <alpha-value>)",
            back: "rgb(var(--color-back-theme) / <alpha-value>)",
            primary: "rgb(var(--color-primary-theme) / <alpha-value>)",
            ok: "rgb(var(--color-ok-theme) / <alpha-value>)",
            warn: "rgb(var(--color-warn-theme) / <alpha-value>)",
            error: "rgb(var(--color-error-theme) / <alpha-value>)"
          },
          backdropInvert: Object.fromEntries(
            Array(100 / 5).fill(0).map((_, i) => [i * 5, `${i * 5 / 100}`])
          ),
          backdropContrast: Object.fromEntries(
            Array(100 / 5).fill(0).map((_, i) => [i * 5, `${i * 5 / 100}`])
          ),
          backdropGrayscale: Object.fromEntries(
            Array(100 / 5).fill(0).map((_, i) => [i * 5, `${i * 5 / 100}`])
          )
        }
      }
    }
  );
}
export {
  JsToolsTailwindPlugin
};
