{"version":3,"file":"sidebar-item.css.cjs","names":[],"sources":["../../../src/layout/sidebar/sidebar-item.css?inline"],"sourcesContent":["/*\n * Simplified and unified sidebar-item CSS:\n * - Unified badge overlay logic\n * - Grouped collapsed mode rules\n * - Combined state rules (active, disabled, hover, focus)\n * - Clarified selectors for maintainability\n */\n\n@layer refine.base {\n  :host {\n    display: block;\n    min-width: 0;\n    max-width: 100%;\n  }\n\n  .item {\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    gap: var(--size-2);\n    align-items: center;\n    min-width: 0;\n    min-height: var(--_touch-target);\n    padding: var(--size-1-5) var(--size-2);\n    font-size: var(--sidebar-item-font-size, var(--text-sm));\n    font-weight: var(--font-medium);\n    color: var(--sidebar-item-color, var(--color-contrast-700));\n    text-decoration: none;\n    cursor: pointer;\n    user-select: none;\n    outline: none;\n    border-radius: var(--rounded-lg);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  a.item {\n    text-decoration: none;\n  }\n\n  .item:hover,\n  .item:focus-visible {\n    color: var(--sidebar-item-hover-color, var(--color-contrast-900));\n    outline: var(--focus-ring);\n    outline-offset: 1px;\n    background: var(--sidebar-item-hover-bg, var(--color-contrast-100));\n  }\n\n  :host([active]) .item {\n    font-weight: var(--font-semibold);\n    color: var(--sidebar-item-active-color, var(--color-primary));\n    background: var(\n      --sidebar-item-active-bg,\n      var(--color-primary-100, color-mix(in oklch, var(--color-primary) 12%, transparent))\n    );\n  }\n\n  :host([active]) .item::before {\n    display: none;\n  }\n\n  :host([disabled]) .item,\n  :host([disabled]) .item:hover,\n  :host([disabled]) .item:focus-visible {\n    color: var(--sidebar-item-disabled-color, var(--color-contrast-300));\n    pointer-events: none;\n    cursor: not-allowed;\n    outline: none;\n    background: none;\n    opacity: 1;\n  }\n\n  :host([disabled]) .item-icon {\n    color: var(--sidebar-item-disabled-color, var(--color-contrast-300));\n  }\n\n  .item-icon {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-5);\n    height: var(--size-5);\n    margin: 0 auto;\n  }\n\n  .item-label {\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    transition: opacity var(--transition-fast);\n  }\n\n  .item-end {\n    display: flex;\n    flex-shrink: 0;\n    gap: var(--size-1);\n    align-items: center;\n    transition: opacity var(--transition-fast);\n  }\n\n  /* Collapsed sidebar: hide label text, adjust layout, overlay badge */\n  :host([sidebar-collapsed]) .item,\n  :host([sidebar-collapsed]) .item-icon {\n    position: relative;\n  }\n\n  :host([sidebar-collapsed]) .item-label {\n    width: 0;\n    overflow: hidden;\n    pointer-events: none;\n    opacity: 0;\n  }\n\n  :host([sidebar-collapsed]) .item {\n    gap: 0;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    min-height: 100%;\n    padding: 0;\n  }\n\n  :host([sidebar-collapsed]) .item::before {\n    inset-block: var(--size-2);\n  }\n\n  :host([sidebar-collapsed]) .item-icon {\n    width: var(--size-7);\n    height: var(--size-7);\n    padding: var(--size-1-5);\n    font-size: 1.5em;\n  }\n\n  :host([sidebar-collapsed][active]) .item {\n    background: none;\n  }\n\n  :host([sidebar-collapsed]) .item:hover {\n    background: none;\n  }\n\n  :host([sidebar-collapsed][active]) .item-icon {\n    background: var(\n      --sidebar-item-active-bg,\n      var(--color-primary-100, color-mix(in oklch, var(--color-primary) 12%, transparent))\n    );\n    border-radius: var(--rounded-full);\n  }\n\n  :host([sidebar-collapsed]) .item-icon:hover {\n    background: var(--color-contrast-100);\n    border-radius: var(--rounded-full);\n  }\n\n  /* Unified badge overlay logic for collapsed mode */\n  :host([sidebar-collapsed]) .item-end,\n  :host([sidebar-collapsed]) .item-icon .group-badge,\n  :host([sidebar-collapsed]) .item-icon ::slotted([slot='end']) {\n    position: absolute;\n    right: 0;\n    bottom: calc(var(--size-2) * -1);\n    z-index: 2;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 1.25em;\n    min-height: 1.25em;\n    pointer-events: auto;\n    opacity: 1;\n    transform: translate(40%, -40%);\n  }\n\n  :host([dir='rtl'][sidebar-collapsed]) .item-end,\n  :host([dir='rtl'][sidebar-collapsed]) .item-icon .group-badge,\n  :host([dir='rtl'][sidebar-collapsed]) .item-icon ::slotted([slot='end']),\n  :host(:dir(rtl)[sidebar-collapsed]) .item-end,\n  :host(:dir(rtl)[sidebar-collapsed]) .item-icon .group-badge,\n  :host(:dir(rtl)[sidebar-collapsed]) .item-icon ::slotted([slot='end']) {\n    right: auto;\n    left: 0;\n    transform: translate(-40%, -40%);\n  }\n\n  :host([sidebar-collapsed]) .item-end .group-badge,\n  :host([sidebar-collapsed]) .item-end ::slotted([slot='end']) {\n    position: absolute;\n    top: 50%;\n    right: calc(var(--size-0-5) * -1);\n    z-index: 1;\n    transform: translateY(-50%);\n  }\n\n  :host([dir='rtl'][sidebar-collapsed]) .item-end .group-badge,\n  :host([dir='rtl'][sidebar-collapsed]) .item-end ::slotted([slot='end']),\n  :host(:dir(rtl)[sidebar-collapsed]) .item-end .group-badge,\n  :host(:dir(rtl)[sidebar-collapsed]) .item-end ::slotted([slot='end']) {\n    right: auto;\n    left: var(--size-2);\n  }\n\n  /* The bottom tab bar (`.bottom-bar` in sidebar.ts) renders its own promoted-item\n     buttons from the same data — the original <ore-sidebar-item> stays inside the\n     (visually off-screen while closed) <nav>, so it must be fully hidden here to\n     avoid a focusable/AT-visible duplicate of the bottom-bar entry. */\n  :host([sidebar-bottom-nav]) {\n    display: none;\n  }\n}\n"],"mappings":""}