{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/ConsoleNav/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar, responsive }) => {\n  // Fades out at once on collapse, but waits on expand until the width has room for the text.\n  const railFade = `\n    transition: opacity 120ms ease 80ms;\n\n    [data-collapsed='true'] & {\n      opacity: 0;\n      transition-delay: 0s;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n  `;\n\n  return {\n    badge: css`\n      flex: none;\n\n      min-inline-size: 20px;\n      padding-inline: 6px;\n      border-radius: 999px;\n\n      font-size: ${cssVar.fontSizeSM};\n      font-variant-numeric: tabular-nums;\n      color: ${cssVar.colorError};\n      text-align: center;\n\n      background: color-mix(in srgb, ${cssVar.colorError} 12%, transparent);\n\n      ${railFade}\n    `,\n    chevron: css`\n      flex: none;\n      transition:\n        transform 160ms ease,\n        opacity 120ms ease 80ms;\n\n      &[data-expanded='false'] {\n        transform: rotate(-90deg);\n      }\n\n      [data-collapsed='true'] & {\n        opacity: 0;\n        transition-delay: 0s;\n      }\n\n      @media (prefers-reduced-motion: reduce) {\n        transition: none;\n      }\n    `,\n    indicator: css`\n      display: flex;\n      flex: none;\n      align-items: center;\n      justify-content: center;\n\n      width: 18px;\n      height: 18px;\n      margin-inline-start: -6px;\n\n      color: ${cssVar.colorTextDescription};\n\n      transition: transform 160ms ease;\n\n      &[data-expanded='true'] {\n        transform: rotate(90deg);\n      }\n    `,\n    dot: css`\n      position: absolute;\n      inset-block-start: 7px;\n      inset-inline-end: 9px;\n\n      inline-size: 7px;\n      block-size: 7px;\n      border-radius: 999px;\n\n      opacity: 0;\n      background: ${cssVar.colorError};\n\n      transition: opacity 120ms ease;\n\n      [data-collapsed='true'] & {\n        opacity: 1;\n      }\n\n      @media (prefers-reduced-motion: reduce) {\n        transition: none;\n      }\n    `,\n    fold: css`\n      display: grid;\n      grid-template-rows: 1fr;\n      transition:\n        grid-template-rows 200ms ease,\n        margin 200ms ease,\n        opacity 120ms ease;\n\n      > div {\n        overflow: hidden;\n        min-block-size: 0;\n      }\n\n      &[data-folded='true'] {\n        grid-template-rows: 0fr;\n        opacity: 0;\n      }\n\n      &[data-folded='true']:not(:first-child) {\n        margin-block-start: -2px;\n      }\n\n      @media (prefers-reduced-motion: reduce) {\n        transition: none;\n      }\n    `,\n    group: css`\n      position: relative;\n\n      display: flex;\n      flex-direction: column;\n\n      margin-block-start: 12px;\n\n      transition: margin 200ms ease;\n\n      &::before {\n        content: '';\n\n        position: absolute;\n        inset-block-start: -6px;\n        inset-inline: 0;\n\n        block-size: 1px;\n\n        opacity: 0;\n        background: ${cssVar.colorBorderSecondary};\n\n        transition: opacity 200ms ease;\n      }\n\n      &[data-level='0'][data-icon='true'] {\n        margin-block-start: 2px;\n      }\n\n      &:not([data-level='0']) {\n        margin-block-start: 6px;\n      }\n\n      [data-collapsed='true'] & + &[data-level='0'][data-icon='false']::before {\n        opacity: 1;\n      }\n\n      [data-collapsed='true'] &[data-rail-empty='true'] {\n        margin-block-start: 0;\n\n        &::before {\n          opacity: 0;\n        }\n      }\n\n      @media (prefers-reduced-motion: reduce) {\n        transition: none;\n\n        &::before {\n          transition: none;\n        }\n      }\n    `,\n    groupHead: css`\n      position: relative;\n      display: flex;\n      flex-direction: column;\n    `,\n    groupHeader: css`\n      cursor: pointer;\n\n      display: flex;\n      gap: 8px;\n      align-items: center;\n      justify-content: space-between;\n\n      min-block-size: 32px;\n      padding-inline: 10px;\n      border: none;\n      border-radius: ${cssVar.borderRadius};\n\n      font-size: ${cssVar.fontSizeSM};\n      font-weight: 500;\n      color: ${cssVar.colorTextSecondary};\n      text-align: start;\n      white-space: nowrap;\n\n      background: none;\n\n      &:hover,\n      &[data-active='true'] {\n        color: ${cssVar.colorText};\n      }\n\n      &[data-icon='true'] {\n        gap: 10px;\n        justify-content: flex-start;\n        min-block-size: 36px;\n        font-size: ${cssVar.fontSize};\n\n        > [role='img'] {\n          justify-content: center;\n          inline-size: 18px;\n        }\n      }\n\n      &[data-level='0'][data-icon='true']:hover {\n        background: ${cssVar.colorFillTertiary};\n      }\n\n      /* Nested groups read as quiet subheadings with the indicator right after the label. */\n      &:not([data-level='0']) {\n        gap: 8px;\n        justify-content: flex-start;\n\n        min-block-size: 26px;\n\n        font-size: ${cssVar.fontSizeSM};\n        font-weight: 400;\n        color: ${cssVar.colorTextDescription};\n\n        > [data-label] {\n          flex: 0 1 auto;\n        }\n\n        &:hover,\n        &[data-active='true'] {\n          color: ${cssVar.colorTextSecondary};\n        }\n      }\n\n      &[data-indent='1'] {\n        padding-inline-start: 38px;\n      }\n\n      &[data-indent='2'] {\n        padding-inline-start: 56px;\n      }\n\n      > [role='img'] {\n        display: flex;\n        flex: none;\n      }\n    `,\n    groupItems: css`\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n      min-block-size: 0;\n    `,\n    groupPanel: css`\n      display: grid;\n      grid-template-rows: 1fr;\n      transition: grid-template-rows 160ms ease;\n\n      > div {\n        overflow: hidden;\n      }\n\n      &[data-expanded='false'] {\n        grid-template-rows: 0fr;\n      }\n\n      &[data-instant='true'] {\n        transition: none;\n      }\n    `,\n    item: css`\n      position: relative;\n\n      display: flex;\n      gap: 10px;\n      align-items: center;\n\n      min-block-size: 36px;\n      padding-inline: 10px;\n      border-radius: ${cssVar.borderRadius};\n\n      color: ${cssVar.colorTextSecondary};\n      text-decoration: none;\n      white-space: nowrap;\n\n      transition:\n        background 120ms ease,\n        color 120ms ease;\n\n      &:hover {\n        color: ${cssVar.colorText};\n        background: ${cssVar.colorFillTertiary};\n      }\n\n      &[data-active='true'] {\n        font-weight: 500;\n        color: ${cssVar.colorText};\n        background: ${cssVar.colorFillSecondary};\n      }\n\n      &[data-indent='1'],\n      &[data-indent='2'] {\n        min-block-size: 32px;\n        color: ${cssVar.colorText};\n      }\n\n      &[data-indent='1'] {\n        padding-inline-start: 38px;\n      }\n\n      &[data-indent='2'] {\n        padding-inline-start: 56px;\n      }\n\n      [data-collapsed='true'] &:not([data-indent='0']) {\n        padding-inline-start: 10px;\n      }\n\n      > [role='img'] {\n        display: flex;\n        flex: none;\n      }\n\n      ${responsive.mobile} {\n        min-block-size: 44px;\n      }\n    `,\n    itemLabel: css`\n      overflow: hidden;\n      flex: 1;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n\n      [data-collapsed='true'] & {\n        text-overflow: clip;\n      }\n\n      ${railFade}\n    `,\n    nav: css`\n      /* Scroll anchoring would jump the list in one frame while rail rows fold and unfold. */\n      overflow-anchor: none;\n      scrollbar-width: thin;\n\n      display: flex;\n      flex: 1;\n      flex-direction: column;\n      gap: 2px;\n\n      min-block-size: 0;\n      padding-block-end: 12px;\n      padding-inline: 8px;\n    `,\n    railLink: css`\n      position: absolute;\n      inset: 0;\n      border-radius: ${cssVar.borderRadius};\n      transition: background 120ms ease;\n\n      &:hover {\n        background: ${cssVar.colorFillTertiary};\n      }\n\n      &[data-active='true'] {\n        background: ${cssVar.colorFillSecondary};\n      }\n\n      @starting-style {\n        background: transparent;\n      }\n    `,\n    topItems: css`\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n      transition:\n        margin 200ms ease,\n        padding 200ms ease,\n        border-color 200ms ease;\n\n      &[data-divided='true'] {\n        margin-block-end: 6px;\n        padding-block-end: 8px;\n        border-block-end: 1px solid ${cssVar.colorBorderSecondary};\n      }\n\n      [data-collapsed='true'] &[data-rail-empty='true'] {\n        margin-block-end: 0;\n        padding-block-end: 0;\n        border-block-end-color: transparent;\n      }\n\n      @media (prefers-reduced-motion: reduce) {\n        transition: none;\n      }\n    `,\n  };\n});\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,QAAQ,iBAAiB;CAExE,MAAM,WAAW;;;;;;;;;;;;CAajB,OAAO;EACL,OAAO,GAAG;;;;;;;mBAOK,OAAO,WAAW;;eAEtB,OAAO,WAAW;;;uCAGM,OAAO,WAAW;;QAEjD,SAAS;;EAEb,SAAS,GAAG;;;;;;;;;;;;;;;;;;;EAmBZ,WAAW,GAAG;;;;;;;;;;eAUH,OAAO,qBAAqB;;;;;;;;EAQvC,KAAK,GAAG;;;;;;;;;;oBAUQ,OAAO,WAAW;;;;;;;;;;;;EAYlC,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;EA0BT,OAAO,GAAG;;;;;;;;;;;;;;;;;;;;sBAoBQ,OAAO,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiC9C,WAAW,GAAG;;;;;EAKd,aAAa,GAAG;;;;;;;;;;;uBAWG,OAAO,aAAa;;mBAExB,OAAO,WAAW;;eAEtB,OAAO,mBAAmB;;;;;;;;iBAQxB,OAAO,UAAU;;;;;;;qBAOb,OAAO,SAAS;;;;;;;;;sBASf,OAAO,kBAAkB;;;;;;;;;;qBAU1B,OAAO,WAAW;;iBAEtB,OAAO,qBAAqB;;;;;;;;mBAQ1B,OAAO,mBAAmB;;;;;;;;;;;;;;;;;EAiBzC,YAAY,GAAG;;;;;;EAMf,YAAY,GAAG;;;;;;;;;;;;;;;;;EAiBf,MAAM,GAAG;;;;;;;;;uBASU,OAAO,aAAa;;eAE5B,OAAO,mBAAmB;;;;;;;;;iBASxB,OAAO,UAAU;sBACZ,OAAO,kBAAkB;;;;;iBAK9B,OAAO,UAAU;sBACZ,OAAO,mBAAmB;;;;;;iBAM/B,OAAO,UAAU;;;;;;;;;;;;;;;;;;;;QAoB1B,WAAW,OAAO;;;;EAItB,WAAW,GAAG;;;;;;;;;;QAUV,SAAS;;EAEb,KAAK,GAAG;;;;;;;;;;;;;;EAcR,UAAU,GAAG;;;uBAGM,OAAO,aAAa;;;;sBAIrB,OAAO,kBAAkB;;;;sBAIzB,OAAO,mBAAmB;;;;;;;EAO5C,UAAU,GAAG;;;;;;;;;;;;sCAYqB,OAAO,qBAAqB;;;;;;;;;;;;;CAahE;AACF,CAAC"}