@graupl/navigation-shelf 1.0.0-beta.49 → 1.0.0-beta.50

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/dist/css/component/navigation-shelf.css +1 -1
  2. package/dist/css/component/navigation-shelf.css.map +1 -1
  3. package/dist/css/component.css +1 -1
  4. package/dist/css/component.css.map +1 -1
  5. package/dist/css/navigation-shelf.css +1 -1
  6. package/dist/css/navigation-shelf.css.map +1 -1
  7. package/dist/css/utilities/shelf-aware.css.map +1 -1
  8. package/dist/css/utilities/width.css +1 -1
  9. package/dist/css/utilities/width.css.map +1 -1
  10. package/dist/css/utilities.css +1 -1
  11. package/dist/css/utilities.css.map +1 -1
  12. package/dist/js/component/navigation-shelf.cjs.js.map +1 -1
  13. package/dist/js/component/navigation-shelf.es.js.map +1 -1
  14. package/dist/js/component/navigation-shelf.iife.js.map +1 -1
  15. package/dist/js/generator/navigation-shelf.cjs.js.map +1 -1
  16. package/dist/js/generator/navigation-shelf.es.js.map +1 -1
  17. package/dist/js/generator/navigation-shelf.iife.js.map +1 -1
  18. package/dist/js/navigation-shelf.js.map +1 -1
  19. package/package.json +1 -1
  20. package/src/scss/utilities/inline-size/_defaults.scss +90 -0
  21. package/src/scss/utilities/inline-size/_index.scss +124 -0
  22. package/src/scss/utilities/inline-size/_variables.scss +6 -0
  23. package/src/scss/utilities/shelf-aware/_defaults.scss +61 -6
  24. package/src/scss/utilities/shelf-aware/_index.scss +76 -312
  25. package/src/scss/utilities/width/_defaults.scss +55 -24
  26. package/src/scss/utilities/width/_index.scss +81 -251
package/dist/css/component/navigation-shelf.css CHANGED
@@ -1,2 +1,2 @@
1
- .navigation-shelf{--graupl-navigation-shelf-current-width:var(--graupl-navigation-shelf-width,var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem)));display:var(--graupl-navigation-shelf-display,var(--graupl-navigation-shelf-closed-display,grid));z-index:var(--graupl-navigation-shelf-z-index,2);grid-template-columns:[header-start content-start footer-start] var(--graupl-navigation-shelf-width,var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem))) [footer-end content-end header-end];width:var(--graupl-navigation-shelf-width,var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem)));transform:var(--graupl-navigation-shelf-transform,var(--graupl-navigation-shelf-closed-transform, ));transition:var(--graupl-navigation-shelf-transition,width var(--graupl-navigation-shelf-transition-duration,var(--graupl-transition-duration-fast,.15s)) var(--graupl-transition-timing-function,ease), transform var(--graupl-navigation-shelf-transition-duration,var(--graupl-transition-duration-fast,.15s)) var(--graupl-transition-timing-function,ease), opacity var(--graupl-navigation-shelf-transition-duration,var(--graupl-transition-duration-fast,.15s)) var(--graupl-transition-timing-function,ease), display var(--graupl-navigation-shelf-transition-duration,var(--graupl-transition-duration-fast,.15s)) allow-discrete);border-width:var(--graupl-navigation-shelf-border-width,var(--graupl-navigation-shelf-border-top-width,0) var(--graupl-navigation-shelf-border-right-width,0) var(--graupl-navigation-shelf-border-bottom-width,0) var(--graupl-navigation-shelf-border-left-width,0));border-style:var(--graupl-navigation-shelf-border-style,var(--graupl-navigation-shelf-border-top-style,var(--graupl-border-top-style,var(--graupl-border-style,solid))) var(--graupl-navigation-shelf-border-right-style,var(--graupl-border-right-style,var(--graupl-border-style,solid))) var(--graupl-navigation-shelf-border-bottom-style,var(--graupl-border-bottom-style,var(--graupl-border-style,solid))) var(--graupl-navigation-shelf-border-left-style,var(--graupl-border-left-style,var(--graupl-border-style,solid))));border-color:var(--graupl-navigation-shelf-border-color,var(--graupl-navigation-shelf-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))));opacity:var(--graupl-navigation-shelf-opacity,var(--graupl-navigation-shelf-closed-opacity,1));background:var(--graupl-navigation-shelf-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))));color:var(--graupl-navigation-shelf-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))));isolation:isolate;grid-template-rows:[header-start]auto[header-end content-start]1fr[content-end footer-start]auto[footer-end];position:fixed;top:0;bottom:0;overflow-x:hidden}@starting-style{.navigation-shelf{display:var(--graupl-navigation-shelf-starting-display,var(--graupl-navigation-shelf-display,var(--graupl-navigation-shelf-closed-display,grid)));width:var(--graupl-navigation-shelf-starting-width,var(--graupl-navigation-shelf-width,var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem))));transform:var(--graupl-navigation-shelf-starting-transform,var(--graupl-navigation-shelf-transform,var(--graupl-navigation-shelf-closed-transform, )));opacity:var(--graupl-navigation-shelf-starting-opacity,var(--graupl-navigation-shelf-opacity,var(--graupl-navigation-shelf-closed-opacity,1)))}}.navigation-shelf.initializing{--graupl-navigation-shelf-transition:--graupl-navigation-shelf-transition-initializing, none}@media (prefers-reduced-motion:reduce){.navigation-shelf{--graupl-navigation-shelf-transition:var(--graupl-navigation-shelf-transition-reduced-motion,opacity var(--graupl-navigation-shelf-transition-duration,var(--graupl-transition-duration-fast,.15s)) var(--graupl-transition-timing-function,ease), display var(--graupl-navigation-shelf-transition-duration,var(--graupl-transition-duration-fast,.15s)) allow-discrete)}}.navigation-shelf,.navigation-shelf.left-side{--graupl-navigation-shelf-side-toggle-content:var(--graupl-navigation-shelf-side-toggle-shelf-right-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E"));left:0;right:auto}.navigation-shelf.locked,.navigation-shelf.left-side.locked{--graupl-navigation-shelf-lock-toggle-content:var(--graupl-navigation-shelf-lock-toggle-unlock-right-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M660-320v-320L500-480l160 160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E"))}.navigation-shelf.unlocked,.navigation-shelf.left-side.unlocked{--graupl-navigation-shelf-lock-toggle-content:var(--graupl-navigation-shelf-lock-toggle-lock-right-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M500-640v320l160-160-160-160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E"))}.navigation-shelf.right-side{--graupl-navigation-shelf-side-toggle-content:var(--graupl-navigation-shelf-side-toggle-shelf-left-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E"));left:auto;right:0}.navigation-shelf.right-side.locked{--graupl-navigation-shelf-lock-toggle-content:var(--graupl-navigation-shelf-lock-toggle-unlock-left-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M300-640v320l160-160-160-160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E"))}.navigation-shelf.right-side.unlocked{--graupl-navigation-shelf-lock-toggle-content:var(--graupl-navigation-shelf-lock-toggle-lock-left-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M460-320v-320L300-480l160 160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E"))}.navigation-shelf.hoverable{--graupl-navigation-shelf-hover-toggle-content:var(--graupl-navigation-shelf-hover-toggle-disable-hover-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M468-240q-96-5-162-74t-66-166q0-100 70-170t170-70q97 0 166 66t74 162l-84-25q-13-54-56-88.5T480-640q-66 0-113 47t-47 113q0 57 34.5 100t88.5 56l25 84ZM821-60 650-231 600-80 480-480l400 120-151 50 171 171-79 79Z'/%3E%3C/svg%3E"))}.navigation-shelf.not-hoverable{--graupl-navigation-shelf-hover-toggle-content:var(--graupl-navigation-shelf-hover-toggle-enable-hover-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M516-82q-9 2-18 2h-18q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480v18q0 9-2 18l-78-24v-12q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93h12l24 78Zm305 22L650-231 600-80 480-480l400 120-151 50 171 171-79 79Z'/%3E%3C/svg%3E"))}.navigation-shelf.hide{--graupl-navigation-shelf-current-width:var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem));display:var(--graupl-navigation-shelf-closed-display,grid);grid-template-columns:[header-start content-start footer-start] var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem)) [footer-end content-end header-end];width:var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem));transform:var(--graupl-navigation-shelf-closed-transform, );opacity:var(--graupl-navigation-shelf-closed-opacity,1)}.navigation-shelf.transitioning{--graupl-navigation-shelf-current-width:var(--graupl-navigation-shelf-transitioning-width,var(--graupl-navigation-shelf-min-width,3.5rem));display:var(--graupl-navigation-shelf-transitioning-display,grid);grid-template-columns:[header-start content-start footer-start] var(--graupl-navigation-shelf-transitioning-width,var(--graupl-navigation-shelf-min-width,3.5rem)) [footer-end content-end header-end];width:var(--graupl-navigation-shelf-transitioning-width,var(--graupl-navigation-shelf-min-width,3.5rem));transform:var(--graupl-navigation-shelf-transitioning-transform, );opacity:var(--graupl-navigation-shelf-transitioning-opacity,1)}.navigation-shelf.show{--graupl-navigation-shelf-current-width:var(--graupl-navigation-shelf-open-width,var(--graupl-navigation-shelf-max-width,36ch));display:var(--graupl-navigation-shelf-open-display,grid);grid-template-columns:[header-start content-start footer-start] var(--graupl-navigation-shelf-max-width,36ch) [footer-end content-end header-end];width:var(--graupl-navigation-shelf-open-width,var(--graupl-navigation-shelf-max-width,36ch));transform:var(--graupl-navigation-shelf-open-transform, );opacity:var(--graupl-navigation-shelf-open-opacity,1)}.navigation-shelf .navigation-shelf-header{grid-area:header}.navigation-shelf .navigation-shelf-content{grid-area:content}.navigation-shelf .navigation-shelf-footer{grid-area:footer}.navigation-shelf .navigation-shelf-side-toggle{--graupl-icon:var(--graupl-navigation-shelf-side-toggle-content,var(--graupl-navigation-shelf-side-toggle-shelf-right-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E")));--graupl-icon-spacer:var(--graupl-navigation-shelf-side-toggle-spacer,0)}.navigation-shelf .navigation-shelf-side-toggle:before{display:var(--graupl-icon-display,inline-block);width:var(--graupl-icon-width,var(--graupl-icon-size,1.25em));height:var(--graupl-icon-height,var(--graupl-icon-size,1.25em));vertical-align:sub;mask-image:var(--graupl-icon,none);content:"";background-position:50%;background-repeat:no-repeat;background-size:contain;margin-inline-end:var(--graupl-icon-spacer,var(--graupl-spacer-2,calc(.25 * var(--graupl-spacer,1rem))));mask-position:50%;mask-size:contain;mask-repeat:no-repeat}.navigation-shelf .navigation-shelf-side-toggle.primary{--graupl-icon-color:var(--graupl-theme-active--primary--500,var(--graupl-theme-light--primary--500,var(--graupl-primary--500,#2063df)))}.navigation-shelf .navigation-shelf-side-toggle.secondary{--graupl-icon-color:var(--graupl-theme-active--secondary--500,var(--graupl-theme-light--secondary--500,var(--graupl-secondary--500,#6c7093)))}.navigation-shelf .navigation-shelf-side-toggle.tertiary{--graupl-icon-color:var(--graupl-theme-active--tertiary--500,var(--graupl-theme-light--tertiary--500,var(--graupl-tertiary--500,#c36)))}.navigation-shelf .navigation-shelf-side-toggle:before{background-color:var(--graupl-icon-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))}.navigation-shelf .navigation-shelf-lock-toggle{--graupl-icon:var(--graupl-navigation-shelf-lock-toggle-content,var(--graupl-navigation-shelf-lock-toggle-lock-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M500-640v320l160-160-160-160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E")));--graupl-icon-spacer:var(--graupl-navigation-shelf-lock-toggle-spacer,0)}.navigation-shelf .navigation-shelf-lock-toggle:before{display:var(--graupl-icon-display,inline-block);width:var(--graupl-icon-width,var(--graupl-icon-size,1.25em));height:var(--graupl-icon-height,var(--graupl-icon-size,1.25em));vertical-align:sub;mask-image:var(--graupl-icon,none);content:"";background-position:50%;background-repeat:no-repeat;background-size:contain;margin-inline-end:var(--graupl-icon-spacer,var(--graupl-spacer-2,calc(.25 * var(--graupl-spacer,1rem))));mask-position:50%;mask-size:contain;mask-repeat:no-repeat}.navigation-shelf .navigation-shelf-lock-toggle.primary{--graupl-icon-color:var(--graupl-theme-active--primary--500,var(--graupl-theme-light--primary--500,var(--graupl-primary--500,#2063df)))}.navigation-shelf .navigation-shelf-lock-toggle.secondary{--graupl-icon-color:var(--graupl-theme-active--secondary--500,var(--graupl-theme-light--secondary--500,var(--graupl-secondary--500,#6c7093)))}.navigation-shelf .navigation-shelf-lock-toggle.tertiary{--graupl-icon-color:var(--graupl-theme-active--tertiary--500,var(--graupl-theme-light--tertiary--500,var(--graupl-tertiary--500,#c36)))}.navigation-shelf .navigation-shelf-lock-toggle:before{background-color:var(--graupl-icon-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))}.navigation-shelf .navigation-shelf-hover-toggle{--graupl-icon:var(--graupl-navigation-shelf-hover-toggle-content,var(--graupl-navigation-shelf-hover-toggle-enable-hover-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M516-82q-9 2-18 2h-18q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480v18q0 9-2 18l-78-24v-12q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93h12l24 78Zm305 22L650-231 600-80 480-480l400 120-151 50 171 171-79 79Z'/%3E%3C/svg%3E")));--graupl-icon-spacer:var(--graupl-navigation-shelf-hover-toggle-spacer,0)}.navigation-shelf .navigation-shelf-hover-toggle:before{display:var(--graupl-icon-display,inline-block);width:var(--graupl-icon-width,var(--graupl-icon-size,1.25em));height:var(--graupl-icon-height,var(--graupl-icon-size,1.25em));vertical-align:sub;mask-image:var(--graupl-icon,none);content:"";background-position:50%;background-repeat:no-repeat;background-size:contain;margin-inline-end:var(--graupl-icon-spacer,var(--graupl-spacer-2,calc(.25 * var(--graupl-spacer,1rem))));mask-position:50%;mask-size:contain;mask-repeat:no-repeat}.navigation-shelf .navigation-shelf-hover-toggle.primary{--graupl-icon-color:var(--graupl-theme-active--primary--500,var(--graupl-theme-light--primary--500,var(--graupl-primary--500,#2063df)))}.navigation-shelf .navigation-shelf-hover-toggle.secondary{--graupl-icon-color:var(--graupl-theme-active--secondary--500,var(--graupl-theme-light--secondary--500,var(--graupl-secondary--500,#6c7093)))}.navigation-shelf .navigation-shelf-hover-toggle.tertiary{--graupl-icon-color:var(--graupl-theme-active--tertiary--500,var(--graupl-theme-light--tertiary--500,var(--graupl-tertiary--500,#c36)))}.navigation-shelf .navigation-shelf-hover-toggle:before{background-color:var(--graupl-icon-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))}
1
+ .navigation-shelf{--graupl-navigation-shelf-current-width:var(--graupl-navigation-shelf-width,var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem)));display:var(--graupl-navigation-shelf-display,var(--graupl-navigation-shelf-closed-display,grid));z-index:var(--graupl-navigation-shelf-z-index,2);grid-template-columns:[header-start content-start footer-start] var(--graupl-navigation-shelf-width,var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem))) [footer-end content-end header-end];width:var(--graupl-navigation-shelf-width,var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem)));transform:var(--graupl-navigation-shelf-transform,var(--graupl-navigation-shelf-closed-transform, ));transition:var(--graupl-navigation-shelf-transition,width var(--graupl-navigation-shelf-transition-duration,var(--graupl-transition-duration-fast,.15s)) var(--graupl-transition-timing-function,ease), transform var(--graupl-navigation-shelf-transition-duration,var(--graupl-transition-duration-fast,.15s)) var(--graupl-transition-timing-function,ease), opacity var(--graupl-navigation-shelf-transition-duration,var(--graupl-transition-duration-fast,.15s)) var(--graupl-transition-timing-function,ease), display var(--graupl-navigation-shelf-transition-duration,var(--graupl-transition-duration-fast,.15s)) allow-discrete);border-width:var(--graupl-navigation-shelf-border-width,var(--graupl-navigation-shelf-border-top-width,0) var(--graupl-navigation-shelf-border-right-width,0) var(--graupl-navigation-shelf-border-bottom-width,0) var(--graupl-navigation-shelf-border-left-width,0));border-style:var(--graupl-navigation-shelf-border-style,var(--graupl-navigation-shelf-border-top-style,var(--graupl-border-top-style,var(--graupl-border-style,solid))) var(--graupl-navigation-shelf-border-right-style,var(--graupl-border-right-style,var(--graupl-border-style,solid))) var(--graupl-navigation-shelf-border-bottom-style,var(--graupl-border-bottom-style,var(--graupl-border-style,solid))) var(--graupl-navigation-shelf-border-left-style,var(--graupl-border-left-style,var(--graupl-border-style,solid))));border-color:var(--graupl-navigation-shelf-border-color,var(--graupl-navigation-shelf-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-default--primary--900,light-dark(var(--graupl-primary--900,#001233),var(--graupl-primary--100,#e6eeff))))))));opacity:var(--graupl-navigation-shelf-opacity,var(--graupl-navigation-shelf-closed-opacity,1));background:var(--graupl-navigation-shelf-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-default--primary--100,light-dark(var(--graupl-primary--100,#e6eeff),var(--graupl-primary--900,#001233)))))));color:var(--graupl-navigation-shelf-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-default--primary--900,light-dark(var(--graupl-primary--900,#001233),var(--graupl-primary--100,#e6eeff)))))));isolation:isolate;grid-template-rows:[header-start]auto[header-end content-start]1fr[content-end footer-start]auto[footer-end];position:fixed;top:0;bottom:0;overflow-x:hidden}@starting-style{.navigation-shelf{display:var(--graupl-navigation-shelf-starting-display,var(--graupl-navigation-shelf-display,var(--graupl-navigation-shelf-closed-display,grid)));width:var(--graupl-navigation-shelf-starting-width,var(--graupl-navigation-shelf-width,var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem))));transform:var(--graupl-navigation-shelf-starting-transform,var(--graupl-navigation-shelf-transform,var(--graupl-navigation-shelf-closed-transform, )));opacity:var(--graupl-navigation-shelf-starting-opacity,var(--graupl-navigation-shelf-opacity,var(--graupl-navigation-shelf-closed-opacity,1)))}}.navigation-shelf.initializing{--graupl-navigation-shelf-transition:--graupl-navigation-shelf-transition-initializing, none}@media (prefers-reduced-motion:reduce){.navigation-shelf{--graupl-navigation-shelf-transition:var(--graupl-navigation-shelf-transition-reduced-motion,opacity var(--graupl-navigation-shelf-transition-duration,var(--graupl-transition-duration-fast,.15s)) var(--graupl-transition-timing-function,ease), display var(--graupl-navigation-shelf-transition-duration,var(--graupl-transition-duration-fast,.15s)) allow-discrete)}}.navigation-shelf,.navigation-shelf.left-side{--graupl-navigation-shelf-side-toggle-content:var(--graupl-navigation-shelf-side-toggle-shelf-right-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E"));left:0;right:auto}.navigation-shelf.locked,.navigation-shelf.left-side.locked{--graupl-navigation-shelf-lock-toggle-content:var(--graupl-navigation-shelf-lock-toggle-unlock-right-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M660-320v-320L500-480l160 160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E"))}.navigation-shelf.unlocked,.navigation-shelf.left-side.unlocked{--graupl-navigation-shelf-lock-toggle-content:var(--graupl-navigation-shelf-lock-toggle-lock-right-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M500-640v320l160-160-160-160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E"))}.navigation-shelf.right-side{--graupl-navigation-shelf-side-toggle-content:var(--graupl-navigation-shelf-side-toggle-shelf-left-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E"));left:auto;right:0}.navigation-shelf.right-side.locked{--graupl-navigation-shelf-lock-toggle-content:var(--graupl-navigation-shelf-lock-toggle-unlock-left-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M300-640v320l160-160-160-160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E"))}.navigation-shelf.right-side.unlocked{--graupl-navigation-shelf-lock-toggle-content:var(--graupl-navigation-shelf-lock-toggle-lock-left-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M460-320v-320L300-480l160 160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E"))}.navigation-shelf.hoverable{--graupl-navigation-shelf-hover-toggle-content:var(--graupl-navigation-shelf-hover-toggle-disable-hover-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M468-240q-96-5-162-74t-66-166q0-100 70-170t170-70q97 0 166 66t74 162l-84-25q-13-54-56-88.5T480-640q-66 0-113 47t-47 113q0 57 34.5 100t88.5 56l25 84ZM821-60 650-231 600-80 480-480l400 120-151 50 171 171-79 79Z'/%3E%3C/svg%3E"))}.navigation-shelf.not-hoverable{--graupl-navigation-shelf-hover-toggle-content:var(--graupl-navigation-shelf-hover-toggle-enable-hover-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M516-82q-9 2-18 2h-18q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480v18q0 9-2 18l-78-24v-12q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93h12l24 78Zm305 22L650-231 600-80 480-480l400 120-151 50 171 171-79 79Z'/%3E%3C/svg%3E"))}.navigation-shelf.hide{--graupl-navigation-shelf-current-width:var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem));display:var(--graupl-navigation-shelf-closed-display,grid);grid-template-columns:[header-start content-start footer-start] var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem)) [footer-end content-end header-end];width:var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem));transform:var(--graupl-navigation-shelf-closed-transform, );opacity:var(--graupl-navigation-shelf-closed-opacity,1)}.navigation-shelf.transitioning{--graupl-navigation-shelf-current-width:var(--graupl-navigation-shelf-transitioning-width,var(--graupl-navigation-shelf-min-width,3.5rem));display:var(--graupl-navigation-shelf-transitioning-display,grid);grid-template-columns:[header-start content-start footer-start] var(--graupl-navigation-shelf-transitioning-width,var(--graupl-navigation-shelf-min-width,3.5rem)) [footer-end content-end header-end];width:var(--graupl-navigation-shelf-transitioning-width,var(--graupl-navigation-shelf-min-width,3.5rem));transform:var(--graupl-navigation-shelf-transitioning-transform, );opacity:var(--graupl-navigation-shelf-transitioning-opacity,1)}.navigation-shelf.show{--graupl-navigation-shelf-current-width:var(--graupl-navigation-shelf-open-width,var(--graupl-navigation-shelf-max-width,36ch));display:var(--graupl-navigation-shelf-open-display,grid);grid-template-columns:[header-start content-start footer-start] var(--graupl-navigation-shelf-max-width,36ch) [footer-end content-end header-end];width:var(--graupl-navigation-shelf-open-width,var(--graupl-navigation-shelf-max-width,36ch));transform:var(--graupl-navigation-shelf-open-transform, );opacity:var(--graupl-navigation-shelf-open-opacity,1)}.navigation-shelf .navigation-shelf-header{grid-area:header}.navigation-shelf .navigation-shelf-content{grid-area:content}.navigation-shelf .navigation-shelf-footer{grid-area:footer}.navigation-shelf .navigation-shelf-side-toggle{--graupl-icon:var(--graupl-navigation-shelf-side-toggle-content,var(--graupl-navigation-shelf-side-toggle-shelf-right-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E")));--graupl-icon-spacer:var(--graupl-navigation-shelf-side-toggle-spacer,0)}.navigation-shelf .navigation-shelf-side-toggle:before{display:var(--graupl-icon-display,inline-block);width:var(--graupl-icon-width,var(--graupl-icon-size,1.25em));height:var(--graupl-icon-height,var(--graupl-icon-size,1.25em));vertical-align:sub;mask-image:var(--graupl-icon,none);content:"";background-position:50%;background-repeat:no-repeat;background-size:contain;margin-inline-end:var(--graupl-icon-spacer,var(--graupl-spacer-2,calc(.25 * var(--graupl-spacer,1rem))));mask-position:50%;mask-size:contain;mask-repeat:no-repeat}.navigation-shelf .navigation-shelf-side-toggle.primary{--graupl-icon-color:var(--graupl-theme-active--primary--500,var(--graupl-theme-default--primary--500,light-dark(var(--graupl-primary--500,#2063df),var(--graupl-primary--500,#2063df))))}.navigation-shelf .navigation-shelf-side-toggle.secondary{--graupl-icon-color:var(--graupl-theme-active--secondary--500,var(--graupl-theme-default--secondary--500,light-dark(var(--graupl-secondary--500,#6c7093),var(--graupl-secondary--500,#6c7093))))}.navigation-shelf .navigation-shelf-side-toggle.tertiary{--graupl-icon-color:var(--graupl-theme-active--tertiary--500,var(--graupl-theme-default--tertiary--500,light-dark(var(--graupl-tertiary--500,#c36),var(--graupl-tertiary--500,#c36))))}.navigation-shelf .navigation-shelf-side-toggle:before{background-color:var(--graupl-icon-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-default--primary--900,light-dark(var(--graupl-primary--900,#001233),var(--graupl-primary--100,#e6eeff)))))))}.navigation-shelf .navigation-shelf-lock-toggle{--graupl-icon:var(--graupl-navigation-shelf-lock-toggle-content,var(--graupl-navigation-shelf-lock-toggle-lock-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M500-640v320l160-160-160-160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E")));--graupl-icon-spacer:var(--graupl-navigation-shelf-lock-toggle-spacer,0)}.navigation-shelf .navigation-shelf-lock-toggle:before{display:var(--graupl-icon-display,inline-block);width:var(--graupl-icon-width,var(--graupl-icon-size,1.25em));height:var(--graupl-icon-height,var(--graupl-icon-size,1.25em));vertical-align:sub;mask-image:var(--graupl-icon,none);content:"";background-position:50%;background-repeat:no-repeat;background-size:contain;margin-inline-end:var(--graupl-icon-spacer,var(--graupl-spacer-2,calc(.25 * var(--graupl-spacer,1rem))));mask-position:50%;mask-size:contain;mask-repeat:no-repeat}.navigation-shelf .navigation-shelf-lock-toggle.primary{--graupl-icon-color:var(--graupl-theme-active--primary--500,var(--graupl-theme-default--primary--500,light-dark(var(--graupl-primary--500,#2063df),var(--graupl-primary--500,#2063df))))}.navigation-shelf .navigation-shelf-lock-toggle.secondary{--graupl-icon-color:var(--graupl-theme-active--secondary--500,var(--graupl-theme-default--secondary--500,light-dark(var(--graupl-secondary--500,#6c7093),var(--graupl-secondary--500,#6c7093))))}.navigation-shelf .navigation-shelf-lock-toggle.tertiary{--graupl-icon-color:var(--graupl-theme-active--tertiary--500,var(--graupl-theme-default--tertiary--500,light-dark(var(--graupl-tertiary--500,#c36),var(--graupl-tertiary--500,#c36))))}.navigation-shelf .navigation-shelf-lock-toggle:before{background-color:var(--graupl-icon-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-default--primary--900,light-dark(var(--graupl-primary--900,#001233),var(--graupl-primary--100,#e6eeff)))))))}.navigation-shelf .navigation-shelf-hover-toggle{--graupl-icon:var(--graupl-navigation-shelf-hover-toggle-content,var(--graupl-navigation-shelf-hover-toggle-enable-hover-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M516-82q-9 2-18 2h-18q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480v18q0 9-2 18l-78-24v-12q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93h12l24 78Zm305 22L650-231 600-80 480-480l400 120-151 50 171 171-79 79Z'/%3E%3C/svg%3E")));--graupl-icon-spacer:var(--graupl-navigation-shelf-hover-toggle-spacer,0)}.navigation-shelf .navigation-shelf-hover-toggle:before{display:var(--graupl-icon-display,inline-block);width:var(--graupl-icon-width,var(--graupl-icon-size,1.25em));height:var(--graupl-icon-height,var(--graupl-icon-size,1.25em));vertical-align:sub;mask-image:var(--graupl-icon,none);content:"";background-position:50%;background-repeat:no-repeat;background-size:contain;margin-inline-end:var(--graupl-icon-spacer,var(--graupl-spacer-2,calc(.25 * var(--graupl-spacer,1rem))));mask-position:50%;mask-size:contain;mask-repeat:no-repeat}.navigation-shelf .navigation-shelf-hover-toggle.primary{--graupl-icon-color:var(--graupl-theme-active--primary--500,var(--graupl-theme-default--primary--500,light-dark(var(--graupl-primary--500,#2063df),var(--graupl-primary--500,#2063df))))}.navigation-shelf .navigation-shelf-hover-toggle.secondary{--graupl-icon-color:var(--graupl-theme-active--secondary--500,var(--graupl-theme-default--secondary--500,light-dark(var(--graupl-secondary--500,#6c7093),var(--graupl-secondary--500,#6c7093))))}.navigation-shelf .navigation-shelf-hover-toggle.tertiary{--graupl-icon-color:var(--graupl-theme-active--tertiary--500,var(--graupl-theme-default--tertiary--500,light-dark(var(--graupl-tertiary--500,#c36),var(--graupl-tertiary--500,#c36))))}.navigation-shelf .navigation-shelf-hover-toggle:before{background-color:var(--graupl-icon-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-default--primary--900,light-dark(var(--graupl-primary--900,#001233),var(--graupl-primary--100,#e6eeff)))))))}
2
2
  /*# sourceMappingURL=navigation-shelf.css.map */
package/dist/css/component/navigation-shelf.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":null,"mappings":"ACwGA,ilGAsBE,gBAtBF,goBA8BE,4HE3HA,uCF6FF,6XAwCE,ygBAWE,oiBAQA,qiBASF,ufAUE,0gBAQA,2gBASF,mgBAQA,+mBAQA,4mBAWA,+pBAWA,gjBAWA,4DAKA,8DAKA,4DAKA,qlBGtPA,qhBEuBE,gMAAA,wMAAA,iMFaF,kQHwOA,2mBG5QA,qhBEuBE,gMAAA,wMAAA,iMFaF,kQH8PA,6tBGlSA,shBEuBE,iMAAA,yMAAA,kMFaF","sources":["dist/css/component/navigation-shelf.css","var/www/html/packages/navigation-shelf/src/scss/component/navigation-shelf/_index.scss","var/www/html/packages/navigation-shelf/src/scss/component/navigation-shelf/_variables.scss","var/www/html/node_modules/@graupl/core/src/scss/mixins/_animation.scss","var/www/html/node_modules/@graupl/icons/src/scss/component/icon/_mixins.scss","var/www/html/node_modules/@graupl/icons/src/scss/component/icon/_variables.scss","var/www/html/node_modules/@graupl/core/src/scss/mixins/_theme.scss"],"sourcesContent":[".navigation-shelf {\n --graupl-navigation-shelf-current-width: var(--graupl-navigation-shelf-width, var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem)));\n display: var(--graupl-navigation-shelf-display, var(--graupl-navigation-shelf-closed-display, grid));\n position: fixed;\n z-index: var(--graupl-navigation-shelf-z-index, 2);\n top: 0;\n bottom: 0;\n grid-template-columns: [header-start content-start footer-start] var(--graupl-navigation-shelf-width, var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem))) [footer-end content-end header-end];\n grid-template-rows: [header-start] auto [header-end content-start] 1fr [content-end footer-start] auto [footer-end];\n width: var(--graupl-navigation-shelf-width, var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem)));\n overflow-x: hidden;\n transform: var(--graupl-navigation-shelf-transform, var(--graupl-navigation-shelf-closed-transform, ));\n transition: var(--graupl-navigation-shelf-transition, width var(--graupl-navigation-shelf-transition-duration, var(--graupl-transition-duration-fast, 150ms)) var(--graupl-transition-timing-function, ease), transform var(--graupl-navigation-shelf-transition-duration, var(--graupl-transition-duration-fast, 150ms)) var(--graupl-transition-timing-function, ease), opacity var(--graupl-navigation-shelf-transition-duration, var(--graupl-transition-duration-fast, 150ms)) var(--graupl-transition-timing-function, ease), display var(--graupl-navigation-shelf-transition-duration, var(--graupl-transition-duration-fast, 150ms)) allow-discrete);\n border-width: var(--graupl-navigation-shelf-border-width, var(--graupl-navigation-shelf-border-top-width, 0) var(--graupl-navigation-shelf-border-right-width, 0) var(--graupl-navigation-shelf-border-bottom-width, 0) var(--graupl-navigation-shelf-border-left-width, 0));\n border-style: var(--graupl-navigation-shelf-border-style, var(--graupl-navigation-shelf-border-top-style, var(--graupl-border-top-style, var(--graupl-border-style, solid))) var(--graupl-navigation-shelf-border-right-style, var(--graupl-border-right-style, var(--graupl-border-style, solid))) var(--graupl-navigation-shelf-border-bottom-style, var(--graupl-border-bottom-style, var(--graupl-border-style, solid))) var(--graupl-navigation-shelf-border-left-style, var(--graupl-border-left-style, var(--graupl-border-style, solid))));\n border-color: var(--graupl-navigation-shelf-border-color, var(--graupl-navigation-shelf-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))));\n opacity: var(--graupl-navigation-shelf-opacity, var(--graupl-navigation-shelf-closed-opacity, 1));\n background: var(--graupl-navigation-shelf-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-navigation-shelf-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))));\n isolation: isolate;\n}\n@starting-style {\n .navigation-shelf {\n display: var(--graupl-navigation-shelf-starting-display, var(--graupl-navigation-shelf-display, var(--graupl-navigation-shelf-closed-display, grid)));\n width: var(--graupl-navigation-shelf-starting-width, var(--graupl-navigation-shelf-width, var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem))));\n transform: var(--graupl-navigation-shelf-starting-transform, var(--graupl-navigation-shelf-transform, var(--graupl-navigation-shelf-closed-transform, )));\n opacity: var(--graupl-navigation-shelf-starting-opacity, var(--graupl-navigation-shelf-opacity, var(--graupl-navigation-shelf-closed-opacity, 1)));\n }\n}\n.navigation-shelf.initializing {\n --graupl-navigation-shelf-transition: --graupl-navigation-shelf-transition-initializing, none;\n}\n@media (prefers-reduced-motion: reduce) {\n .navigation-shelf {\n --graupl-navigation-shelf-transition: var(--graupl-navigation-shelf-transition-reduced-motion, opacity var(--graupl-navigation-shelf-transition-duration, var(--graupl-transition-duration-fast, 150ms)) var(--graupl-transition-timing-function, ease), display var(--graupl-navigation-shelf-transition-duration, var(--graupl-transition-duration-fast, 150ms)) allow-discrete);\n }\n}\n.navigation-shelf, .navigation-shelf.left-side {\n --graupl-navigation-shelf-side-toggle-content: var(\n --graupl-navigation-shelf-side-toggle-shelf-right-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E\")\n );\n right: auto;\n left: 0;\n}\n.navigation-shelf.locked, .navigation-shelf.left-side.locked {\n --graupl-navigation-shelf-lock-toggle-content: var(\n --graupl-navigation-shelf-lock-toggle-unlock-right-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M660-320v-320L500-480l160 160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E\")\n );\n}\n.navigation-shelf.unlocked, .navigation-shelf.left-side.unlocked {\n --graupl-navigation-shelf-lock-toggle-content: var(\n --graupl-navigation-shelf-lock-toggle-lock-right-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M500-640v320l160-160-160-160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E\")\n );\n}\n.navigation-shelf.right-side {\n --graupl-navigation-shelf-side-toggle-content: var(\n --graupl-navigation-shelf-side-toggle-shelf-left-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E\")\n );\n right: 0;\n left: auto;\n}\n.navigation-shelf.right-side.locked {\n --graupl-navigation-shelf-lock-toggle-content: var(\n --graupl-navigation-shelf-lock-toggle-unlock-left-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M300-640v320l160-160-160-160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E\")\n );\n}\n.navigation-shelf.right-side.unlocked {\n --graupl-navigation-shelf-lock-toggle-content: var(\n --graupl-navigation-shelf-lock-toggle-lock-left-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M460-320v-320L300-480l160 160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E\")\n );\n}\n.navigation-shelf.hoverable {\n --graupl-navigation-shelf-hover-toggle-content: var(\n --graupl-navigation-shelf-hover-toggle-disable-hover-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M468-240q-96-5-162-74t-66-166q0-100 70-170t170-70q97 0 166 66t74 162l-84-25q-13-54-56-88.5T480-640q-66 0-113 47t-47 113q0 57 34.5 100t88.5 56l25 84ZM821-60 650-231 600-80 480-480l400 120-151 50 171 171-79 79Z'/%3E%3C/svg%3E\")\n );\n}\n.navigation-shelf.not-hoverable {\n --graupl-navigation-shelf-hover-toggle-content: var(\n --graupl-navigation-shelf-hover-toggle-enable-hover-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M516-82q-9 2-18 2h-18q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480v18q0 9-2 18l-78-24v-12q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93h12l24 78Zm305 22L650-231 600-80 480-480l400 120-151 50 171 171-79 79Z'/%3E%3C/svg%3E\")\n );\n}\n.navigation-shelf.hide {\n --graupl-navigation-shelf-current-width: var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem));\n display: var(--graupl-navigation-shelf-closed-display, grid);\n grid-template-columns: [header-start content-start footer-start] var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem)) [footer-end content-end header-end];\n width: var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem));\n transform: var(--graupl-navigation-shelf-closed-transform, );\n opacity: var(--graupl-navigation-shelf-closed-opacity, 1);\n}\n.navigation-shelf.transitioning {\n --graupl-navigation-shelf-current-width: var(--graupl-navigation-shelf-transitioning-width, var(--graupl-navigation-shelf-min-width, 3.5rem));\n display: var(--graupl-navigation-shelf-transitioning-display, grid);\n grid-template-columns: [header-start content-start footer-start] var(--graupl-navigation-shelf-transitioning-width, var(--graupl-navigation-shelf-min-width, 3.5rem)) [footer-end content-end header-end];\n width: var(--graupl-navigation-shelf-transitioning-width, var(--graupl-navigation-shelf-min-width, 3.5rem));\n transform: var(--graupl-navigation-shelf-transitioning-transform, );\n opacity: var(--graupl-navigation-shelf-transitioning-opacity, 1);\n}\n.navigation-shelf.show {\n --graupl-navigation-shelf-current-width: var(--graupl-navigation-shelf-open-width, var(--graupl-navigation-shelf-max-width, 36ch));\n display: var(--graupl-navigation-shelf-open-display, grid);\n grid-template-columns: [header-start content-start footer-start] var(--graupl-navigation-shelf-max-width, 36ch) [footer-end content-end header-end];\n width: var(--graupl-navigation-shelf-open-width, var(--graupl-navigation-shelf-max-width, 36ch));\n transform: var(--graupl-navigation-shelf-open-transform, );\n opacity: var(--graupl-navigation-shelf-open-opacity, 1);\n}\n.navigation-shelf .navigation-shelf-header {\n grid-area: header;\n}\n.navigation-shelf .navigation-shelf-content {\n grid-area: content;\n}\n.navigation-shelf .navigation-shelf-footer {\n grid-area: footer;\n}\n.navigation-shelf .navigation-shelf-side-toggle {\n --graupl-icon: var(\n --graupl-navigation-shelf-side-toggle-content,\n var(\n --graupl-navigation-shelf-side-toggle-shelf-right-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E\")\n )\n );\n --graupl-icon-spacer: var(\n --graupl-navigation-shelf-side-toggle-spacer,\n 0\n );\n}\n.navigation-shelf .navigation-shelf-side-toggle::before {\n display: var(--graupl-icon-display, inline-block);\n width: var(--graupl-icon-width, var(--graupl-icon-size, 1.25em));\n height: var(--graupl-icon-height, var(--graupl-icon-size, 1.25em));\n background-repeat: no-repeat;\n background-position: center;\n background-size: contain;\n vertical-align: sub;\n mask-image: var(--graupl-icon, none);\n mask-repeat: no-repeat;\n mask-size: contain;\n mask-position: center;\n content: \"\";\n margin-inline-end: var(--graupl-icon-spacer, var(--graupl-spacer-2, calc(0.25 * var(--graupl-spacer, 1rem))));\n}\n.navigation-shelf .navigation-shelf-side-toggle.primary {\n --graupl-icon-color: var(--graupl-theme-active--primary--500, var(--graupl-theme-light--primary--500, var(--graupl-primary--500, hsl(219, 75%, 50%))));\n}\n.navigation-shelf .navigation-shelf-side-toggle.secondary {\n --graupl-icon-color: var(--graupl-theme-active--secondary--500, var(--graupl-theme-light--secondary--500, var(--graupl-secondary--500, hsl(235, 15%, 50%))));\n}\n.navigation-shelf .navigation-shelf-side-toggle.tertiary {\n --graupl-icon-color: var(--graupl-theme-active--tertiary--500, var(--graupl-theme-light--tertiary--500, var(--graupl-tertiary--500, hsl(340, 60%, 50%))));\n}\n.navigation-shelf .navigation-shelf-side-toggle::before {\n background-color: var(--graupl-icon-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))));\n}\n.navigation-shelf .navigation-shelf-lock-toggle {\n --graupl-icon: var(\n --graupl-navigation-shelf-lock-toggle-content,\n var(\n --graupl-navigation-shelf-lock-toggle-lock-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M500-640v320l160-160-160-160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E\")\n )\n );\n --graupl-icon-spacer: var(\n --graupl-navigation-shelf-lock-toggle-spacer,\n 0\n );\n}\n.navigation-shelf .navigation-shelf-lock-toggle::before {\n display: var(--graupl-icon-display, inline-block);\n width: var(--graupl-icon-width, var(--graupl-icon-size, 1.25em));\n height: var(--graupl-icon-height, var(--graupl-icon-size, 1.25em));\n background-repeat: no-repeat;\n background-position: center;\n background-size: contain;\n vertical-align: sub;\n mask-image: var(--graupl-icon, none);\n mask-repeat: no-repeat;\n mask-size: contain;\n mask-position: center;\n content: \"\";\n margin-inline-end: var(--graupl-icon-spacer, var(--graupl-spacer-2, calc(0.25 * var(--graupl-spacer, 1rem))));\n}\n.navigation-shelf .navigation-shelf-lock-toggle.primary {\n --graupl-icon-color: var(--graupl-theme-active--primary--500, var(--graupl-theme-light--primary--500, var(--graupl-primary--500, hsl(219, 75%, 50%))));\n}\n.navigation-shelf .navigation-shelf-lock-toggle.secondary {\n --graupl-icon-color: var(--graupl-theme-active--secondary--500, var(--graupl-theme-light--secondary--500, var(--graupl-secondary--500, hsl(235, 15%, 50%))));\n}\n.navigation-shelf .navigation-shelf-lock-toggle.tertiary {\n --graupl-icon-color: var(--graupl-theme-active--tertiary--500, var(--graupl-theme-light--tertiary--500, var(--graupl-tertiary--500, hsl(340, 60%, 50%))));\n}\n.navigation-shelf .navigation-shelf-lock-toggle::before {\n background-color: var(--graupl-icon-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))));\n}\n.navigation-shelf .navigation-shelf-hover-toggle {\n --graupl-icon: var(\n --graupl-navigation-shelf-hover-toggle-content,\n var(\n --graupl-navigation-shelf-hover-toggle-enable-hover-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M516-82q-9 2-18 2h-18q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480v18q0 9-2 18l-78-24v-12q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93h12l24 78Zm305 22L650-231 600-80 480-480l400 120-151 50 171 171-79 79Z'/%3E%3C/svg%3E\")\n )\n );\n --graupl-icon-spacer: var(\n --graupl-navigation-shelf-hover-toggle-spacer,\n 0\n );\n}\n.navigation-shelf .navigation-shelf-hover-toggle::before {\n display: var(--graupl-icon-display, inline-block);\n width: var(--graupl-icon-width, var(--graupl-icon-size, 1.25em));\n height: var(--graupl-icon-height, var(--graupl-icon-size, 1.25em));\n background-repeat: no-repeat;\n background-position: center;\n background-size: contain;\n vertical-align: sub;\n mask-image: var(--graupl-icon, none);\n mask-repeat: no-repeat;\n mask-size: contain;\n mask-position: center;\n content: \"\";\n margin-inline-end: var(--graupl-icon-spacer, var(--graupl-spacer-2, calc(0.25 * var(--graupl-spacer, 1rem))));\n}\n.navigation-shelf .navigation-shelf-hover-toggle.primary {\n --graupl-icon-color: var(--graupl-theme-active--primary--500, var(--graupl-theme-light--primary--500, var(--graupl-primary--500, hsl(219, 75%, 50%))));\n}\n.navigation-shelf .navigation-shelf-hover-toggle.secondary {\n --graupl-icon-color: var(--graupl-theme-active--secondary--500, var(--graupl-theme-light--secondary--500, var(--graupl-secondary--500, hsl(235, 15%, 50%))));\n}\n.navigation-shelf .navigation-shelf-hover-toggle.tertiary {\n --graupl-icon-color: var(--graupl-theme-active--tertiary--500, var(--graupl-theme-light--tertiary--500, var(--graupl-tertiary--500, hsl(340, 60%, 50%))));\n}\n.navigation-shelf .navigation-shelf-hover-toggle::before {\n background-color: var(--graupl-icon-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))));\n}","// @graupl/navigation-shelf navigation shelf component styles.\n//\n// This module provides navigation shelf component styles.\n//\n// The following custom properties can be used to customize the navigation shelf component:\n// | Property | Description | Default Value |\n// | ----------------------------------------------------- | ----------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n// | `--graupl-navigation-shelf-background` | Value for navigation shelf background. | var(--graupl-background) |\n// | `--graupl-navigation-shelf-color` | Value for navigation shelf color. | var(--graupl-color) |\n// | `--graupl-navigation-shelf-z-index` | Value for navigation shelf z index. | 2 |\n// | `--graupl-navigation-shelf-border-top-style` | Value for navigation shelf border top style. | var(--graupl-border-top-style) |\n// | `--graupl-navigation-shelf-border-right-style` | Value for navigation shelf border right style. | var(--graupl-border-right-style) |\n// | `--graupl-navigation-shelf-border-bottom-style` | Value for navigation shelf border bottom style. | var(--graupl-border-bottom-style) |\n// | `--graupl-navigation-shelf-border-left-style` | Value for navigation shelf border left style. | var(--graupl-border-left-style) |\n// | `--graupl-navigation-shelf-border-style` | Value for navigation shelf border style. | var(--graupl-navigation-shelf-border-top-style) var(--graupl-navigation-shelf-border-right-style) var(--graupl-navigation-shelf-border-bottom-style) var(--graupl-navigation-shelf-border-left-style) |\n// | `--graupl-navigation-shelf-border-top-width` | Value for navigation shelf border top width. | 0 |\n// | `--graupl-navigation-shelf-border-right-width` | Value for navigation shelf border right width. | 0 |\n// | `--graupl-navigation-shelf-border-bottom-width` | Value for navigation shelf border bottom width. | 0 |\n// | `--graupl-navigation-shelf-border-left-width` | Value for navigation shelf border left width. | 0 |\n// | `--graupl-navigation-shelf-border-width` | Value for navigation shelf border width. | var(--graupl-navigation-shelf-border-top-width) var(--graupl-navigation-shelf-border-right-width) var(--graupl-navigation-shelf-border-bottom-width) var(--graupl-navigation-shelf-border-left-width) |\n// | `--graupl-navigation-shelf-border-color` | Value for navigation shelf border color. | var(--graupl-navigation-shelf-color) |\n// | `--graupl-navigation-shelf-closed-transform` | Value for navigation shelf closed transform. | null |\n// | `--graupl-navigation-shelf-open-transform` | Value for navigation shelf open transform. | null |\n// | `--graupl-navigation-shelf-transitioning-transform` | Value for navigation shelf transitioning transform. | null |\n// | `--graupl-navigation-shelf-transform` | Value for navigation shelf transform. | var(--graupl-navigation-shelf-closed-transform) |\n// | `--graupl-navigation-shelf-starting-transform` | Value for navigation shelf starting transform. | var(--graupl-navigation-shelf-transform) |\n// | `--graupl-navigation-shelf-min-width` | Value for navigation shelf min width. | 3.5rem |\n// | `--graupl-navigation-shelf-max-width` | Value for navigation shelf max width. | 36ch |\n// | `--graupl-navigation-shelf-closed-width` | Value for navigation shelf closed width. | var(--graupl-navigation-shelf-min-width) |\n// | `--graupl-navigation-shelf-open-width` | Value for navigation shelf open width. | var(--graupl-navigation-shelf-max-width) |\n// | `--graupl-navigation-shelf-transitioning-width` | Value for navigation shelf transitioning width. | var(--graupl-navigation-shelf-min-width) |\n// | `--graupl-navigation-shelf-width` | Value for navigation shelf width. | var(--graupl-navigation-shelf-closed-width) |\n// | `--graupl-navigation-shelf-starting-width` | Value for navigation shelf starting width. | var(--graupl-navigation-shelf-width) |\n// | `--graupl-navigation-shelf-current-width` | Value for navigation shelf current width. | var(--graupl-navigation-shelf-width) |\n// | `--graupl-navigation-shelf-closed-display` | Value for navigation shelf closed display. | grid |\n// | `--graupl-navigation-shelf-open-display` | Value for navigation shelf open display. | grid |\n// | `--graupl-navigation-shelf-transitioning-display` | Value for navigation shelf transitioning display. | grid |\n// | `--graupl-navigation-shelf-display` | Value for navigation shelf display. | var(--graupl-navigation-shelf-closed-display) |\n// | `--graupl-navigation-shelf-starting-display` | Value for navigation shelf starting display. | var(--graupl-navigation-shelf-display) |\n// | `--graupl-navigation-shelf-closed-opacity` | Value for navigation shelf closed opacity. | 1 |\n// | `--graupl-navigation-shelf-open-opacity` | Value for navigation shelf open opacity. | 1 |\n// | `--graupl-navigation-shelf-transitioning-opacity` | Value for navigation shelf transitioning opacity. | 1 |\n// | `--graupl-navigation-shelf-opacity` | Value for navigation shelf opacity. | var(--graupl-navigation-shelf-closed-opacity) |\n// | `--graupl-navigation-shelf-starting-opacity` | Value for navigation shelf starting opacity. | var(--graupl-navigation-shelf-opacity) |\n// | `--graupl-navigation-shelf-transition-duration` | Value for navigation shelf transition duration. | var(--graupl-transition-duration-fast) |\n// | `--graupl-navigation-shelf-transition` | Value for navigation shelf transition. | width var(--graupl-navigation-shelf-transition-duration) var(--graupl-transition-timing-function), transform var(--graupl-navigation-shelf-transition-duration) var(--graupl-transition-timing-function), opacity var(--graupl-navigation-shelf-transition-duration) var(--graupl-transition-timing-function), display var(--graupl-navigation-shelf-transition-duration) allow-discrete |\n// | `--graupl-navigation-shelf-transition-reduced-motion` | Value for navigation shelf transition reduced motion. | opacity var(--graupl-navigation-shelf-transition-duration) var(--graupl-transition-timing-function), display var(--graupl-navigation-shelf-transition-duration) allow-discrete |\n//\n// The following sass variables can be used to customize the generation of the navigation shelf component:\n// | Variable | Description | Default Value |\n// | ----------------------------------------------- | --------------------------------------------------------- | -------------------------------------- |\n// | `$modifier-selector-base` | Default for modifier selector base. | \".\" |\n// | `$navigation-shelf-closed-selector` | Default for navigation shelf closed selector. | \"hide\" |\n// | `$navigation-shelf-closed-selector-base` | Default for navigation shelf closed selector base. | \".\" |\n// | `$navigation-shelf-content-selector` | Default for navigation shelf content selector. | \"navigation-shelf-content\" |\n// | `$navigation-shelf-content-selector-base` | Default for navigation shelf content selector base. | \".\" |\n// | `$navigation-shelf-footer-selector` | Default for navigation shelf footer selector. | \"navigation-shelf-footer\" |\n// | `$navigation-shelf-footer-selector-base` | Default for navigation shelf footer selector base. | \".\" |\n// | `$navigation-shelf-header-selector` | Default for navigation shelf header selector. | \"navigation-shelf-header\" |\n// | `$navigation-shelf-header-selector-base` | Default for navigation shelf header selector base. | \".\" |\n// | `$navigation-shelf-hover-toggle-pseudo-element` | Default for navigation shelf hover toggle pseudo element. | \"before\" |\n// | `$navigation-shelf-hover-toggle-selector` | Default for navigation shelf hover toggle selector. | \"navigation-shelf-hover-toggle\" |\n// | `$navigation-shelf-hover-toggle-selector-base` | Default for navigation shelf hover toggle selector base. | \".\" |\n// | `$navigation-shelf-hoverable-selector` | Default for navigation shelf hoverable selector. | \"hoverable\" |\n// | `$navigation-shelf-hoverable-selector-base` | Default for navigation shelf hoverable selector base. | \".\" |\n// | `$navigation-shelf-icons` | Default for navigation shelf icons. | () |\n// | `$navigation-shelf-initializing-selector` | Default for navigation shelf initializing selector. | \"initializing\" |\n// | `$navigation-shelf-initializing-selector-base` | Default for navigation shelf initializing selector base. | \".\" |\n// | `$navigation-shelf-left-side-selector` | Default for navigation shelf left side selector. | \"left\" |\n// | `$navigation-shelf-lock-toggle-pseudo-element` | Default for navigation shelf lock toggle pseudo element. | \"before\" |\n// | `$navigation-shelf-lock-toggle-selector` | Default for navigation shelf lock toggle selector. | \"navigation-shelf-lock-toggle\" |\n// | `$navigation-shelf-lock-toggle-selector-base` | Default for navigation shelf lock toggle selector base. | \".\" |\n// | `$navigation-shelf-locked-selector` | Default for navigation shelf locked selector. | \"locked\" |\n// | `$navigation-shelf-locked-selector-base` | Default for navigation shelf locked selector base. | \".\" |\n// | `$navigation-shelf-max-width` | Default for navigation shelf max width. | 36ch |\n// | `$navigation-shelf-min-width` | Default for navigation shelf min width. | 3.5rem |\n// | `$navigation-shelf-not-hoverable-selector` | Default for navigation shelf not hoverable selector. | \"not-hoverable\" |\n// | `$navigation-shelf-not-hoverable-selector-base` | Default for navigation shelf not hoverable selector base. | \".\" |\n// | `$navigation-shelf-open-selector` | Default for navigation shelf open selector. | \"show\" |\n// | `$navigation-shelf-open-selector-base` | Default for navigation shelf open selector base. | \".\" |\n// | `$navigation-shelf-right-side-selector` | Default for navigation shelf right side selector. | \"right\" |\n// | `$navigation-shelf-selector` | Default for navigation shelf selector. | \"navigation-shelf\" |\n// | `$navigation-shelf-selector-base` | Default for navigation shelf selector base. | \".\" |\n// | `$navigation-shelf-side-selector-base` | Default for navigation shelf side selector base. | \".\" |\n// | `$navigation-shelf-side-selector-suffix` | Default for navigation shelf side selector suffix. | \"-side\" |\n// | `$navigation-shelf-side-toggle-pseudo-element` | Default for navigation shelf side toggle pseudo element. | \"before\" |\n// | `$navigation-shelf-side-toggle-selector` | Default for navigation shelf side toggle selector. | \"navigation-shelf-side-toggle\" |\n// | `$navigation-shelf-side-toggle-selector-base` | Default for navigation shelf side toggle selector base. | \".\" |\n// | `$navigation-shelf-transitioning-selector` | Default for navigation shelf transitioning selector. | \"transitioning\" |\n// | `$navigation-shelf-transitioning-selector-base` | Default for navigation shelf transitioning selector base. | \".\" |\n// | `$navigation-shelf-unlocked-selector` | Default for navigation shelf unlocked selector. | \"unlocked\" |\n// | `$navigation-shelf-unlocked-selector-base` | Default for navigation shelf unlocked selector base. | \".\" |\n// | `$navigation-shelf-z-index` | Default for navigation shelf z index. | 2 |\n// | `$selector-base` | Default for selector base. | \".\" |\n// | `$show-warnings` | Default for show warnings. | true |\n//\n@use \"pkg:@graupl/icons/src/component/icon/mixins\" as icon-mixins;\n@use \"pkg:@graupl/core/src/defaults\" as root-defaults;\n@use \"pkg:@graupl/core/src/mixins/animation\";\n@use \"defaults\";\n@use \"variables\" as *;\n@use \"sass:map\";\n\n// `.navigation-shelf`\n#{defaults.$navigation-shelf-selector-base}#{defaults.$navigation-shelf-selector} {\n --#{root-defaults.$prefix}navigation-shelf-current-width: #{$navigation-shelf-width};\n\n display: $navigation-shelf-display;\n position: fixed;\n z-index: $navigation-shelf-z-index;\n top: 0;\n bottom: 0;\n grid-template-columns: [header-start content-start footer-start] $navigation-shelf-width [footer-end content-end header-end];\n grid-template-rows: [header-start] auto [header-end content-start] 1fr [content-end footer-start] auto [footer-end];\n width: $navigation-shelf-width;\n overflow-x: hidden;\n transform: $navigation-shelf-transform;\n transition: $navigation-shelf-transition;\n border-width: $navigation-shelf-border-width;\n border-style: $navigation-shelf-border-style;\n border-color: $navigation-shelf-border-color;\n opacity: $navigation-shelf-opacity;\n background: $navigation-shelf-background;\n color: $navigation-shelf-color;\n isolation: isolate;\n\n @starting-style {\n display: $navigation-shelf-starting-display;\n width: $navigation-shelf-starting-width;\n transform: $navigation-shelf-starting-transform;\n opacity: $navigation-shelf-starting-opacity;\n }\n\n // &.initializing\n &#{defaults.$navigation-shelf-initializing-selector-base}#{defaults.$navigation-shelf-initializing-selector} {\n --#{root-defaults.$prefix}navigation-shelf-transition: #{$navigation-shelf-transition-initializing};\n }\n\n @include animation.off {\n --#{root-defaults.$prefix}navigation-shelf-transition: #{$navigation-shelf-transition-reduced-motion};\n }\n\n // `&,`\n // `&.left-side`\n &,\n &#{defaults.$navigation-shelf-side-selector-base}#{defaults.$navigation-shelf-left-side-selector}#{defaults.$navigation-shelf-side-selector-suffix} {\n --#{root-defaults.$prefix}navigation-shelf-side-toggle-content: var(\n --#{root-defaults.$prefix}navigation-shelf-side-toggle-shelf-right-content,\n #{map.get(defaults.$navigation-shelf-icons, \"shelf-right\")}\n );\n\n right: auto;\n left: 0;\n\n // `&.locked`\n &#{defaults.$navigation-shelf-locked-selector-base}#{defaults.$navigation-shelf-locked-selector} {\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-content: var(\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-unlock-right-content,\n #{map.get(defaults.$navigation-shelf-icons, \"unlock-right\")}\n );\n }\n\n // `&.unlocked`\n &#{defaults.$navigation-shelf-unlocked-selector-base}#{defaults.$navigation-shelf-unlocked-selector} {\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-content: var(\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-lock-right-content,\n #{map.get(defaults.$navigation-shelf-icons, \"lock-right\")}\n );\n }\n }\n\n // `&.right-side`\n &#{defaults.$navigation-shelf-side-selector-base}#{defaults.$navigation-shelf-right-side-selector}#{defaults.$navigation-shelf-side-selector-suffix} {\n --#{root-defaults.$prefix}navigation-shelf-side-toggle-content: var(\n --#{root-defaults.$prefix}navigation-shelf-side-toggle-shelf-left-content,\n #{map.get(defaults.$navigation-shelf-icons, \"shelf-left\")}\n );\n\n right: 0;\n left: auto;\n\n // `&.locked`\n &#{defaults.$navigation-shelf-locked-selector-base}#{defaults.$navigation-shelf-locked-selector} {\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-content: var(\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-unlock-left-content,\n #{map.get(defaults.$navigation-shelf-icons, \"unlock-left\")}\n );\n }\n\n // `&.unlocked`\n &#{defaults.$navigation-shelf-unlocked-selector-base}#{defaults.$navigation-shelf-unlocked-selector} {\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-content: var(\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-lock-left-content,\n #{map.get(defaults.$navigation-shelf-icons, \"lock-left\")}\n );\n }\n }\n\n // `&.hoverable`\n &#{defaults.$navigation-shelf-hoverable-selector-base}#{defaults.$navigation-shelf-hoverable-selector} {\n --#{root-defaults.$prefix}navigation-shelf-hover-toggle-content: var(\n --#{root-defaults.$prefix}navigation-shelf-hover-toggle-disable-hover-content,\n #{map.get(defaults.$navigation-shelf-icons, \"disable-hover\")}\n );\n }\n\n // `&.not-hoverable`\n &#{defaults.$navigation-shelf-not-hoverable-selector-base}#{defaults.$navigation-shelf-not-hoverable-selector} {\n --#{root-defaults.$prefix}navigation-shelf-hover-toggle-content: var(\n --#{root-defaults.$prefix}navigation-shelf-hover-toggle-enable-hover-content,\n #{map.get(defaults.$navigation-shelf-icons, \"enable-hover\")}\n );\n }\n\n // `&.hide`\n &#{defaults.$navigation-shelf-closed-selector-base}#{defaults.$navigation-shelf-closed-selector} {\n --#{root-defaults.$prefix}navigation-shelf-current-width: #{$navigation-shelf-closed-width};\n\n display: $navigation-shelf-closed-display;\n grid-template-columns: [header-start content-start footer-start] $navigation-shelf-closed-width [footer-end content-end header-end];\n width: $navigation-shelf-closed-width;\n transform: $navigation-shelf-closed-transform;\n opacity: $navigation-shelf-closed-opacity;\n }\n\n // `&.transitioning`\n &#{defaults.$navigation-shelf-transitioning-selector-base}#{defaults.$navigation-shelf-transitioning-selector} {\n --#{root-defaults.$prefix}navigation-shelf-current-width: #{$navigation-shelf-transitioning-width};\n\n display: $navigation-shelf-transitioning-display;\n grid-template-columns: [header-start content-start footer-start] $navigation-shelf-transitioning-width [footer-end content-end header-end];\n width: $navigation-shelf-transitioning-width;\n transform: $navigation-shelf-transitioning-transform;\n opacity: $navigation-shelf-transitioning-opacity;\n }\n\n // `&.show`\n &#{defaults.$navigation-shelf-open-selector-base}#{defaults.$navigation-shelf-open-selector} {\n --#{root-defaults.$prefix}navigation-shelf-current-width: #{$navigation-shelf-open-width};\n\n display: $navigation-shelf-open-display;\n grid-template-columns: [header-start content-start footer-start] $navigation-shelf-max-width [footer-end content-end header-end];\n width: $navigation-shelf-open-width;\n transform: $navigation-shelf-open-transform;\n opacity: $navigation-shelf-open-opacity;\n }\n\n // `.navigation-shelf-header`\n #{defaults.$navigation-shelf-header-selector-base}#{defaults.$navigation-shelf-header-selector} {\n grid-area: header;\n }\n\n // `.navigation-shelf-content`\n #{defaults.$navigation-shelf-content-selector-base}#{defaults.$navigation-shelf-content-selector} {\n grid-area: content;\n }\n\n // `.navigation-shelf-footer`\n #{defaults.$navigation-shelf-footer-selector-base}#{defaults.$navigation-shelf-footer-selector} {\n grid-area: footer;\n }\n\n // `.navigation-shelf-side-toggle`\n #{defaults.$navigation-shelf-side-toggle-selector-base}#{defaults.$navigation-shelf-side-toggle-selector} {\n --#{root-defaults.$prefix}icon: var(\n --#{root-defaults.$prefix}navigation-shelf-side-toggle-content,\n var(\n --#{root-defaults.$prefix}navigation-shelf-side-toggle-shelf-right-content,\n #{map.get(defaults.$navigation-shelf-icons, \"shelf-right\")}\n )\n );\n --#{root-defaults.$prefix}icon-spacer: var(\n --#{root-defaults.$prefix}navigation-shelf-side-toggle-spacer,\n 0\n );\n\n @include icon-mixins.apply-component(\n #{defaults.$navigation-shelf-side-toggle-pseudo-element}\n );\n @include icon-mixins.apply-theme(\n #{defaults.$navigation-shelf-side-toggle-pseudo-element}\n );\n }\n\n // `.navigation-shelf-lock-toggle`\n #{defaults.$navigation-shelf-lock-toggle-selector-base}#{defaults.$navigation-shelf-lock-toggle-selector} {\n --#{root-defaults.$prefix}icon: var(\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-content,\n var(\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-lock-content,\n #{map.get(defaults.$navigation-shelf-icons, \"lock-right\")}\n )\n );\n --#{root-defaults.$prefix}icon-spacer: var(\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-spacer,\n 0\n );\n\n @include icon-mixins.apply-component(\n #{defaults.$navigation-shelf-lock-toggle-pseudo-element}\n );\n @include icon-mixins.apply-theme(\n #{defaults.$navigation-shelf-lock-toggle-pseudo-element}\n );\n }\n\n // `.navigation-shelf-hover-toggle`\n #{defaults.$navigation-shelf-hover-toggle-selector-base}#{defaults.$navigation-shelf-hover-toggle-selector} {\n --#{root-defaults.$prefix}icon: var(\n --#{root-defaults.$prefix}navigation-shelf-hover-toggle-content,\n var(\n --#{root-defaults.$prefix}navigation-shelf-hover-toggle-enable-hover-content,\n #{map.get(defaults.$navigation-shelf-icons, \"enable-hover\")}\n )\n );\n --#{root-defaults.$prefix}icon-spacer: var(\n --#{root-defaults.$prefix}navigation-shelf-hover-toggle-spacer,\n 0\n );\n\n @include icon-mixins.apply-component(\n #{defaults.$navigation-shelf-hover-toggle-pseudo-element}\n );\n @include icon-mixins.apply-theme(\n #{defaults.$navigation-shelf-hover-toggle-pseudo-element}\n );\n }\n}\n","// @graupl/navigation-shelf navigation shelf component variables.\n//\n// These values are to be used to directly style components and provide a\n// cleaner way to reference custom properties.\n//\n// Custom property defaults:\n// | Custom property | Default |\n// | --------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n// | --graupl-navigation-shelf-background | var(--graupl-background) |\n// | --graupl-navigation-shelf-color | var(--graupl-color) |\n// | --graupl-navigation-shelf-z-index | 2 |\n// | --graupl-navigation-shelf-border-top-style | var(--graupl-border-top-style) |\n// | --graupl-navigation-shelf-border-right-style | var(--graupl-border-right-style) |\n// | --graupl-navigation-shelf-border-bottom-style | var(--graupl-border-bottom-style) |\n// | --graupl-navigation-shelf-border-left-style | var(--graupl-border-left-style) |\n// | --graupl-navigation-shelf-border-style | var(--graupl-navigation-shelf-border-top-style) var(--graupl-navigation-shelf-border-right-style) var(--graupl-navigation-shelf-border-bottom-style) var(--graupl-navigation-shelf-border-left-style) |\n// | --graupl-navigation-shelf-border-top-width | 0 |\n// | --graupl-navigation-shelf-border-right-width | 0 |\n// | --graupl-navigation-shelf-border-bottom-width | 0 |\n// | --graupl-navigation-shelf-border-left-width | 0 |\n// | --graupl-navigation-shelf-border-width | var(--graupl-navigation-shelf-border-top-width) var(--graupl-navigation-shelf-border-right-width) var(--graupl-navigation-shelf-border-bottom-width) var(--graupl-navigation-shelf-border-left-width) |\n// | --graupl-navigation-shelf-border-color | var(--graupl-navigation-shelf-color) |\n// | --graupl-navigation-shelf-closed-transform | null |\n// | --graupl-navigation-shelf-open-transform | null |\n// | --graupl-navigation-shelf-transitioning-transform | null |\n// | --graupl-navigation-shelf-transform | var(--graupl-navigation-shelf-closed-transform) |\n// | --graupl-navigation-shelf-starting-transform | var(--graupl-navigation-shelf-transform) |\n// | --graupl-navigation-shelf-min-width | 3.5rem |\n// | --graupl-navigation-shelf-max-width | 36ch |\n// | --graupl-navigation-shelf-closed-width | var(--graupl-navigation-shelf-min-width) |\n// | --graupl-navigation-shelf-open-width | var(--graupl-navigation-shelf-max-width) |\n// | --graupl-navigation-shelf-transitioning-width | var(--graupl-navigation-shelf-min-width) |\n// | --graupl-navigation-shelf-width | var(--graupl-navigation-shelf-closed-width) |\n// | --graupl-navigation-shelf-starting-width | var(--graupl-navigation-shelf-width) |\n// | --graupl-navigation-shelf-current-width | var(--graupl-navigation-shelf-width) |\n// | --graupl-navigation-shelf-closed-display | grid |\n// | --graupl-navigation-shelf-open-display | grid |\n// | --graupl-navigation-shelf-transitioning-display | grid |\n// | --graupl-navigation-shelf-display | var(--graupl-navigation-shelf-closed-display) |\n// | --graupl-navigation-shelf-starting-display | var(--graupl-navigation-shelf-display) |\n// | --graupl-navigation-shelf-closed-opacity | 1 |\n// | --graupl-navigation-shelf-open-opacity | 1 |\n// | --graupl-navigation-shelf-transitioning-opacity | 1 |\n// | --graupl-navigation-shelf-opacity | var(--graupl-navigation-shelf-closed-opacity) |\n// | --graupl-navigation-shelf-starting-opacity | var(--graupl-navigation-shelf-opacity) |\n// | --graupl-navigation-shelf-transition-duration | var(--graupl-transition-duration-fast) |\n// | --graupl-navigation-shelf-transition | width var(--graupl-navigation-shelf-transition-duration) var(--graupl-transition-timing-function), transform var(--graupl-navigation-shelf-transition-duration) var(--graupl-transition-timing-function), opacity var(--graupl-navigation-shelf-transition-duration) var(--graupl-transition-timing-function), display var(--graupl-navigation-shelf-transition-duration) allow-discrete |\n// | --graupl-navigation-shelf-transition-reduced-motion | opacity var(--graupl-navigation-shelf-transition-duration) var(--graupl-transition-timing-function), display var(--graupl-navigation-shelf-transition-duration) allow-discrete |\n\n@use \"defaults\";\n@use \"pkg:@graupl/core/src/variables\" as root-variables;\n@use \"pkg:@graupl/core/src/defaults\" as root-defaults;\n@use \"pkg:@graupl/core/src/theme/color/variables\" as color;\n@use \"sass:map\";\n\n// Navigation shelf properties.\n// --graupl-navigation-shelf-background\n$navigation-shelf-background: var(\n --#{root-defaults.$prefix}navigation-shelf-background,\n #{color.$background}\n);\n\n// --graupl-navigation-shelf-color\n$navigation-shelf-color: var(\n --#{root-defaults.$prefix}navigation-shelf-color,\n #{color.$color}\n);\n\n// --graupl-navigation-shelf-z-index\n$navigation-shelf-z-index: var(\n --#{root-defaults.$prefix}navigation-shelf-z-index,\n #{defaults.$navigation-shelf-z-index}\n);\n\n// Border properties.\n// --graupl-navigation-shelf-border-top-style\n$navigation-shelf-border-top-style: var(\n --#{root-defaults.$prefix}navigation-shelf-border-top-style,\n #{root-variables.$border-top-style}\n);\n\n// --graupl-navigation-shelf-border-right-style\n$navigation-shelf-border-right-style: var(\n --#{root-defaults.$prefix}navigation-shelf-border-right-style,\n #{root-variables.$border-right-style}\n);\n\n// --graupl-navigation-shelf-border-bottom-style\n$navigation-shelf-border-bottom-style: var(\n --#{root-defaults.$prefix}navigation-shelf-border-bottom-style,\n #{root-variables.$border-bottom-style}\n);\n\n// --graupl-navigation-shelf-border-left-style\n$navigation-shelf-border-left-style: var(\n --#{root-defaults.$prefix}navigation-shelf-border-left-style,\n #{root-variables.$border-left-style}\n);\n\n// --graupl-navigation-shelf-border-style\n$navigation-shelf-border-style: var(\n --#{root-defaults.$prefix}navigation-shelf-border-style,\n #{$navigation-shelf-border-top-style} #{$navigation-shelf-border-right-style}\n #{$navigation-shelf-border-bottom-style}\n #{$navigation-shelf-border-left-style}\n);\n\n// --graupl-navigation-shelf-border-top-width\n$navigation-shelf-border-top-width: var(\n --#{root-defaults.$prefix}navigation-shelf-border-top-width,\n 0\n);\n\n// --graupl-navigation-shelf-border-right-width\n$navigation-shelf-border-right-width: var(\n --#{root-defaults.$prefix}navigation-shelf-border-right-width,\n 0\n);\n\n// --graupl-navigation-shelf-border-bottom-width\n$navigation-shelf-border-bottom-width: var(\n --#{root-defaults.$prefix}navigation-shelf-border-bottom-width,\n 0\n);\n\n// --graupl-navigation-shelf-border-left-width\n$navigation-shelf-border-left-width: var(\n --#{root-defaults.$prefix}navigation-shelf-border-left-width,\n 0\n);\n\n// --graupl-navigation-shelf-border-width\n$navigation-shelf-border-width: var(\n --#{root-defaults.$prefix}navigation-shelf-border-width,\n #{$navigation-shelf-border-top-width} #{$navigation-shelf-border-right-width}\n #{$navigation-shelf-border-bottom-width}\n #{$navigation-shelf-border-left-width}\n);\n\n// --graupl-navigation-shelf-border-color\n$navigation-shelf-border-color: var(\n --#{root-defaults.$prefix}navigation-shelf-border-color,\n #{$navigation-shelf-color}\n);\n\n// Transform properties.\n// --graupl-navigation-shelf-closed-transform\n$navigation-shelf-closed-transform: var(\n --#{root-defaults.$prefix}navigation-shelf-closed-transform,\n null\n);\n\n// --graupl-navigation-shelf-open-transform\n$navigation-shelf-open-transform: var(\n --#{root-defaults.$prefix}navigation-shelf-open-transform,\n null\n);\n\n// --graupl-navigation-shelf-transitioning-transform\n$navigation-shelf-transitioning-transform: var(\n --#{root-defaults.$prefix}navigation-shelf-transitioning-transform,\n null\n);\n\n// --graupl-navigation-shelf-transform\n$navigation-shelf-transform: var(\n --#{root-defaults.$prefix}navigation-shelf-transform,\n #{$navigation-shelf-closed-transform}\n);\n\n// --graupl-navigation-shelf-starting-transform\n$navigation-shelf-starting-transform: var(\n --#{root-defaults.$prefix}navigation-shelf-starting-transform,\n #{$navigation-shelf-transform}\n);\n\n// Width properties.\n// --graupl-navigation-shelf-min-width\n$navigation-shelf-min-width: var(\n --#{root-defaults.$prefix}navigation-shelf-min-width,\n #{defaults.$navigation-shelf-min-width}\n);\n\n// --graupl-navigation-shelf-max-width\n$navigation-shelf-max-width: var(\n --#{root-defaults.$prefix}navigation-shelf-max-width,\n #{defaults.$navigation-shelf-max-width}\n);\n\n// --graupl-navigation-shelf-closed-width\n$navigation-shelf-closed-width: var(\n --#{root-defaults.$prefix}navigation-shelf-closed-width,\n #{$navigation-shelf-min-width}\n);\n\n// --graupl-navigation-shelf-open-width\n$navigation-shelf-open-width: var(\n --#{root-defaults.$prefix}navigation-shelf-open-width,\n #{$navigation-shelf-max-width}\n);\n\n// --graupl-navigation-shelf-transitioning-width\n$navigation-shelf-transitioning-width: var(\n --#{root-defaults.$prefix}navigation-shelf-transitioning-width,\n #{$navigation-shelf-min-width}\n);\n\n// --graupl-navigation-shelf-width\n$navigation-shelf-width: var(\n --#{root-defaults.$prefix}navigation-shelf-width,\n #{$navigation-shelf-closed-width}\n);\n\n// --graupl-navigation-shelf-starting-width\n$navigation-shelf-starting-width: var(\n --#{root-defaults.$prefix}navigation-shelf-starting-width,\n #{$navigation-shelf-width}\n);\n\n// --graupl-navigation-shelf-current-width\n$navigation-shelf-current-width: var(\n --#{root-defaults.$prefix}navigation-shelf-current-width,\n #{$navigation-shelf-width}\n);\n\n// Display properties.\n// --graupl-navigation-shelf-closed-display\n$navigation-shelf-closed-display: var(\n --#{root-defaults.$prefix}navigation-shelf-closed-display,\n grid\n);\n\n// --graupl-navigation-shelf-open-display\n$navigation-shelf-open-display: var(\n --#{root-defaults.$prefix}navigation-shelf-open-display,\n grid\n);\n\n// --graupl-navigation-shelf-transitioning-display\n$navigation-shelf-transitioning-display: var(\n --#{root-defaults.$prefix}navigation-shelf-transitioning-display,\n grid\n);\n\n// --graupl-navigation-shelf-display\n$navigation-shelf-display: var(\n --#{root-defaults.$prefix}navigation-shelf-display,\n #{$navigation-shelf-closed-display}\n);\n\n// --graupl-navigation-shelf-starting-display\n$navigation-shelf-starting-display: var(\n --#{root-defaults.$prefix}navigation-shelf-starting-display,\n #{$navigation-shelf-display}\n);\n\n// Opacity properties.\n// --graupl-navigation-shelf-closed-opacity\n$navigation-shelf-closed-opacity: var(\n --#{root-defaults.$prefix}navigation-shelf-closed-opacity,\n 1\n);\n\n// --graupl-navigation-shelf-open-opacity\n$navigation-shelf-open-opacity: var(\n --#{root-defaults.$prefix}navigation-shelf-open-opacity,\n 1\n);\n\n// --graupl-navigation-shelf-transitioning-opacity\n$navigation-shelf-transitioning-opacity: var(\n --#{root-defaults.$prefix}navigation-shelf-transitioning-opacity,\n 1\n);\n\n// --graupl-navigation-shelf-opacity\n$navigation-shelf-opacity: var(\n --#{root-defaults.$prefix}navigation-shelf-opacity,\n #{$navigation-shelf-closed-opacity}\n);\n\n// --graupl-navigation-shelf-starting-opacity\n$navigation-shelf-starting-opacity: var(\n --#{root-defaults.$prefix}navigation-shelf-starting-opacity,\n #{$navigation-shelf-opacity}\n);\n\n// Transition properties.\n// --graupl-navigation-shelf-transition-duration\n$navigation-shelf-transition-duration: var(\n --#{root-defaults.$prefix}navigation-shelf-transition-duration,\n #{map.get(root-variables.$transition-durations, fast)}\n);\n\n// --graupl-navigation-shelf-transition\n$navigation-shelf-transition: var(\n --#{root-defaults.$prefix}navigation-shelf-transition,\n width #{$navigation-shelf-transition-duration}\n #{root-variables.$transition-timing-function},\n transform #{$navigation-shelf-transition-duration}\n #{root-variables.$transition-timing-function},\n opacity #{$navigation-shelf-transition-duration}\n #{root-variables.$transition-timing-function},\n display #{$navigation-shelf-transition-duration} allow-discrete\n);\n$navigation-shelf-transition-initializing: (\n --#{root-defaults.$prefix}navigation-shelf-transition-initializing,\n none\n);\n\n// --graupl-navigation-shelf-transition-reduced-motion\n$navigation-shelf-transition-reduced-motion: var(\n --#{root-defaults.$prefix}navigation-shelf-transition-reduced-motion,\n opacity #{$navigation-shelf-transition-duration}\n #{root-variables.$transition-timing-function},\n display #{$navigation-shelf-transition-duration} allow-discrete\n);\n","// @graupl/core animation media query mixins.\n\n// A media query for targeting users who have not requested reduced motion.\n@mixin on {\n @media (prefers-reduced-motion: no-preference) {\n @content;\n }\n}\n\n// A media query for targeting users who have requested reduced motion.\n@mixin off {\n @media (prefers-reduced-motion: reduce) {\n @content;\n }\n}\n","// @graupl/icons icon mixins.\n\n@use \"defaults\";\n@use \"pkg:@graupl/core/src/defaults\" as root-defaults;\n@use \"pkg:@graupl/core/src/mixins/state\";\n@use \"pkg:@graupl/core/src/mixins/theme\";\n@use \"sass:map\";\n@use \"variables\" as *;\n\n$-targets: (\n \"self\": \"&\",\n \"before\": \"&::before\",\n \"after\": \"&::after\",\n);\n\n/// Mixin to apply component styles for icons.\n@mixin apply-component($target: \"self\") {\n #{map.get($-targets, $target)} {\n display: $icon-display;\n width: $icon-width;\n height: $icon-height;\n background-repeat: no-repeat;\n background-position: center;\n background-size: contain;\n vertical-align: sub;\n mask-image: $icon;\n mask-repeat: no-repeat;\n mask-size: contain;\n mask-position: center;\n\n @if $target == \"before\" {\n content: \"\";\n margin-inline-end: $icon-spacer;\n } @else if $target == \"after\" {\n content: \"\";\n margin-inline-start: $icon-spacer;\n } @else {\n margin-inline: $icon-spacer;\n }\n }\n}\n\n/// Mixin to apply theme styles for icons.\n@mixin apply-theme($target: \"self\") {\n @if root-defaults.$themeable-components and defaults.$themeable {\n @include theme.generate-modifiers(\n defaults.$icon-theme-map,\n defaults.$icon-theme-selector-base,\n defaults.$icon-theme-selector-prefix,\n \"icon-\"\n );\n }\n\n #{map.get($-targets, $target)} {\n background-color: $icon-color;\n }\n}\n\n/// Mixin to bind icon colors to a component.\n///\n/// @param {CustomProperty} $color - The default color prop for the icon.\n/// @param {Map} $states - A map of states and color props for the icon.\n@mixin bind($color, $states) {\n --#{root-defaults.$prefix}icon-color: #{$color};\n\n @include state.generate-modifiers(\n (--#{root-defaults.$prefix}icon-color: $states)\n );\n}\n\n@mixin apply($target: \"self\") {\n @include apply-component($target);\n @include apply-theme($target);\n}\n","// @graupl/icons icon component variables.\n//\n// These values are to be used to directly style components and provide a\n// cleaner way to reference custom properties.\n\n// Custom property defaults:\n// | Property | Default |\n// | ------------------------- | ------------------------- |\n// | --graupl-icon-display | inline-block |\n// | --graupl-icon-size | 1.25em |\n// | --graupl-icon-width | var(--graupl-icon-size) |\n// | --graupl-icon-height | var(--graupl-icon-size) |\n// | --graupl-icon-color | var(--graupl-color) |\n// | --graupl-icon | none |\n// | --graupl-icon-spacer | var(--graupl-spacer-2) |\n\n@use \"defaults\";\n@use \"pkg:@graupl/core/src/defaults\" as root-defaults;\n@use \"pkg:@graupl/core/src/theme/color/variables\" as color;\n@use \"pkg:@graupl/core/src/variables\" as root-variables;\n@use \"sass:map\";\n\n// --graupl-icon-display\n$icon-display: var(\n --#{root-defaults.$prefix}icon-display,\n #{defaults.$icon-display}\n);\n\n// --graupl-icon-size\n$icon-size: var(--#{root-defaults.$prefix}icon-size, #{defaults.$icon-size});\n\n// --graupl-icon-width\n$icon-width: var(--#{root-defaults.$prefix}icon-width, #{$icon-size});\n\n// --graupl-icon-height\n$icon-height: var(--#{root-defaults.$prefix}icon-height, #{$icon-size});\n\n// --graupl-icon-color\n$icon-color: var(--#{root-defaults.$prefix}icon-color, #{color.$color});\n\n// --graupl-icon\n$icon: var(--#{root-defaults.$prefix}icon, none);\n\n// --graupl-icon-spacer\n$icon-spacer: var(\n --#{root-defaults.$prefix}icon-spacer,\n #{map.get(root-variables.$spacers, 2)}\n);\n","// @graupl/core theme mixins.\n//\n// A series of mixins to tie styles to a theme-mode.\n\n@use \"../functions/theme\";\n@use \"../theme/color/defaults\" as color-defaults;\n@use \"../defaults\" as root-defaults;\n@use \"sass:map\";\n\n/// Applies styles to a specific theme mode.\n///\n/// @param {string} $theme-name\n/// The name of the theme mode to apply the styles to.\n@mixin theme($theme-name) {\n #{color-defaults.$theme-selector-base}#{color-defaults.$theme-selector-prefix}#{$theme-name}#{color-defaults.$theme-selector-suffix} {\n @content;\n }\n}\n\n/// Generates a theme modifiers with custom props.\n///\n/// @param {map} $theme-map\n/// The map of custom props.\n/// @param {string} $selector-base\n/// The selector base for the theme modifier.\n/// @param {string} $selector-prefix\n/// The selector prefix for the theme modifer.\n/// @param {string} $scope\n/// The scope of the custom properties.\n/// @param {string} $base\n/// The base selector to append the theme modifier to.\n@mixin generate-modifiers(\n $theme-map,\n $selector-base,\n $selector-prefix,\n $scope: \"\",\n $base: \"&\"\n) {\n @each $color, $map in $theme-map {\n // e.g. &.primary, &.secondary, &.tertiary\n #{$base}#{$selector-base}#{$selector-prefix}#{$color} {\n @each $prop, $value in $map {\n --#{root-defaults.$prefix}#{$scope}#{$prop}: #{theme.get(\n map.get($value, color),\n map.get($value, shade)\n )};\n }\n }\n }\n}\n"],"names":[]}
1
+ {"version":3,"sourceRoot":null,"mappings":"ACwGA,ouGAsBE,gBAtBF,goBA8BE,4HE3HA,uCF6FF,6XAwCE,ygBAWE,oiBAQA,qiBASF,ufAUE,0gBAQA,2gBASF,mgBAQA,+mBAQA,4mBAWA,+pBAWA,gjBAWA,4DAKA,8DAKA,4DAKA,qlBGtPA,qhBEiCE,iPAAA,2PAAA,gPFGF,mTHwOA,2mBG5QA,qhBEiCE,iPAAA,2PAAA,gPFGF,mTH8PA,6tBGlSA,shBEiCE,kPAAA,4PAAA,iPFGF","sources":["dist/css/component/navigation-shelf.css","var/www/html/packages/navigation-shelf/src/scss/component/navigation-shelf/_index.scss","var/www/html/packages/navigation-shelf/src/scss/component/navigation-shelf/_variables.scss","var/www/html/node_modules/@graupl/core/src/scss/mixins/_animation.scss","var/www/html/node_modules/@graupl/icons/src/scss/component/icon/_mixins.scss","var/www/html/node_modules/@graupl/icons/src/scss/component/icon/_variables.scss","var/www/html/node_modules/@graupl/core/src/scss/mixins/_theme.scss"],"sourcesContent":[".navigation-shelf {\n --graupl-navigation-shelf-current-width: var(--graupl-navigation-shelf-width, var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem)));\n display: var(--graupl-navigation-shelf-display, var(--graupl-navigation-shelf-closed-display, grid));\n position: fixed;\n z-index: var(--graupl-navigation-shelf-z-index, 2);\n top: 0;\n bottom: 0;\n grid-template-columns: [header-start content-start footer-start] var(--graupl-navigation-shelf-width, var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem))) [footer-end content-end header-end];\n grid-template-rows: [header-start] auto [header-end content-start] 1fr [content-end footer-start] auto [footer-end];\n width: var(--graupl-navigation-shelf-width, var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem)));\n overflow-x: hidden;\n transform: var(--graupl-navigation-shelf-transform, var(--graupl-navigation-shelf-closed-transform, ));\n transition: var(--graupl-navigation-shelf-transition, width var(--graupl-navigation-shelf-transition-duration, var(--graupl-transition-duration-fast, 150ms)) var(--graupl-transition-timing-function, ease), transform var(--graupl-navigation-shelf-transition-duration, var(--graupl-transition-duration-fast, 150ms)) var(--graupl-transition-timing-function, ease), opacity var(--graupl-navigation-shelf-transition-duration, var(--graupl-transition-duration-fast, 150ms)) var(--graupl-transition-timing-function, ease), display var(--graupl-navigation-shelf-transition-duration, var(--graupl-transition-duration-fast, 150ms)) allow-discrete);\n border-width: var(--graupl-navigation-shelf-border-width, var(--graupl-navigation-shelf-border-top-width, 0) var(--graupl-navigation-shelf-border-right-width, 0) var(--graupl-navigation-shelf-border-bottom-width, 0) var(--graupl-navigation-shelf-border-left-width, 0));\n border-style: var(--graupl-navigation-shelf-border-style, var(--graupl-navigation-shelf-border-top-style, var(--graupl-border-top-style, var(--graupl-border-style, solid))) var(--graupl-navigation-shelf-border-right-style, var(--graupl-border-right-style, var(--graupl-border-style, solid))) var(--graupl-navigation-shelf-border-bottom-style, var(--graupl-border-bottom-style, var(--graupl-border-style, solid))) var(--graupl-navigation-shelf-border-left-style, var(--graupl-border-left-style, var(--graupl-border-style, solid))));\n border-color: var(--graupl-navigation-shelf-border-color, var(--graupl-navigation-shelf-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-default--primary--900, light-dark(var(--graupl-primary--900, hsl(219, 100%, 10%)), var(--graupl-primary--100, hsl(219, 100%, 95%)))))))));\n opacity: var(--graupl-navigation-shelf-opacity, var(--graupl-navigation-shelf-closed-opacity, 1));\n background: var(--graupl-navigation-shelf-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-default--primary--100, light-dark(var(--graupl-primary--100, hsl(219, 100%, 95%)), var(--graupl-primary--900, hsl(219, 100%, 10%))))))));\n color: var(--graupl-navigation-shelf-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-default--primary--900, light-dark(var(--graupl-primary--900, hsl(219, 100%, 10%)), var(--graupl-primary--100, hsl(219, 100%, 95%))))))));\n isolation: isolate;\n}\n@starting-style {\n .navigation-shelf {\n display: var(--graupl-navigation-shelf-starting-display, var(--graupl-navigation-shelf-display, var(--graupl-navigation-shelf-closed-display, grid)));\n width: var(--graupl-navigation-shelf-starting-width, var(--graupl-navigation-shelf-width, var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem))));\n transform: var(--graupl-navigation-shelf-starting-transform, var(--graupl-navigation-shelf-transform, var(--graupl-navigation-shelf-closed-transform, )));\n opacity: var(--graupl-navigation-shelf-starting-opacity, var(--graupl-navigation-shelf-opacity, var(--graupl-navigation-shelf-closed-opacity, 1)));\n }\n}\n.navigation-shelf.initializing {\n --graupl-navigation-shelf-transition: --graupl-navigation-shelf-transition-initializing, none;\n}\n@media (prefers-reduced-motion: reduce) {\n .navigation-shelf {\n --graupl-navigation-shelf-transition: var(--graupl-navigation-shelf-transition-reduced-motion, opacity var(--graupl-navigation-shelf-transition-duration, var(--graupl-transition-duration-fast, 150ms)) var(--graupl-transition-timing-function, ease), display var(--graupl-navigation-shelf-transition-duration, var(--graupl-transition-duration-fast, 150ms)) allow-discrete);\n }\n}\n.navigation-shelf, .navigation-shelf.left-side {\n --graupl-navigation-shelf-side-toggle-content: var(\n --graupl-navigation-shelf-side-toggle-shelf-right-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E\")\n );\n right: auto;\n left: 0;\n}\n.navigation-shelf.locked, .navigation-shelf.left-side.locked {\n --graupl-navigation-shelf-lock-toggle-content: var(\n --graupl-navigation-shelf-lock-toggle-unlock-right-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M660-320v-320L500-480l160 160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E\")\n );\n}\n.navigation-shelf.unlocked, .navigation-shelf.left-side.unlocked {\n --graupl-navigation-shelf-lock-toggle-content: var(\n --graupl-navigation-shelf-lock-toggle-lock-right-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M500-640v320l160-160-160-160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E\")\n );\n}\n.navigation-shelf.right-side {\n --graupl-navigation-shelf-side-toggle-content: var(\n --graupl-navigation-shelf-side-toggle-shelf-left-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E\")\n );\n right: 0;\n left: auto;\n}\n.navigation-shelf.right-side.locked {\n --graupl-navigation-shelf-lock-toggle-content: var(\n --graupl-navigation-shelf-lock-toggle-unlock-left-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M300-640v320l160-160-160-160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E\")\n );\n}\n.navigation-shelf.right-side.unlocked {\n --graupl-navigation-shelf-lock-toggle-content: var(\n --graupl-navigation-shelf-lock-toggle-lock-left-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M460-320v-320L300-480l160 160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E\")\n );\n}\n.navigation-shelf.hoverable {\n --graupl-navigation-shelf-hover-toggle-content: var(\n --graupl-navigation-shelf-hover-toggle-disable-hover-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M468-240q-96-5-162-74t-66-166q0-100 70-170t170-70q97 0 166 66t74 162l-84-25q-13-54-56-88.5T480-640q-66 0-113 47t-47 113q0 57 34.5 100t88.5 56l25 84ZM821-60 650-231 600-80 480-480l400 120-151 50 171 171-79 79Z'/%3E%3C/svg%3E\")\n );\n}\n.navigation-shelf.not-hoverable {\n --graupl-navigation-shelf-hover-toggle-content: var(\n --graupl-navigation-shelf-hover-toggle-enable-hover-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M516-82q-9 2-18 2h-18q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480v18q0 9-2 18l-78-24v-12q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93h12l24 78Zm305 22L650-231 600-80 480-480l400 120-151 50 171 171-79 79Z'/%3E%3C/svg%3E\")\n );\n}\n.navigation-shelf.hide {\n --graupl-navigation-shelf-current-width: var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem));\n display: var(--graupl-navigation-shelf-closed-display, grid);\n grid-template-columns: [header-start content-start footer-start] var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem)) [footer-end content-end header-end];\n width: var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem));\n transform: var(--graupl-navigation-shelf-closed-transform, );\n opacity: var(--graupl-navigation-shelf-closed-opacity, 1);\n}\n.navigation-shelf.transitioning {\n --graupl-navigation-shelf-current-width: var(--graupl-navigation-shelf-transitioning-width, var(--graupl-navigation-shelf-min-width, 3.5rem));\n display: var(--graupl-navigation-shelf-transitioning-display, grid);\n grid-template-columns: [header-start content-start footer-start] var(--graupl-navigation-shelf-transitioning-width, var(--graupl-navigation-shelf-min-width, 3.5rem)) [footer-end content-end header-end];\n width: var(--graupl-navigation-shelf-transitioning-width, var(--graupl-navigation-shelf-min-width, 3.5rem));\n transform: var(--graupl-navigation-shelf-transitioning-transform, );\n opacity: var(--graupl-navigation-shelf-transitioning-opacity, 1);\n}\n.navigation-shelf.show {\n --graupl-navigation-shelf-current-width: var(--graupl-navigation-shelf-open-width, var(--graupl-navigation-shelf-max-width, 36ch));\n display: var(--graupl-navigation-shelf-open-display, grid);\n grid-template-columns: [header-start content-start footer-start] var(--graupl-navigation-shelf-max-width, 36ch) [footer-end content-end header-end];\n width: var(--graupl-navigation-shelf-open-width, var(--graupl-navigation-shelf-max-width, 36ch));\n transform: var(--graupl-navigation-shelf-open-transform, );\n opacity: var(--graupl-navigation-shelf-open-opacity, 1);\n}\n.navigation-shelf .navigation-shelf-header {\n grid-area: header;\n}\n.navigation-shelf .navigation-shelf-content {\n grid-area: content;\n}\n.navigation-shelf .navigation-shelf-footer {\n grid-area: footer;\n}\n.navigation-shelf .navigation-shelf-side-toggle {\n --graupl-icon: var(\n --graupl-navigation-shelf-side-toggle-content,\n var(\n --graupl-navigation-shelf-side-toggle-shelf-right-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E\")\n )\n );\n --graupl-icon-spacer: var(\n --graupl-navigation-shelf-side-toggle-spacer,\n 0\n );\n}\n.navigation-shelf .navigation-shelf-side-toggle::before {\n display: var(--graupl-icon-display, inline-block);\n width: var(--graupl-icon-width, var(--graupl-icon-size, 1.25em));\n height: var(--graupl-icon-height, var(--graupl-icon-size, 1.25em));\n background-repeat: no-repeat;\n background-position: center;\n background-size: contain;\n vertical-align: sub;\n mask-image: var(--graupl-icon, none);\n mask-repeat: no-repeat;\n mask-size: contain;\n mask-position: center;\n content: \"\";\n margin-inline-end: var(--graupl-icon-spacer, var(--graupl-spacer-2, calc(0.25 * var(--graupl-spacer, 1rem))));\n}\n.navigation-shelf .navigation-shelf-side-toggle.primary {\n --graupl-icon-color: var(--graupl-theme-active--primary--500, var(--graupl-theme-default--primary--500, light-dark(var(--graupl-primary--500, hsl(219, 75%, 50%)), var(--graupl-primary--500, hsl(219, 75%, 50%)))));\n}\n.navigation-shelf .navigation-shelf-side-toggle.secondary {\n --graupl-icon-color: var(--graupl-theme-active--secondary--500, var(--graupl-theme-default--secondary--500, light-dark(var(--graupl-secondary--500, hsl(235, 15%, 50%)), var(--graupl-secondary--500, hsl(235, 15%, 50%)))));\n}\n.navigation-shelf .navigation-shelf-side-toggle.tertiary {\n --graupl-icon-color: var(--graupl-theme-active--tertiary--500, var(--graupl-theme-default--tertiary--500, light-dark(var(--graupl-tertiary--500, hsl(340, 60%, 50%)), var(--graupl-tertiary--500, hsl(340, 60%, 50%)))));\n}\n.navigation-shelf .navigation-shelf-side-toggle::before {\n background-color: var(--graupl-icon-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-default--primary--900, light-dark(var(--graupl-primary--900, hsl(219, 100%, 10%)), var(--graupl-primary--100, hsl(219, 100%, 95%))))))));\n}\n.navigation-shelf .navigation-shelf-lock-toggle {\n --graupl-icon: var(\n --graupl-navigation-shelf-lock-toggle-content,\n var(\n --graupl-navigation-shelf-lock-toggle-lock-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M500-640v320l160-160-160-160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E\")\n )\n );\n --graupl-icon-spacer: var(\n --graupl-navigation-shelf-lock-toggle-spacer,\n 0\n );\n}\n.navigation-shelf .navigation-shelf-lock-toggle::before {\n display: var(--graupl-icon-display, inline-block);\n width: var(--graupl-icon-width, var(--graupl-icon-size, 1.25em));\n height: var(--graupl-icon-height, var(--graupl-icon-size, 1.25em));\n background-repeat: no-repeat;\n background-position: center;\n background-size: contain;\n vertical-align: sub;\n mask-image: var(--graupl-icon, none);\n mask-repeat: no-repeat;\n mask-size: contain;\n mask-position: center;\n content: \"\";\n margin-inline-end: var(--graupl-icon-spacer, var(--graupl-spacer-2, calc(0.25 * var(--graupl-spacer, 1rem))));\n}\n.navigation-shelf .navigation-shelf-lock-toggle.primary {\n --graupl-icon-color: var(--graupl-theme-active--primary--500, var(--graupl-theme-default--primary--500, light-dark(var(--graupl-primary--500, hsl(219, 75%, 50%)), var(--graupl-primary--500, hsl(219, 75%, 50%)))));\n}\n.navigation-shelf .navigation-shelf-lock-toggle.secondary {\n --graupl-icon-color: var(--graupl-theme-active--secondary--500, var(--graupl-theme-default--secondary--500, light-dark(var(--graupl-secondary--500, hsl(235, 15%, 50%)), var(--graupl-secondary--500, hsl(235, 15%, 50%)))));\n}\n.navigation-shelf .navigation-shelf-lock-toggle.tertiary {\n --graupl-icon-color: var(--graupl-theme-active--tertiary--500, var(--graupl-theme-default--tertiary--500, light-dark(var(--graupl-tertiary--500, hsl(340, 60%, 50%)), var(--graupl-tertiary--500, hsl(340, 60%, 50%)))));\n}\n.navigation-shelf .navigation-shelf-lock-toggle::before {\n background-color: var(--graupl-icon-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-default--primary--900, light-dark(var(--graupl-primary--900, hsl(219, 100%, 10%)), var(--graupl-primary--100, hsl(219, 100%, 95%))))))));\n}\n.navigation-shelf .navigation-shelf-hover-toggle {\n --graupl-icon: var(\n --graupl-navigation-shelf-hover-toggle-content,\n var(\n --graupl-navigation-shelf-hover-toggle-enable-hover-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M516-82q-9 2-18 2h-18q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480v18q0 9-2 18l-78-24v-12q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93h12l24 78Zm305 22L650-231 600-80 480-480l400 120-151 50 171 171-79 79Z'/%3E%3C/svg%3E\")\n )\n );\n --graupl-icon-spacer: var(\n --graupl-navigation-shelf-hover-toggle-spacer,\n 0\n );\n}\n.navigation-shelf .navigation-shelf-hover-toggle::before {\n display: var(--graupl-icon-display, inline-block);\n width: var(--graupl-icon-width, var(--graupl-icon-size, 1.25em));\n height: var(--graupl-icon-height, var(--graupl-icon-size, 1.25em));\n background-repeat: no-repeat;\n background-position: center;\n background-size: contain;\n vertical-align: sub;\n mask-image: var(--graupl-icon, none);\n mask-repeat: no-repeat;\n mask-size: contain;\n mask-position: center;\n content: \"\";\n margin-inline-end: var(--graupl-icon-spacer, var(--graupl-spacer-2, calc(0.25 * var(--graupl-spacer, 1rem))));\n}\n.navigation-shelf .navigation-shelf-hover-toggle.primary {\n --graupl-icon-color: var(--graupl-theme-active--primary--500, var(--graupl-theme-default--primary--500, light-dark(var(--graupl-primary--500, hsl(219, 75%, 50%)), var(--graupl-primary--500, hsl(219, 75%, 50%)))));\n}\n.navigation-shelf .navigation-shelf-hover-toggle.secondary {\n --graupl-icon-color: var(--graupl-theme-active--secondary--500, var(--graupl-theme-default--secondary--500, light-dark(var(--graupl-secondary--500, hsl(235, 15%, 50%)), var(--graupl-secondary--500, hsl(235, 15%, 50%)))));\n}\n.navigation-shelf .navigation-shelf-hover-toggle.tertiary {\n --graupl-icon-color: var(--graupl-theme-active--tertiary--500, var(--graupl-theme-default--tertiary--500, light-dark(var(--graupl-tertiary--500, hsl(340, 60%, 50%)), var(--graupl-tertiary--500, hsl(340, 60%, 50%)))));\n}\n.navigation-shelf .navigation-shelf-hover-toggle::before {\n background-color: var(--graupl-icon-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-default--primary--900, light-dark(var(--graupl-primary--900, hsl(219, 100%, 10%)), var(--graupl-primary--100, hsl(219, 100%, 95%))))))));\n}","// @graupl/navigation-shelf navigation shelf component styles.\n//\n// This module provides navigation shelf component styles.\n//\n// The following custom properties can be used to customize the navigation shelf component:\n// | Property | Description | Default Value |\n// | ----------------------------------------------------- | ----------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n// | `--graupl-navigation-shelf-background` | Value for navigation shelf background. | var(--graupl-background) |\n// | `--graupl-navigation-shelf-color` | Value for navigation shelf color. | var(--graupl-color) |\n// | `--graupl-navigation-shelf-z-index` | Value for navigation shelf z index. | 2 |\n// | `--graupl-navigation-shelf-border-top-style` | Value for navigation shelf border top style. | var(--graupl-border-top-style) |\n// | `--graupl-navigation-shelf-border-right-style` | Value for navigation shelf border right style. | var(--graupl-border-right-style) |\n// | `--graupl-navigation-shelf-border-bottom-style` | Value for navigation shelf border bottom style. | var(--graupl-border-bottom-style) |\n// | `--graupl-navigation-shelf-border-left-style` | Value for navigation shelf border left style. | var(--graupl-border-left-style) |\n// | `--graupl-navigation-shelf-border-style` | Value for navigation shelf border style. | var(--graupl-navigation-shelf-border-top-style) var(--graupl-navigation-shelf-border-right-style) var(--graupl-navigation-shelf-border-bottom-style) var(--graupl-navigation-shelf-border-left-style) |\n// | `--graupl-navigation-shelf-border-top-width` | Value for navigation shelf border top width. | 0 |\n// | `--graupl-navigation-shelf-border-right-width` | Value for navigation shelf border right width. | 0 |\n// | `--graupl-navigation-shelf-border-bottom-width` | Value for navigation shelf border bottom width. | 0 |\n// | `--graupl-navigation-shelf-border-left-width` | Value for navigation shelf border left width. | 0 |\n// | `--graupl-navigation-shelf-border-width` | Value for navigation shelf border width. | var(--graupl-navigation-shelf-border-top-width) var(--graupl-navigation-shelf-border-right-width) var(--graupl-navigation-shelf-border-bottom-width) var(--graupl-navigation-shelf-border-left-width) |\n// | `--graupl-navigation-shelf-border-color` | Value for navigation shelf border color. | var(--graupl-navigation-shelf-color) |\n// | `--graupl-navigation-shelf-closed-transform` | Value for navigation shelf closed transform. | null |\n// | `--graupl-navigation-shelf-open-transform` | Value for navigation shelf open transform. | null |\n// | `--graupl-navigation-shelf-transitioning-transform` | Value for navigation shelf transitioning transform. | null |\n// | `--graupl-navigation-shelf-transform` | Value for navigation shelf transform. | var(--graupl-navigation-shelf-closed-transform) |\n// | `--graupl-navigation-shelf-starting-transform` | Value for navigation shelf starting transform. | var(--graupl-navigation-shelf-transform) |\n// | `--graupl-navigation-shelf-min-width` | Value for navigation shelf min width. | 3.5rem |\n// | `--graupl-navigation-shelf-max-width` | Value for navigation shelf max width. | 36ch |\n// | `--graupl-navigation-shelf-closed-width` | Value for navigation shelf closed width. | var(--graupl-navigation-shelf-min-width) |\n// | `--graupl-navigation-shelf-open-width` | Value for navigation shelf open width. | var(--graupl-navigation-shelf-max-width) |\n// | `--graupl-navigation-shelf-transitioning-width` | Value for navigation shelf transitioning width. | var(--graupl-navigation-shelf-min-width) |\n// | `--graupl-navigation-shelf-width` | Value for navigation shelf width. | var(--graupl-navigation-shelf-closed-width) |\n// | `--graupl-navigation-shelf-starting-width` | Value for navigation shelf starting width. | var(--graupl-navigation-shelf-width) |\n// | `--graupl-navigation-shelf-current-width` | Value for navigation shelf current width. | var(--graupl-navigation-shelf-width) |\n// | `--graupl-navigation-shelf-closed-display` | Value for navigation shelf closed display. | grid |\n// | `--graupl-navigation-shelf-open-display` | Value for navigation shelf open display. | grid |\n// | `--graupl-navigation-shelf-transitioning-display` | Value for navigation shelf transitioning display. | grid |\n// | `--graupl-navigation-shelf-display` | Value for navigation shelf display. | var(--graupl-navigation-shelf-closed-display) |\n// | `--graupl-navigation-shelf-starting-display` | Value for navigation shelf starting display. | var(--graupl-navigation-shelf-display) |\n// | `--graupl-navigation-shelf-closed-opacity` | Value for navigation shelf closed opacity. | 1 |\n// | `--graupl-navigation-shelf-open-opacity` | Value for navigation shelf open opacity. | 1 |\n// | `--graupl-navigation-shelf-transitioning-opacity` | Value for navigation shelf transitioning opacity. | 1 |\n// | `--graupl-navigation-shelf-opacity` | Value for navigation shelf opacity. | var(--graupl-navigation-shelf-closed-opacity) |\n// | `--graupl-navigation-shelf-starting-opacity` | Value for navigation shelf starting opacity. | var(--graupl-navigation-shelf-opacity) |\n// | `--graupl-navigation-shelf-transition-duration` | Value for navigation shelf transition duration. | var(--graupl-transition-duration-fast) |\n// | `--graupl-navigation-shelf-transition` | Value for navigation shelf transition. | width var(--graupl-navigation-shelf-transition-duration) var(--graupl-transition-timing-function), transform var(--graupl-navigation-shelf-transition-duration) var(--graupl-transition-timing-function), opacity var(--graupl-navigation-shelf-transition-duration) var(--graupl-transition-timing-function), display var(--graupl-navigation-shelf-transition-duration) allow-discrete |\n// | `--graupl-navigation-shelf-transition-reduced-motion` | Value for navigation shelf transition reduced motion. | opacity var(--graupl-navigation-shelf-transition-duration) var(--graupl-transition-timing-function), display var(--graupl-navigation-shelf-transition-duration) allow-discrete |\n//\n// The following sass variables can be used to customize the generation of the navigation shelf component:\n// | Variable | Description | Default Value |\n// | ----------------------------------------------- | --------------------------------------------------------- | -------------------------------------- |\n// | `$modifier-selector-base` | Default for modifier selector base. | \".\" |\n// | `$navigation-shelf-closed-selector` | Default for navigation shelf closed selector. | \"hide\" |\n// | `$navigation-shelf-closed-selector-base` | Default for navigation shelf closed selector base. | \".\" |\n// | `$navigation-shelf-content-selector` | Default for navigation shelf content selector. | \"navigation-shelf-content\" |\n// | `$navigation-shelf-content-selector-base` | Default for navigation shelf content selector base. | \".\" |\n// | `$navigation-shelf-footer-selector` | Default for navigation shelf footer selector. | \"navigation-shelf-footer\" |\n// | `$navigation-shelf-footer-selector-base` | Default for navigation shelf footer selector base. | \".\" |\n// | `$navigation-shelf-header-selector` | Default for navigation shelf header selector. | \"navigation-shelf-header\" |\n// | `$navigation-shelf-header-selector-base` | Default for navigation shelf header selector base. | \".\" |\n// | `$navigation-shelf-hover-toggle-pseudo-element` | Default for navigation shelf hover toggle pseudo element. | \"before\" |\n// | `$navigation-shelf-hover-toggle-selector` | Default for navigation shelf hover toggle selector. | \"navigation-shelf-hover-toggle\" |\n// | `$navigation-shelf-hover-toggle-selector-base` | Default for navigation shelf hover toggle selector base. | \".\" |\n// | `$navigation-shelf-hoverable-selector` | Default for navigation shelf hoverable selector. | \"hoverable\" |\n// | `$navigation-shelf-hoverable-selector-base` | Default for navigation shelf hoverable selector base. | \".\" |\n// | `$navigation-shelf-icons` | Default for navigation shelf icons. | () |\n// | `$navigation-shelf-initializing-selector` | Default for navigation shelf initializing selector. | \"initializing\" |\n// | `$navigation-shelf-initializing-selector-base` | Default for navigation shelf initializing selector base. | \".\" |\n// | `$navigation-shelf-left-side-selector` | Default for navigation shelf left side selector. | \"left\" |\n// | `$navigation-shelf-lock-toggle-pseudo-element` | Default for navigation shelf lock toggle pseudo element. | \"before\" |\n// | `$navigation-shelf-lock-toggle-selector` | Default for navigation shelf lock toggle selector. | \"navigation-shelf-lock-toggle\" |\n// | `$navigation-shelf-lock-toggle-selector-base` | Default for navigation shelf lock toggle selector base. | \".\" |\n// | `$navigation-shelf-locked-selector` | Default for navigation shelf locked selector. | \"locked\" |\n// | `$navigation-shelf-locked-selector-base` | Default for navigation shelf locked selector base. | \".\" |\n// | `$navigation-shelf-max-width` | Default for navigation shelf max width. | 36ch |\n// | `$navigation-shelf-min-width` | Default for navigation shelf min width. | 3.5rem |\n// | `$navigation-shelf-not-hoverable-selector` | Default for navigation shelf not hoverable selector. | \"not-hoverable\" |\n// | `$navigation-shelf-not-hoverable-selector-base` | Default for navigation shelf not hoverable selector base. | \".\" |\n// | `$navigation-shelf-open-selector` | Default for navigation shelf open selector. | \"show\" |\n// | `$navigation-shelf-open-selector-base` | Default for navigation shelf open selector base. | \".\" |\n// | `$navigation-shelf-right-side-selector` | Default for navigation shelf right side selector. | \"right\" |\n// | `$navigation-shelf-selector` | Default for navigation shelf selector. | \"navigation-shelf\" |\n// | `$navigation-shelf-selector-base` | Default for navigation shelf selector base. | \".\" |\n// | `$navigation-shelf-side-selector-base` | Default for navigation shelf side selector base. | \".\" |\n// | `$navigation-shelf-side-selector-suffix` | Default for navigation shelf side selector suffix. | \"-side\" |\n// | `$navigation-shelf-side-toggle-pseudo-element` | Default for navigation shelf side toggle pseudo element. | \"before\" |\n// | `$navigation-shelf-side-toggle-selector` | Default for navigation shelf side toggle selector. | \"navigation-shelf-side-toggle\" |\n// | `$navigation-shelf-side-toggle-selector-base` | Default for navigation shelf side toggle selector base. | \".\" |\n// | `$navigation-shelf-transitioning-selector` | Default for navigation shelf transitioning selector. | \"transitioning\" |\n// | `$navigation-shelf-transitioning-selector-base` | Default for navigation shelf transitioning selector base. | \".\" |\n// | `$navigation-shelf-unlocked-selector` | Default for navigation shelf unlocked selector. | \"unlocked\" |\n// | `$navigation-shelf-unlocked-selector-base` | Default for navigation shelf unlocked selector base. | \".\" |\n// | `$navigation-shelf-z-index` | Default for navigation shelf z index. | 2 |\n// | `$selector-base` | Default for selector base. | \".\" |\n// | `$show-warnings` | Default for show warnings. | true |\n//\n@use \"pkg:@graupl/icons/src/component/icon/mixins\" as icon-mixins;\n@use \"pkg:@graupl/core/src/defaults\" as root-defaults;\n@use \"pkg:@graupl/core/src/mixins/animation\";\n@use \"defaults\";\n@use \"variables\" as *;\n@use \"sass:map\";\n\n// `.navigation-shelf`\n#{defaults.$navigation-shelf-selector-base}#{defaults.$navigation-shelf-selector} {\n --#{root-defaults.$prefix}navigation-shelf-current-width: #{$navigation-shelf-width};\n\n display: $navigation-shelf-display;\n position: fixed;\n z-index: $navigation-shelf-z-index;\n top: 0;\n bottom: 0;\n grid-template-columns: [header-start content-start footer-start] $navigation-shelf-width [footer-end content-end header-end];\n grid-template-rows: [header-start] auto [header-end content-start] 1fr [content-end footer-start] auto [footer-end];\n width: $navigation-shelf-width;\n overflow-x: hidden;\n transform: $navigation-shelf-transform;\n transition: $navigation-shelf-transition;\n border-width: $navigation-shelf-border-width;\n border-style: $navigation-shelf-border-style;\n border-color: $navigation-shelf-border-color;\n opacity: $navigation-shelf-opacity;\n background: $navigation-shelf-background;\n color: $navigation-shelf-color;\n isolation: isolate;\n\n @starting-style {\n display: $navigation-shelf-starting-display;\n width: $navigation-shelf-starting-width;\n transform: $navigation-shelf-starting-transform;\n opacity: $navigation-shelf-starting-opacity;\n }\n\n // &.initializing\n &#{defaults.$navigation-shelf-initializing-selector-base}#{defaults.$navigation-shelf-initializing-selector} {\n --#{root-defaults.$prefix}navigation-shelf-transition: #{$navigation-shelf-transition-initializing};\n }\n\n @include animation.off {\n --#{root-defaults.$prefix}navigation-shelf-transition: #{$navigation-shelf-transition-reduced-motion};\n }\n\n // `&,`\n // `&.left-side`\n &,\n &#{defaults.$navigation-shelf-side-selector-base}#{defaults.$navigation-shelf-left-side-selector}#{defaults.$navigation-shelf-side-selector-suffix} {\n --#{root-defaults.$prefix}navigation-shelf-side-toggle-content: var(\n --#{root-defaults.$prefix}navigation-shelf-side-toggle-shelf-right-content,\n #{map.get(defaults.$navigation-shelf-icons, \"shelf-right\")}\n );\n\n right: auto;\n left: 0;\n\n // `&.locked`\n &#{defaults.$navigation-shelf-locked-selector-base}#{defaults.$navigation-shelf-locked-selector} {\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-content: var(\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-unlock-right-content,\n #{map.get(defaults.$navigation-shelf-icons, \"unlock-right\")}\n );\n }\n\n // `&.unlocked`\n &#{defaults.$navigation-shelf-unlocked-selector-base}#{defaults.$navigation-shelf-unlocked-selector} {\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-content: var(\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-lock-right-content,\n #{map.get(defaults.$navigation-shelf-icons, \"lock-right\")}\n );\n }\n }\n\n // `&.right-side`\n &#{defaults.$navigation-shelf-side-selector-base}#{defaults.$navigation-shelf-right-side-selector}#{defaults.$navigation-shelf-side-selector-suffix} {\n --#{root-defaults.$prefix}navigation-shelf-side-toggle-content: var(\n --#{root-defaults.$prefix}navigation-shelf-side-toggle-shelf-left-content,\n #{map.get(defaults.$navigation-shelf-icons, \"shelf-left\")}\n );\n\n right: 0;\n left: auto;\n\n // `&.locked`\n &#{defaults.$navigation-shelf-locked-selector-base}#{defaults.$navigation-shelf-locked-selector} {\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-content: var(\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-unlock-left-content,\n #{map.get(defaults.$navigation-shelf-icons, \"unlock-left\")}\n );\n }\n\n // `&.unlocked`\n &#{defaults.$navigation-shelf-unlocked-selector-base}#{defaults.$navigation-shelf-unlocked-selector} {\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-content: var(\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-lock-left-content,\n #{map.get(defaults.$navigation-shelf-icons, \"lock-left\")}\n );\n }\n }\n\n // `&.hoverable`\n &#{defaults.$navigation-shelf-hoverable-selector-base}#{defaults.$navigation-shelf-hoverable-selector} {\n --#{root-defaults.$prefix}navigation-shelf-hover-toggle-content: var(\n --#{root-defaults.$prefix}navigation-shelf-hover-toggle-disable-hover-content,\n #{map.get(defaults.$navigation-shelf-icons, \"disable-hover\")}\n );\n }\n\n // `&.not-hoverable`\n &#{defaults.$navigation-shelf-not-hoverable-selector-base}#{defaults.$navigation-shelf-not-hoverable-selector} {\n --#{root-defaults.$prefix}navigation-shelf-hover-toggle-content: var(\n --#{root-defaults.$prefix}navigation-shelf-hover-toggle-enable-hover-content,\n #{map.get(defaults.$navigation-shelf-icons, \"enable-hover\")}\n );\n }\n\n // `&.hide`\n &#{defaults.$navigation-shelf-closed-selector-base}#{defaults.$navigation-shelf-closed-selector} {\n --#{root-defaults.$prefix}navigation-shelf-current-width: #{$navigation-shelf-closed-width};\n\n display: $navigation-shelf-closed-display;\n grid-template-columns: [header-start content-start footer-start] $navigation-shelf-closed-width [footer-end content-end header-end];\n width: $navigation-shelf-closed-width;\n transform: $navigation-shelf-closed-transform;\n opacity: $navigation-shelf-closed-opacity;\n }\n\n // `&.transitioning`\n &#{defaults.$navigation-shelf-transitioning-selector-base}#{defaults.$navigation-shelf-transitioning-selector} {\n --#{root-defaults.$prefix}navigation-shelf-current-width: #{$navigation-shelf-transitioning-width};\n\n display: $navigation-shelf-transitioning-display;\n grid-template-columns: [header-start content-start footer-start] $navigation-shelf-transitioning-width [footer-end content-end header-end];\n width: $navigation-shelf-transitioning-width;\n transform: $navigation-shelf-transitioning-transform;\n opacity: $navigation-shelf-transitioning-opacity;\n }\n\n // `&.show`\n &#{defaults.$navigation-shelf-open-selector-base}#{defaults.$navigation-shelf-open-selector} {\n --#{root-defaults.$prefix}navigation-shelf-current-width: #{$navigation-shelf-open-width};\n\n display: $navigation-shelf-open-display;\n grid-template-columns: [header-start content-start footer-start] $navigation-shelf-max-width [footer-end content-end header-end];\n width: $navigation-shelf-open-width;\n transform: $navigation-shelf-open-transform;\n opacity: $navigation-shelf-open-opacity;\n }\n\n // `.navigation-shelf-header`\n #{defaults.$navigation-shelf-header-selector-base}#{defaults.$navigation-shelf-header-selector} {\n grid-area: header;\n }\n\n // `.navigation-shelf-content`\n #{defaults.$navigation-shelf-content-selector-base}#{defaults.$navigation-shelf-content-selector} {\n grid-area: content;\n }\n\n // `.navigation-shelf-footer`\n #{defaults.$navigation-shelf-footer-selector-base}#{defaults.$navigation-shelf-footer-selector} {\n grid-area: footer;\n }\n\n // `.navigation-shelf-side-toggle`\n #{defaults.$navigation-shelf-side-toggle-selector-base}#{defaults.$navigation-shelf-side-toggle-selector} {\n --#{root-defaults.$prefix}icon: var(\n --#{root-defaults.$prefix}navigation-shelf-side-toggle-content,\n var(\n --#{root-defaults.$prefix}navigation-shelf-side-toggle-shelf-right-content,\n #{map.get(defaults.$navigation-shelf-icons, \"shelf-right\")}\n )\n );\n --#{root-defaults.$prefix}icon-spacer: var(\n --#{root-defaults.$prefix}navigation-shelf-side-toggle-spacer,\n 0\n );\n\n @include icon-mixins.apply-component(\n #{defaults.$navigation-shelf-side-toggle-pseudo-element}\n );\n @include icon-mixins.apply-theme(\n #{defaults.$navigation-shelf-side-toggle-pseudo-element}\n );\n }\n\n // `.navigation-shelf-lock-toggle`\n #{defaults.$navigation-shelf-lock-toggle-selector-base}#{defaults.$navigation-shelf-lock-toggle-selector} {\n --#{root-defaults.$prefix}icon: var(\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-content,\n var(\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-lock-content,\n #{map.get(defaults.$navigation-shelf-icons, \"lock-right\")}\n )\n );\n --#{root-defaults.$prefix}icon-spacer: var(\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-spacer,\n 0\n );\n\n @include icon-mixins.apply-component(\n #{defaults.$navigation-shelf-lock-toggle-pseudo-element}\n );\n @include icon-mixins.apply-theme(\n #{defaults.$navigation-shelf-lock-toggle-pseudo-element}\n );\n }\n\n // `.navigation-shelf-hover-toggle`\n #{defaults.$navigation-shelf-hover-toggle-selector-base}#{defaults.$navigation-shelf-hover-toggle-selector} {\n --#{root-defaults.$prefix}icon: var(\n --#{root-defaults.$prefix}navigation-shelf-hover-toggle-content,\n var(\n --#{root-defaults.$prefix}navigation-shelf-hover-toggle-enable-hover-content,\n #{map.get(defaults.$navigation-shelf-icons, \"enable-hover\")}\n )\n );\n --#{root-defaults.$prefix}icon-spacer: var(\n --#{root-defaults.$prefix}navigation-shelf-hover-toggle-spacer,\n 0\n );\n\n @include icon-mixins.apply-component(\n #{defaults.$navigation-shelf-hover-toggle-pseudo-element}\n );\n @include icon-mixins.apply-theme(\n #{defaults.$navigation-shelf-hover-toggle-pseudo-element}\n );\n }\n}\n","// @graupl/navigation-shelf navigation shelf component variables.\n//\n// These values are to be used to directly style components and provide a\n// cleaner way to reference custom properties.\n//\n// Custom property defaults:\n// | Custom property | Default |\n// | --------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n// | --graupl-navigation-shelf-background | var(--graupl-background) |\n// | --graupl-navigation-shelf-color | var(--graupl-color) |\n// | --graupl-navigation-shelf-z-index | 2 |\n// | --graupl-navigation-shelf-border-top-style | var(--graupl-border-top-style) |\n// | --graupl-navigation-shelf-border-right-style | var(--graupl-border-right-style) |\n// | --graupl-navigation-shelf-border-bottom-style | var(--graupl-border-bottom-style) |\n// | --graupl-navigation-shelf-border-left-style | var(--graupl-border-left-style) |\n// | --graupl-navigation-shelf-border-style | var(--graupl-navigation-shelf-border-top-style) var(--graupl-navigation-shelf-border-right-style) var(--graupl-navigation-shelf-border-bottom-style) var(--graupl-navigation-shelf-border-left-style) |\n// | --graupl-navigation-shelf-border-top-width | 0 |\n// | --graupl-navigation-shelf-border-right-width | 0 |\n// | --graupl-navigation-shelf-border-bottom-width | 0 |\n// | --graupl-navigation-shelf-border-left-width | 0 |\n// | --graupl-navigation-shelf-border-width | var(--graupl-navigation-shelf-border-top-width) var(--graupl-navigation-shelf-border-right-width) var(--graupl-navigation-shelf-border-bottom-width) var(--graupl-navigation-shelf-border-left-width) |\n// | --graupl-navigation-shelf-border-color | var(--graupl-navigation-shelf-color) |\n// | --graupl-navigation-shelf-closed-transform | null |\n// | --graupl-navigation-shelf-open-transform | null |\n// | --graupl-navigation-shelf-transitioning-transform | null |\n// | --graupl-navigation-shelf-transform | var(--graupl-navigation-shelf-closed-transform) |\n// | --graupl-navigation-shelf-starting-transform | var(--graupl-navigation-shelf-transform) |\n// | --graupl-navigation-shelf-min-width | 3.5rem |\n// | --graupl-navigation-shelf-max-width | 36ch |\n// | --graupl-navigation-shelf-closed-width | var(--graupl-navigation-shelf-min-width) |\n// | --graupl-navigation-shelf-open-width | var(--graupl-navigation-shelf-max-width) |\n// | --graupl-navigation-shelf-transitioning-width | var(--graupl-navigation-shelf-min-width) |\n// | --graupl-navigation-shelf-width | var(--graupl-navigation-shelf-closed-width) |\n// | --graupl-navigation-shelf-starting-width | var(--graupl-navigation-shelf-width) |\n// | --graupl-navigation-shelf-current-width | var(--graupl-navigation-shelf-width) |\n// | --graupl-navigation-shelf-closed-display | grid |\n// | --graupl-navigation-shelf-open-display | grid |\n// | --graupl-navigation-shelf-transitioning-display | grid |\n// | --graupl-navigation-shelf-display | var(--graupl-navigation-shelf-closed-display) |\n// | --graupl-navigation-shelf-starting-display | var(--graupl-navigation-shelf-display) |\n// | --graupl-navigation-shelf-closed-opacity | 1 |\n// | --graupl-navigation-shelf-open-opacity | 1 |\n// | --graupl-navigation-shelf-transitioning-opacity | 1 |\n// | --graupl-navigation-shelf-opacity | var(--graupl-navigation-shelf-closed-opacity) |\n// | --graupl-navigation-shelf-starting-opacity | var(--graupl-navigation-shelf-opacity) |\n// | --graupl-navigation-shelf-transition-duration | var(--graupl-transition-duration-fast) |\n// | --graupl-navigation-shelf-transition | width var(--graupl-navigation-shelf-transition-duration) var(--graupl-transition-timing-function), transform var(--graupl-navigation-shelf-transition-duration) var(--graupl-transition-timing-function), opacity var(--graupl-navigation-shelf-transition-duration) var(--graupl-transition-timing-function), display var(--graupl-navigation-shelf-transition-duration) allow-discrete |\n// | --graupl-navigation-shelf-transition-reduced-motion | opacity var(--graupl-navigation-shelf-transition-duration) var(--graupl-transition-timing-function), display var(--graupl-navigation-shelf-transition-duration) allow-discrete |\n\n@use \"defaults\";\n@use \"pkg:@graupl/core/src/variables\" as root-variables;\n@use \"pkg:@graupl/core/src/defaults\" as root-defaults;\n@use \"pkg:@graupl/core/src/theme/color/variables\" as color;\n@use \"sass:map\";\n\n// Navigation shelf properties.\n// --graupl-navigation-shelf-background\n$navigation-shelf-background: var(\n --#{root-defaults.$prefix}navigation-shelf-background,\n #{color.$background}\n);\n\n// --graupl-navigation-shelf-color\n$navigation-shelf-color: var(\n --#{root-defaults.$prefix}navigation-shelf-color,\n #{color.$color}\n);\n\n// --graupl-navigation-shelf-z-index\n$navigation-shelf-z-index: var(\n --#{root-defaults.$prefix}navigation-shelf-z-index,\n #{defaults.$navigation-shelf-z-index}\n);\n\n// Border properties.\n// --graupl-navigation-shelf-border-top-style\n$navigation-shelf-border-top-style: var(\n --#{root-defaults.$prefix}navigation-shelf-border-top-style,\n #{root-variables.$border-top-style}\n);\n\n// --graupl-navigation-shelf-border-right-style\n$navigation-shelf-border-right-style: var(\n --#{root-defaults.$prefix}navigation-shelf-border-right-style,\n #{root-variables.$border-right-style}\n);\n\n// --graupl-navigation-shelf-border-bottom-style\n$navigation-shelf-border-bottom-style: var(\n --#{root-defaults.$prefix}navigation-shelf-border-bottom-style,\n #{root-variables.$border-bottom-style}\n);\n\n// --graupl-navigation-shelf-border-left-style\n$navigation-shelf-border-left-style: var(\n --#{root-defaults.$prefix}navigation-shelf-border-left-style,\n #{root-variables.$border-left-style}\n);\n\n// --graupl-navigation-shelf-border-style\n$navigation-shelf-border-style: var(\n --#{root-defaults.$prefix}navigation-shelf-border-style,\n #{$navigation-shelf-border-top-style} #{$navigation-shelf-border-right-style}\n #{$navigation-shelf-border-bottom-style}\n #{$navigation-shelf-border-left-style}\n);\n\n// --graupl-navigation-shelf-border-top-width\n$navigation-shelf-border-top-width: var(\n --#{root-defaults.$prefix}navigation-shelf-border-top-width,\n 0\n);\n\n// --graupl-navigation-shelf-border-right-width\n$navigation-shelf-border-right-width: var(\n --#{root-defaults.$prefix}navigation-shelf-border-right-width,\n 0\n);\n\n// --graupl-navigation-shelf-border-bottom-width\n$navigation-shelf-border-bottom-width: var(\n --#{root-defaults.$prefix}navigation-shelf-border-bottom-width,\n 0\n);\n\n// --graupl-navigation-shelf-border-left-width\n$navigation-shelf-border-left-width: var(\n --#{root-defaults.$prefix}navigation-shelf-border-left-width,\n 0\n);\n\n// --graupl-navigation-shelf-border-width\n$navigation-shelf-border-width: var(\n --#{root-defaults.$prefix}navigation-shelf-border-width,\n #{$navigation-shelf-border-top-width} #{$navigation-shelf-border-right-width}\n #{$navigation-shelf-border-bottom-width}\n #{$navigation-shelf-border-left-width}\n);\n\n// --graupl-navigation-shelf-border-color\n$navigation-shelf-border-color: var(\n --#{root-defaults.$prefix}navigation-shelf-border-color,\n #{$navigation-shelf-color}\n);\n\n// Transform properties.\n// --graupl-navigation-shelf-closed-transform\n$navigation-shelf-closed-transform: var(\n --#{root-defaults.$prefix}navigation-shelf-closed-transform,\n null\n);\n\n// --graupl-navigation-shelf-open-transform\n$navigation-shelf-open-transform: var(\n --#{root-defaults.$prefix}navigation-shelf-open-transform,\n null\n);\n\n// --graupl-navigation-shelf-transitioning-transform\n$navigation-shelf-transitioning-transform: var(\n --#{root-defaults.$prefix}navigation-shelf-transitioning-transform,\n null\n);\n\n// --graupl-navigation-shelf-transform\n$navigation-shelf-transform: var(\n --#{root-defaults.$prefix}navigation-shelf-transform,\n #{$navigation-shelf-closed-transform}\n);\n\n// --graupl-navigation-shelf-starting-transform\n$navigation-shelf-starting-transform: var(\n --#{root-defaults.$prefix}navigation-shelf-starting-transform,\n #{$navigation-shelf-transform}\n);\n\n// Width properties.\n// --graupl-navigation-shelf-min-width\n$navigation-shelf-min-width: var(\n --#{root-defaults.$prefix}navigation-shelf-min-width,\n #{defaults.$navigation-shelf-min-width}\n);\n\n// --graupl-navigation-shelf-max-width\n$navigation-shelf-max-width: var(\n --#{root-defaults.$prefix}navigation-shelf-max-width,\n #{defaults.$navigation-shelf-max-width}\n);\n\n// --graupl-navigation-shelf-closed-width\n$navigation-shelf-closed-width: var(\n --#{root-defaults.$prefix}navigation-shelf-closed-width,\n #{$navigation-shelf-min-width}\n);\n\n// --graupl-navigation-shelf-open-width\n$navigation-shelf-open-width: var(\n --#{root-defaults.$prefix}navigation-shelf-open-width,\n #{$navigation-shelf-max-width}\n);\n\n// --graupl-navigation-shelf-transitioning-width\n$navigation-shelf-transitioning-width: var(\n --#{root-defaults.$prefix}navigation-shelf-transitioning-width,\n #{$navigation-shelf-min-width}\n);\n\n// --graupl-navigation-shelf-width\n$navigation-shelf-width: var(\n --#{root-defaults.$prefix}navigation-shelf-width,\n #{$navigation-shelf-closed-width}\n);\n\n// --graupl-navigation-shelf-starting-width\n$navigation-shelf-starting-width: var(\n --#{root-defaults.$prefix}navigation-shelf-starting-width,\n #{$navigation-shelf-width}\n);\n\n// --graupl-navigation-shelf-current-width\n$navigation-shelf-current-width: var(\n --#{root-defaults.$prefix}navigation-shelf-current-width,\n #{$navigation-shelf-width}\n);\n\n// Display properties.\n// --graupl-navigation-shelf-closed-display\n$navigation-shelf-closed-display: var(\n --#{root-defaults.$prefix}navigation-shelf-closed-display,\n grid\n);\n\n// --graupl-navigation-shelf-open-display\n$navigation-shelf-open-display: var(\n --#{root-defaults.$prefix}navigation-shelf-open-display,\n grid\n);\n\n// --graupl-navigation-shelf-transitioning-display\n$navigation-shelf-transitioning-display: var(\n --#{root-defaults.$prefix}navigation-shelf-transitioning-display,\n grid\n);\n\n// --graupl-navigation-shelf-display\n$navigation-shelf-display: var(\n --#{root-defaults.$prefix}navigation-shelf-display,\n #{$navigation-shelf-closed-display}\n);\n\n// --graupl-navigation-shelf-starting-display\n$navigation-shelf-starting-display: var(\n --#{root-defaults.$prefix}navigation-shelf-starting-display,\n #{$navigation-shelf-display}\n);\n\n// Opacity properties.\n// --graupl-navigation-shelf-closed-opacity\n$navigation-shelf-closed-opacity: var(\n --#{root-defaults.$prefix}navigation-shelf-closed-opacity,\n 1\n);\n\n// --graupl-navigation-shelf-open-opacity\n$navigation-shelf-open-opacity: var(\n --#{root-defaults.$prefix}navigation-shelf-open-opacity,\n 1\n);\n\n// --graupl-navigation-shelf-transitioning-opacity\n$navigation-shelf-transitioning-opacity: var(\n --#{root-defaults.$prefix}navigation-shelf-transitioning-opacity,\n 1\n);\n\n// --graupl-navigation-shelf-opacity\n$navigation-shelf-opacity: var(\n --#{root-defaults.$prefix}navigation-shelf-opacity,\n #{$navigation-shelf-closed-opacity}\n);\n\n// --graupl-navigation-shelf-starting-opacity\n$navigation-shelf-starting-opacity: var(\n --#{root-defaults.$prefix}navigation-shelf-starting-opacity,\n #{$navigation-shelf-opacity}\n);\n\n// Transition properties.\n// --graupl-navigation-shelf-transition-duration\n$navigation-shelf-transition-duration: var(\n --#{root-defaults.$prefix}navigation-shelf-transition-duration,\n #{map.get(root-variables.$transition-durations, fast)}\n);\n\n// --graupl-navigation-shelf-transition\n$navigation-shelf-transition: var(\n --#{root-defaults.$prefix}navigation-shelf-transition,\n width #{$navigation-shelf-transition-duration}\n #{root-variables.$transition-timing-function},\n transform #{$navigation-shelf-transition-duration}\n #{root-variables.$transition-timing-function},\n opacity #{$navigation-shelf-transition-duration}\n #{root-variables.$transition-timing-function},\n display #{$navigation-shelf-transition-duration} allow-discrete\n);\n$navigation-shelf-transition-initializing: (\n --#{root-defaults.$prefix}navigation-shelf-transition-initializing,\n none\n);\n\n// --graupl-navigation-shelf-transition-reduced-motion\n$navigation-shelf-transition-reduced-motion: var(\n --#{root-defaults.$prefix}navigation-shelf-transition-reduced-motion,\n opacity #{$navigation-shelf-transition-duration}\n #{root-variables.$transition-timing-function},\n display #{$navigation-shelf-transition-duration} allow-discrete\n);\n","// @graupl/core animation media query mixins.\n\n// A media query for targeting users who have not requested reduced motion.\n@mixin on {\n @media (prefers-reduced-motion: no-preference) {\n @content;\n }\n}\n\n// A media query for targeting users who have requested reduced motion.\n@mixin off {\n @media (prefers-reduced-motion: reduce) {\n @content;\n }\n}\n","// @graupl/icons icon mixins.\n\n@use \"defaults\";\n@use \"pkg:@graupl/core/src/defaults\" as root-defaults;\n@use \"pkg:@graupl/core/src/mixins/state\";\n@use \"pkg:@graupl/core/src/mixins/theme\";\n@use \"sass:map\";\n@use \"variables\" as *;\n\n$-targets: (\n \"self\": \"&\",\n \"before\": \"&::before\",\n \"after\": \"&::after\",\n);\n\n/// Mixin to apply component styles for icons.\n@mixin apply-component($target: \"self\") {\n #{map.get($-targets, $target)} {\n display: $icon-display;\n width: $icon-width;\n height: $icon-height;\n background-repeat: no-repeat;\n background-position: center;\n background-size: contain;\n vertical-align: sub;\n mask-image: $icon;\n mask-repeat: no-repeat;\n mask-size: contain;\n mask-position: center;\n\n @if $target == \"before\" {\n content: \"\";\n margin-inline-end: $icon-spacer;\n } @else if $target == \"after\" {\n content: \"\";\n margin-inline-start: $icon-spacer;\n } @else {\n margin-inline: $icon-spacer;\n }\n }\n}\n\n/// Mixin to apply theme styles for icons.\n@mixin apply-theme($target: \"self\") {\n @if root-defaults.$themeable-components and defaults.$themeable {\n @include theme.generate-modifiers(\n defaults.$icon-theme-map,\n defaults.$icon-theme-selector-base,\n defaults.$icon-theme-selector-prefix,\n \"icon-\"\n );\n }\n\n #{map.get($-targets, $target)} {\n background-color: $icon-color;\n }\n}\n\n/// Mixin to bind icon colors to a component.\n///\n/// @param {CustomProperty} $color - The default color prop for the icon.\n/// @param {Map} $states - A map of states and color props for the icon.\n@mixin bind($color, $states) {\n --#{root-defaults.$prefix}icon-color: #{$color};\n\n @include state.generate-modifiers(\n (--#{root-defaults.$prefix}icon-color: $states)\n );\n}\n\n@mixin apply($target: \"self\") {\n @include apply-component($target);\n @include apply-theme($target);\n}\n","// @graupl/icons icon component variables.\n//\n// These values are to be used to directly style components and provide a\n// cleaner way to reference custom properties.\n\n// Custom property defaults:\n// | Property | Default |\n// | ------------------------- | ------------------------- |\n// | --graupl-icon-display | inline-block |\n// | --graupl-icon-size | 1.25em |\n// | --graupl-icon-width | var(--graupl-icon-size) |\n// | --graupl-icon-height | var(--graupl-icon-size) |\n// | --graupl-icon-color | var(--graupl-color) |\n// | --graupl-icon | none |\n// | --graupl-icon-spacer | var(--graupl-spacer-2) |\n\n@use \"defaults\";\n@use \"pkg:@graupl/core/src/defaults\" as root-defaults;\n@use \"pkg:@graupl/core/src/theme/color/variables\" as color;\n@use \"pkg:@graupl/core/src/variables\" as root-variables;\n@use \"sass:map\";\n\n// --graupl-icon-display\n$icon-display: var(\n --#{root-defaults.$prefix}icon-display,\n #{defaults.$icon-display}\n);\n\n// --graupl-icon-size\n$icon-size: var(--#{root-defaults.$prefix}icon-size, #{defaults.$icon-size});\n\n// --graupl-icon-width\n$icon-width: var(--#{root-defaults.$prefix}icon-width, #{$icon-size});\n\n// --graupl-icon-height\n$icon-height: var(--#{root-defaults.$prefix}icon-height, #{$icon-size});\n\n// --graupl-icon-color\n$icon-color: var(--#{root-defaults.$prefix}icon-color, #{color.$color});\n\n// --graupl-icon\n$icon: var(--#{root-defaults.$prefix}icon, none);\n\n// --graupl-icon-spacer\n$icon-spacer: var(\n --#{root-defaults.$prefix}icon-spacer,\n #{map.get(root-variables.$spacers, 2)}\n);\n","// @graupl/core theme mixins.\n//\n// A series of mixins to tie styles to a theme-mode.\n\n@use \"../functions/theme\";\n@use \"../theme/color/defaults\" as color-defaults;\n@use \"../defaults\" as root-defaults;\n@use \"sass:map\";\n\n/// Applies styles to a specific theme mode.\n///\n/// @param {string} $theme-name\n/// The name of the theme mode to apply the styles to.\n@mixin theme($theme-name) {\n #{color-defaults.$theme-selector-base}#{color-defaults.$theme-selector-prefix}#{$theme-name}#{color-defaults.$theme-selector-suffix} {\n @content;\n }\n}\n\n/// Applies styles to a specific color scheme.\n///\n/// @param {string} $scheme-name\n/// The name of the scheme to apply the styles to.\n@mixin scheme($scheme-name) {\n #{color-defaults.$scheme-selector-base}#{color-defaults.$scheme-selector-prefix}#{$scheme-name}#{color-defaults.$scheme-selector-suffix} {\n @content;\n }\n}\n\n/// Generates a theme modifiers with custom props.\n///\n/// @param {map} $theme-map\n/// The map of custom props.\n/// @param {string} $selector-base\n/// The selector base for the theme modifier.\n/// @param {string} $selector-prefix\n/// The selector prefix for the theme modifer.\n/// @param {string} $scope\n/// The scope of the custom properties.\n/// @param {string} $base\n/// The base selector to append the theme modifier to.\n@mixin generate-modifiers(\n $theme-map,\n $selector-base,\n $selector-prefix,\n $scope: \"\",\n $base: \"&\"\n) {\n @each $color, $map in $theme-map {\n // e.g. &.primary, &.secondary, &.tertiary\n #{$base}#{$selector-base}#{$selector-prefix}#{$color} {\n @each $prop, $value in $map {\n --#{root-defaults.$prefix}#{$scope}#{$prop}: #{theme.get(\n map.get($value, color),\n map.get($value, shade)\n )};\n }\n }\n }\n}\n"],"names":[]}