"use strict";
const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
const css = require("@vanilla-extract/css");
const cssUtils = require("@vanilla-extract/css-utils");
const polished = require("polished");
const styles_lib_css_colorModeStyle_cjs = require("../../css/colorModeStyle.cjs");
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/Button/Button.css.ts", "braid-design-system");
const root = css.style({
  textDecoration: "none"
}, "root");
const forceActive = css.style({}, "forceActive");
const activeOverlay = css.style({
  selectors: {
    [`${root}:active &, ${forceActive}&`]: {
      opacity: 1
    }
  }
}, "activeOverlay");
const hoverOverlay = css.style({
  selectors: {
    [`${root}:hover:not(:disabled) &`]: {
      opacity: 1
    }
  }
}, "hoverOverlay");
const focusOverlay = css.style({
  selectors: {
    [`${root}:focus &`]: {
      opacity: 1
    }
  }
}, "focusOverlay");
const minHeightValueForSize = {
  standard: styles_lib_themes_vars_css_cjs.vars.touchableSize,
  small: cssUtils.calc.multiply(styles_lib_themes_vars_css_cjs.vars.touchableSize, 0.8)
};
const capHeightToMinHeight = css.createVar("capHeightToMinHeight");
const paddingVarForBreakpoint = (size, breakpoint) => ({
  vars: {
    [capHeightToMinHeight]: cssUtils.calc(minHeightValueForSize[size]).subtract(styles_lib_themes_vars_css_cjs.vars.textSize[size][breakpoint].capHeight).divide(2).toString()
  }
});
const standard = css.style(styles_lib_css_responsiveStyle_cjs.responsiveStyle({
  mobile: paddingVarForBreakpoint("standard", "mobile"),
  tablet: paddingVarForBreakpoint("standard", "tablet")
}), "standard");
const small = css.style(styles_lib_css_responsiveStyle_cjs.responsiveStyle({
  mobile: paddingVarForBreakpoint("small", "mobile"),
  tablet: paddingVarForBreakpoint("small", "tablet")
}), "small");
const bleedVerticallyToCapHeight = css.style({
  marginTop: cssUtils.calc.negate(capHeightToMinHeight),
  marginBottom: cssUtils.calc.negate(capHeightToMinHeight)
}, "bleedVerticallyToCapHeight");
const padToMinHeight = css.style({
  paddingTop: capHeightToMinHeight,
  paddingBottom: capHeightToMinHeight
}, "padToMinHeight");
const dot1 = css.keyframes({
  "14%": {
    opacity: 0
  },
  "15%,100%": {
    opacity: 1
  }
}, "dot1");
const dot2 = css.keyframes({
  "29%": {
    opacity: 0
  },
  "30%,100%": {
    opacity: 1
  }
}, "dot2");
const dot3 = css.keyframes({
  "44%": {
    opacity: 0
  },
  "45%,100%": {
    opacity: 1
  }
}, "dot3");
const loadingDot = css.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 = css.styleVariants({
  soft: styles_lib_css_colorModeStyle_cjs.colorModeStyle({
    lightMode: {
      background: polished.rgba("#fff", 0.1)
    }
  }),
  hover: styles_lib_css_colorModeStyle_cjs.colorModeStyle({
    lightMode: {
      background: polished.rgba("#fff", 0.15)
    }
  }),
  active: styles_lib_css_colorModeStyle_cjs.colorModeStyle({
    lightMode: {
      background: polished.rgba("#fff", 0.15)
    }
  })
}, "invertedBackgroundsLightMode");
const invertedBackgroundsDarkMode = css.styleVariants({
  soft: styles_lib_css_colorModeStyle_cjs.colorModeStyle({
    darkMode: {
      background: polished.rgba("#fff", 0.1)
    }
  }),
  hover: styles_lib_css_colorModeStyle_cjs.colorModeStyle({
    darkMode: {
      background: polished.rgba("#fff", 0.15)
    }
  }),
  active: styles_lib_css_colorModeStyle_cjs.colorModeStyle({
    darkMode: {
      background: polished.rgba("#fff", 0.15)
    }
  })
}, "invertedBackgroundsDarkMode");
__vanilla_filescope__.endFileScope();
exports.activeOverlay = activeOverlay;
exports.bleedVerticallyToCapHeight = bleedVerticallyToCapHeight;
exports.focusOverlay = focusOverlay;
exports.forceActive = forceActive;
exports.hoverOverlay = hoverOverlay;
exports.invertedBackgroundsDarkMode = invertedBackgroundsDarkMode;
exports.invertedBackgroundsLightMode = invertedBackgroundsLightMode;
exports.loadingDot = loadingDot;
exports.padToMinHeight = padToMinHeight;
exports.root = root;
exports.small = small;
exports.standard = standard;
