@db-ux/core-components 4.14.0-shell-52d18db → 5.0.0

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

@@ -1,105 +0,0 @@
-@use "sass:string";
-@use "@db-ux/core-foundations/build/styles/variables";
-@use "@db-ux/core-foundations/build/styles/screen-sizes";
-@use "@db-ux/core-foundations/build/styles/colors";
-@use "../../styles/internal/control-panel-desktop";
-@use "../shell-sub-navigation/shell-sub-navigation";
-@use "../../styles/internal/custom-elements";
-
-@mixin control-panel-top {
-	&:not(:has(#{string.unquote(custom-elements.$control-panel-flat-icon)})) {
-		&[data-control-panel-desktop-position="top"] {
-			// Sub-navigation: top
-			&[data-sub-navigation-desktop-position="top"] {
-				grid-template-areas:
-					"control-panel"
-					"shell-content";
-				grid-template-rows:
-					[control-panel] max-content
-					[shell-content] 1fr;
-
-				&:has(
-					#{string.unquote(custom-elements.$shell-sub-navigation)}
-				) {
-					grid-template-areas:
-						"control-panel"
-						"sub-navigation"
-						"shell-content";
-					grid-template-rows:
-						[control-panel] max-content
-						[sub-navigation] max-content
-						[shell-content] 1fr;
-				}
-
-				@include shell-sub-navigation.sub-navigation-top;
-			}
-
-			// Sub-navigation: left
-			&[data-sub-navigation-desktop-position="left"] {
-				grid-template:
-					[control-panel] "control-panel control-panel" max-content
-					[shell-content] "shell-content shell-content" 1fr;
-
-				&:has(
-					#{string.unquote(custom-elements.$shell-sub-navigation)}
-				) {
-					grid-template:
-						[control-panel] "control-panel control-panel" max-content
-						[shell-content] "sub-navigation shell-content" 1fr /
-						[sub-navigation] auto
-						[shell-content] 1fr;
-				}
-
-				@include shell-sub-navigation.sub-navigation-left;
-			}
-		}
-	}
-}
-
-@mixin control-panel-left {
-	&:has(#{string.unquote(custom-elements.$control-panel-flat-icon)}),
-	&[data-control-panel-desktop-position="left"] {
-		grid-template-areas:
-			"control-panel shell-content"
-			"control-panel shell-content";
-		grid-template-columns:
-			[control-panel] min-content
-			[shell-content] 1fr;
-
-		&:has(#{string.unquote(custom-elements.$shell-sub-navigation)}) {
-			grid-template-areas:
-				"control-panel sub-navigation"
-				"control-panel shell-content";
-			grid-template-rows:
-				[control-panel] min-content
-				[shell-content] 1fr;
-		}
-
-		@include shell-sub-navigation.sub-navigation-top;
-	}
-}
-
-.db-shell {
-	// DESKTOP
-	@include screen-sizes.screen-min-max(
-		(
-			min: "sm"
-		)
-	) {
-		@include control-panel-top;
-		@include control-panel-left;
-
-		// Hide mobile control panel
-		#{string.unquote(custom-elements.$control-panel-mobile)} {
-			display: none;
-		}
-
-		// Hide mobile control-panel-flat-icon
-		db-control-panel-flat-icon
-			+ db-control-panel-flat-icon
-			> .db-control-panel-flat-icon,
-		.db-control-panel-flat-icon + .db-control-panel-flat-icon {
-			display: none;
-		}
-	}
-}

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

@@ -1,441 +0,0 @@
-.db-visually-hidden,
-[data-visually-hidden=true] {
-  position: absolute !important;
-  inset-block-start: 0 !important;
-  inline-size: 1px !important;
-  block-size: 1px !important;
-  overflow: hidden !important;
-  clip: rect(0, 0, 0, 0) !important;
-  white-space: nowrap !important;
-  border: 0 !important;
-  padding: 0 !important;
-  pointer-events: none !important;
-}
-
-/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
-/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
-/* Variants for adaptive components like input, select, notification, ... */
-/* Sub components for shell */
-@keyframes popover-animation {
-  0% {
-    pointer-events: none;
-    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% {
-    pointer-events: auto;
-    opacity: 1;
-    transform: translate(var(--db-popover-center-x, 0%), var(--db-popover-center-y, 0%));
-  }
-}
-@keyframes rotate {
-  100% {
-    transform: rotate(1turn);
-  }
-}
-dialog {
-  padding: 0;
-  margin: 0;
-  border: 0;
-  z-index: 9996;
-  color: inherit;
-}
-dialog:not([data-position=absolute])[data-variant], dialog:not([data-position=absolute])[data-backdrop] {
-  position: fixed;
-  inset: 0;
-  z-index: 9995;
-}
-dialog:not([data-position=absolute])[data-variant=inside]:not([data-backdrop=none])::before {
-  content: "";
-  position: fixed;
-  inset: 0;
-}
-dialog:not([data-backdrop=none])::backdrop, dialog:not([data-backdrop=none])::before {
-  background-color: color(from var(--db-adaptive-on-bg-basic-emphasis-100-default) srgb r g b/var(--db-opacity-lg));
-}
-dialog:not([data-backdrop=none])[data-backdrop=invisible]::backdrop, dialog:not([data-backdrop=none])[data-backdrop=invisible]::before {
-  background-color: transparent;
-}
-dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data-backdrop=none])[data-backdrop=weak]::before {
-  background-color: color(from var(--db-adaptive-on-bg-basic-emphasis-100-default) srgb r g b/var(--db-opacity-sm));
-}
-
-.db-drawer .db-drawer-container:not([data-direction]), .db-drawer .db-drawer-container[data-direction=to-left], .db-drawer .db-drawer-container[data-direction=to-right] {
-  inline-size: calc(100lvw - var(--db-drawer-container-backdrop-spacing, 0px));
-  min-inline-size: var(--db-drawer-min-width, auto);
-  max-inline-size: var(--db-drawer-max-width, var(--db-drawer-max-width-horizontal));
-}
-.db-drawer .db-drawer-container:not([data-container-size]):not([data-direction]), .db-drawer .db-drawer-container[data-direction=to-left]:not([data-container-size]), .db-drawer .db-drawer-container[data-direction=to-right]:not([data-container-size]), .db-drawer [data-container-size=small].db-drawer-container:not([data-direction]), .db-drawer [data-container-size=small].db-drawer-container[data-direction=to-left], .db-drawer [data-container-size=small].db-drawer-container[data-direction=to-right] {
-  --db-drawer-max-width-horizontal: var(--db-container-xs);
-}
-.db-drawer [data-container-size=medium].db-drawer-container:not([data-direction]), .db-drawer [data-container-size=medium].db-drawer-container[data-direction=to-left], .db-drawer [data-container-size=medium].db-drawer-container[data-direction=to-right] {
-  --db-drawer-max-width-horizontal: var(--db-container-lg);
-}
-.db-drawer [data-container-size=large].db-drawer-container:not([data-direction]), .db-drawer [data-container-size=large].db-drawer-container[data-direction=to-left], .db-drawer [data-container-size=large].db-drawer-container[data-direction=to-right] {
-  --db-drawer-max-width-horizontal: var(--db-container-3xl);
-}
-
-.db-drawer .db-drawer-container[data-direction=down], .db-drawer .db-drawer-container[data-direction=up] {
-  block-size: calc(100lvh - var(--db-drawer-container-backdrop-spacing, 0px));
-  min-block-size: var(--db-drawer-min-height, auto);
-  max-block-size: var(--db-drawer-max-height, var(--db-drawer-max-height-vertical));
-}
-.db-drawer [data-container-size=small].db-drawer-container[data-direction=down], .db-drawer [data-container-size=small].db-drawer-container[data-direction=up] {
-  --db-drawer-max-height-vertical: 33lvh;
-}
-.db-drawer [data-container-size=medium].db-drawer-container[data-direction=down], .db-drawer [data-container-size=medium].db-drawer-container[data-direction=up] {
-  --db-drawer-max-height-vertical: 50lvh;
-}
-.db-drawer .db-drawer-container[data-direction=down]:not([data-container-size]), .db-drawer .db-drawer-container[data-direction=up]:not([data-container-size]), .db-drawer [data-container-size=large].db-drawer-container[data-direction=down], .db-drawer [data-container-size=large].db-drawer-container[data-direction=up] {
-  --db-drawer-max-height-vertical: 67lvh;
-}
-
-.db-drawer .db-drawer-container[data-direction=to-right]:not([data-transition=open]) {
-  transform: translateX(-110%);
-}
-.db-drawer .db-drawer-container[data-direction=to-right] {
-  inset-inline: 0 auto;
-}
-.db-drawer [data-rounded=true].db-drawer-container[data-direction=to-right] {
-  border-start-end-radius: var(--db-border-radius-sm);
-  border-end-end-radius: var(--db-border-radius-sm);
-}
-
-.db-drawer .db-drawer-container:not([data-transition=open]):not([data-direction]), .db-drawer .db-drawer-container[data-direction=to-left]:not([data-transition=open]) {
-  transform: translateX(110%);
-}
-.db-drawer .db-drawer-container:not([data-direction]), .db-drawer .db-drawer-container[data-direction=to-left] {
-  inset-inline: auto 0;
-}
-.db-drawer [data-rounded=true].db-drawer-container:not([data-direction]), .db-drawer [data-rounded=true].db-drawer-container[data-direction=to-left] {
-  border-start-start-radius: var(--db-border-radius-sm);
-  border-end-start-radius: var(--db-border-radius-sm);
-}
-
-.db-drawer .db-drawer-container[data-direction=up]:not([data-transition=open]) {
-  transform: translateY(110%);
-}
-.db-drawer .db-drawer-container[data-direction=up] {
-  inset: auto 0 0;
-}
-.db-drawer [data-rounded=true].db-drawer-container[data-direction=up] {
-  border-start-end-radius: var(--db-border-radius-sm);
-  border-start-start-radius: var(--db-border-radius-sm);
-}
-
-.db-drawer .db-drawer-container[data-direction=down]:not([data-transition=open]) {
-  transform: translateY(-110%);
-}
-.db-drawer .db-drawer-container[data-direction=down] {
-  inset: 0 0 auto;
-}
-.db-drawer [data-rounded=true].db-drawer-container[data-direction=down] {
-  border-end-end-radius: var(--db-border-radius-sm);
-  border-end-start-radius: var(--db-border-radius-sm);
-}
-
-.db-drawer .db-drawer-container:not(:has(.db-drawer-footer)) > .db-drawer-content {
-  margin-block-end: env(safe-area-inset-bottom);
-}
-.db-drawer .db-drawer-container:has(.db-drawer-footer) .db-drawer-footer {
-  padding-block-end: calc(var(--db-spacing-fixed-xs) + env(safe-area-inset-bottom));
-}
-
-.db-drawer .db-drawer-container {
-  --db-drawer-close-delay: 0;
-}
-@media (prefers-reduced-motion: no-preference) {
-  .db-drawer .db-drawer-container {
-    --db-drawer-close-delay: var(--db-transition-duration-slow);
-  }
-}
-.db-drawer .db-drawer-container {
-  display: grid;
-  grid-template-rows: [header] auto [main] 1fr [footer] auto;
-  background-color: var(--db-adaptive-bg-basic-level-1-default);
-  inline-size: 100lvw;
-  block-size: 100lvh;
-  position: fixed;
-  box-shadow: var(--db-elevation-md);
-}
-.db-drawer .db-drawer-container > .db-drawer-content {
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  padding: var(--db-drawer-content-padding, var(--db-spacing-fixed-xs) max(var(--db-spacing-fixed-sm), max(env(safe-area-inset-left), env(safe-area-inset-right))));
-}
-.db-drawer .db-drawer-container[data-show-spacing=true] {
-  --db-drawer-container-backdrop-spacing: var(--db-sizing-md);
-}
-.db-drawer .db-drawer-container[data-show-spacing=true]:not([data-direction]), .db-drawer .db-drawer-container[data-show-spacing=true][data-direction=to-left] {
-  border-inline-end: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
-}
-.db-drawer .db-drawer-container[data-show-spacing=true][data-direction=to-right] {
-  border-inline-start: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
-}
-.db-drawer .db-drawer-container[data-show-spacing=true][data-direction=up] {
-  border-block-start: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
-}
-.db-drawer .db-drawer-container[data-show-spacing=true][data-direction=down] {
-  border-block-end: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
-}
-.db-drawer .db-drawer-container[data-rounded=true] {
-  box-shadow: var(--db-elevation-md);
-}
-@media (prefers-reduced-motion: no-preference) {
-  .db-drawer .db-drawer-container {
-    transition: transform var(--db-transition-duration-extra-slow) var(--db-transition-timing-emotional);
-  }
-}
-.db-drawer[data-position=absolute] {
-  position: absolute;
-  z-index: 3;
-  inset: 0;
-  block-size: 100%;
-  inline-size: 100%;
-  background-color: transparent;
-}
-.db-drawer[data-position=absolute][open] {
-  display: flex;
-}
-.db-drawer[data-position=absolute]:not([data-direction]), .db-drawer[data-position=absolute][data-direction=to-right], .db-drawer[data-position=absolute][data-direction=to-left] {
-  flex-direction: column;
-}
-.db-drawer[data-position=absolute][data-direction=to-right], .db-drawer[data-position=absolute][data-direction=down] {
-  align-items: flex-start;
-}
-.db-drawer[data-position=absolute]:not([data-direction]), .db-drawer[data-position=absolute][data-direction=to-left], .db-drawer[data-position=absolute][data-direction=up] {
-  align-items: flex-end;
-}
-.db-drawer[data-position=absolute] .db-drawer-container {
-  position: relative;
-}
-.db-drawer[open] .db-drawer-container[data-transition=open] {
-  transform: none;
-}
-@media (prefers-reduced-motion: no-preference) {
-  .db-drawer[open] .db-drawer-container[data-transition=close] {
-    transition: transform var(--db-drawer-close-delay) var(--db-transition-timing-emotional);
-  }
-}
-
-.db-shell-sub-navigation {
-  grid-area: sub-navigation;
-  overflow: hidden;
-}
-.db-shell-sub-navigation > .db-shell-sub-navigation-button {
-  grid-area: button;
-  display: flex;
-}
-@media screen and (prefers-reduced-motion: no-preference) {
-  .db-shell-sub-navigation > .db-shell-sub-navigation-button .db-button::before {
-    transition: transform var(--db-transition-straight-functional);
-  }
-}
-.db-shell-sub-navigation .db-control-panel-navigation {
-  grid-area: navigation;
-}
-
-.db-shell {
-  /* stylelint-disable-next-line media-query-no-invalid */
-}
-@media (width <= 48em) {
-  .db-shell:not(:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon))[data-control-panel-mobile-position=top]:not([data-sub-navigation-mobile-position]), .db-shell:not(:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon))[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=none] {
-    grid-template-areas: "control-panel" "shell-content";
-    grid-template-rows: [control-panel] auto [shell-content] 1fr;
-  }
-  .db-shell:not(:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon))[data-control-panel-mobile-position=top]:not([data-sub-navigation-mobile-position]) > * > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell:not(:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon))[data-control-panel-mobile-position=top]:not([data-sub-navigation-mobile-position]) > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell:not(:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon))[data-control-panel-mobile-position=top]:not([data-sub-navigation-mobile-position]) > .db-shell-sub-navigation, .db-shell:not(:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon))[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=none] > * > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell:not(:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon))[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=none] > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell:not(:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon))[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=none] > .db-shell-sub-navigation {
-    display: none;
-  }
-  .db-shell:not(:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon))[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] {
-    grid-template-areas: "control-panel" "sub-navigation" "shell-content";
-    grid-template-rows: [control-panel] auto [sub-navigation] auto [shell-content] 1fr;
-  }
-  .db-shell:not(:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon))[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell:not(:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon))[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell:not(:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon))[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] > .db-shell-sub-navigation {
-    --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
-    position: var(--db-tooltip-parent-position, relative);
-  }
-  .db-shell:not(:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon))[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation[data-emphasis=strong], .db-shell:not(:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon))[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation[data-emphasis=strong], .db-shell:not(:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon))[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] > .db-shell-sub-navigation[data-emphasis=strong] {
-    --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
-  }
-  .db-shell:not(:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon))[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation::before, .db-shell:not(:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon))[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation::before, .db-shell:not(:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon))[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] > .db-shell-sub-navigation::before {
-    content: "";
-    background-color: var(--db-divider-bg-color);
-    position: absolute;
-    /* jscpd:ignore-start */
-    block-size: var(--db-border-width-3xs);
-    inset-block-end: 0;
-    inset-inline: 0;
-    /* stylelint-disable-next-line db-ux/use-border-color */
-    /* stylelint-disable-next-line at-rule-empty-line-before */
-    /* jscpd:ignore-end */
-  }
-  .db-shell:not(:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon))[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell:not(:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon))[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell:not(:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon))[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] > .db-shell-sub-navigation {
-    padding-block-start: calc(var(--db-spacing-fixed-xs) + env(safe-area-inset-top));
-  }
-}
-@media (width <= 48em) and (forced-colors: active) {
-  .db-shell:not(:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon))[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation::before, .db-shell:not(:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon))[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation::before, .db-shell:not(:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon))[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] > .db-shell-sub-navigation::before {
-    /* stylelint-disable-next-line db-ux/use-border-color */
-    border-block-end: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
-  }
-}
-@media (width <= 48em) {
-  .db-shell:not(:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon))[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=bottom] {
-    grid-template-areas: "control-panel" "shell-content" "sub-navigation";
-    grid-template-rows: [control-panel] auto [shell-content] 1fr [sub-navigation] auto;
-  }
-  .db-shell:not(:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon))[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=bottom] > * > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell:not(:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon))[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=bottom] > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell:not(:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon))[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=bottom] > .db-shell-sub-navigation {
-    --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
-    position: var(--db-tooltip-parent-position, relative);
-  }
-  .db-shell:not(:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon))[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=bottom] > * > db-shell-sub-navigation > .db-shell-sub-navigation[data-emphasis=strong], .db-shell:not(:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon))[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=bottom] > db-shell-sub-navigation > .db-shell-sub-navigation[data-emphasis=strong], .db-shell:not(:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon))[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=bottom] > .db-shell-sub-navigation[data-emphasis=strong] {
-    --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
-  }
-  .db-shell:not(:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon))[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=bottom] > * > db-shell-sub-navigation > .db-shell-sub-navigation::before, .db-shell:not(:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon))[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=bottom] > db-shell-sub-navigation > .db-shell-sub-navigation::before, .db-shell:not(:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon))[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=bottom] > .db-shell-sub-navigation::before {
-    content: "";
-    background-color: var(--db-divider-bg-color);
-    position: absolute;
-    /* jscpd:ignore-start */
-    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 */
-    /* jscpd:ignore-end */
-  }
-  .db-shell:not(:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon))[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=bottom] > * > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell:not(:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon))[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=bottom] > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell:not(:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon))[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=bottom] > .db-shell-sub-navigation {
-    padding-block-end: calc(var(--db-spacing-fixed-xs) + env(safe-area-inset-bottom));
-  }
-}
-@media (width <= 48em) and (forced-colors: active) {
-  .db-shell:not(:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon))[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=bottom] > * > db-shell-sub-navigation > .db-shell-sub-navigation::before, .db-shell:not(:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon))[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=bottom] > db-shell-sub-navigation > .db-shell-sub-navigation::before, .db-shell:not(:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon))[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=bottom] > .db-shell-sub-navigation::before {
-    /* stylelint-disable-next-line db-ux/use-border-color */
-    border-block-start: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
-  }
-}
-@media (width <= 48em) {
-  .db-shell:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon) .db-control-panel-navigation[data-variant=popover] .db-control-panel-navigation-item-group-menu, .db-shell[data-control-panel-mobile-position=bottom] .db-control-panel-navigation[data-variant=popover] .db-control-panel-navigation-item-group-menu {
-    max-inline-size: 100%;
-    /*
-    	We use the drawer-max-height defined in packages/components/src/components/control-panel-mobile/control-panel-mobile.scss
-    	to get the inverted height plus the size of the drawer header
-    	*/
-    inset-block-start: calc(100lvh - var(--db-drawer-max-height) + calc(var(--db-sizing-md) + 2 * var(--db-spacing-fixed-xs)) + env(safe-area-inset-top));
-  }
-  .db-shell:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon):not([data-sub-navigation-mobile-position]), .db-shell:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon)[data-sub-navigation-mobile-position=bottom], .db-shell:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon)[data-sub-navigation-mobile-position=none], .db-shell[data-control-panel-mobile-position=bottom]:not([data-sub-navigation-mobile-position]), .db-shell[data-control-panel-mobile-position=bottom][data-sub-navigation-mobile-position=bottom], .db-shell[data-control-panel-mobile-position=bottom][data-sub-navigation-mobile-position=none] {
-    grid-template-areas: "shell-content" "control-panel";
-    grid-template-rows: [shell-content] 1fr [control-panel] auto;
-  }
-  .db-shell:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon):not([data-sub-navigation-mobile-position]) > * > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon):not([data-sub-navigation-mobile-position]) > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon):not([data-sub-navigation-mobile-position]) > .db-shell-sub-navigation, .db-shell:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon)[data-sub-navigation-mobile-position=bottom] > * > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon)[data-sub-navigation-mobile-position=bottom] > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon)[data-sub-navigation-mobile-position=bottom] > .db-shell-sub-navigation, .db-shell:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon)[data-sub-navigation-mobile-position=none] > * > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon)[data-sub-navigation-mobile-position=none] > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon)[data-sub-navigation-mobile-position=none] > .db-shell-sub-navigation, .db-shell[data-control-panel-mobile-position=bottom]:not([data-sub-navigation-mobile-position]) > * > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell[data-control-panel-mobile-position=bottom]:not([data-sub-navigation-mobile-position]) > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell[data-control-panel-mobile-position=bottom]:not([data-sub-navigation-mobile-position]) > .db-shell-sub-navigation, .db-shell[data-control-panel-mobile-position=bottom][data-sub-navigation-mobile-position=bottom] > * > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell[data-control-panel-mobile-position=bottom][data-sub-navigation-mobile-position=bottom] > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell[data-control-panel-mobile-position=bottom][data-sub-navigation-mobile-position=bottom] > .db-shell-sub-navigation, .db-shell[data-control-panel-mobile-position=bottom][data-sub-navigation-mobile-position=none] > * > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell[data-control-panel-mobile-position=bottom][data-sub-navigation-mobile-position=none] > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell[data-control-panel-mobile-position=bottom][data-sub-navigation-mobile-position=none] > .db-shell-sub-navigation {
-    display: none;
-  }
-  .db-shell:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon)[data-sub-navigation-mobile-position=top], .db-shell[data-control-panel-mobile-position=bottom][data-sub-navigation-mobile-position=top] {
-    grid-template-areas: "sub-navigation" "shell-content" "control-panel";
-    grid-template-rows: [sub-navigation] auto [shell-content] 1fr [control-panel] auto;
-  }
-  .db-shell:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon)[data-sub-navigation-mobile-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon)[data-sub-navigation-mobile-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon)[data-sub-navigation-mobile-position=top] > .db-shell-sub-navigation, .db-shell[data-control-panel-mobile-position=bottom][data-sub-navigation-mobile-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell[data-control-panel-mobile-position=bottom][data-sub-navigation-mobile-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell[data-control-panel-mobile-position=bottom][data-sub-navigation-mobile-position=top] > .db-shell-sub-navigation {
-    --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
-    position: var(--db-tooltip-parent-position, relative);
-  }
-  .db-shell:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon)[data-sub-navigation-mobile-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation[data-emphasis=strong], .db-shell:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon)[data-sub-navigation-mobile-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation[data-emphasis=strong], .db-shell:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon)[data-sub-navigation-mobile-position=top] > .db-shell-sub-navigation[data-emphasis=strong], .db-shell[data-control-panel-mobile-position=bottom][data-sub-navigation-mobile-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation[data-emphasis=strong], .db-shell[data-control-panel-mobile-position=bottom][data-sub-navigation-mobile-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation[data-emphasis=strong], .db-shell[data-control-panel-mobile-position=bottom][data-sub-navigation-mobile-position=top] > .db-shell-sub-navigation[data-emphasis=strong] {
-    --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
-  }
-  .db-shell:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon)[data-sub-navigation-mobile-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation::before, .db-shell:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon)[data-sub-navigation-mobile-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation::before, .db-shell:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon)[data-sub-navigation-mobile-position=top] > .db-shell-sub-navigation::before, .db-shell[data-control-panel-mobile-position=bottom][data-sub-navigation-mobile-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation::before, .db-shell[data-control-panel-mobile-position=bottom][data-sub-navigation-mobile-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation::before, .db-shell[data-control-panel-mobile-position=bottom][data-sub-navigation-mobile-position=top] > .db-shell-sub-navigation::before {
-    content: "";
-    background-color: var(--db-divider-bg-color);
-    position: absolute;
-    /* jscpd:ignore-start */
-    block-size: var(--db-border-width-3xs);
-    inset-block-end: 0;
-    inset-inline: 0;
-    /* stylelint-disable-next-line db-ux/use-border-color */
-    /* stylelint-disable-next-line at-rule-empty-line-before */
-    /* jscpd:ignore-end */
-  }
-  .db-shell:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon)[data-sub-navigation-mobile-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon)[data-sub-navigation-mobile-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon)[data-sub-navigation-mobile-position=top] > .db-shell-sub-navigation, .db-shell[data-control-panel-mobile-position=bottom][data-sub-navigation-mobile-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell[data-control-panel-mobile-position=bottom][data-sub-navigation-mobile-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell[data-control-panel-mobile-position=bottom][data-sub-navigation-mobile-position=top] > .db-shell-sub-navigation {
-    padding-block-start: calc(var(--db-spacing-fixed-xs) + env(safe-area-inset-top));
-  }
-}
-@media (width <= 48em) and (forced-colors: active) {
-  .db-shell:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon)[data-sub-navigation-mobile-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation::before, .db-shell:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon)[data-sub-navigation-mobile-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation::before, .db-shell:has(> * > db-control-panel-flat-icon > .db-control-panel-flat-icon, > db-control-panel-flat-icon > .db-control-panel-flat-icon, > .db-control-panel-flat-icon)[data-sub-navigation-mobile-position=top] > .db-shell-sub-navigation::before, .db-shell[data-control-panel-mobile-position=bottom][data-sub-navigation-mobile-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation::before, .db-shell[data-control-panel-mobile-position=bottom][data-sub-navigation-mobile-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation::before, .db-shell[data-control-panel-mobile-position=bottom][data-sub-navigation-mobile-position=top] > .db-shell-sub-navigation::before {
-    /* stylelint-disable-next-line db-ux/use-border-color */
-    border-block-end: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
-  }
-}
-@media (width <= 48em) {
-  .db-shell > * > db-shell-sub-navigation > .db-shell-sub-navigation > .db-shell-sub-navigation-button, .db-shell > db-shell-sub-navigation > .db-shell-sub-navigation > .db-shell-sub-navigation-button, .db-shell > .db-shell-sub-navigation > .db-shell-sub-navigation-button {
-    display: none;
-  }
-  .db-shell > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-control-panel-navigation-item-group, .db-shell > db-shell-sub-navigation > .db-shell-sub-navigation .db-control-panel-navigation-item-group, .db-shell > .db-shell-sub-navigation .db-control-panel-navigation-item-group {
-    display: none !important;
-  }
-  .db-shell > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-control-panel-navigation-item, .db-shell > db-shell-sub-navigation > .db-shell-sub-navigation .db-control-panel-navigation-item, .db-shell > .db-shell-sub-navigation .db-control-panel-navigation-item {
-    inline-size: fit-content;
-    white-space: nowrap;
-  }
-  .db-shell > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-control-panel-navigation, .db-shell > db-shell-sub-navigation > .db-shell-sub-navigation .db-control-panel-navigation, .db-shell > .db-shell-sub-navigation .db-control-panel-navigation {
-    --db-overflow-scroll-button-inset-block: var(--db-spacing-fixed-xs);
-    --db-overflow-scroll-button-inset-inline-start: 0;
-    --db-control-panel-sub-navigation-mobile: 1;
-    display: grid;
-    --db-control-panel-navigation-horizontal: 1;
-  }
-  @supports (scrollbar-width: none) {
-    .db-shell > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-control-panel-navigation:has(.db-button) > menu, .db-shell > db-shell-sub-navigation > .db-shell-sub-navigation .db-control-panel-navigation:has(.db-button) > menu, .db-shell > .db-shell-sub-navigation .db-control-panel-navigation:has(.db-button) > menu {
-      scrollbar-width: none;
-    }
-  }
-  .db-shell > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-control-panel-navigation:has(.db-button) > menu::-webkit-scrollbar, .db-shell > db-shell-sub-navigation > .db-shell-sub-navigation .db-control-panel-navigation:has(.db-button) > menu::-webkit-scrollbar, .db-shell > .db-shell-sub-navigation .db-control-panel-navigation:has(.db-button) > menu::-webkit-scrollbar {
-    display: none;
-  }
-  .db-shell > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-control-panel-navigation:has(.db-button) > menu::before, .db-shell > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-control-panel-navigation:has(.db-button) > menu::after, .db-shell > db-shell-sub-navigation > .db-shell-sub-navigation .db-control-panel-navigation:has(.db-button) > menu::before, .db-shell > db-shell-sub-navigation > .db-shell-sub-navigation .db-control-panel-navigation:has(.db-button) > menu::after, .db-shell > .db-shell-sub-navigation .db-control-panel-navigation:has(.db-button) > menu::before, .db-shell > .db-shell-sub-navigation .db-control-panel-navigation:has(.db-button) > menu::after {
-    block-size: calc(100% - var(--db-border-width-3xs));
-    inset-block: 0;
-    flex: none;
-  }
-  .db-shell > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-control-panel-navigation > menu, .db-shell > db-shell-sub-navigation > .db-shell-sub-navigation .db-control-panel-navigation > menu, .db-shell > .db-shell-sub-navigation .db-control-panel-navigation > menu {
-    overflow: auto hidden;
-    flex-direction: row;
-  }
-  .db-shell > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-control-panel-navigation > menu > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group, .db-shell > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-control-panel-navigation > menu > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group, .db-shell > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-control-panel-navigation > menu > .db-control-panel-navigation-item-group,
-  .db-shell > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-control-panel-navigation > menu > * > db-control-panel-navigation-item > .db-control-panel-navigation-item, .db-shell > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-control-panel-navigation > menu > db-control-panel-navigation-item > .db-control-panel-navigation-item, .db-shell > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-control-panel-navigation > menu > .db-control-panel-navigation-item, .db-shell > db-shell-sub-navigation > .db-shell-sub-navigation .db-control-panel-navigation > menu > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group, .db-shell > db-shell-sub-navigation > .db-shell-sub-navigation .db-control-panel-navigation > menu > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group, .db-shell > db-shell-sub-navigation > .db-shell-sub-navigation .db-control-panel-navigation > menu > .db-control-panel-navigation-item-group,
-  .db-shell > db-shell-sub-navigation > .db-shell-sub-navigation .db-control-panel-navigation > menu > * > db-control-panel-navigation-item > .db-control-panel-navigation-item, .db-shell > db-shell-sub-navigation > .db-shell-sub-navigation .db-control-panel-navigation > menu > db-control-panel-navigation-item > .db-control-panel-navigation-item, .db-shell > db-shell-sub-navigation > .db-shell-sub-navigation .db-control-panel-navigation > menu > .db-control-panel-navigation-item, .db-shell > .db-shell-sub-navigation .db-control-panel-navigation > menu > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group, .db-shell > .db-shell-sub-navigation .db-control-panel-navigation > menu > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group, .db-shell > .db-shell-sub-navigation .db-control-panel-navigation > menu > .db-control-panel-navigation-item-group,
-  .db-shell > .db-shell-sub-navigation .db-control-panel-navigation > menu > * > db-control-panel-navigation-item > .db-control-panel-navigation-item, .db-shell > .db-shell-sub-navigation .db-control-panel-navigation > menu > db-control-panel-navigation-item > .db-control-panel-navigation-item, .db-shell > .db-shell-sub-navigation .db-control-panel-navigation > menu > .db-control-panel-navigation-item {
-    white-space: nowrap;
-  }
-  .db-shell > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-control-panel-navigation > menu > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group-expand-button > .db-control-panel-navigation-item-group-expand-button-end-slot-container::after, .db-shell > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-control-panel-navigation > menu > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group-expand-button > .db-control-panel-navigation-item-group-expand-button-end-slot-container::after, .db-shell > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-control-panel-navigation > menu > .db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group-expand-button > .db-control-panel-navigation-item-group-expand-button-end-slot-container::after, .db-shell > db-shell-sub-navigation > .db-shell-sub-navigation .db-control-panel-navigation > menu > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group-expand-button > .db-control-panel-navigation-item-group-expand-button-end-slot-container::after, .db-shell > db-shell-sub-navigation > .db-shell-sub-navigation .db-control-panel-navigation > menu > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group-expand-button > .db-control-panel-navigation-item-group-expand-button-end-slot-container::after, .db-shell > db-shell-sub-navigation > .db-shell-sub-navigation .db-control-panel-navigation > menu > .db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group-expand-button > .db-control-panel-navigation-item-group-expand-button-end-slot-container::after, .db-shell > .db-shell-sub-navigation .db-control-panel-navigation > menu > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group-expand-button > .db-control-panel-navigation-item-group-expand-button-end-slot-container::after, .db-shell > .db-shell-sub-navigation .db-control-panel-navigation > menu > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group-expand-button > .db-control-panel-navigation-item-group-expand-button-end-slot-container::after, .db-shell > .db-shell-sub-navigation .db-control-panel-navigation > menu > .db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group-expand-button > .db-control-panel-navigation-item-group-expand-button-end-slot-container::after {
-    --db-icon-trailing: "chevron_down";
-  }
-  .db-shell > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-control-panel-navigation > menu > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group-menu, .db-shell > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-control-panel-navigation > menu > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group-menu, .db-shell > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-control-panel-navigation > menu > .db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group-menu, .db-shell > db-shell-sub-navigation > .db-shell-sub-navigation .db-control-panel-navigation > menu > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group-menu, .db-shell > db-shell-sub-navigation > .db-shell-sub-navigation .db-control-panel-navigation > menu > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group-menu, .db-shell > db-shell-sub-navigation > .db-shell-sub-navigation .db-control-panel-navigation > menu > .db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group-menu, .db-shell > .db-shell-sub-navigation .db-control-panel-navigation > menu > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group-menu, .db-shell > .db-shell-sub-navigation .db-control-panel-navigation > menu > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group-menu, .db-shell > .db-shell-sub-navigation .db-control-panel-navigation > menu > .db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group-menu {
-    inset-block-start: calc(100% + var(--db-popover-distance, var(--db-spacing-fixed-md)));
-  }
-  .db-shell > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-control-panel-navigation > menu > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group-menu::before, .db-shell > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-control-panel-navigation > menu > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group-menu::before, .db-shell > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-control-panel-navigation > menu > .db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group-menu::before, .db-shell > db-shell-sub-navigation > .db-shell-sub-navigation .db-control-panel-navigation > menu > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group-menu::before, .db-shell > db-shell-sub-navigation > .db-shell-sub-navigation .db-control-panel-navigation > menu > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group-menu::before, .db-shell > db-shell-sub-navigation > .db-shell-sub-navigation .db-control-panel-navigation > menu > .db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group-menu::before, .db-shell > .db-shell-sub-navigation .db-control-panel-navigation > menu > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group-menu::before, .db-shell > .db-shell-sub-navigation .db-control-panel-navigation > menu > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group-menu::before, .db-shell > .db-shell-sub-navigation .db-control-panel-navigation > menu > .db-control-panel-navigation-item-group > .db-control-panel-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 > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-control-panel-navigation > menu, .db-shell > db-shell-sub-navigation > .db-shell-sub-navigation .db-control-panel-navigation > menu, .db-shell > .db-shell-sub-navigation .db-control-panel-navigation > menu {
-    padding-block: var(--db-spacing-fixed-xs);
-    /* workaround for showing correct scrolling and focus */
-    padding-inline-start: calc(var(--db-spacing-fixed-sm) / 2);
-    margin-inline-start: calc(var(--db-spacing-fixed-sm) / 2);
-  }
-  .db-shell > * > db-shell-sub-navigation > .db-shell-sub-navigation .db-control-panel-navigation[data-variant=tree] .db-control-panel-navigation-item a::before, .db-shell > db-shell-sub-navigation > .db-shell-sub-navigation .db-control-panel-navigation[data-variant=tree] .db-control-panel-navigation-item a::before, .db-shell > .db-shell-sub-navigation .db-control-panel-navigation[data-variant=tree] .db-control-panel-navigation-item a::before {
-    display: none;
-  }
-  .db-shell > * > db-control-panel-desktop > .db-control-panel-desktop, .db-shell > db-control-panel-desktop > .db-control-panel-desktop, .db-shell > .db-control-panel-desktop {
-    display: none;
-  }
-  .db-shell:has(> db-control-panel-flat-icon:nth-of-type(2),
-  > .db-control-panel-flat-icon:nth-of-type(2)) > db-control-panel-flat-icon:nth-of-type(1) > .db-control-panel-flat-icon,
-  .db-shell:has(> db-control-panel-flat-icon:nth-of-type(2),
-  > .db-control-panel-flat-icon:nth-of-type(2)) > .db-control-panel-flat-icon:nth-of-type(1) {
-    display: none;
-  }
-}
-.db-shell {
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-}