'use client';

import { tokens } from '@fluentui/react-theme';
import { __styles, mergeClasses, shorthands } from '@griffel/react';
import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
// eslint-disable-next-line @typescript-eslint/no-deprecated
export const alertClassNames = {
  root: 'fui-Alert',
  icon: 'fui-Alert__icon',
  action: 'fui-Alert__action',
  avatar: 'fui-Alert__avatar'
};
const useStyles = /*#__PURE__*/__styles({
  root: {
    mc9l5x: "f22iagw",
    Bt984gj: "f122n59",
    sshi5w: "f5pgtk9",
    Byoj8tv: 0,
    uwmqm3: 0,
    z189sj: 0,
    z8tnut: 0,
    B0ocmuz: "f1oic3e7",
    Beyfa6y: 0,
    Bbmb7ep: 0,
    Btl43ni: 0,
    B7oj6ja: 0,
    Dimara: "ff3glw6",
    Bgfg5da: 0,
    B9xav0g: 0,
    oivjwe: 0,
    Bn0qgzm: 0,
    B4g9neb: 0,
    zhjwy3: 0,
    wvpqe5: 0,
    ibv6hh: 0,
    u1mtju: 0,
    h3c5rm: 0,
    vrafjx: 0,
    Bekrc4i: 0,
    i8vvqc: 0,
    g2u3we: 0,
    icvyot: 0,
    B4j52fo: 0,
    irswps: "f9ggezi",
    E5pizo: "fz58gqq",
    Be2twd7: "fkhj508",
    Bhrd7zp: "fl43uef",
    sj55zd: "f19n0e5",
    De3pzq: "fxugw4r"
  },
  inverted: {
    sj55zd: "f1w7i9ko",
    De3pzq: "f5pduvr"
  },
  icon: {
    Bqenvij: "fd461yt",
    Be2twd7: "f4ybsrx",
    Byoj8tv: 0,
    uwmqm3: 0,
    z189sj: 0,
    z8tnut: 0,
    B0ocmuz: ["fhivll6", "f1cgepy8"]
  },
  avatar: {
    jrapky: 0,
    Frg6f3: 0,
    t21cq0: 0,
    B6of3ja: 0,
    B74szlk: ["fxal17o", "ftghr3s"]
  },
  action: {
    Byoj8tv: 0,
    uwmqm3: 0,
    z189sj: 0,
    z8tnut: 0,
    B0ocmuz: "f4jnnbt",
    Bf4jedk: "fy77jfu",
    Frg6f3: ["fcgxt0o", "f1ujusj6"],
    sj55zd: "f16muhyy"
  }
}, {
  d: [".f22iagw{display:flex;}", ".f122n59{align-items:center;}", ".f5pgtk9{min-height:44px;}", [".f1oic3e7{padding:0 12px;}", {
    p: -1
  }], [".ff3glw6{border-radius:4px;}", {
    p: -1
  }], [".f9ggezi{border:1px solid var(--colorTransparentStroke);}", {
    p: -2
  }], ".fz58gqq{box-shadow:var(--shadow8);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f1w7i9ko{color:var(--colorNeutralForegroundInverted2);}", ".f5pduvr{background-color:var(--colorNeutralBackgroundInverted);}", ".fd461yt{height:16px;}", ".f4ybsrx{font-size:16px;}", [".fhivll6{padding:0 8px 0 0;}", {
    p: -1
  }], [".f1cgepy8{padding:0 0 0 8px;}", {
    p: -1
  }], [".fxal17o{margin:0 8px 0 0;}", {
    p: -1
  }], [".ftghr3s{margin:0 0 0 8px;}", {
    p: -1
  }], [".f4jnnbt{padding:5px 10px;}", {
    p: -1
  }], ".fy77jfu{min-width:0;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}", ".f16muhyy{color:var(--colorBrandForeground1);}"]
});
const useIntentIconStyles = /*#__PURE__*/__styles({
  success: {
    sj55zd: "f1m7fhi8"
  },
  error: {
    sj55zd: "f1whyuy6"
  },
  warning: {
    sj55zd: "fpti2h4"
  },
  info: {
    sj55zd: "fkfq4zb"
  }
}, {
  d: [".f1m7fhi8{color:var(--colorPaletteGreenForeground3);}", ".f1whyuy6{color:var(--colorPaletteRedForeground3);}", ".fpti2h4{color:var(--colorPaletteYellowForeground2);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}"]
});
const useIntentIconStylesInverted = /*#__PURE__*/__styles({
  success: {
    sj55zd: "f1pvjcpr"
  },
  error: {
    sj55zd: "fcrp5ll"
  },
  warning: {
    sj55zd: "f1r8f1cl"
  },
  info: {
    sj55zd: "f1w7i9ko"
  }
}, {
  d: [".f1pvjcpr{color:var(--colorPaletteGreenForegroundInverted);}", ".fcrp5ll{color:var(--colorPaletteRedForegroundInverted);}", ".f1r8f1cl{color:var(--colorPaletteYellowForegroundInverted);}", ".f1w7i9ko{color:var(--colorNeutralForegroundInverted2);}"]
});
const useActionButtonColorInverted = /*#__PURE__*/__styles({
  action: {
    sj55zd: "f1qz2gb0",
    B8q5s1w: "fa5e339",
    Bci5o5g: ["fk4svks", "fqzoz0o"],
    n8qw10: "fw8q0i0",
    Bdrgwmp: ["fqzoz0o", "fk4svks"],
    Bfpq7zp: "f1dlk4fq"
  }
}, {
  d: [".f1qz2gb0{color:var(--colorBrandForegroundInverted);}", ".fa5e339[data-fui-focus-visible]{border-top-color:var(--colorTransparentStrokeInteractive);}", ".fk4svks[data-fui-focus-visible]{border-right-color:var(--colorTransparentStrokeInteractive);}", ".fqzoz0o[data-fui-focus-visible]{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fw8q0i0[data-fui-focus-visible]{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".f1dlk4fq[data-fui-focus-visible]{outline-color:var(--colorNeutralBackground5Pressed);}"]
});
/**
 * @deprecated please use the Toast or MessageBar component
 * Apply styling to the Alert slots based on the state
 */ // eslint-disable-next-line @typescript-eslint/no-deprecated
export const useAlertStyles_unstable = state => {
  const inverted = state.appearance === 'inverted';
  const styles = useStyles();
  const intentIconStylesPrimary = useIntentIconStyles();
  const intentIconStylesInverted = useIntentIconStylesInverted();
  const actionStylesInverted = useActionButtonColorInverted();
  // eslint-disable-next-line react-compiler/react-compiler
  state.root.className = mergeClasses(alertClassNames.root, styles.root, inverted && styles.inverted, state.root.className);
  if (state.icon) {
    state.icon.className = mergeClasses(alertClassNames.icon, styles.icon, state.intent && (inverted ? intentIconStylesInverted[state.intent] : intentIconStylesPrimary[state.intent]), state.icon.className);
  }
  if (state.avatar) {
    state.avatar.className = mergeClasses(alertClassNames.avatar, styles.avatar, state.avatar.className);
  }
  if (state.action) {
    // Note: inverted && actionStylesInverted.action has the highest piority and must be merged last
    state.action.className = mergeClasses(alertClassNames.action, styles.action, inverted && actionStylesInverted.action, state.action.className);
  }
  return state;
};