"use strict";
const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
const css = require("@vanilla-extract/css");
const styles_lib_css_responsiveStyle_cjs = require("../../css/responsiveStyle.cjs");
const styles_lib_themes_vars_css_cjs = require("../../themes/vars.css.cjs");
__vanilla_filescope__.setFileScope("src/lib/components/Loader/Loader.css.ts", "braid-design-system");
const rootSize = css.styleVariants(styles_lib_themes_vars_css_cjs.vars.textSize, ({
  mobile,
  tablet
}) => styles_lib_css_responsiveStyle_cjs.responsiveStyle({
  mobile: {
    height: mobile.capHeight
  },
  tablet: {
    height: tablet.capHeight
  }
}), "rootSize");
const size = css.styleVariants(styles_lib_themes_vars_css_cjs.vars.textSize, ({
  mobile,
  tablet
}) => styles_lib_css_responsiveStyle_cjs.responsiveStyle({
  mobile: {
    height: mobile.fontSize
  },
  tablet: {
    height: tablet.fontSize
  }
}), "size");
const currentColor = css.style({
  fill: "currentcolor"
}, "currentColor");
const bounce = css.keyframes({
  "33%": {
    transform: `translateY(-1.4em)`
  },
  "66%": {
    transform: `translateY(1.4em)`
  }
}, "bounce");
const bounceAnimation = css.style({
  animationName: bounce,
  animationFillMode: "both",
  animationIterationCount: "infinite",
  animationTimingFunction: "ease-in-out",
  animationDuration: "0.6s"
}, "bounceAnimation");
const animationDelayInMs = 70;
const circle = css.style([bounceAnimation, css.style({
  transform: `translateY(1.4em)`,
  selectors: {
    [`&:nth-child(1)`]: {
      animationDelay: `${animationDelayInMs * 2}ms`
    },
    [`&:nth-child(2)`]: {
      animationDelay: `${animationDelayInMs}ms`
    }
  }
}, "circle")], "circle");
const animationDelayValueInMs = 800;
const fade = css.keyframes({
  from: {
    opacity: 0
  },
  to: {
    opacity: 1
  }
}, "fade");
const delay = css.style({
  opacity: 0,
  animationName: fade,
  animationIterationCount: "1",
  animationFillMode: "forwards",
  animationTimingFunction: "ease-in",
  animationDuration: "0.25s",
  animationDelay: `${animationDelayValueInMs}ms`
}, "delay");
__vanilla_filescope__.endFileScope();
exports.circle = circle;
exports.currentColor = currentColor;
exports.delay = delay;
exports.rootSize = rootSize;
exports.size = size;
