@db-ux/core-components 3.0.2-copilot2-e7bf98b → 3.0.2-shell2-badc28f

package/build/components/shell/shell-desktop.css

@@ -0,0 +1,548 @@
+/* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
+/* Use fixed spacings for all kind of distances (margin, padding, ...) */
+/* The primary use-case for responsive spacings are
+paddings/gaps in an application e.g. the <main> should have a responsive padding. */
+/* Elevation */
+/* Border */
+/* Opacity */
+/* Transitions */
+/* Screen sizes */
+/* Container sizes */
+.db-visually-hidden,
+[data-visually-hidden=true] {
+  clip: rect(0, 0, 0, 0) !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  font-size: 0 !important;
+  all: initial;
+  inset-block-start: 0 !important;
+  block-size: 1px !important;
+  position: absolute !important;
+  inline-size: 1px !important;
+  border-width: 0 !important;
+  border-style: initial !important;
+  border-color: initial !important;
+  border-image: initial !important;
+  padding: 0 !important;
+  pointer-events: none !important;
+}
+
+/* Variants for adaptive components like input, select, notification, ... */
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+/**
+ * @mixin screen-min-max
+ * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
+ */
+/**
+	Generates 3 types of placeholders, e.g:
+	- %db-component-variables-md
+	- %db-font-size-md
+	- %db-overwrite-font-size-md
+ */
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+/* Sub components for shell */
+@keyframes show-right-to-left {
+  from {
+    transform: translateX(110%);
+  }
+  to {
+    transform: translateX(0%);
+  }
+}
+@keyframes hide-right-to-left {
+  from {
+    transform: translateX(0%);
+  }
+  to {
+    transform: translateX(110%);
+  }
+}
+@keyframes show-left-to-right {
+  from {
+    transform: translateX(-110%);
+  }
+  to {
+    transform: translateX(0%);
+  }
+}
+@keyframes hide-left-to-right {
+  from {
+    transform: translateX(0%);
+  }
+  to {
+    transform: translateX(-110%);
+  }
+}
+@keyframes show-bottom-to-top {
+  from {
+    transform: translateY(110%);
+  }
+  to {
+    transform: translateY(0%);
+  }
+}
+@keyframes hide-bottom-to-top {
+  from {
+    transform: translateY(0%);
+  }
+  to {
+    transform: translateY(110%);
+  }
+}
+@keyframes show-top-to-bottom {
+  from {
+    transform: translateY(-110%);
+  }
+  to {
+    transform: translateY(0%);
+  }
+}
+@keyframes hide-top-to-bottom {
+  from {
+    transform: translateY(0%);
+  }
+  to {
+    transform: translateY(-110%);
+  }
+}
+@keyframes popover-animation {
+  0% {
+    opacity: 0;
+    transform: translate(var(--db-popover-center-x, var(--db-popover-translate-x, 0%)), var(--db-popover-center-y, var(--db-popover-translate-y, 0%)));
+  }
+  100% {
+    opacity: 1;
+    transform: translate(var(--db-popover-center-x, 0%), var(--db-popover-center-y, 0%));
+  }
+}
+@keyframes rotate {
+  100% {
+    transform: rotate(1turn);
+  }
+}
+.db-shell {
+  /* stylelint-disable-next-line media-query-no-invalid */
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+}
+@media screen and (48em < width) {
+  .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] {
+    grid-template-areas: "control-panel" "sub-navigation" "main";
+    grid-template-rows: [control-panel] max-content [sub-navigation] max-content [main] 1fr;
+  }
+  .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > .db-shell-sub-navigation {
+    border-block-end: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
+  }
+  .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > .db-shell-sub-navigation .db-navigation {
+    --db-overflow-scroll-button-inset-inline-start: calc(
+    	var(--db-spacing-fixed-sm) / 2
+    );
+    --db-overflow-scroll-button-inset-block: var(--db-spacing-fixed-xs);
+    display: grid;
+    /*
+     * Scroll left / right buttons
+     */
+  }
+  .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation .overflow-scroll-left-button > .db-button, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation .overflow-scroll-left-button:is(.db-button), .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation .overflow-scroll-left-button > .db-button, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation .overflow-scroll-left-button:is(.db-button), .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > .db-shell-sub-navigation .db-navigation .overflow-scroll-left-button > .db-button, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > .db-shell-sub-navigation .db-navigation .overflow-scroll-left-button:is(.db-button) {
+    inset-inline-start: var(--db-overflow-scroll-button-inset-inline-start, 0);
+  }
+  .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation .overflow-scroll-right-button > .db-button, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation .overflow-scroll-right-button:is(.db-button), .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation .overflow-scroll-right-button > .db-button, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation .overflow-scroll-right-button:is(.db-button), .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > .db-shell-sub-navigation .db-navigation .overflow-scroll-right-button > .db-button, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > .db-shell-sub-navigation .db-navigation .overflow-scroll-right-button:is(.db-button) {
+    inset-inline-end: 0;
+  }
+  .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation .overflow-scroll-left-button > .db-button, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation .overflow-scroll-left-button:is(.db-button),
+  .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation .overflow-scroll-right-button > .db-button,
+  .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation .overflow-scroll-right-button:is(.db-button), .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation .overflow-scroll-left-button > .db-button, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation .overflow-scroll-left-button:is(.db-button),
+  .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation .overflow-scroll-right-button > .db-button,
+  .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation .overflow-scroll-right-button:is(.db-button), .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > .db-shell-sub-navigation .db-navigation .overflow-scroll-left-button > .db-button, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > .db-shell-sub-navigation .db-navigation .overflow-scroll-left-button:is(.db-button),
+  .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > .db-shell-sub-navigation .db-navigation .overflow-scroll-right-button > .db-button,
+  .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > .db-shell-sub-navigation .db-navigation .overflow-scroll-right-button:is(.db-button) {
+    position: absolute;
+    z-index: 22;
+    inset-block: var(--db-overflow-scroll-button-inset-block, var(--db-spacing-fixed-xs));
+  }
+  .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation:has(.overflow-scroll-left-button) > menu::before, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation:has(.overflow-scroll-left-button) > menu::before, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > .db-shell-sub-navigation .db-navigation:has(.overflow-scroll-left-button) > menu::before {
+    content: "";
+  }
+  .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation:has(.overflow-scroll-right-button) > menu::after, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation:has(.overflow-scroll-right-button) > menu::after, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > .db-shell-sub-navigation .db-navigation:has(.overflow-scroll-right-button) > menu::after {
+    content: "";
+  }
+  .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation:has(.db-button) > menu::before, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation:has(.db-button) > menu::after, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation:has(.db-button) > menu::before, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation:has(.db-button) > menu::after, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > .db-shell-sub-navigation .db-navigation:has(.db-button) > menu::before, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > .db-shell-sub-navigation .db-navigation:has(.db-button) > menu::after {
+    position: absolute;
+    z-index: 21;
+    background-color: var(--db-adaptive-bg-basic-level-1-default);
+    inline-size: var(--db-sizing-md);
+    block-size: calc(var(--db-overflow-scroll-button-background-block-size, var(--db-spacing-fixed-sm)) + var(--db-sizing-md));
+    flex: 0 0 auto;
+  }
+  .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation:has(.db-button) > menu::before, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation:has(.db-button) > menu::before, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > .db-shell-sub-navigation .db-navigation:has(.db-button) > menu::before {
+    inset-inline-start: var(--db-overflow-scroll-button-inset-inline-start, 0);
+  }
+  .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation:has(.db-button) > menu::after, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation:has(.db-button) > menu::after, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > .db-shell-sub-navigation .db-navigation:has(.db-button) > menu::after {
+    inset-inline-end: 0;
+  }
+  @supports (scrollbar-width: none) {
+    .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation:has(.db-button) > menu, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation:has(.db-button) > menu, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > .db-shell-sub-navigation .db-navigation:has(.db-button) > menu {
+      scrollbar-width: none;
+    }
+  }
+  .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation:has(.db-button) > menu::-webkit-scrollbar, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation:has(.db-button) > menu::-webkit-scrollbar, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > .db-shell-sub-navigation .db-navigation:has(.db-button) > menu::-webkit-scrollbar {
+    display: none;
+  }
+  .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation:has(.db-button) > menu::before, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation:has(.db-button) > menu::after, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation:has(.db-button) > menu::before, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation:has(.db-button) > menu::after, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > .db-shell-sub-navigation .db-navigation:has(.db-button) > menu::before, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > .db-shell-sub-navigation .db-navigation:has(.db-button) > menu::after {
+    block-size: calc(100% - var(--db-border-width-3xs));
+    inset-block: 0;
+    flex: none;
+  }
+  .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation > menu, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation > menu, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > .db-shell-sub-navigation .db-navigation > menu {
+    overflow: auto hidden;
+    scrollbar-gutter: stable both-edges;
+    flex-direction: row;
+  }
+  .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation > menu > * > db-navigation-item-group > .db-navigation-item-group:is(button)::after,
+  .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation > menu > * > db-navigation-item-group > .db-navigation-item-group > button::after, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation > menu > db-navigation-item-group > .db-navigation-item-group:is(button)::after,
+  .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation > menu > db-navigation-item-group > .db-navigation-item-group > button::after, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation > menu > .db-navigation-item-group:is(button)::after,
+  .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation > menu > .db-navigation-item-group > button::after, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation > menu > * > db-navigation-item-group > .db-navigation-item-group:is(button)::after,
+  .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation > menu > * > db-navigation-item-group > .db-navigation-item-group > button::after, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation > menu > db-navigation-item-group > .db-navigation-item-group:is(button)::after,
+  .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation > menu > db-navigation-item-group > .db-navigation-item-group > button::after, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation > menu > .db-navigation-item-group:is(button)::after,
+  .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation > menu > .db-navigation-item-group > button::after, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > .db-shell-sub-navigation .db-navigation > menu > * > db-navigation-item-group > .db-navigation-item-group:is(button)::after,
+  .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > .db-shell-sub-navigation .db-navigation > menu > * > db-navigation-item-group > .db-navigation-item-group > button::after, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > .db-shell-sub-navigation .db-navigation > menu > db-navigation-item-group > .db-navigation-item-group:is(button)::after,
+  .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > .db-shell-sub-navigation .db-navigation > menu > db-navigation-item-group > .db-navigation-item-group > button::after, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > .db-shell-sub-navigation .db-navigation > menu > .db-navigation-item-group:is(button)::after,
+  .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > .db-shell-sub-navigation .db-navigation > menu > .db-navigation-item-group > button::after {
+    --db-icon-trailing: "chevron_down";
+  }
+  .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation > menu > * > db-navigation-item-group > .db-navigation-item-group > .db-navigation-item-group-menu, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation > menu > db-navigation-item-group > .db-navigation-item-group > .db-navigation-item-group-menu, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation > menu > .db-navigation-item-group > .db-navigation-item-group-menu, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation > menu > * > db-navigation-item-group > .db-navigation-item-group > .db-navigation-item-group-menu, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation > menu > db-navigation-item-group > .db-navigation-item-group > .db-navigation-item-group-menu, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation > menu > .db-navigation-item-group > .db-navigation-item-group-menu, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > .db-shell-sub-navigation .db-navigation > menu > * > db-navigation-item-group > .db-navigation-item-group > .db-navigation-item-group-menu, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > .db-shell-sub-navigation .db-navigation > menu > db-navigation-item-group > .db-navigation-item-group > .db-navigation-item-group-menu, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > .db-shell-sub-navigation .db-navigation > menu > .db-navigation-item-group > .db-navigation-item-group-menu {
+    inset-block-start: calc(100% + var(--db-popover-distance, var(--db-spacing-fixed-md)));
+  }
+  .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation > menu > * > db-navigation-item-group > .db-navigation-item-group > .db-navigation-item-group-menu::before, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation > menu > db-navigation-item-group > .db-navigation-item-group > .db-navigation-item-group-menu::before, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation > menu > .db-navigation-item-group > .db-navigation-item-group-menu::before, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation > menu > * > db-navigation-item-group > .db-navigation-item-group > .db-navigation-item-group-menu::before, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation > menu > db-navigation-item-group > .db-navigation-item-group > .db-navigation-item-group-menu::before, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation > menu > .db-navigation-item-group > .db-navigation-item-group-menu::before, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > .db-shell-sub-navigation .db-navigation > menu > * > db-navigation-item-group > .db-navigation-item-group > .db-navigation-item-group-menu::before, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > .db-shell-sub-navigation .db-navigation > menu > db-navigation-item-group > .db-navigation-item-group > .db-navigation-item-group-menu::before, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > .db-shell-sub-navigation .db-navigation > menu > .db-navigation-item-group > .db-navigation-item-group-menu::before {
+    content: "";
+    position: absolute;
+    inset-inline-start: 0;
+    inline-size: 100%;
+    block-size: calc(var(--db-spacing-fixed-3xs) + var(--db-spacing-fixed-md));
+    inset-block-start: calc(-1 * var(--db-spacing-fixed-md) - var(--db-spacing-fixed-3xs));
+  }
+  .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation > menu, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation > menu, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > .db-shell-sub-navigation .db-navigation > menu {
+    /* workaround for showing correct scrolling and focus */
+    padding-inline: calc(var(--db-spacing-fixed-sm) / 2);
+    margin-inline: calc(var(--db-spacing-fixed-sm) / 2);
+    padding-block: var(--db-spacing-fixed-xs);
+  }
+  .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation > .db-shell-sub-navigation-button, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation > .db-shell-sub-navigation-button, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=top] > .db-shell-sub-navigation > .db-shell-sub-navigation-button {
+    display: none;
+  }
+  .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] {
+    grid-template: [control-panel] "control-panel control-panel" max-content [main] "sub-navigation main" 1fr/[control-panel] auto [main] 1fr;
+  }
+  .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > * > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > .db-shell-sub-navigation {
+    display: grid;
+    border-inline-end: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
+  }
+  .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > .db-shell-sub-navigation .db-navigation {
+    max-inline-size: 20em;
+    padding-block: var(--db-spacing-fixed-md);
+  }
+  .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > * > db-shell-sub-navigation > .db-shell-sub-navigation > .db-shell-sub-navigation-button, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > db-shell-sub-navigation > .db-shell-sub-navigation > .db-shell-sub-navigation-button, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > .db-shell-sub-navigation > .db-shell-sub-navigation-button {
+    display: flex;
+  }
+}
+@media screen and (48em < width) and (prefers-reduced-motion: no-preference) {
+  .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > * > db-shell-sub-navigation > .db-shell-sub-navigation > .db-shell-sub-navigation-button .db-button::before, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > db-shell-sub-navigation > .db-shell-sub-navigation > .db-shell-sub-navigation-button .db-button::before, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > .db-shell-sub-navigation > .db-shell-sub-navigation-button .db-button::before {
+    transition: transform var(--db-transition-straight-functional);
+  }
+}
+@media screen and (48em < width) {
+  .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > * > db-shell-sub-navigation > .db-shell-sub-navigation[data-open=false], .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > db-shell-sub-navigation > .db-shell-sub-navigation[data-open=false], .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > .db-shell-sub-navigation[data-open=false] {
+    inline-size: auto;
+    /* stylelint-disable-next-line declaration-property-value-no-unknown */
+    inline-size: calc-size(auto, size);
+    grid-template-areas: "button";
+    grid-template-rows: [button] 1fr;
+  }
+  .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > * > db-shell-sub-navigation > .db-shell-sub-navigation[data-open=false] .db-navigation, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > db-shell-sub-navigation > .db-shell-sub-navigation[data-open=false] .db-navigation, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > .db-shell-sub-navigation[data-open=false] .db-navigation {
+    display: none;
+  }
+  .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > * > db-shell-sub-navigation > .db-shell-sub-navigation[data-open=false] > .db-shell-sub-navigation-button, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > db-shell-sub-navigation > .db-shell-sub-navigation[data-open=false] > .db-shell-sub-navigation-button, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > .db-shell-sub-navigation[data-open=false] > .db-shell-sub-navigation-button {
+    justify-content: center;
+  }
+  .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > * > db-shell-sub-navigation > .db-shell-sub-navigation[data-open=false] > .db-shell-sub-navigation-button .db-button, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > db-shell-sub-navigation > .db-shell-sub-navigation[data-open=false] > .db-shell-sub-navigation-button .db-button, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > .db-shell-sub-navigation[data-open=false] > .db-shell-sub-navigation-button .db-button {
+    block-size: 100%;
+    border-radius: 0;
+  }
+  .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > * > db-shell-sub-navigation > .db-shell-sub-navigation[data-open=false] > .db-shell-sub-navigation-button .db-button::before, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > db-shell-sub-navigation > .db-shell-sub-navigation[data-open=false] > .db-shell-sub-navigation-button .db-button::before, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > .db-shell-sub-navigation[data-open=false] > .db-shell-sub-navigation-button .db-button::before {
+    transform: rotate(-180deg);
+  }
+  .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > * > db-shell-sub-navigation > .db-shell-sub-navigation[data-open=true], .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > db-shell-sub-navigation > .db-shell-sub-navigation[data-open=true], .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > .db-shell-sub-navigation[data-open=true] {
+    grid-template-areas: "navigation" "button";
+    grid-template-rows: [navigation] 1fr [button] auto;
+    inline-size: var(--db-shell-sub-navigation-inline-size, var(--db-container-xs));
+  }
+  .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > * > db-shell-sub-navigation > .db-shell-sub-navigation[data-open=true] .db-navigation, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > db-shell-sub-navigation > .db-shell-sub-navigation[data-open=true] .db-navigation, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > .db-shell-sub-navigation[data-open=true] .db-navigation {
+    overflow: hidden auto;
+    scrollbar-gutter: stable both-edges;
+  }
+  .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > * > db-shell-sub-navigation > .db-shell-sub-navigation[data-open=true] .db-navigation > .overflow-scroll-left-button, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > * > db-shell-sub-navigation > .db-shell-sub-navigation[data-open=true] .db-navigation > db-button > .overflow-scroll-left-button,
+  .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > * > db-shell-sub-navigation > .db-shell-sub-navigation[data-open=true] .db-navigation > .overflow-scroll-right-button, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > * > db-shell-sub-navigation > .db-shell-sub-navigation[data-open=true] .db-navigation > db-button > .overflow-scroll-right-button, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > db-shell-sub-navigation > .db-shell-sub-navigation[data-open=true] .db-navigation > .overflow-scroll-left-button, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > db-shell-sub-navigation > .db-shell-sub-navigation[data-open=true] .db-navigation > db-button > .overflow-scroll-left-button,
+  .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > db-shell-sub-navigation > .db-shell-sub-navigation[data-open=true] .db-navigation > .overflow-scroll-right-button, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > db-shell-sub-navigation > .db-shell-sub-navigation[data-open=true] .db-navigation > db-button > .overflow-scroll-right-button, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > .db-shell-sub-navigation[data-open=true] .db-navigation > .overflow-scroll-left-button, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > .db-shell-sub-navigation[data-open=true] .db-navigation > db-button > .overflow-scroll-left-button,
+  .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > .db-shell-sub-navigation[data-open=true] .db-navigation > .overflow-scroll-right-button, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > .db-shell-sub-navigation[data-open=true] .db-navigation > db-button > .overflow-scroll-right-button {
+    display: none;
+  }
+  .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > * > db-shell-sub-navigation > .db-shell-sub-navigation[data-open=true] .db-navigation:not([data-variant]) > menu .db-navigation-item-group .db-navigation-item-group-menu, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > * > db-shell-sub-navigation > .db-shell-sub-navigation[data-open=true] .db-navigation[data-variant=popover] > menu .db-navigation-item-group .db-navigation-item-group-menu, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > db-shell-sub-navigation > .db-shell-sub-navigation[data-open=true] .db-navigation:not([data-variant]) > menu .db-navigation-item-group .db-navigation-item-group-menu, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > db-shell-sub-navigation > .db-shell-sub-navigation[data-open=true] .db-navigation[data-variant=popover] > menu .db-navigation-item-group .db-navigation-item-group-menu, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > .db-shell-sub-navigation[data-open=true] .db-navigation:not([data-variant]) > menu .db-navigation-item-group .db-navigation-item-group-menu, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > .db-shell-sub-navigation[data-open=true] .db-navigation[data-variant=popover] > menu .db-navigation-item-group .db-navigation-item-group-menu {
+    inset-inline-start: calc(100% + var(--db-spacing-fixed-xs));
+  }
+  .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > * > db-shell-sub-navigation > .db-shell-sub-navigation[data-open=true] .db-navigation:not([data-variant]) > menu .db-navigation-item-group .db-navigation-item-group-menu::before, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > * > db-shell-sub-navigation > .db-shell-sub-navigation[data-open=true] .db-navigation[data-variant=popover] > menu .db-navigation-item-group .db-navigation-item-group-menu::before, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > db-shell-sub-navigation > .db-shell-sub-navigation[data-open=true] .db-navigation:not([data-variant]) > menu .db-navigation-item-group .db-navigation-item-group-menu::before, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > db-shell-sub-navigation > .db-shell-sub-navigation[data-open=true] .db-navigation[data-variant=popover] > menu .db-navigation-item-group .db-navigation-item-group-menu::before, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > .db-shell-sub-navigation[data-open=true] .db-navigation:not([data-variant]) > menu .db-navigation-item-group .db-navigation-item-group-menu::before, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > .db-shell-sub-navigation[data-open=true] .db-navigation[data-variant=popover] > menu .db-navigation-item-group .db-navigation-item-group-menu::before {
+    content: "";
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    block-size: 100%;
+    inline-size: var(--db-navigation-item-inline-size, 100%);
+    background: transparent;
+    transform: translateX(-100%);
+    clip-path: var(--db-navigation-item-clip-path, polygon(10% 30px, 100% 0, 100% 100%));
+  }
+  .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > * > db-shell-sub-navigation > .db-shell-sub-navigation[data-open=true] .db-navigation:not([data-variant]) > menu .db-navigation-item-group .db-navigation-item-group-menu::after, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > * > db-shell-sub-navigation > .db-shell-sub-navigation[data-open=true] .db-navigation[data-variant=popover] > menu .db-navigation-item-group .db-navigation-item-group-menu::after, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > db-shell-sub-navigation > .db-shell-sub-navigation[data-open=true] .db-navigation:not([data-variant]) > menu .db-navigation-item-group .db-navigation-item-group-menu::after, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > db-shell-sub-navigation > .db-shell-sub-navigation[data-open=true] .db-navigation[data-variant=popover] > menu .db-navigation-item-group .db-navigation-item-group-menu::after, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > .db-shell-sub-navigation[data-open=true] .db-navigation:not([data-variant]) > menu .db-navigation-item-group .db-navigation-item-group-menu::after, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > .db-shell-sub-navigation[data-open=true] .db-navigation[data-variant=popover] > menu .db-navigation-item-group .db-navigation-item-group-menu::after {
+    content: "";
+    position: absolute;
+    padding: var(--db-spacing-fixed-xs);
+    inset-block-start: var(--db-spacing-fixed-3xs);
+    inset-inline-end: calc(-1 * var(--db-spacing-fixed-xs));
+    block-size: calc(100% - 2 * var(--db-spacing-fixed-3xs));
+    inline-size: var(--db-spacing-fixed-xs);
+  }
+  .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > * > db-shell-sub-navigation > .db-shell-sub-navigation[data-open=true] .db-navigation > menu, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > db-shell-sub-navigation > .db-shell-sub-navigation[data-open=true] .db-navigation > menu, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > .db-shell-sub-navigation[data-open=true] .db-navigation > menu {
+    flex-direction: column;
+    padding-inline: var(--db-spacing-fixed-lg);
+  }
+  .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > * > db-shell-sub-navigation > .db-shell-sub-navigation[data-open=true] .db-navigation > menu .db-navigation-item-group,
+  .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > * > db-shell-sub-navigation > .db-shell-sub-navigation[data-open=true] .db-navigation > menu .db-navigation-item, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > db-shell-sub-navigation > .db-shell-sub-navigation[data-open=true] .db-navigation > menu .db-navigation-item-group,
+  .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > db-shell-sub-navigation > .db-shell-sub-navigation[data-open=true] .db-navigation > menu .db-navigation-item, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > .db-shell-sub-navigation[data-open=true] .db-navigation > menu .db-navigation-item-group,
+  .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > .db-shell-sub-navigation[data-open=true] .db-navigation > menu .db-navigation-item {
+    inline-size: 100%;
+  }
+  .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > * > db-shell-sub-navigation > .db-shell-sub-navigation[data-open=true] .db-navigation > menu, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > db-shell-sub-navigation > .db-shell-sub-navigation[data-open=true] .db-navigation > menu, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > .db-shell-sub-navigation[data-open=true] .db-navigation > menu {
+    padding-inline: 0;
+  }
+  .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > * > db-shell-sub-navigation > .db-shell-sub-navigation[data-open=true] > .db-shell-sub-navigation-button, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > db-shell-sub-navigation > .db-shell-sub-navigation[data-open=true] > .db-shell-sub-navigation-button, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > .db-shell-sub-navigation[data-open=true] > .db-shell-sub-navigation-button {
+    padding-block: var(--db-spacing-fixed-xs);
+    padding-inline: var(--db-spacing-fixed-lg);
+    justify-content: end;
+    margin-block-start: auto;
+    --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
+    position: var(--db-tooltip-parent-position, relative);
+  }
+  .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > * > db-shell-sub-navigation > .db-shell-sub-navigation[data-open=true] > .db-shell-sub-navigation-button[data-emphasis=strong], .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > db-shell-sub-navigation > .db-shell-sub-navigation[data-open=true] > .db-shell-sub-navigation-button[data-emphasis=strong], .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > .db-shell-sub-navigation[data-open=true] > .db-shell-sub-navigation-button[data-emphasis=strong] {
+    --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
+  }
+  .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > * > db-shell-sub-navigation > .db-shell-sub-navigation[data-open=true] > .db-shell-sub-navigation-button::before, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > db-shell-sub-navigation > .db-shell-sub-navigation[data-open=true] > .db-shell-sub-navigation-button::before, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > .db-shell-sub-navigation[data-open=true] > .db-shell-sub-navigation-button::before {
+    content: "";
+    background-color: var(--db-divider-bg-color);
+    position: absolute;
+    block-size: var(--db-border-width-3xs);
+    inset-block-start: 0;
+    inset-inline: 0;
+    /* stylelint-disable-next-line db-ux/use-border-color */
+    /* stylelint-disable-next-line at-rule-empty-line-before */
+  }
+}
+@media screen and (48em < width) and (forced-colors: active) {
+  .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > * > db-shell-sub-navigation > .db-shell-sub-navigation[data-open=true] > .db-shell-sub-navigation-button::before, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > db-shell-sub-navigation > .db-shell-sub-navigation[data-open=true] > .db-shell-sub-navigation-button::before, .db-shell[data-control-panel-desktop-position=top][data-sub-navigation-desktop-position=left] > .db-shell-sub-navigation[data-open=true] > .db-shell-sub-navigation-button::before {
+    border-block-start: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  }
+}
+@media screen and (48em < width) {
+  .db-shell[data-control-panel-desktop-position=left] {
+    grid-template-areas: "control-panel main" "control-panel main";
+    grid-template-columns: [control-panel] min-content [main] 1fr;
+  }
+  .db-shell[data-control-panel-desktop-position=left]:has(> * > db-shell-sub-navigation > .db-shell-sub-navigation, > db-shell-sub-navigation > .db-shell-sub-navigation, > .db-shell-sub-navigation) {
+    grid-template-areas: "control-panel sub-navigation" "control-panel main";
+  }
+  .db-shell[data-control-panel-desktop-position=left] > * > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell[data-control-panel-desktop-position=left] > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell[data-control-panel-desktop-position=left] > .db-shell-sub-navigation {
+    border-block-end: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
+  }
+  .db-shell[data-control-panel-desktop-position=left] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation, .db-shell[data-control-panel-desktop-position=left] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation, .db-shell[data-control-panel-desktop-position=left] > .db-shell-sub-navigation .db-navigation {
+    --db-overflow-scroll-button-inset-inline-start: calc(
+    	var(--db-spacing-fixed-sm) / 2
+    );
+    --db-overflow-scroll-button-inset-block: var(--db-spacing-fixed-xs);
+    display: grid;
+    /*
+     * Scroll left / right buttons
+     */
+  }
+  .db-shell[data-control-panel-desktop-position=left] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation .overflow-scroll-left-button > .db-button, .db-shell[data-control-panel-desktop-position=left] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation .overflow-scroll-left-button:is(.db-button), .db-shell[data-control-panel-desktop-position=left] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation .overflow-scroll-left-button > .db-button, .db-shell[data-control-panel-desktop-position=left] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation .overflow-scroll-left-button:is(.db-button), .db-shell[data-control-panel-desktop-position=left] > .db-shell-sub-navigation .db-navigation .overflow-scroll-left-button > .db-button, .db-shell[data-control-panel-desktop-position=left] > .db-shell-sub-navigation .db-navigation .overflow-scroll-left-button:is(.db-button) {
+    inset-inline-start: var(--db-overflow-scroll-button-inset-inline-start, 0);
+  }
+  .db-shell[data-control-panel-desktop-position=left] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation .overflow-scroll-right-button > .db-button, .db-shell[data-control-panel-desktop-position=left] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation .overflow-scroll-right-button:is(.db-button), .db-shell[data-control-panel-desktop-position=left] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation .overflow-scroll-right-button > .db-button, .db-shell[data-control-panel-desktop-position=left] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation .overflow-scroll-right-button:is(.db-button), .db-shell[data-control-panel-desktop-position=left] > .db-shell-sub-navigation .db-navigation .overflow-scroll-right-button > .db-button, .db-shell[data-control-panel-desktop-position=left] > .db-shell-sub-navigation .db-navigation .overflow-scroll-right-button:is(.db-button) {
+    inset-inline-end: 0;
+  }
+  .db-shell[data-control-panel-desktop-position=left] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation .overflow-scroll-left-button > .db-button, .db-shell[data-control-panel-desktop-position=left] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation .overflow-scroll-left-button:is(.db-button),
+  .db-shell[data-control-panel-desktop-position=left] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation .overflow-scroll-right-button > .db-button,
+  .db-shell[data-control-panel-desktop-position=left] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation .overflow-scroll-right-button:is(.db-button), .db-shell[data-control-panel-desktop-position=left] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation .overflow-scroll-left-button > .db-button, .db-shell[data-control-panel-desktop-position=left] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation .overflow-scroll-left-button:is(.db-button),
+  .db-shell[data-control-panel-desktop-position=left] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation .overflow-scroll-right-button > .db-button,
+  .db-shell[data-control-panel-desktop-position=left] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation .overflow-scroll-right-button:is(.db-button), .db-shell[data-control-panel-desktop-position=left] > .db-shell-sub-navigation .db-navigation .overflow-scroll-left-button > .db-button, .db-shell[data-control-panel-desktop-position=left] > .db-shell-sub-navigation .db-navigation .overflow-scroll-left-button:is(.db-button),
+  .db-shell[data-control-panel-desktop-position=left] > .db-shell-sub-navigation .db-navigation .overflow-scroll-right-button > .db-button,
+  .db-shell[data-control-panel-desktop-position=left] > .db-shell-sub-navigation .db-navigation .overflow-scroll-right-button:is(.db-button) {
+    position: absolute;
+    z-index: 22;
+    inset-block: var(--db-overflow-scroll-button-inset-block, var(--db-spacing-fixed-xs));
+  }
+  .db-shell[data-control-panel-desktop-position=left] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation:has(.overflow-scroll-left-button) > menu::before, .db-shell[data-control-panel-desktop-position=left] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation:has(.overflow-scroll-left-button) > menu::before, .db-shell[data-control-panel-desktop-position=left] > .db-shell-sub-navigation .db-navigation:has(.overflow-scroll-left-button) > menu::before {
+    content: "";
+  }
+  .db-shell[data-control-panel-desktop-position=left] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation:has(.overflow-scroll-right-button) > menu::after, .db-shell[data-control-panel-desktop-position=left] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation:has(.overflow-scroll-right-button) > menu::after, .db-shell[data-control-panel-desktop-position=left] > .db-shell-sub-navigation .db-navigation:has(.overflow-scroll-right-button) > menu::after {
+    content: "";
+  }
+  .db-shell[data-control-panel-desktop-position=left] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation:has(.db-button) > menu::before, .db-shell[data-control-panel-desktop-position=left] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation:has(.db-button) > menu::after, .db-shell[data-control-panel-desktop-position=left] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation:has(.db-button) > menu::before, .db-shell[data-control-panel-desktop-position=left] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation:has(.db-button) > menu::after, .db-shell[data-control-panel-desktop-position=left] > .db-shell-sub-navigation .db-navigation:has(.db-button) > menu::before, .db-shell[data-control-panel-desktop-position=left] > .db-shell-sub-navigation .db-navigation:has(.db-button) > menu::after {
+    position: absolute;
+    z-index: 21;
+    background-color: var(--db-adaptive-bg-basic-level-1-default);
+    inline-size: var(--db-sizing-md);
+    block-size: calc(var(--db-overflow-scroll-button-background-block-size, var(--db-spacing-fixed-sm)) + var(--db-sizing-md));
+    flex: 0 0 auto;
+  }
+  .db-shell[data-control-panel-desktop-position=left] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation:has(.db-button) > menu::before, .db-shell[data-control-panel-desktop-position=left] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation:has(.db-button) > menu::before, .db-shell[data-control-panel-desktop-position=left] > .db-shell-sub-navigation .db-navigation:has(.db-button) > menu::before {
+    inset-inline-start: var(--db-overflow-scroll-button-inset-inline-start, 0);
+  }
+  .db-shell[data-control-panel-desktop-position=left] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation:has(.db-button) > menu::after, .db-shell[data-control-panel-desktop-position=left] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation:has(.db-button) > menu::after, .db-shell[data-control-panel-desktop-position=left] > .db-shell-sub-navigation .db-navigation:has(.db-button) > menu::after {
+    inset-inline-end: 0;
+  }
+  @supports (scrollbar-width: none) {
+    .db-shell[data-control-panel-desktop-position=left] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation:has(.db-button) > menu, .db-shell[data-control-panel-desktop-position=left] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation:has(.db-button) > menu, .db-shell[data-control-panel-desktop-position=left] > .db-shell-sub-navigation .db-navigation:has(.db-button) > menu {
+      scrollbar-width: none;
+    }
+  }
+  .db-shell[data-control-panel-desktop-position=left] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation:has(.db-button) > menu::-webkit-scrollbar, .db-shell[data-control-panel-desktop-position=left] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation:has(.db-button) > menu::-webkit-scrollbar, .db-shell[data-control-panel-desktop-position=left] > .db-shell-sub-navigation .db-navigation:has(.db-button) > menu::-webkit-scrollbar {
+    display: none;
+  }
+  .db-shell[data-control-panel-desktop-position=left] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation:has(.db-button) > menu::before, .db-shell[data-control-panel-desktop-position=left] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation:has(.db-button) > menu::after, .db-shell[data-control-panel-desktop-position=left] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation:has(.db-button) > menu::before, .db-shell[data-control-panel-desktop-position=left] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation:has(.db-button) > menu::after, .db-shell[data-control-panel-desktop-position=left] > .db-shell-sub-navigation .db-navigation:has(.db-button) > menu::before, .db-shell[data-control-panel-desktop-position=left] > .db-shell-sub-navigation .db-navigation:has(.db-button) > menu::after {
+    block-size: calc(100% - var(--db-border-width-3xs));
+    inset-block: 0;
+    flex: none;
+  }
+  .db-shell[data-control-panel-desktop-position=left] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation > menu, .db-shell[data-control-panel-desktop-position=left] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation > menu, .db-shell[data-control-panel-desktop-position=left] > .db-shell-sub-navigation .db-navigation > menu {
+    overflow: auto hidden;
+    scrollbar-gutter: stable both-edges;
+    flex-direction: row;
+  }
+  .db-shell[data-control-panel-desktop-position=left] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation > menu > * > db-navigation-item-group > .db-navigation-item-group:is(button)::after,
+  .db-shell[data-control-panel-desktop-position=left] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation > menu > * > db-navigation-item-group > .db-navigation-item-group > button::after, .db-shell[data-control-panel-desktop-position=left] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation > menu > db-navigation-item-group > .db-navigation-item-group:is(button)::after,
+  .db-shell[data-control-panel-desktop-position=left] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation > menu > db-navigation-item-group > .db-navigation-item-group > button::after, .db-shell[data-control-panel-desktop-position=left] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation > menu > .db-navigation-item-group:is(button)::after,
+  .db-shell[data-control-panel-desktop-position=left] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation > menu > .db-navigation-item-group > button::after, .db-shell[data-control-panel-desktop-position=left] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation > menu > * > db-navigation-item-group > .db-navigation-item-group:is(button)::after,
+  .db-shell[data-control-panel-desktop-position=left] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation > menu > * > db-navigation-item-group > .db-navigation-item-group > button::after, .db-shell[data-control-panel-desktop-position=left] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation > menu > db-navigation-item-group > .db-navigation-item-group:is(button)::after,
+  .db-shell[data-control-panel-desktop-position=left] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation > menu > db-navigation-item-group > .db-navigation-item-group > button::after, .db-shell[data-control-panel-desktop-position=left] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation > menu > .db-navigation-item-group:is(button)::after,
+  .db-shell[data-control-panel-desktop-position=left] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation > menu > .db-navigation-item-group > button::after, .db-shell[data-control-panel-desktop-position=left] > .db-shell-sub-navigation .db-navigation > menu > * > db-navigation-item-group > .db-navigation-item-group:is(button)::after,
+  .db-shell[data-control-panel-desktop-position=left] > .db-shell-sub-navigation .db-navigation > menu > * > db-navigation-item-group > .db-navigation-item-group > button::after, .db-shell[data-control-panel-desktop-position=left] > .db-shell-sub-navigation .db-navigation > menu > db-navigation-item-group > .db-navigation-item-group:is(button)::after,
+  .db-shell[data-control-panel-desktop-position=left] > .db-shell-sub-navigation .db-navigation > menu > db-navigation-item-group > .db-navigation-item-group > button::after, .db-shell[data-control-panel-desktop-position=left] > .db-shell-sub-navigation .db-navigation > menu > .db-navigation-item-group:is(button)::after,
+  .db-shell[data-control-panel-desktop-position=left] > .db-shell-sub-navigation .db-navigation > menu > .db-navigation-item-group > button::after {
+    --db-icon-trailing: "chevron_down";
+  }
+  .db-shell[data-control-panel-desktop-position=left] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation > menu > * > db-navigation-item-group > .db-navigation-item-group > .db-navigation-item-group-menu, .db-shell[data-control-panel-desktop-position=left] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation > menu > db-navigation-item-group > .db-navigation-item-group > .db-navigation-item-group-menu, .db-shell[data-control-panel-desktop-position=left] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation > menu > .db-navigation-item-group > .db-navigation-item-group-menu, .db-shell[data-control-panel-desktop-position=left] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation > menu > * > db-navigation-item-group > .db-navigation-item-group > .db-navigation-item-group-menu, .db-shell[data-control-panel-desktop-position=left] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation > menu > db-navigation-item-group > .db-navigation-item-group > .db-navigation-item-group-menu, .db-shell[data-control-panel-desktop-position=left] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation > menu > .db-navigation-item-group > .db-navigation-item-group-menu, .db-shell[data-control-panel-desktop-position=left] > .db-shell-sub-navigation .db-navigation > menu > * > db-navigation-item-group > .db-navigation-item-group > .db-navigation-item-group-menu, .db-shell[data-control-panel-desktop-position=left] > .db-shell-sub-navigation .db-navigation > menu > db-navigation-item-group > .db-navigation-item-group > .db-navigation-item-group-menu, .db-shell[data-control-panel-desktop-position=left] > .db-shell-sub-navigation .db-navigation > menu > .db-navigation-item-group > .db-navigation-item-group-menu {
+    inset-block-start: calc(100% + var(--db-popover-distance, var(--db-spacing-fixed-md)));
+  }
+  .db-shell[data-control-panel-desktop-position=left] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation > menu > * > db-navigation-item-group > .db-navigation-item-group > .db-navigation-item-group-menu::before, .db-shell[data-control-panel-desktop-position=left] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation > menu > db-navigation-item-group > .db-navigation-item-group > .db-navigation-item-group-menu::before, .db-shell[data-control-panel-desktop-position=left] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation > menu > .db-navigation-item-group > .db-navigation-item-group-menu::before, .db-shell[data-control-panel-desktop-position=left] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation > menu > * > db-navigation-item-group > .db-navigation-item-group > .db-navigation-item-group-menu::before, .db-shell[data-control-panel-desktop-position=left] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation > menu > db-navigation-item-group > .db-navigation-item-group > .db-navigation-item-group-menu::before, .db-shell[data-control-panel-desktop-position=left] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation > menu > .db-navigation-item-group > .db-navigation-item-group-menu::before, .db-shell[data-control-panel-desktop-position=left] > .db-shell-sub-navigation .db-navigation > menu > * > db-navigation-item-group > .db-navigation-item-group > .db-navigation-item-group-menu::before, .db-shell[data-control-panel-desktop-position=left] > .db-shell-sub-navigation .db-navigation > menu > db-navigation-item-group > .db-navigation-item-group > .db-navigation-item-group-menu::before, .db-shell[data-control-panel-desktop-position=left] > .db-shell-sub-navigation .db-navigation > menu > .db-navigation-item-group > .db-navigation-item-group-menu::before {
+    content: "";
+    position: absolute;
+    inset-inline-start: 0;
+    inline-size: 100%;
+    block-size: calc(var(--db-spacing-fixed-3xs) + var(--db-spacing-fixed-md));
+    inset-block-start: calc(-1 * var(--db-spacing-fixed-md) - var(--db-spacing-fixed-3xs));
+  }
+  .db-shell[data-control-panel-desktop-position=left] > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation > menu, .db-shell[data-control-panel-desktop-position=left] > db-shell-sub-navigation > .db-shell-sub-navigation .db-navigation > menu, .db-shell[data-control-panel-desktop-position=left] > .db-shell-sub-navigation .db-navigation > menu {
+    /* workaround for showing correct scrolling and focus */
+    padding-inline: calc(var(--db-spacing-fixed-sm) / 2);
+    margin-inline: calc(var(--db-spacing-fixed-sm) / 2);
+    padding-block: var(--db-spacing-fixed-xs);
+  }
+  .db-shell[data-control-panel-desktop-position=left] > * > db-shell-sub-navigation > .db-shell-sub-navigation > .db-shell-sub-navigation-button, .db-shell[data-control-panel-desktop-position=left] > db-shell-sub-navigation > .db-shell-sub-navigation > .db-shell-sub-navigation-button, .db-shell[data-control-panel-desktop-position=left] > .db-shell-sub-navigation > .db-shell-sub-navigation-button {
+    display: none;
+  }
+  .db-shell > * > db-control-panel-mobile > .db-control-panel-mobile, .db-shell > db-control-panel-mobile > .db-control-panel-mobile, .db-shell > .db-control-panel-mobile {
+    display: none;
+  }
+}