import { __styles, mergeClasses } from '@griffel/react'; import { tokens } from '@fluentui/react-theme'; /** * CSS variable names used internally for uniform styling in Drawer. */ export const drawerCSSVars = { drawerSizeVar: '--fui-Drawer--size' }; /** * Default shared styles for the Drawer component */ export const drawerDefaultStyles = { overflow: 'hidden', width: `var(${drawerCSSVars.drawerSizeVar})`, maxWidth: '100vw', height: 'auto', maxHeight: '100vh', boxSizing: 'border-box', display: 'flex', flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'flex-start', backgroundColor: tokens.colorNeutralBackground1, color: tokens.colorNeutralForeground1 }; /** * Shared dynamic styles for the Drawer component */ const useDrawerStyles = /*#__PURE__*/__styles({ start: { h3c5rm: 0, vrafjx: 0, Bekrc4i: 0, u1mtju: ["f1xteiwb", "fsqykmd"], oyh7mz: ["f1vgc2s3", "f1e31b4d"], j35jbq: ["fvfyk4", "frppm18"] }, end: { zhjwy3: 0, wvpqe5: 0, ibv6hh: 0, B4g9neb: ["fsqykmd", "f1xteiwb"], j35jbq: ["f1e31b4d", "f1vgc2s3"], oyh7mz: ["frppm18", "fvfyk4"] }, bottom: { B5kzvoi: "f1yab3r1", Bhzewxz: "f198g47y" }, small: { Bjr0ffy: "f1exhnwo" }, medium: { Bjr0ffy: "fqofjzu" }, large: { Bjr0ffy: "fce6y3m" }, full: { Bjr0ffy: "fsdmzs6" } }, { d: [[".f1xteiwb{border-right:var(--strokeWidthThin) solid var(--colorTransparentStroke);}", { p: -1 }], [".fsqykmd{border-left:var(--strokeWidthThin) solid var(--colorTransparentStroke);}", { p: -1 }], ".f1vgc2s3{left:0;}", ".f1e31b4d{right:0;}", ".fvfyk4{right:auto;}", ".frppm18{left:auto;}", [".fsqykmd{border-left:var(--strokeWidthThin) solid var(--colorTransparentStroke);}", { p: -1 }], [".f1xteiwb{border-right:var(--strokeWidthThin) solid var(--colorTransparentStroke);}", { p: -1 }], ".f1yab3r1{bottom:0;}", ".f198g47y{top:auto;}", ".f1exhnwo{--fui-Drawer--size:320px;}", ".fqofjzu{--fui-Drawer--size:592px;}", ".fce6y3m{--fui-Drawer--size:940px;}", ".fsdmzs6{--fui-Drawer--size:100vw;}"] }); export const useDrawerBottomBaseStyles = /*#__PURE__*/__styles({ small: { Bjr0ffy: "f1exhnwo" }, medium: { Bjr0ffy: "fqofjzu" }, large: { Bjr0ffy: "fce6y3m" }, full: { Bjr0ffy: "fno8cgj" } }, { d: [".f1exhnwo{--fui-Drawer--size:320px;}", ".fqofjzu{--fui-Drawer--size:592px;}", ".fce6y3m{--fui-Drawer--size:940px;}", ".fno8cgj{--fui-Drawer--size:100vh;}"] }); export const useDrawerBaseClassNames = ({ position, size }) => { const baseStyles = useDrawerStyles(); const bottomBaseStyles = useDrawerBottomBaseStyles(); return mergeClasses(baseStyles[position], position === 'bottom' && bottomBaseStyles[size], position !== 'bottom' && baseStyles[size]); }; //# sourceMappingURL=useDrawerBaseStyles.styles.js.map