'use client';

import { __styles, mergeClasses } from '@griffel/react';
/**
 * Static CSS class names used internally for the component slots.
 */
export const cardPreviewClassNames = {
  root: 'fui-CardPreview',
  logo: 'fui-CardPreview__logo'
};
const useStyles = /*#__PURE__*/__styles({
  root: {
    qhf8xq: "f10pi13n",
    Byfpedg: "fgourly",
    Btj6oj6: "f1vui7lx",
    B1m4t4s: "fda5zwx"
  },
  logo: {
    qhf8xq: "f1euv43f",
    B5kzvoi: "f1gcvs1y",
    oyh7mz: ["f1t6tvco", "ffrfxm3"],
    a9b677: "f1szoe96",
    Bqenvij: "f1d2rq10"
  }
}, {
  d: [".f10pi13n{position:relative;}", ".fgourly>:not(.fui-CardPreview__logo){display:block;}", ".f1vui7lx>:not(.fui-CardPreview__logo){height:100%;}", ".fda5zwx>:not(.fui-CardPreview__logo){width:100%;}", ".f1euv43f{position:absolute;}", ".f1gcvs1y{bottom:12px;}", ".f1t6tvco{left:12px;}", ".ffrfxm3{right:12px;}", ".f1szoe96{width:32px;}", ".f1d2rq10{height:32px;}"]
});
/**
 * Apply styling to the CardPreview slots based on the state.
 */
export const useCardPreviewStyles_unstable = state => {
  'use no memo';

  const styles = useStyles();
  state.root.className = mergeClasses(cardPreviewClassNames.root, styles.root, state.root.className);
  if (state.logo) {
    state.logo.className = mergeClasses(cardPreviewClassNames.logo, styles.logo, state.logo.className);
  }
  return state;
};