@db-ux/core-components 3.0.2-copilot2-e7bf98b → 3.0.2-shell-ed0ed7c

package/build/components/control-panel-mobile/control-panel-mobile.css

@@ -0,0 +1,716 @@
+/* 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 */
+/* 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")
+ */
+/* 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);
+  }
+}
+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-control-panel-mobile[data-position=top] .db-drawer > .db-drawer-container, .db-drawer .db-drawer-container:not([data-direction]), .db-drawer .db-drawer-container[data-direction=right] {
+  inset-inline: auto 0;
+}
+.db-control-panel-mobile[data-position=top] .db-drawer > [data-rounded=true].db-drawer-container, .db-drawer [data-rounded=true].db-drawer-container:not([data-direction]), .db-drawer [data-rounded=true].db-drawer-container[data-direction=right] {
+  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=left] {
+  inset-inline: 0 auto;
+}
+.db-drawer [data-rounded=true].db-drawer-container[data-direction=left] {
+  border-start-end-radius: var(--db-border-radius-sm);
+  border-end-end-radius: var(--db-border-radius-sm);
+}
+
+.db-drawer .db-drawer-container[data-direction=down]:not([data-width=full]), .db-control-panel-mobile[data-position=bottom] .db-drawer > .db-drawer-container:not([data-width=full]), .db-drawer .db-drawer-container[data-direction=up]:not([data-width=full]) {
+  max-block-size: var(--db-drawer-max-height, calc(100% - var(--db-spacing-fixed-xl)));
+  min-block-size: var(--db-drawer-min-height, calc(100% - var(--db-spacing-fixed-xl)));
+  max-inline-size: none;
+}
+
+.db-control-panel-mobile[data-position=bottom] .db-drawer > .db-drawer-container, .db-drawer .db-drawer-container[data-direction=up] {
+  inset: auto 0 0;
+}
+.db-control-panel-mobile[data-position=bottom] .db-drawer > [data-rounded=true].db-drawer-container, .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] {
+  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 {
+  /* stylelint-disable-next-line scss/selector-no-redundant-nesting-selector */
+}
+.db-drawer [data-spacing=small].db-drawer-container {
+  /* stylelint-disable-next-line scss/selector-no-redundant-nesting-selector */
+}
+.db-drawer [data-spacing=small].db-drawer-container {
+  padding-block: var(--db-spacing-fixed-xs);
+}
+.db-drawer [data-spacing=small].db-drawer-container .db-drawer-header {
+  /* stylelint-disable-next-line db-ux/use-spacings */
+  padding-block-end: var(--db-drawer-header-padding-block-end, var(--db-spacing-fixed-xs));
+  padding-inline: var(--db-spacing-fixed-md);
+}
+.db-drawer [data-spacing=small].db-drawer-container .db-drawer-content {
+  /* stylelint-disable-next-line db-ux/use-spacings */
+  padding-inline: var(--db-drawer-content-padding-inline, var(--db-spacing-fixed-md));
+  overflow-y: auto;
+  overflow-block: auto;
+}
+.db-drawer .db-drawer-container {
+  padding-block: var(--db-spacing-fixed-sm);
+}
+.db-drawer .db-drawer-container .db-drawer-header {
+  /* stylelint-disable-next-line db-ux/use-spacings */
+  padding-block-end: var(--db-drawer-header-padding-block-end, var(--db-spacing-fixed-sm));
+  padding-inline: var(--db-spacing-fixed-lg);
+}
+.db-drawer .db-drawer-container .db-drawer-content {
+  /* stylelint-disable-next-line db-ux/use-spacings */
+  padding-inline: var(--db-drawer-content-padding-inline, var(--db-spacing-fixed-lg));
+  overflow-y: auto;
+  overflow-block: auto;
+}
+.db-drawer [data-spacing=medium].db-drawer-container {
+  /* stylelint-disable-next-line scss/selector-no-redundant-nesting-selector */
+}
+.db-drawer [data-spacing=medium].db-drawer-container {
+  padding-block: var(--db-spacing-fixed-sm);
+}
+.db-drawer [data-spacing=medium].db-drawer-container .db-drawer-header {
+  /* stylelint-disable-next-line db-ux/use-spacings */
+  padding-block-end: var(--db-drawer-header-padding-block-end, var(--db-spacing-fixed-sm));
+  padding-inline: var(--db-spacing-fixed-lg);
+}
+.db-drawer [data-spacing=medium].db-drawer-container .db-drawer-content {
+  /* stylelint-disable-next-line db-ux/use-spacings */
+  padding-inline: var(--db-drawer-content-padding-inline, var(--db-spacing-fixed-lg));
+  overflow-y: auto;
+  overflow-block: auto;
+}
+.db-drawer [data-spacing=large].db-drawer-container {
+  /* stylelint-disable-next-line scss/selector-no-redundant-nesting-selector */
+}
+.db-drawer [data-spacing=large].db-drawer-container {
+  padding-block: var(--db-spacing-fixed-md);
+}
+.db-drawer [data-spacing=large].db-drawer-container .db-drawer-header {
+  /* stylelint-disable-next-line db-ux/use-spacings */
+  padding-block-end: var(--db-drawer-header-padding-block-end, var(--db-spacing-fixed-md));
+  padding-inline: var(--db-spacing-fixed-xl);
+}
+.db-drawer [data-spacing=large].db-drawer-container .db-drawer-content {
+  /* stylelint-disable-next-line db-ux/use-spacings */
+  padding-inline: var(--db-drawer-content-padding-inline, var(--db-spacing-fixed-xl));
+  overflow-y: auto;
+  overflow-block: auto;
+}
+.db-drawer [data-spacing=none].db-drawer-container {
+  /* stylelint-disable-next-line scss/selector-no-redundant-nesting-selector */
+}
+.db-drawer [data-spacing=none].db-drawer-container {
+  padding-block: 0;
+}
+.db-drawer [data-spacing=none].db-drawer-container .db-drawer-header {
+  /* stylelint-disable-next-line db-ux/use-spacings */
+  padding-block-end: var(--db-drawer-header-padding-block-end, 0);
+  padding-inline: 0;
+}
+.db-drawer [data-spacing=none].db-drawer-container .db-drawer-content {
+  /* stylelint-disable-next-line db-ux/use-spacings */
+  padding-inline: var(--db-drawer-content-padding-inline, 0);
+  overflow-y: auto;
+  overflow-block: auto;
+}
+
+.db-drawer .db-drawer-container {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--db-adaptive-bg-basic-level-1-default);
+  block-size: 100%;
+  inline-size: 100%;
+  position: fixed;
+  box-shadow: var(--db-elevation-md);
+}
+.db-drawer .db-drawer-container:not([data-width=full]) {
+  max-inline-size: var(--db-drawer-max-width, calc(100% - var(--db-spacing-fixed-xl)));
+  min-inline-size: var(--db-drawer-min-width, calc(100% - var(--db-spacing-fixed-xl)));
+}
+.db-drawer .db-drawer-container:not([data-width=full]):not([data-direction]), .db-drawer .db-drawer-container:not([data-width=full])[data-direction=right] {
+  border-inline-start: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
+}
+.db-drawer .db-drawer-container:not([data-width=full])[data-direction=left] {
+  border-inline-end: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
+}
+.db-drawer .db-drawer-container:not([data-width=full])[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:not([data-width=full])[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);
+}
+.db-drawer .db-drawer-container .db-drawer-header {
+  display: none;
+  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
+  position: var(--db-tooltip-parent-position, relative);
+}
+.db-drawer .db-drawer-container .db-drawer-header[data-emphasis=strong] {
+  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
+}
+.db-drawer .db-drawer-container .db-drawer-header::before {
+  content: "";
+  background-color: var(--db-divider-bg-color);
+  position: absolute;
+  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 */
+}
+@media (forced-colors: active) {
+  .db-drawer .db-drawer-container .db-drawer-header::before {
+    border-block-end: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  }
+}
+.db-drawer .db-drawer-container .db-drawer-header .db-drawer-header-text {
+  margin-block: auto;
+  font-weight: 700;
+}
+.db-drawer .db-drawer-container .db-drawer-header .button-close-drawer {
+  margin-inline-start: auto;
+}
+.db-drawer .db-drawer-container .db-drawer-header .button-close-drawer button {
+  margin-inline-start: auto;
+}
+.db-drawer .db-drawer-container .db-drawer-header:has(.button-close-drawer), .db-drawer .db-drawer-container .db-drawer-header:has(:not(.db-drawer-header-text:empty)) {
+  display: flex;
+  gap: var(--db-spacing-fixed-md);
+}
+.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=right], .db-drawer[data-position=absolute][data-direction=left] {
+  flex-direction: column;
+}
+.db-drawer[data-position=absolute][data-direction=left], .db-drawer[data-position=absolute][data-direction=down] {
+  align-items: start;
+}
+.db-drawer[data-position=absolute]:not([data-direction]), .db-drawer[data-position=absolute][data-direction=right], .db-drawer[data-position=absolute][data-direction=up] {
+  align-items: end;
+}
+.db-drawer[data-position=absolute] .db-drawer-container {
+  position: relative;
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  .db-drawer[open] .db-drawer-container:not([data-direction]), .db-drawer[open] .db-drawer-container[data-direction=right] {
+    animation: show-right-to-left var(--db-transition-straight-show);
+  }
+  .db-drawer[open] .db-drawer-container[data-direction=left] {
+    animation: show-left-to-right var(--db-transition-straight-show);
+  }
+  .db-drawer[open] .db-drawer-container[data-direction=up] {
+    animation: show-bottom-to-top var(--db-transition-straight-show);
+  }
+  .db-drawer[open] .db-drawer-container[data-direction=down] {
+    animation: show-top-to-bottom var(--db-transition-straight-show);
+  }
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  .db-drawer[open] .db-drawer-container[hidden]:not([data-direction]), .db-drawer[open] .db-drawer-container[hidden][data-direction=right] {
+    animation: hide-right-to-left var(--db-transition-straight-hide);
+  }
+  .db-drawer[open] .db-drawer-container[hidden][data-direction=left] {
+    animation: hide-left-to-right var(--db-transition-straight-hide);
+  }
+  .db-drawer[open] .db-drawer-container[hidden][data-direction=up] {
+    animation: hide-bottom-to-top var(--db-transition-straight-hide);
+  }
+  .db-drawer[open] .db-drawer-container[hidden][data-direction=down] {
+    animation: hide-top-to-bottom var(--db-transition-straight-hide);
+  }
+}
+
+.db-control-panel-mobile[data-position=top] {
+  border-block-end: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
+  grid-template-areas: var(--db-control-panel-mobile-position-top-grid-areas, "brand primary drawer-button");
+  grid-template-columns: var(--db-control-panel-mobile-position-top-grid-columns, [brand] 1fr [primary] min-content [drawer-button] min-content);
+  justify-items: center;
+}
+.db-control-panel-mobile[data-position=top] .db-control-panel-primary-actions {
+  padding-inline-end: var(--db-spacing-fixed-xs);
+  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
+  position: var(--db-tooltip-parent-position, relative);
+}
+.db-control-panel-mobile[data-position=top] .db-control-panel-primary-actions[data-emphasis=strong] {
+  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
+}
+.db-control-panel-mobile[data-position=top] .db-control-panel-primary-actions::before {
+  content: "";
+  background-color: var(--db-divider-bg-color);
+  position: absolute;
+  inline-size: var(--db-border-width-3xs);
+  inset-inline-end: 0;
+  inset-block: 0;
+  /* stylelint-disable-next-line db-ux/use-border-color */
+}
+@media (forced-colors: active) {
+  .db-control-panel-mobile[data-position=top] .db-control-panel-primary-actions::before {
+    border-inline-end: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  }
+}
+.db-control-panel-mobile[data-position=top] .db-control-panel-primary-actions::before {
+  margin-inline-start: var(--db-spacing-fixed-xs);
+}
+.db-control-panel-mobile[data-position=top] .db-drawer > .db-drawer-container {
+  border-inline-start: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  .db-control-panel-mobile[data-position=top] .db-drawer[open] .db-drawer-container {
+    animation: show-right-to-left var(--db-transition-straight-show);
+  }
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  .db-control-panel-mobile[data-position=top] .db-drawer[open] .db-drawer-container[hidden] {
+    animation: hide-right-to-left var(--db-transition-straight-hide);
+  }
+}
+
+.db-control-panel-mobile[data-position=bottom] {
+  border-block-start: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
+}
+.db-control-panel-mobile[data-position=bottom] .db-control-panel-brand {
+  font-size: 0;
+  gap: 0;
+  place-self: center;
+}
+.db-control-panel-mobile[data-position=bottom] > db-button > .db-control-panel-mobile-button,
+.db-control-panel-mobile[data-position=bottom] > .db-control-panel-mobile-button {
+  place-self: center;
+}
+.db-control-panel-mobile[data-position=bottom] .db-drawer > .db-drawer-container {
+  border-block-start: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  .db-control-panel-mobile[data-position=bottom] .db-drawer[open] .db-drawer-container {
+    animation: show-bottom-to-top var(--db-transition-straight-show);
+  }
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  .db-control-panel-mobile[data-position=bottom] .db-drawer[open] .db-drawer-container[hidden] {
+    animation: hide-bottom-to-top var(--db-transition-straight-hide);
+  }
+}
+.db-control-panel-mobile[data-position=bottom]:not([data-variant=flat-icon]) {
+  grid-template-areas: "brand drawer-button primary";
+  grid-template-columns: min-content 1fr minmax(var(--db-sizing-md), min-content);
+  justify-content: space-evenly;
+}
+[data-variant=flat-icon].db-control-panel-mobile[data-position=bottom] .db-drawer,
+[data-variant=flat-icon].db-control-panel-mobile[data-position=bottom] .db-control-panel-brand,
+[data-variant=flat-icon].db-control-panel-mobile[data-position=bottom] .db-control-panel-primary-actions,
+[data-variant=flat-icon].db-control-panel-mobile[data-position=bottom] .db-control-panel-secondary-actions,
+[data-variant=flat-icon].db-control-panel-mobile[data-position=bottom] .db-control-panel-mobile-button,
+[data-variant=flat-icon].db-control-panel-mobile[data-position=bottom] .overflow-scroll-right-button,
+[data-variant=flat-icon].db-control-panel-mobile[data-position=bottom] .overflow-scroll-left-button {
+  display: none;
+}
+[data-variant=flat-icon].db-control-panel-mobile[data-position=bottom] .db-control-panel-flat-icon-navigation {
+  display: initial;
+}
+
+/**
+	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 {}
+
+.db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > * > db-navigation-item > .db-navigation-item::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > db-navigation-item > .db-navigation-item::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > .db-navigation-item::after,
+.db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > * > db-navigation-item-group > .db-navigation-item-group::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > db-navigation-item-group > .db-navigation-item-group::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > .db-navigation-item-group::after {
+  content: "";
+  position: absolute;
+  border-radius: var(--db-border-radius-xs);
+  background: linear-gradient(135deg, var(--db-pride-red, var(--db-brand-on-bg-basic-emphasis-70-default)) 16.7%, var(--db-pride-orange, var(--db-brand-on-bg-basic-emphasis-70-default)) 0, var(--db-pride-orange, var(--db-brand-on-bg-basic-emphasis-70-default)) 33.4%, var(--db-pride-yellow, var(--db-brand-on-bg-basic-emphasis-70-default)) 0, var(--db-pride-yellow, var(--db-brand-on-bg-basic-emphasis-70-default)) 50.1%, var(--db-pride-green, var(--db-brand-on-bg-basic-emphasis-70-default)) 0, var(--db-pride-green, var(--db-brand-on-bg-basic-emphasis-70-default)) 66.8%, var(--db-pride-blue, var(--db-brand-on-bg-basic-emphasis-70-default)) 0, var(--db-pride-blue, var(--db-brand-on-bg-basic-emphasis-70-default)) 83.5%, var(--db-pride-violet, var(--db-brand-on-bg-basic-emphasis-70-default)) 0);
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > * > db-navigation-item > .db-navigation-item::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > db-navigation-item > .db-navigation-item::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > .db-navigation-item::after,
+  .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > * > db-navigation-item-group > .db-navigation-item-group::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > db-navigation-item-group > .db-navigation-item-group::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > .db-navigation-item-group::after {
+    transition: height var(--db-transition-duration-fast) var(--db-transition-timing-emotional), width var(--db-transition-duration-fast) var(--db-transition-timing-emotional);
+  }
+}
+
+.db-control-panel-mobile {
+  background-color: var(--db-adaptive-bg-basic-level-1-default);
+  display: grid;
+  position: relative;
+  min-block-size: calc(var(--db-sizing-md) + 2 * var(--db-spacing-fixed-xs));
+  gap: var(--db-spacing-fixed-xs);
+  padding: var(--db-spacing-fixed-xs) var(--db-spacing-fixed-md);
+}
+.db-control-panel-mobile .db-control-panel-brand {
+  justify-self: self-start;
+  inline-size: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.db-control-panel-mobile .db-control-panel-mobile-button {
+  grid-area: drawer-button;
+}
+.db-control-panel-mobile:has(.db-control-panel-mobile-drawer-scroll-container:empty):not(:has(.db-control-panel-secondary-actions)) {
+  --db-control-panel-mobile-position-top-grid-areas: "brand primary";
+  --db-control-panel-mobile-position-top-grid-columns: [brand] 1fr
+  	[primary] min-content;
+}
+.db-control-panel-mobile:has(.db-control-panel-mobile-drawer-scroll-container:empty):not(:has(.db-control-panel-secondary-actions)) .db-control-panel-mobile-button {
+  display: none;
+}
+.db-control-panel-mobile:has(.db-control-panel-mobile-drawer-scroll-container:empty):not(:has(.db-control-panel-secondary-actions)) .db-control-panel-primary-actions {
+  padding-inline-end: 0;
+}
+.db-control-panel-mobile:has(.db-control-panel-mobile-drawer-scroll-container:empty):not(:has(.db-control-panel-secondary-actions)) .db-control-panel-primary-actions::before {
+  display: none;
+}
+.db-control-panel-mobile .db-drawer {
+  --db-drawer-content-padding-inline: 0;
+  --db-drawer-max-width: variables.$db-container-xs;
+  --db-drawer-max-height: 63vh;
+}
+.db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content {
+  display: flex;
+  flex-direction: column;
+  block-size: 100%;
+}
+.db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-secondary-actions {
+  flex-shrink: 0;
+  padding-inline: var(--db-spacing-fixed-md);
+  padding-block-start: var(--db-spacing-fixed-xs);
+  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
+  position: var(--db-tooltip-parent-position, relative);
+}
+.db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-secondary-actions[data-emphasis=strong] {
+  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
+}
+.db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-secondary-actions::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 (forced-colors: active) {
+  .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-secondary-actions::before {
+    border-block-start: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  }
+}
+.db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container {
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  block-size: 100%;
+}
+.db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-control-panel-meta-navigation {
+  padding: var(--db-spacing-fixed-md);
+  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-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-control-panel-meta-navigation[data-emphasis=strong] {
+  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
+}
+.db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-control-panel-meta-navigation::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 (forced-colors: active) {
+  .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-control-panel-meta-navigation::before {
+    border-block-start: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  }
+}
+.db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation {
+  padding: var(--db-spacing-fixed-md);
+}
+.db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > .overflow-scroll-left-button, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > db-button > .overflow-scroll-left-button,
+.db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > .overflow-scroll-right-button, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > db-button > .overflow-scroll-right-button {
+  display: none;
+}
+.db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > * > db-navigation-item > .db-navigation-item::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > db-navigation-item > .db-navigation-item::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > .db-navigation-item::after,
+.db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > * > db-navigation-item-group > .db-navigation-item-group::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > db-navigation-item-group > .db-navigation-item-group::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > .db-navigation-item-group::after {
+  block-size: 0;
+  inline-size: var(--db-border-width-xs);
+  transform: translate(0, -50%);
+  inset-block: var(--indicator-vertical-inset-block-start, 50%) auto;
+  inset-inline-start: calc(-1 * var(--db-spacing-fixed-xs));
+}
+.db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > * > db-navigation-item > .db-navigation-item:has([aria-current=page])::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > * > db-navigation-item > .db-navigation-item:has([data-active=true])::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > * > db-navigation-item > .db-navigation-item[aria-current=page]::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > * > db-navigation-item > .db-navigation-item[data-active=true]::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > db-navigation-item > .db-navigation-item:has([aria-current=page])::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > db-navigation-item > .db-navigation-item:has([data-active=true])::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > db-navigation-item > .db-navigation-item[aria-current=page]::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > db-navigation-item > .db-navigation-item[data-active=true]::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > .db-navigation-item:has([aria-current=page])::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > .db-navigation-item:has([data-active=true])::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > .db-navigation-item[aria-current=page]::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > .db-navigation-item[data-active=true]::after,
+.db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > * > db-navigation-item-group > .db-navigation-item-group:has([aria-current=page])::after,
+.db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > * > db-navigation-item-group > .db-navigation-item-group:has([data-active=true])::after,
+.db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > * > db-navigation-item-group > .db-navigation-item-group[aria-current=page]::after,
+.db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > * > db-navigation-item-group > .db-navigation-item-group[data-active=true]::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > db-navigation-item-group > .db-navigation-item-group:has([aria-current=page])::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > db-navigation-item-group > .db-navigation-item-group:has([data-active=true])::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > db-navigation-item-group > .db-navigation-item-group[aria-current=page]::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > db-navigation-item-group > .db-navigation-item-group[data-active=true]::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > .db-navigation-item-group:has([aria-current=page])::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > .db-navigation-item-group:has([data-active=true])::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > .db-navigation-item-group[aria-current=page]::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > .db-navigation-item-group[data-active=true]::after {
+  block-size: var(--indicator-vertical-block-size, 100%);
+  inline-size: var(--db-border-width-xs);
+}
+@media (forced-colors: active) {
+  .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > * > db-navigation-item > .db-navigation-item:has([aria-current=page])::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > * > db-navigation-item > .db-navigation-item:has([data-active=true])::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > * > db-navigation-item > .db-navigation-item[aria-current=page]::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > * > db-navigation-item > .db-navigation-item[data-active=true]::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > db-navigation-item > .db-navigation-item:has([aria-current=page])::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > db-navigation-item > .db-navigation-item:has([data-active=true])::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > db-navigation-item > .db-navigation-item[aria-current=page]::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > db-navigation-item > .db-navigation-item[data-active=true]::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > .db-navigation-item:has([aria-current=page])::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > .db-navigation-item:has([data-active=true])::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > .db-navigation-item[aria-current=page]::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > .db-navigation-item[data-active=true]::after,
+  .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > * > db-navigation-item-group > .db-navigation-item-group:has([aria-current=page])::after,
+  .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > * > db-navigation-item-group > .db-navigation-item-group:has([data-active=true])::after,
+  .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > * > db-navigation-item-group > .db-navigation-item-group[aria-current=page]::after,
+  .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > * > db-navigation-item-group > .db-navigation-item-group[data-active=true]::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > db-navigation-item-group > .db-navigation-item-group:has([aria-current=page])::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > db-navigation-item-group > .db-navigation-item-group:has([data-active=true])::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > db-navigation-item-group > .db-navigation-item-group[aria-current=page]::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > db-navigation-item-group > .db-navigation-item-group[data-active=true]::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > .db-navigation-item-group:has([aria-current=page])::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > .db-navigation-item-group:has([data-active=true])::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > .db-navigation-item-group[aria-current=page]::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > .db-navigation-item-group[data-active=true]::after {
+    border: calc(var(--db-border-width-xs) - 1px) solid var(--db-adaptive-on-bg-basic-emphasis-100-default);
+  }
+}
+.db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > * > db-navigation-item > .db-navigation-item > * > db-navigation-item > .db-navigation-item, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > * > db-navigation-item > .db-navigation-item > db-navigation-item > .db-navigation-item, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > * > db-navigation-item > .db-navigation-item > .db-navigation-item,
+.db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > * > db-navigation-item > .db-navigation-item > * > db-navigation-item-group > .db-navigation-item-group, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > * > db-navigation-item > .db-navigation-item > db-navigation-item-group > .db-navigation-item-group, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > * > db-navigation-item > .db-navigation-item > .db-navigation-item-group, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > db-navigation-item > .db-navigation-item > * > db-navigation-item > .db-navigation-item, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > db-navigation-item > .db-navigation-item > db-navigation-item > .db-navigation-item, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > db-navigation-item > .db-navigation-item > .db-navigation-item,
+.db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > db-navigation-item > .db-navigation-item > * > db-navigation-item-group > .db-navigation-item-group, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > db-navigation-item > .db-navigation-item > db-navigation-item-group > .db-navigation-item-group, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > db-navigation-item > .db-navigation-item > .db-navigation-item-group, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > .db-navigation-item > * > db-navigation-item > .db-navigation-item, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > .db-navigation-item > db-navigation-item > .db-navigation-item, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > .db-navigation-item > .db-navigation-item,
+.db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > .db-navigation-item > * > db-navigation-item-group > .db-navigation-item-group, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > .db-navigation-item > db-navigation-item-group > .db-navigation-item-group, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > .db-navigation-item > .db-navigation-item-group,
+.db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > * > db-navigation-item-group > .db-navigation-item-group > * > db-navigation-item > .db-navigation-item,
+.db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > * > db-navigation-item-group > .db-navigation-item-group > db-navigation-item > .db-navigation-item,
+.db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > * > db-navigation-item-group > .db-navigation-item-group > .db-navigation-item,
+.db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > * > db-navigation-item-group > .db-navigation-item-group > * > db-navigation-item-group > .db-navigation-item-group,
+.db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > * > db-navigation-item-group > .db-navigation-item-group > db-navigation-item-group > .db-navigation-item-group,
+.db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > * > db-navigation-item-group > .db-navigation-item-group > .db-navigation-item-group, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > db-navigation-item-group > .db-navigation-item-group > * > db-navigation-item > .db-navigation-item, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > db-navigation-item-group > .db-navigation-item-group > db-navigation-item > .db-navigation-item, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > db-navigation-item-group > .db-navigation-item-group > .db-navigation-item,
+.db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > db-navigation-item-group > .db-navigation-item-group > * > db-navigation-item-group > .db-navigation-item-group, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > db-navigation-item-group > .db-navigation-item-group > db-navigation-item-group > .db-navigation-item-group, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > db-navigation-item-group > .db-navigation-item-group > .db-navigation-item-group, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > .db-navigation-item-group > * > db-navigation-item > .db-navigation-item, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > .db-navigation-item-group > db-navigation-item > .db-navigation-item, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > .db-navigation-item-group > .db-navigation-item,
+.db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > .db-navigation-item-group > * > db-navigation-item-group > .db-navigation-item-group, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > .db-navigation-item-group > db-navigation-item-group > .db-navigation-item-group, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > .db-navigation-item-group > .db-navigation-item-group {
+  /* Workaround for custom-elements */
+}
+.db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > * > db-navigation-item > .db-navigation-item > * > db-navigation-item > .db-navigation-item::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > * > db-navigation-item > .db-navigation-item > db-navigation-item > .db-navigation-item::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > * > db-navigation-item > .db-navigation-item > .db-navigation-item::after,
+.db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > * > db-navigation-item > .db-navigation-item > * > db-navigation-item-group > .db-navigation-item-group::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > * > db-navigation-item > .db-navigation-item > db-navigation-item-group > .db-navigation-item-group::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > * > db-navigation-item > .db-navigation-item > .db-navigation-item-group::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > db-navigation-item > .db-navigation-item > * > db-navigation-item > .db-navigation-item::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > db-navigation-item > .db-navigation-item > db-navigation-item > .db-navigation-item::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > db-navigation-item > .db-navigation-item > .db-navigation-item::after,
+.db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > db-navigation-item > .db-navigation-item > * > db-navigation-item-group > .db-navigation-item-group::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > db-navigation-item > .db-navigation-item > db-navigation-item-group > .db-navigation-item-group::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > db-navigation-item > .db-navigation-item > .db-navigation-item-group::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > .db-navigation-item > * > db-navigation-item > .db-navigation-item::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > .db-navigation-item > db-navigation-item > .db-navigation-item::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > .db-navigation-item > .db-navigation-item::after,
+.db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > .db-navigation-item > * > db-navigation-item-group > .db-navigation-item-group::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > .db-navigation-item > db-navigation-item-group > .db-navigation-item-group::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > .db-navigation-item > .db-navigation-item-group::after,
+.db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > * > db-navigation-item-group > .db-navigation-item-group > * > db-navigation-item > .db-navigation-item::after,
+.db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > * > db-navigation-item-group > .db-navigation-item-group > db-navigation-item > .db-navigation-item::after,
+.db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > * > db-navigation-item-group > .db-navigation-item-group > .db-navigation-item::after,
+.db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > * > db-navigation-item-group > .db-navigation-item-group > * > db-navigation-item-group > .db-navigation-item-group::after,
+.db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > * > db-navigation-item-group > .db-navigation-item-group > db-navigation-item-group > .db-navigation-item-group::after,
+.db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > * > db-navigation-item-group > .db-navigation-item-group > .db-navigation-item-group::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > db-navigation-item-group > .db-navigation-item-group > * > db-navigation-item > .db-navigation-item::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > db-navigation-item-group > .db-navigation-item-group > db-navigation-item > .db-navigation-item::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > db-navigation-item-group > .db-navigation-item-group > .db-navigation-item::after,
+.db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > db-navigation-item-group > .db-navigation-item-group > * > db-navigation-item-group > .db-navigation-item-group::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > db-navigation-item-group > .db-navigation-item-group > db-navigation-item-group > .db-navigation-item-group::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > db-navigation-item-group > .db-navigation-item-group > .db-navigation-item-group::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > .db-navigation-item-group > * > db-navigation-item > .db-navigation-item::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > .db-navigation-item-group > db-navigation-item > .db-navigation-item::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > .db-navigation-item-group > .db-navigation-item::after,
+.db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > .db-navigation-item-group > * > db-navigation-item-group > .db-navigation-item-group::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > .db-navigation-item-group > db-navigation-item-group > .db-navigation-item-group::after, .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content .db-control-panel-mobile-drawer-scroll-container .db-navigation > menu > .db-navigation-item-group > .db-navigation-item-group::after {
+  content: none;
+}