import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
import { style, createVar, keyframes, styleVariants } from "@vanilla-extract/css";
import { calc } from "@vanilla-extract/css-utils";
import { rgba } from "polished";
import { colorModeStyle } from "../../css/colorModeStyle.mjs";
import { responsiveStyle } from "../../css/responsiveStyle.mjs";
import { vars } from "../../themes/vars.css.mjs";
setFileScope("src/lib/components/Button/Button.css.ts", "braid-design-system");
const root = style({
  textDecoration: "none"
}, "root");
const forceActive = style({}, "forceActive");
const activeOverlay = style({
  selectors: {
    [`${root}:active &, ${forceActive}&`]: {
      opacity: 1
    }
  }
}, "activeOverlay");
const hoverOverlay = style({
  selectors: {
    [`${root}:hover:not(:disabled) &`]: {
      opacity: 1
    }
  }
}, "hoverOverlay");
const focusOverlay = style({
  selectors: {
    [`${root}:focus &`]: {
      opacity: 1
    }
  }
}, "focusOverlay");
const minHeightValueForSize = {
  standard: vars.touchableSize,
  small: calc.multiply(vars.touchableSize, 0.8)
};
const capHeightToMinHeight = createVar("capHeightToMinHeight");
const paddingVarForBreakpoint = (size, breakpoint) => ({
  vars: {
    [capHeightToMinHeight]: calc(minHeightValueForSize[size]).subtract(vars.textSize[size][breakpoint].capHeight).divide(2).toString()
  }
});
const standard = style(responsiveStyle({
  mobile: paddingVarForBreakpoint("standard", "mobile"),
  tablet: paddingVarForBreakpoint("standard", "tablet")
}), "standard");
const small = style(responsiveStyle({
  mobile: paddingVarForBreakpoint("small", "mobile"),
  tablet: paddingVarForBreakpoint("small", "tablet")
}), "small");
const bleedVerticallyToCapHeight = style({
  marginTop: calc.negate(capHeightToMinHeight),
  marginBottom: calc.negate(capHeightToMinHeight)
}, "bleedVerticallyToCapHeight");
const padToMinHeight = style({
  paddingTop: capHeightToMinHeight,
  paddingBottom: capHeightToMinHeight
}, "padToMinHeight");
const dot1 = keyframes({
  "14%": {
    opacity: 0
  },
  "15%,100%": {
    opacity: 1
  }
}, "dot1");
const dot2 = keyframes({
  "29%": {
    opacity: 0
  },
  "30%,100%": {
    opacity: 1
  }
}, "dot2");
const dot3 = keyframes({
  "44%": {
    opacity: 0
  },
  "45%,100%": {
    opacity: 1
  }
}, "dot3");
const loadingDot = style({
  animationDuration: "1s",
  animationIterationCount: "infinite",
  opacity: 0,
  selectors: {
    [`&:nth-child(1)`]: {
      animationName: dot1
    },
    [`&:nth-child(2)`]: {
      animationName: dot2
    },
    [`&:nth-child(3)`]: {
      animationName: dot3
    }
  }
}, "loadingDot");
const invertedBackgroundsLightMode = styleVariants({
  soft: colorModeStyle({
    lightMode: {
      background: rgba("#fff", 0.1)
    }
  }),
  hover: colorModeStyle({
    lightMode: {
      background: rgba("#fff", 0.15)
    }
  }),
  active: colorModeStyle({
    lightMode: {
      background: rgba("#fff", 0.15)
    }
  })
}, "invertedBackgroundsLightMode");
const invertedBackgroundsDarkMode = styleVariants({
  soft: colorModeStyle({
    darkMode: {
      background: rgba("#fff", 0.1)
    }
  }),
  hover: colorModeStyle({
    darkMode: {
      background: rgba("#fff", 0.15)
    }
  }),
  active: colorModeStyle({
    darkMode: {
      background: rgba("#fff", 0.15)
    }
  })
}, "invertedBackgroundsDarkMode");
endFileScope();
export {
  activeOverlay,
  bleedVerticallyToCapHeight,
  focusOverlay,
  forceActive,
  hoverOverlay,
  invertedBackgroundsDarkMode,
  invertedBackgroundsLightMode,
  loadingDot,
  padToMinHeight,
  root,
  small,
  standard
};
