"use strict";
const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
const css = require("@vanilla-extract/css");
const cssUtils = require("@vanilla-extract/css-utils");
const styles_lib_css_atoms_atoms_cjs = require("../../css/atoms/atoms.cjs");
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");
const styles_lib_components_private_hideFocusRings_hideFocusRingsDataAttribute_cjs = require("../private/hideFocusRings/hideFocusRingsDataAttribute.cjs");
__vanilla_filescope__.setFileScope("src/lib/components/Stepper/Stepper.css.ts", "braid-design-system");
const baseColourVar = css.createVar("baseColourVar");
const highlightVar = css.createVar("highlightVar");
const stepIndicatorSize = styles_lib_themes_vars_css_cjs.vars.inlineFieldSize.small;
const tone = {
  formAccent: css.style(styles_lib_css_colorModeStyle_cjs.colorModeStyle({
    lightMode: {
      vars: {
        [highlightVar]: styles_lib_themes_vars_css_cjs.vars.borderColor.formAccent
      }
    },
    darkMode: {
      vars: {
        [highlightVar]: styles_lib_themes_vars_css_cjs.vars.borderColor.formAccentLight
      }
    }
  }), "tone_formAccent"),
  neutral: css.style(styles_lib_css_colorModeStyle_cjs.colorModeStyle({
    lightMode: {
      vars: {
        [highlightVar]: styles_lib_themes_vars_css_cjs.vars.borderColor.neutral
      }
    },
    darkMode: {
      vars: {
        [highlightVar]: styles_lib_themes_vars_css_cjs.vars.borderColor.neutralLight
      }
    }
  }), "tone_neutral")
};
const step = css.style({
  textAlign: "left",
  ...styles_lib_css_colorModeStyle_cjs.colorModeStyle({
    lightMode: {
      vars: {
        [baseColourVar]: styles_lib_themes_vars_css_cjs.vars.borderColor.neutralLight
      }
    },
    darkMode: {
      vars: {
        [baseColourVar]: styles_lib_themes_vars_css_cjs.vars.borderColor.neutral
      }
    }
  })
}, "step");
const indicator = css.style([styles_lib_css_atoms_atoms_cjs.atoms({
  display: "block"
}), {
  height: stepIndicatorSize,
  width: stepIndicatorSize,
  color: baseColourVar
}], "indicator");
const stretch = css.style({
  flex: 1
}, "stretch");
const stretchLastAboveTablet = css.style(styles_lib_css_responsiveStyle_cjs.responsiveStyle({
  tablet: {
    flex: 1
  }
}), "stretchLastAboveTablet");
const highlight = css.style({
  color: highlightVar
}, "highlight");
const complete = css.style({}, "complete");
const active = css.style({}, "active");
const inner = css.style([styles_lib_css_atoms_atoms_cjs.atoms({
  opacity: 0,
  transition: "fast"
}), {
  fill: "currentcolor",
  transformOrigin: "50% 50%",
  transform: "scale(0)",
  selectors: {
    [`${active} > &`]: {
      transform: "scale(1)",
      opacity: 1
    },
    [`${complete} > &`]: {
      transform: "scale(2.1)",
      opacity: 1
    }
  }
}], "inner");
const tick = css.style([styles_lib_css_atoms_atoms_cjs.atoms({
  transition: "fast"
}), {
  transitionDelay: ".1s",
  transformOrigin: "50% 50%",
  selectors: {
    [`:not(${complete}) > &`]: {
      opacity: 0,
      transitionDelay: "0s",
      transform: "scale(.5) rotate(50deg)"
    }
  }
}, styles_lib_css_colorModeStyle_cjs.colorModeStyle({
  lightMode: {
    fill: styles_lib_themes_vars_css_cjs.vars.foregroundColor.neutralInverted
  },
  darkMode: {
    fill: styles_lib_themes_vars_css_cjs.vars.foregroundColor.neutral
  }
})], "tick");
const progressBarGap = "xxsmall";
const dotSize = 2;
const progressTrack = css.style({
  background: `repeating-linear-gradient(90deg, ${baseColourVar}, ${baseColourVar} ${dotSize}px, transparent ${dotSize}px, transparent ${dotSize * 2}px)`,
  height: styles_lib_themes_vars_css_cjs.vars.borderWidth.large,
  width: `${cssUtils.calc("100%").subtract(stepIndicatorSize).subtract(cssUtils.calc(styles_lib_themes_vars_css_cjs.vars.space[progressBarGap]).multiply(2))}`,
  top: `${cssUtils.calc(stepIndicatorSize).subtract(styles_lib_themes_vars_css_cjs.vars.borderWidth.large).divide(2)}`,
  left: `${cssUtils.calc(stepIndicatorSize).add(styles_lib_themes_vars_css_cjs.vars.space[progressBarGap])}`
}, "progressTrack");
const progressTrackCentered = css.style(styles_lib_css_responsiveStyle_cjs.responsiveStyle({
  tablet: {
    left: `${cssUtils.calc("50%").add(cssUtils.calc(stepIndicatorSize).divide(2)).add(styles_lib_themes_vars_css_cjs.vars.space[progressBarGap])}`
  }
}), "progressTrackCentered");
const progressLine = css.style({
  background: highlightVar,
  transition: "transform .2s ease"
}, "progressLine");
const progressUnfilled = css.style({
  transform: "translateX(-101%)"
}, "progressUnfilled");
const indicatorContainer = css.style({
  width: stepIndicatorSize,
  selectors: {
    [`${step}:active &`]: {
      transform: styles_lib_themes_vars_css_cjs.vars.transform.touchable
    },
    [`body:not([${styles_lib_components_private_hideFocusRings_hideFocusRingsDataAttribute_cjs.hideFocusRingsDataAttribute}]) ${step}:focus &`]: {
      transform: "scale(1.2)"
    }
  }
}, "indicatorContainer");
const focusOverlay = css.style({
  selectors: {
    [`${step}:focus &`]: {
      opacity: 1
    }
  }
}, "focusOverlay");
__vanilla_filescope__.endFileScope();
exports.active = active;
exports.complete = complete;
exports.focusOverlay = focusOverlay;
exports.highlight = highlight;
exports.indicator = indicator;
exports.indicatorContainer = indicatorContainer;
exports.inner = inner;
exports.progressLine = progressLine;
exports.progressTrack = progressTrack;
exports.progressTrackCentered = progressTrackCentered;
exports.progressUnfilled = progressUnfilled;
exports.step = step;
exports.stretch = stretch;
exports.stretchLastAboveTablet = stretchLastAboveTablet;
exports.tick = tick;
exports.tone = tone;
