@layer onyx.utility {
  // all z-indices that are needed in the onyx design system
  :root {
    // used for full app overlays, e.g. modals/pop-ups
    --onyx-z-index-app-overlay: 60;
    // used for the nav-bar of the application
    --onyx-z-index-navigation: 50;
    // used for overlays that cover the page (everything except the nav-bar)
    --onyx-z-index-page-overlay: 40;
    // used e.g. for toasts, floating buttons or messages from a notification-center
    --onyx-z-index-notification: 30;
    // used for sticky contents that dock on to the page, e.g. a breadcrumb bar, table header or headlines
    --onyx-z-index-sticky-content: 20;
    // used for tooltips and fly-outs of a nav menu or a combo-box
    --onyx-z-index-flyout: 10;
  }
}