braid-design-system/dist/lib/components/Autosuggest/Autosuggest.css.mjs

Themeable design system for the SEEK Group

import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
import { style } from "@vanilla-extract/css";
import { calc } from "@vanilla-extract/css-utils";
import { responsiveStyle } from "../../css/responsiveStyle.mjs";
import { vars } from "../../themes/vars.css.mjs";
setFileScope("src/lib/components/Autosuggest/Autosuggest.css.ts", "braid-design-system");
const backdrop = style({
  width: "100vw",
  height: "100vh",
  background: "black"
}, "backdrop");
const backdropVisible = style({
  opacity: 0.4
}, "backdropVisible");
const calcMenuHeight = (numSuggestions) => calc(vars.touchableSize).multiply(numSuggestions).add(vars.space.xxsmall).toString();
const menu = style(responsiveStyle({
  mobile: {
    maxHeight: calcMenuHeight(6),
    overflowY: "auto"
  },
  tablet: {
    maxHeight: calcMenuHeight(8)
  }
}), "menu");
endFileScope();
export {
  backdrop,
  backdropVisible,
  menu
};