System.register(["lit"],function(_export,_context){"use strict";var e,_templateObject,o;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",o=[e(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    box-sizing: border-box;\n    --nile-drawer-remove-icon-color:var(--nile-colors-dark-900, var(--ng-componentcolors-alpha-black-100));\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    --size: 25rem;\n    --header-spacing: var(--nile-line-height-small, var(--ng-spacing-2xl));\n    --body-spacing: var(--nile-line-height-small, var(--ng-spacing-2xl));\n    --footer-spacing: var(--nile-line-height-small, var(--ng-spacing-2xl));\n\n    display: contents;\n  }\n\n  .drawer {\n    top: 0;\n    inset-inline-start: 0;\n    width: 100%;\n    height: 100%;\n    pointer-events: none;\n    overflow: hidden;\n  }\n\n  .drawer--contained {\n    position: absolute;\n    z-index: initial;\n  }\n\n  .drawer--fixed {\n    position: fixed;\n    z-index: 700;\n  }\n\n  .drawer__panel {\n    position: absolute;\n    display: flex;\n    flex-direction: column;\n    z-index: 2;\n    max-width: 100%;\n    max-height: 100%;\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    box-shadow: var(--nile-box-shadow-2,  0px 20px 24px -4px var(--ng-colors-effects-shadow-xl-01), 0px 8px 8px -4px var(--ng-colors-effects-shadow-xl-02), 0px 3px 3px -1.5px var(--ng-colors-effects-shadow-xl-03));\n    overflow: auto;\n    pointer-events: all;\n  }\n\n  .drawer__panel:focus {\n    outline: none;\n  }\n\n  .drawer--top .drawer__panel {\n    top: 0;\n    inset-inline-end: auto;\n    bottom: auto;\n    inset-inline-start: 0;\n    width: 100%;\n    height: var(--size);\n  }\n\n  .drawer--end .drawer__panel {\n    top: 0;\n    inset-inline-end: 0;\n    bottom: auto;\n    inset-inline-start: auto;\n    width: var(--size);\n    height: 100%;\n  }\n\n  .drawer--bottom .drawer__panel {\n    top: auto;\n    inset-inline-end: auto;\n    bottom: 0;\n    inset-inline-start: 0;\n    width: 100%;\n    height: var(--size);\n  }\n\n  .drawer--start .drawer__panel {\n    top: 0;\n    inset-inline-end: auto;\n    bottom: auto;\n    inset-inline-start: 0;\n    width: var(--size);\n    height: 100%;\n  }\n\n  .drawer__header {\n    display: flex;\n  }\n\n  .drawer__title {\n    flex: 1 1 auto;\n    font-family: var(--nile-font-family-body, var(--ng-font-family-body));\n    font-size: var(--nile-font-size-rem-small, var(--ng-font-size-text-lg));\n    font-weight: inherit;\n    line-height: 1.4;\n    padding: var(--header-spacing);\n    margin: 0;\n  }\n\n  .drawer__header-actions {\n    flex-shrink: 0;\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: end;\n    gap: 0.5rem;\n    padding: 0 var(--header-spacing);\n  }\n\n  .drawer__header-actions nile-icon-button,\n  .drawer__header-actions ::slotted(nile-icon-button) {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));\n  }\n\n  .drawer__body {\n    flex: 1 1 auto;\n    display: block;\n    padding: var(--body-spacing);\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n  }\n\n  .drawer__footer {\n    text-align: right;\n    padding: var(--footer-spacing, var(--ng-spacing-xl)) var(--footer-spacing, var(--ng-spacing-3xl)) var(--footer-spacing, var(--ng-spacing-xl)) var(--footer-spacing, var(--ng-spacing-3xl));\n  }\n\n  .drawer__footer ::slotted(nile-button:not(:last-of-type)) {\n    margin-inline-end: 0.5rem;\n  }\n\n  .drawer:not(.drawer--has-footer) .drawer__footer {\n    display: none;\n  }\n\n  .drawer__overlay {\n    display: block;\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    background-color: hsl(240 3.8% 46.1% / 33%);\n    pointer-events: all;\n  }\n\n  .drawer--contained .drawer__overlay {\n    display: none;\n  }\n\n  .drawer__close:hover {\n    cursor:pointer;\n  }\n\n  @media (forced-colors: active) {\n    .drawer__panel {\n      border: solid 1px var(--nile-colors-white-base, var(--ng-colors-border-tertiary));\n    }\n  }\n"])))]);}};});
//# sourceMappingURL=nile-drawer.css.cjs.js.map
