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