import plugin from 'tailwindcss/plugin';
/**
 * Loading indicators are a helpful way to indicate to the user that content is on the way.
 * These should be user sparingly, and only in cases where the loading time is very short.
 * For longer load times, we suggest using a progress bar to give the user a more
 * realistic indication of how long the process will take.
 *
 * Since we cannot change markup, the loader SVG is rendered as a Data URI and
 * then used as a background image of a pseudo-elements' content.
 *
 * Loaders come with light and dark styles.
 *
 * If you need to reference the loader size, you can do so with:
 * --loader-size
 *
 * Class Name: btu-loader
 *
 * Typical Usage (user defined pseudo-element):
 *  @apply after:btu-loader;
 */
module.exports = plugin(function ({ addComponents, theme }) {
    const loader = {
        '--loader-size': '2rem',
        display: 'block',
        content: 'var(--tw-content)',
        '--tw-content': `url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 50 50%27%3E %3Cstyle%3E :root %7B --loader-bg-color: oklch%28${encodeURIComponent(theme('colors.gray.light.200'))}%29; --loader-fg-color: oklch%28${encodeURIComponent(theme('colors.primary.light.600'))}%29; --btu-theme-primary-hue: 264; %7D @media %28prefers-color-scheme: dark%29 %7B :root %7B --loader-bg-color: oklch%28${encodeURIComponent(theme('colors.gray.dark.100'))}%29; --loader-fg-color: oklch%28${encodeURIComponent(theme('colors.primary.dark.700'))}%29; %7D %7D @keyframes rotate%7B100%25%7Btransform:rotate%28360deg%29;%7D%7D @keyframes dash%7B0%25%7Bstroke-dasharray:1,200;stroke-dashoffset:0;%7D50%25%7Bstroke-dasharray:89,200;stroke-dashoffset:-35;%7D100%25%7Bstroke-dasharray:89,200;stroke-dashoffset:-124;%7D%7D svg %7Bwill-change:transform;position:relative;animation:rotate 1.6s linear infinite;%7D .Loader-bg %7Bwill-change:transform;fill:none;transform-origin:center;%7D .Loader-fg %7Bwill-change:transform;animation:dash 1s infinite ease-in-out;animation-fill-mode:both;fill:none;transform-origin:center;stroke-linecap:round;stroke-dasharray:1,200;stroke-dashoffset:0;%7D %3C/style%3E %3Ccircle cx=%2725%27 cy=%2725%27 r=%2720%27 stroke-width=%274%27 class=%27Loader-bg%27 stroke=%27var%28--loader-bg-color%29%27/%3E %3Ccircle cx=%2725%27 cy=%2725%27 r=%2720%27 stroke-width=%274%27 class=%27Loader-fg%27 stroke=%27var%28--loader-fg-color%29%27/%3E %3C/svg%3E")`,
    };
    addComponents({
        '.btu-loader': loader,
    });
});
//# sourceMappingURL=tailwind-plugin-loader.js.map