'use client';

import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
import { tokens, typographyStyles } from '@fluentui/react-theme';
import { __resetStyles, __styles } from '@griffel/react';
// Styles shared by several nav components.
export const navItemTokens = {
  defaultDrawerWidth: 260,
  indicatorOffset: 16,
  indicatorWidth: 4,
  indicatorHeight: 20,
  backgroundColor: tokens.colorNeutralBackground4,
  backgroundColorHover: tokens.colorNeutralBackground4Hover,
  backgroundColorPressed: tokens.colorNeutralBackground4Pressed,
  animationTokens: {
    animationDuration: tokens.durationFaster,
    animationFillMode: 'both',
    animationTimingFunction: tokens.curveLinear
  },
  transitionTokens: {
    transitionDuration: tokens.durationFaster,
    transitionTimingFunction: tokens.curveLinear,
    transitionProperty: 'background'
  }
};
/**
 * Styles for the root slot
 * Shared across NavItem, NavCategoryItem, NavSubItem, and AppItem
 */
export const useRootDefaultClassName = /*#__PURE__*/__resetStyles("rdi7s9k", "r94071", [".rdi7s9k{display:flex;text-transform:none;position:relative;justify-content:start;align-items:flex-start;text-align:left;gap:var(--spacingVerticalL);padding:var(--spacingVerticalMNudge) var(--spacingHorizontalS) var(--spacingVerticalMNudge) var(--spacingHorizontalMNudge);background-color:var(--colorNeutralBackground4);border-radius:var(--borderRadiusMedium);color:var(--colorNeutralForeground2);text-decoration-line:none;border:none;box-sizing:border-box;cursor:pointer;transition-duration:var(--durationFaster);transition-timing-function:var(--curveLinear);transition-property:background;width:100%;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);}", ".rdi7s9k:hover{background-color:var(--colorNeutralBackground4Hover);}", ".rdi7s9k:focus-visible{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);outline-offset:calc(var(--strokeWidthThick) * -1);}", ".r94071{display:flex;text-transform:none;position:relative;justify-content:start;align-items:flex-start;text-align:right;gap:var(--spacingVerticalL);padding:var(--spacingVerticalMNudge) var(--spacingHorizontalMNudge) var(--spacingVerticalMNudge) var(--spacingHorizontalS);background-color:var(--colorNeutralBackground4);border-radius:var(--borderRadiusMedium);color:var(--colorNeutralForeground2);text-decoration-line:none;border:none;box-sizing:border-box;cursor:pointer;transition-duration:var(--durationFaster);transition-timing-function:var(--curveLinear);transition-property:background;width:100%;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);}", ".r94071:hover{background-color:var(--colorNeutralBackground4Hover);}", ".r94071:focus-visible{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);outline-offset:calc(var(--strokeWidthThick) * -1);}"]);
export const useSmallStyles = /*#__PURE__*/__styles({
  root: {
    Byoj8tv: 0,
    uwmqm3: 0,
    z189sj: 0,
    z8tnut: 0,
    B0ocmuz: ["f1434i56", "f1jkyjtc"]
  }
}, {
  d: [[".f1434i56{padding:var(--spacingVerticalXS) var(--spacingHorizontalS) var(--spacingVerticalXS) var(--spacingHorizontalMNudge);}", {
    p: -1
  }], [".f1jkyjtc{padding:var(--spacingVerticalXS) var(--spacingHorizontalMNudge) var(--spacingVerticalXS) var(--spacingHorizontalS);}", {
    p: -1
  }]]
});
/**
 * Styles for the content slot (children)
 * Shared across NavItem, NavCategoryItem, NavSubItem, and AppItem
 */
export const useContentStyles = /*#__PURE__*/__styles({
  selected: {
    Bahqtrf: "fk6fouc",
    Be2twd7: "fkhj508",
    Bhrd7zp: "fl43uef",
    Bg96gwp: "f1i3iumi"
  }
}, {
  d: [".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}"]
});
/**
 * French fry styles
 * Shared across NavItem, NavCategoryItem, and NavSubItem
 */
export const useIndicatorStyles = /*#__PURE__*/__styles({
  base: {
    E3zdtr: "f1mdlcz9",
    xr36ep: "fpil94b",
    B67388b: "f90z1up",
    Bitv4sc: "f2ic3ny",
    Br128sd: "f1xz7mvd",
    rjyhj6: "f3i5gj0",
    Bjyk6c5: "fi4v1pz",
    Dlnsje: "f1tvrmnx",
    a2br6o: "f1p1ggug",
    d9w3h3: 0,
    B3778ie: 0,
    B4j8arr: 0,
    Bl18szs: 0,
    Blrzh8d: "f3b9emi",
    Bsft5z2: "f13zj6fq",
    vikyaa: 0,
    Brlscjf: 0,
    vvp1qr: 0,
    t65l24: "f1ak99p5",
    rc3c53: "fmnu42u"
  }
}, {
  d: [".f1mdlcz9::after{position:absolute;}", ".fpil94b::after{animation-duration:var(--durationFaster);}", ".f90z1up::after{animation-fill-mode:both;}", ".f2ic3ny::after{animation-timing-function:var(--curveLinear);}", ".f1xz7mvd::after{animation-name:f1ayorr4;}", ".f3i5gj0::after{-webkit-margin-start:-16px;margin-inline-start:-16px;}", ".fi4v1pz::after{background-color:var(--colorCompoundBrandForeground1);}", ".f1tvrmnx::after{height:20px;}", ".f1p1ggug::after{width:4px;}", [".f3b9emi::after{border-radius:var(--borderRadiusCircular);}", {
    p: -1
  }], ".f13zj6fq::after{content:\"\";}"],
  k: ["@keyframes f1ayorr4{0%{background:transparent;}100%{background:var(--colorCompoundBrandForeground1);}}"],
  m: [["@media (forced-colors: active){.f1ak99p5::after{outline:solid 2px var(--colorTransparentStroke);}}", {
    p: -1,
    m: "(forced-colors: active)"
  }], ["@media (forced-colors: active){.fmnu42u::after{outline-offset:-2px;}}", {
    m: "(forced-colors: active)"
  }]]
});
/**
 * Styles for the icon slot
 * Shared across NavItem, NavCategoryItem, and NavSubItem
 * We use the grid trick to stack the filled and regular icons on top of each other
 */
export const useIconStyles = /*#__PURE__*/__styles({
  base: {
    mc9l5x: "f13qh94s",
    zoa1oz: "fngvled",
    sshi5w: "f16gbxbe",
    Bf4jedk: "f11u7vat",
    Bt984gj: "f1w4ww9t",
    Brf1p80: "f4d9j23",
    B68tc82: 0,
    Bmxbyg5: 0,
    Bpg54ce: "f1a3p1vp",
    B9gejnh: 0,
    yr4pdu: 0,
    Bvkmzld: 0,
    mqdk8l: 0,
    Gbjhqp: "f1uiug86",
    obb2bi: "fwrh02z",
    D0sxk3: "f16u1re",
    Esdz9e: 0,
    Bqil8sh: 0,
    Bbom3er: 0,
    djjtid: 0,
    mz70lj: "f1jsjwoh",
    t6yez3: "f8bsbmo"
  },
  selected: {
    C9vb3z: "f5rs5gh",
    ux3ctl: "f1ioc1t6",
    Ba906uv: "fey0lwf",
    D0sxk3: "fxoiby5",
    hndn0g: "fnh0dvc",
    cw2nnk: "fp7jrvw",
    Bkztwl0: "fdt4y6x",
    H8nmoi: "fvl64og",
    ipgedg: "ffh1t26"
  }
}, {
  d: [".f13qh94s{display:grid;}", ".fngvled{grid-template-areas:overlay-area;}", ".f16gbxbe{min-height:20px;}", ".f11u7vat{min-width:20px;}", ".f1w4ww9t{align-items:top;}", ".f4d9j23{justify-content:center;}", [".f1a3p1vp{overflow:hidden;}", {
    p: -1
  }], [".f1uiug86 .fui-Icon-filled{grid-area:overlay-area;}", {
    p: -1
  }], ".fwrh02z .fui-Icon-filled{color:transparent;}", ".f16u1re .fui-Icon-filled{display:none;}", [".f1jsjwoh .fui-Icon-regular{grid-area:overlay-area;}", {
    p: -1
  }], ".f8bsbmo .fui-Icon-regular{display:inline;}", ".f5rs5gh .fui-Icon-filled{animation-duration:var(--durationFaster);}", ".f1ioc1t6 .fui-Icon-filled{animation-fill-mode:both;}", ".fey0lwf .fui-Icon-filled{animation-timing-function:var(--curveLinear);}", ".fxoiby5 .fui-Icon-filled{display:inline;}", ".fnh0dvc .fui-Icon-filled{animation-name:f9t3kp0;}", ".fp7jrvw .fui-Icon-regular{animation-duration:var(--durationFaster);}", ".fdt4y6x .fui-Icon-regular{animation-fill-mode:both;}", ".fvl64og .fui-Icon-regular{animation-timing-function:var(--curveLinear);}", ".ffh1t26 .fui-Icon-regular{animation-name:fvunsy5;}"],
  k: ["@keyframes f9t3kp0{0%{opacity:0;color:transparent;}100%{opacity:1;color:var(--colorNeutralForeground2BrandSelected);}}", "@keyframes fvunsy5{0%{opacity:1;color:var(--colorNeutralForeground2);}100%{opacity:0;color:transparent;}}"]
});