System.register(["lit"],function(_export,_context){"use strict";var e,_templateObject,r;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){e=_lit.css;}],execute:function execute(){_export("s",r=e(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    display: flex;\n    height: 100%;\n\n    --separator-width: 1px;\n    --separator-hit-area: 12px;\n    --separator-color: var(--nile-colors-neutral-400, var(--ng-colors-border-neutral));\n  }\n  .sidebar {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-right: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-neutral));\n    transition: var(--sidebar-transition, width 0.3s ease);\n    position: relative;\n  }\n  .toggle-btn {\n    position: absolute;\n    top: var(--nile-spacing-2xl, var(--ng-spacing-2xl));\n    right: -14px;\n    z-index: 10;\n  }\n\n  nile-button.toggle-btn::part(base) {\n    width: 30px;\n    height: 30px;\n  }\n  nile-button.toggle-btn::part(base) {\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n  }\n  :host(:not([collapsed]):not([resizable])) .sidebar {\n    width: 216px;\n  }\n  :host([collapsed]) .sidebar {\n    width: 0px;\n  }\n  :host([collapsed]) .sidebar-nav {\n    display: none;\n  }\n  .sidebar-header {\n    display: flex;\n    justify-content: flex-end;\n  }\n  .sidebar-nav {\n    display: flex;\n    flex-direction: column;\n    gap: var(--nile-spacing-xs, var(--ng-spacing-xs));\n    padding-right: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    padding-top: var(--nile-spacing-3xl, var(--ng-spacing-3xl));\n    padding-bottom: var(--nile-spacing-3xl, var(--ng-spacing-3xl));\n  }\n  .sidebar-nav--rich {\n    padding-right: 0px;\n  }\n\n  /* Resizable separator */\n  .separator {\n    flex: 0 0 var(--separator-width);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background-color: var(--separator-color);\n    cursor: col-resize;\n    position: relative;\n    z-index: 1;\n    user-select: none;\n    touch-action: none;\n  }\n\n  .separator:focus {\n    outline: none;\n  }\n\n  .separator:focus-visible {\n    background-color: var(--nile-colors-blue-500, var(--ng-componentcolors-utility-brand-50));\n  }\n\n  .separator::after {\n    content: '';\n    position: absolute;\n    height: 100%;\n    left: calc(var(--separator-hit-area) / -2 + var(--separator-width) / 2);\n    width: var(--separator-hit-area);\n  }\n\n  :host([resizable]:not([collapsed])) .sidebar {\n    border-right: none;\n  }\n\n  :host([resizable][placement='right']:not([collapsed])) .sidebar {\n    border-left: none;\n  }\n\n  :host([collapsed]) .separator {\n    display: none;\n  }\n\n  :host([placement='right']) .separator {\n    order: -1;\n  }\n\n  nile-side-bar-action-menu {\n    width: fit-content;\n    max-width: 400px;\n    min-width: 200px;\n  }\n\n  nile-side-bar-action-menu::part(menu__items-wrapper) {\n    width: 100%;\n    max-width: 400px;\n    padding-top: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    padding-bottom: var(--nile-spacing-lg, var(--ng-spacing-lg));\n  }\n\n  nile-side-bar-action-menu-item::part(base) {\n    width: 100%;\n    margin-left: 0;\n    margin-right: 0;\n    border-radius: 0;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n  }\n\n  nile-side-bar-action-menu-item[active]::part(base):hover {\n    background: var(--nile-colors-primary-100, var(--ng-colors-bg-brand-secondary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n  }\n\n  nile-side-bar-action-menu-item::part(label) {\n    display: block;\n    width: 100%;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  /* Transition for sidebar button when it is closed and opened */\n  nile-side-bar-action::part(panel),\n  nile-side-bar-action-menu {\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity 0.2s ease-in;\n    transition-delay: 50ms;\n  }\n\n  nile-side-bar-action:hover::part(panel),\n  nile-side-bar-action:hover nile-side-bar-action-menu {\n    opacity: 1;\n    pointer-events: auto;\n    transition-delay: 0ms;\n  }\n\n  :host([placement='right']) .sidebar {\n    border-right: none;\n    border-left: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-neutral));\n    order: 0;\n  }\n\n  :host([placement='right']) .toggle-btn {\n    right: auto;\n    left: -14px;\n  }\n\n  :host([placement='right']) .sidebar-header {\n    justify-content: flex-start;\n  }\n\n  :host([placement='right']) .sidebar-nav {\n    padding-right: 0;\n    padding-left: var(--nile-spacing-xl, var(--ng-spacing-xl));\n  }\n"]))));}};});
//# sourceMappingURL=nile-inline-sidebar.css.cjs.js.map
