import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
import { styleVariants, style, keyframes } from "@vanilla-extract/css";
import { responsiveStyle } from "../../css/responsiveStyle.mjs";
import { vars } from "../../themes/vars.css.mjs";
setFileScope("src/lib/components/Loader/Loader.css.ts", "braid-design-system");
const rootSize = styleVariants(vars.textSize, ({
  mobile,
  tablet
}) => responsiveStyle({
  mobile: {
    height: mobile.capHeight
  },
  tablet: {
    height: tablet.capHeight
  }
}), "rootSize");
const size = styleVariants(vars.textSize, ({
  mobile,
  tablet
}) => responsiveStyle({
  mobile: {
    height: mobile.fontSize
  },
  tablet: {
    height: tablet.fontSize
  }
}), "size");
const currentColor = style({
  fill: "currentcolor"
}, "currentColor");
const bounce = keyframes({
  "33%": {
    transform: `translateY(-1.4em)`
  },
  "66%": {
    transform: `translateY(1.4em)`
  }
}, "bounce");
const bounceAnimation = style({
  animationName: bounce,
  animationFillMode: "both",
  animationIterationCount: "infinite",
  animationTimingFunction: "ease-in-out",
  animationDuration: "0.6s"
}, "bounceAnimation");
const animationDelayInMs = 70;
const circle = style([bounceAnimation, 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 = keyframes({
  from: {
    opacity: 0
  },
  to: {
    opacity: 1
  }
}, "fade");
const delay = style({
  opacity: 0,
  animationName: fade,
  animationIterationCount: "1",
  animationFillMode: "forwards",
  animationTimingFunction: "ease-in",
  animationDuration: "0.25s",
  animationDelay: `${animationDelayValueInMs}ms`
}, "delay");
endFileScope();
export {
  circle,
  currentColor,
  delay,
  rootSize,
  size
};
