{"version":3,"file":"sidebar.css.cjs","names":[],"sources":["../../../src/layout/sidebar/sidebar.css?inline"],"sourcesContent":[".sidebar-logo[hidden] {\n  display: none;\n  min-width: 0;\n  min-height: 0;\n  margin: 0;\n}\n\n/*\n * Simplified and unified sidebar CSS:\n * - Grouped collapsed/expanded state rules\n * - Consistent use of CSS variables for spacing, color, and transitions\n * - Removed redundant or legacy rules\n * - Clarified variant handling\n */\n\n@layer refine.base {\n  :host {\n    --_sidebar-width: var(--sidebar-width, 16rem);\n    --_sidebar-collapsed-width: var(--sidebar-collapsed-width, 3.5rem);\n    --_sidebar-transition: var(--transition-normal);\n    --_panel-bg: var(--sidebar-bg, var(--color-canvas));\n    --_panel-blur: var(--sidebar-panel-blur, var(--blur-md));\n    --_panel-border-color: var(--sidebar-border-color, var(--color-divider));\n    --_panel-radius: var(--sidebar-radius, var(--rounded-lg));\n    --_panel-shadow: var(--sidebar-shadow, var(--shadow-md));\n\n    box-sizing: border-box;\n    display: block;\n    width: 100%;\n    min-width: var(--size-2xs);\n    max-width: var(--_sidebar-width);\n    height: 100%;\n    min-height: 0;\n    overflow: visible;\n    transition:\n      max-width var(--_sidebar-transition),\n      min-width var(--_sidebar-transition);\n    will-change: max-width;\n  }\n\n  :host > nav {\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    height: 100%;\n    min-height: 0;\n    overflow: hidden;\n    background: var(--_panel-bg);\n    border-inline-end: var(--border) solid var(--_panel-border-color);\n    backdrop-filter: blur(var(--_panel-blur));\n  }\n\n  .mobile-backdrop {\n    position: absolute;\n    inset: 0;\n    z-index: calc(var(--z-sticky) + 1);\n    display: none;\n    width: 100%;\n    height: 100%;\n    background: color-mix(in oklch, var(--color-contrast-950) 36%, transparent);\n    border: 0;\n  }\n\n  :host([data-bottom-nav][data-mobile-open]) .mobile-backdrop {\n    position: fixed;\n    inset: 0;\n    z-index: calc(var(--z-sticky) + 1);\n    display: block;\n    width: 100vw;\n    height: 100dvh;\n  }\n\n  :host([data-preview-mode][data-bottom-nav][data-mobile-open]) .mobile-backdrop {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  :host([data-no-transition]),\n  :host([data-no-transition]) > nav {\n    transition: none;\n  }\n\n  :host([data-collapsed]) {\n    min-width: var(--_sidebar-collapsed-width);\n    max-width: var(--_sidebar-collapsed-width);\n  }\n\n  :host([data-bottom-nav]) {\n    position: fixed;\n    inset-block-end: 0;\n    inset-inline: 0;\n    z-index: calc(var(--z-sticky) + 2);\n    width: 100%;\n    min-width: 0;\n    max-width: 100%;\n    height: var(--sidebar-bottom-nav-height, 3.75rem);\n    pointer-events: auto;\n  }\n\n  /* Preview mode: constrain bottom-nav to container bounds */\n  :host([data-preview-mode][data-bottom-nav]) {\n    position: absolute;\n    inset: 0;\n    width: auto;\n    height: auto;\n    pointer-events: none;\n  }\n\n  :host([data-bottom-nav]) > nav {\n    position: fixed;\n    inset-block: 0;\n    inset-inline-start: 0;\n    z-index: calc(var(--z-sticky) + 3);\n    width: min(var(--_sidebar-width), 85vw);\n    max-width: 85vw;\n    max-height: 100dvh;\n    transform: translateX(-104%);\n    transition: transform var(--transition-normal);\n  }\n\n  /* Preview mode: use absolute positioning so drawer stays within container */\n  :host([data-preview-mode][data-bottom-nav]) > nav {\n    position: absolute;\n    inset-block: 0;\n    inset-inline-start: 0;\n    z-index: calc(var(--z-sticky) + 3);\n    max-height: 100%;\n    pointer-events: auto;\n  }\n\n  :host(:dir(rtl)[data-bottom-nav]) > nav {\n    transform: translateX(104%);\n  }\n\n  :host([data-bottom-nav][data-mobile-open]) > nav {\n    transform: translateX(0);\n  }\n\n  .bottom-bar {\n    display: flex;\n    gap: var(--size-1);\n    align-items: stretch;\n    justify-content: space-around;\n    width: 100%;\n    height: 100%;\n    padding: var(--size-1);\n    pointer-events: none;\n    background: var(--_panel-bg);\n    border-top: var(--border) solid var(--_panel-border-color);\n    box-shadow: var(--shadow-sm);\n    opacity: 0;\n    backdrop-filter: blur(var(--_panel-blur));\n    transform: translateY(100%);\n    transition:\n      opacity var(--_sidebar-transition),\n      transform var(--_sidebar-transition),\n      display var(--_sidebar-transition) allow-discrete;\n  }\n\n  :host([data-bottom-nav]) .bottom-bar {\n    pointer-events: auto;\n    opacity: 1;\n    transform: translateY(0);\n  }\n\n  :host([data-preview-mode][data-bottom-nav]) .bottom-bar {\n    position: absolute;\n    inset-block-end: 0;\n    inset-inline: 0;\n    z-index: calc(var(--z-sticky) + 2);\n    height: var(--sidebar-bottom-nav-height, 3.75rem);\n  }\n\n  :host([data-bottom-nav][data-mobile-open]) .bottom-bar {\n    z-index: calc(var(--z-sticky) + 1);\n    pointer-events: none;\n    opacity: 0;\n    transform: translateY(100%);\n  }\n\n  .bottom-tab {\n    all: unset;\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    flex: 1 1 0;\n    flex-direction: column;\n    gap: var(--size-0-5);\n    align-items: center;\n    justify-content: center;\n    min-width: 0;\n    padding: var(--size-1) var(--size-1-5);\n    color: var(--sidebar-item-color, var(--color-contrast-700));\n    text-decoration: none;\n    cursor: pointer;\n    border-radius: var(--rounded-md);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  .bottom-tab:hover,\n  .bottom-tab: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  .bottom-tab:disabled {\n    color: var(--sidebar-item-disabled-color, var(--color-contrast-400));\n    cursor: not-allowed;\n    opacity: 0.7;\n  }\n\n  .bottom-tab-active,\n  .bottom-tab[data-active='true'] {\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  .bottom-tab-active::before,\n  .bottom-tab[data-active='true']::before {\n    display: none;\n  }\n\n  .bottom-tab-icon {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-5);\n    height: var(--size-5);\n  }\n\n  .bottom-tab-label {\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--text-xs);\n    white-space: nowrap;\n  }\n\n  .sidebar-header {\n    display: flex;\n    gap: var(--size-2);\n    align-items: center;\n    justify-content: space-between;\n    min-height: var(--size-6);\n    padding: var(--size-4);\n    border-bottom: var(--border) solid var(--color-contrast-200);\n  }\n\n  .sidebar-header .sidebar-header-content {\n    display: block;\n    flex: 1 1 0%;\n    min-width: 0;\n    overflow: hidden;\n  }\n\n  :host([data-collapsed]) .sidebar-header {\n    flex-direction: column;\n    gap: var(--size-2);\n    align-items: center;\n    justify-content: flex-start;\n    min-height: unset;\n    padding-block: var(--size-2);\n    padding-inline: var(--size-2);\n  }\n\n  :host([data-collapsed]) .sidebar-header .sidebar-header-content {\n    display: none;\n  }\n\n  .sidebar-logo {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    min-width: var(--size-8);\n    min-height: var(--size-8);\n    margin-inline-end: var(--size-2);\n  }\n\n  .sidebar-logo:empty {\n    display: none;\n  }\n\n  :host([data-collapsed]) .sidebar-logo {\n    margin-block: var(--size-1);\n    margin-inline-end: 0;\n  }\n\n  .sidebar-content {\n    display: grid;\n    flex: 1;\n    grid-template-columns: minmax(0, 1fr);\n    gap: var(--size-2);\n    align-content: start;\n    min-width: 0;\n    padding: var(--size-4);\n    overflow: clip auto;\n    scrollbar-width: thin;\n  }\n\n  .sidebar-footer {\n    flex-shrink: 0;\n    padding: var(--size-4);\n    border-top: var(--border) solid var(--color-contrast-200);\n  }\n\n  .toggle-btn {\n    all: unset;\n    box-sizing: border-box;\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-8);\n    height: var(--size-8);\n    color: var(--color-contrast-500);\n    cursor: pointer;\n    border-radius: var(--rounded-sm);\n    transition:\n      color var(--transition-fast),\n      background var(--transition-fast);\n  }\n\n  .toggle-btn:hover {\n    color: var(--color-contrast-800);\n    background: var(--color-contrast-200);\n  }\n\n  .toggle-btn:focus-visible {\n    outline: var(--focus-ring);\n  }\n\n  .toggle-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: var(--_motion-transition, transform var(--_sidebar-transition));\n  }\n\n  :host([data-collapsed]) .toggle-icon {\n    transform: rotate(180deg);\n  }\n\n  :host([data-bottom-nav]) .toggle-btn {\n    display: none;\n  }\n\n  :host(:not([dir='rtl'])[data-collapsed]) .toggle-icon,\n  :host(:dir(ltr)[data-collapsed]) .toggle-icon {\n    transform: rotate(180deg);\n  }\n\n  :host(:dir(rtl)) .toggle-icon {\n    transform: rotate(180deg);\n  }\n\n  :host(:dir(rtl)[data-collapsed]) .toggle-icon {\n    transform: rotate(0deg);\n  }\n}\n\n@layer refine.variants {\n  /* ── floating ── */\n  :host([variant='floating']) {\n    --_panel-radius: var(--rounded-lg);\n    height: calc(100% - var(--size-6));\n    margin: var(--size-3);\n  }\n\n  :host([variant='floating']) > nav {\n    border: var(--border) solid var(--_panel-border-color);\n    border-radius: var(--_panel-radius);\n  }\n\n  :host([variant='floating'][data-bottom-nav]) {\n    inset-block-end: var(--size-2);\n    inset-inline: var(--size-2);\n    width: auto;\n    max-width: none;\n  }\n\n  :host([variant='floating'][data-preview-mode][data-bottom-nav]) {\n    inset: calc(var(--size-1) * -1);\n  }\n\n  :host([variant='floating'][data-bottom-nav]) .bottom-bar {\n    border: var(--border) solid var(--_panel-border-color);\n    border-radius: var(--_panel-radius);\n    box-shadow: var(--_panel-shadow);\n  }\n\n  :host([variant='floating'][data-bottom-nav]) > nav {\n    inset-block-start: var(--size-2);\n    inset-inline-start: var(--size-2);\n  }\n\n  :host([variant='floating'][data-preview-mode][data-bottom-nav]) .bottom-bar {\n    inset-block-end: var(--size-2);\n    inset-inline: var(--size-2);\n    width: auto;\n  }\n\n  :host([variant='floating'][data-preview-mode][data-bottom-nav]) > nav {\n    inset-block-start: var(--size-1);\n    inset-inline-start: var(--size-1);\n  }\n\n  /* ── inset ── */\n  :host([variant='inset']) {\n    --_panel-bg: var(--color-contrast-50);\n    --_panel-shadow: none;\n    --_panel-border-color: transparent;\n  }\n}\n"],"mappings":""}