import { shorthands, __styles, mergeClasses } from '@griffel/react';
import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
import { tokens } from '@fluentui/react-theme';
export const linkClassNames = {
  root: 'fui-Link'
};
const useStyles = /*#__PURE__*/__styles({
  focusIndicator: {
    Bttzg6e: "fhgqx19",
    B3uz8dt: "f1olyrje",
    B6ihwck: "f1p93eir",
    g9k6zt: "f1nev41a"
  },
  root: {
    B486eqv: "f2hkw1w",
    De3pzq: "f3rmtva",
    B7ck84d: "f1ewtqcl",
    sj55zd: "fyind8e",
    Bceei9c: "f1k6fduh",
    mc9l5x: "f1w7gpdv",
    Bahqtrf: "fk6fouc",
    Be2twd7: "fkhj508",
    Bhrd7zp: "figsok6",
    jrapky: 0,
    Frg6f3: 0,
    t21cq0: 0,
    B6of3ja: 0,
    B74szlk: "f1s184ao",
    Byoj8tv: 0,
    uwmqm3: 0,
    z189sj: 0,
    z8tnut: 0,
    B0ocmuz: "f1mk8lai",
    B68tc82: 0,
    Bmxbyg5: 0,
    Bpg54ce: "fnbmjn9",
    fsow6f: ["f1o700av", "fes3tcz"],
    w71qe1: "f1iuv45f",
    Bkioxbp: "f1cmlufx",
    ygn44y: "f9n3di6",
    famaaq: "f1ids18y",
    Bde5pd6: "f1tx3yz7",
    Bi91k9c: "f1deo86v",
    i089h6: "f1eh06m1",
    lj723h: "f1iescvh"
  },
  button: {
    icvyot: "f1ern45e",
    vrafjx: ["f1n71otn", "f1deefiw"],
    oivjwe: "f1h8hb77",
    wvpqe5: ["f1deefiw", "f1n71otn"]
  },
  href: {
    Be2twd7: "fjoy568"
  },
  subtle: {
    sj55zd: "fkfq4zb",
    Bde5pd6: "f1tx3yz7",
    Bi91k9c: "fnwyq0v",
    i089h6: "f1eh06m1",
    lj723h: "flvvhsy"
  },
  inline: {
    w71qe1: "f13mvf36"
  },
  disabled: {
    w71qe1: "f1iuv45f",
    sj55zd: "f1s2aq7o",
    Bceei9c: "fdrzuqr",
    Bde5pd6: "fbnuktb",
    Bi91k9c: "fvgxktp",
    i089h6: "fljg2da",
    lj723h: "f19wldhg"
  },
  inverted: {
    sj55zd: "f1qz2gb0",
    Bi91k9c: "f1mlt8il",
    lj723h: "f1hsd4st"
  }
}, {
  d: [".fhgqx19[data-fui-focus-visible]{text-decoration-color:var(--colorStrokeFocus2);}", ".f1olyrje[data-fui-focus-visible]{text-decoration-line:underline;}", ".f1p93eir[data-fui-focus-visible]{text-decoration-style:double;}", ".f1nev41a[data-fui-focus-visible]{outline-style:none;}", ".f3rmtva{background-color:transparent;}", ".f1ewtqcl{box-sizing:border-box;}", ".fyind8e{color:var(--colorBrandForegroundLink);}", ".f1k6fduh{cursor:pointer;}", ".f1w7gpdv{display:inline;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", [".f1s184ao{margin:0;}", {
    p: -1
  }], [".f1mk8lai{padding:0;}", {
    p: -1
  }], [".fnbmjn9{overflow:inherit;}", {
    p: -1
  }], ".f1o700av{text-align:left;}", ".fes3tcz{text-align:right;}", ".f1iuv45f{text-decoration-line:none;}", ".f1cmlufx{text-decoration-thickness:var(--strokeWidthThin);}", ".f9n3di6{text-overflow:inherit;}", ".f1ids18y{-webkit-user-select:text;-moz-user-select:text;user-select:text;}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".fjoy568{font-size:inherit;}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".f13mvf36{text-decoration-line:underline;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fdrzuqr{cursor:not-allowed;}", ".f1qz2gb0{color:var(--colorBrandForegroundInverted);}"],
  i: [".f2hkw1w:focus-visible{outline-style:none;}"],
  h: [".f1tx3yz7:hover{text-decoration-line:underline;}", ".f1deo86v:hover{color:var(--colorBrandForegroundLinkHover);}", ".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}", ".fbnuktb:hover{text-decoration-line:none;}", ".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}", ".f1mlt8il:hover{color:var(--colorBrandForegroundInvertedHover);}"],
  a: [".f1eh06m1:active{text-decoration-line:underline;}", ".f1iescvh:active{color:var(--colorBrandForegroundLinkPressed);}", ".flvvhsy:active{color:var(--colorNeutralForeground2Pressed);}", ".fljg2da:active{text-decoration-line:none;}", ".f19wldhg:active{color:var(--colorNeutralForegroundDisabled);}", ".f1hsd4st:active{color:var(--colorBrandForegroundInvertedPressed);}"]
});
export const useLinkStyles_unstable = state => {
  'use no memo';

  const styles = useStyles();
  const {
    appearance,
    disabled,
    inline,
    root,
    backgroundAppearance
  } = state;
  state.root.className = mergeClasses(linkClassNames.root, styles.root, styles.focusIndicator, root.as === 'a' && root.href && styles.href, root.as === 'button' && styles.button, appearance === 'subtle' && styles.subtle, backgroundAppearance === 'inverted' && styles.inverted, inline && styles.inline, disabled && styles.disabled, state.root.className);
  return state;
};