npm - @db-ux/core-components - Versions diffs - 4.12.0 → 4.13.0-shell-f221975 - Mend

@db-ux/core-components 4.12.0 → 4.13.0-shell-f221975

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (117) hide show

package/build/components/control-panel-desktop/control-panel-desktop.css ADDED Viewed

@@ -0,0 +1,579 @@
+.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 */
+.db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item > .db-control-panel-navigation-item::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > db-control-panel-navigation-item > .db-control-panel-navigation-item::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > .db-control-panel-navigation-item::after,
+.db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > .db-control-panel-navigation-item-group::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item > .db-control-panel-navigation-item::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > db-control-panel-navigation-item > .db-control-panel-navigation-item::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > .db-control-panel-navigation-item::after,
+.db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > .db-control-panel-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 (prefers-reduced-motion: no-preference) {
+  .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item > .db-control-panel-navigation-item::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > db-control-panel-navigation-item > .db-control-panel-navigation-item::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > .db-control-panel-navigation-item::after,
+  .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > .db-control-panel-navigation-item-group::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item > .db-control-panel-navigation-item::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > db-control-panel-navigation-item > .db-control-panel-navigation-item::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > .db-control-panel-navigation-item::after,
+  .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > .db-control-panel-navigation-item-group::after {
+    transition: block-size var(--db-transition-duration-fast) var(--db-transition-timing-emotional), inline-size var(--db-transition-duration-fast) var(--db-transition-timing-emotional);
+  }
+}
+@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);
+  }
+}
+.db-control-panel-desktop[data-orientation=horizontal] {
+  border-block-end: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
+  column-gap: var(--db-spacing-fixed-sm);
+  grid-template: [meta] "meta meta meta meta meta meta" auto [padding-top] ". . navigation . . ." calc(var(--db-spacing-fixed-md) + env(safe-area-inset-top)) [others] ". brand navigation primary secondary ." auto [padding-bottom] ". . navigation . . ." calc(var(--db-spacing-fixed-md) + env(safe-area-inset-top))/[padding-left] 0 [brand] max-content [navigation] 1fr [primary] max-content [secondary] max-content [padding-right] 0;
+}
+.db-control-panel-desktop[data-orientation=horizontal] > .db-control-panel-desktop-scroll-container {
+  display: contents;
+}
+.db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-brand {
+  padding-inline: var(--db-spacing-fixed-sm);
+}
+.db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-primary-actions,
+.db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-secondary-actions {
+  block-size: var(--db-sizing-md);
+}
+.db-control-panel-desktop[data-orientation=horizontal] > .db-control-panel-desktop-button {
+  display: none;
+}
+.db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-secondary-actions {
+  padding-inline-start: var(--db-spacing-fixed-sm);
+  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
+  position: var(--db-tooltip-parent-position, relative);
+}
+.db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-secondary-actions[data-emphasis=strong] {
+  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
+}
+.db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-secondary-actions::before {
+  content: "";
+  background-color: var(--db-divider-bg-color);
+  position: absolute;
+  /* jscpd:ignore-start */
+  inline-size: var(--db-border-width-3xs);
+  inset-inline-start: 0;
+  inset-block: 0;
+  /* stylelint-disable-next-line db-ux/use-border-color */
+}
+@media (forced-colors: active) {
+  .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-secondary-actions::before {
+    /* stylelint-disable-next-line db-ux/use-border-color */
+    border-inline-start: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  }
+}
+.db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-secondary-actions::before {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* jscpd:ignore-end */
+}
+.db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation {
+  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
+  position: var(--db-tooltip-parent-position, relative);
+}
+.db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation[data-emphasis=strong] {
+  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
+}
+.db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation::before {
+  content: "";
+  background-color: var(--db-divider-bg-color);
+  position: absolute;
+  /* jscpd:ignore-start */
+  inline-size: var(--db-border-width-3xs);
+  inset-inline-start: 0;
+  inset-block: 0;
+  /* stylelint-disable-next-line db-ux/use-border-color */
+}
+@media (forced-colors: active) {
+  .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation::before {
+    /* stylelint-disable-next-line db-ux/use-border-color */
+    border-inline-start: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  }
+}
+.db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation::before {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* jscpd:ignore-end */
+}
+.db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation::before {
+  inset-block: calc(var(--db-spacing-fixed-md) + env(safe-area-inset-top));
+}
+.db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation .overflow-scroll-left-button,
+.db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation .overflow-scroll-right-button {
+  display: flex;
+}
+[data-width=small].db-control-panel-desktop[data-orientation=horizontal] {
+  margin-inline: auto;
+  max-inline-size: 48em;
+}
+[data-width=medium].db-control-panel-desktop[data-orientation=horizontal] {
+  margin-inline: auto;
+  max-inline-size: 64em;
+}
+[data-width=large].db-control-panel-desktop[data-orientation=horizontal] {
+  margin-inline: auto;
+  max-inline-size: 90em;
+}
+.db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation {
+  --db-overflow-scroll-button-inset-block: calc(var(--db-spacing-fixed-md) + env(safe-area-inset-top));
+  --db-overflow-scroll-button-inset-inline-start: calc(
+  	var(--db-spacing-fixed-sm) / 2
+  );
+  display: grid;
+  --db-control-panel-navigation-horizontal: 1;
+  /*
+   * Scroll left / right buttons
+   */
+}
+.db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation .overflow-scroll-left-button > .db-button, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation .overflow-scroll-left-button:is(.db-button) {
+  inset-inline-start: var(--db-overflow-scroll-button-inset-inline-start, 0);
+}
+.db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation .overflow-scroll-right-button > .db-button, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation .overflow-scroll-right-button:is(.db-button) {
+  inset-inline-end: 0;
+}
+.db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation .overflow-scroll-left-button > .db-button, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation .overflow-scroll-left-button:is(.db-button),
+.db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation .overflow-scroll-right-button > .db-button,
+.db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation .overflow-scroll-right-button:is(.db-button) {
+  position: absolute;
+  z-index: 22;
+  inset-block: var(--db-overflow-scroll-button-inset-block, var(--db-spacing-fixed-xs));
+}
+.db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation:has(.overflow-scroll-left-button) > menu::before {
+  content: "";
+}
+.db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation:has(.overflow-scroll-right-button) > menu::after {
+  content: "";
+}
+.db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation:has(.db-button) > menu::before, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation:has(.db-button) > menu::after {
+  position: absolute;
+  z-index: 21;
+  background-color: var(--db-adaptive-bg-basic-level-1-default);
+  inline-size: var(--db-sizing-md);
+  block-size: calc(var(--db-overflow-scroll-button-background-block-size, var(--db-spacing-fixed-sm)) + var(--db-sizing-md));
+  flex: 0 0 auto;
+}
+.db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation:has(.db-button) > menu::before {
+  inset-inline-start: var(--db-overflow-scroll-button-inset-inline-start, 0);
+}
+.db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation:has(.db-button) > menu::after {
+  inset-inline-end: 0;
+}
+@supports (scrollbar-width: none) {
+  .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation:has(.db-button) > menu {
+    scrollbar-width: none;
+  }
+}
+.db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation:has(.db-button) > menu::-webkit-scrollbar {
+  display: none;
+}
+.db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation:has(.db-button) > menu::before, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation:has(.db-button) > menu::after {
+  block-size: calc(100% - var(--db-border-width-3xs));
+  inset-block: 0;
+  flex: none;
+}
+.db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu {
+  overflow: auto hidden;
+  flex-direction: row;
+}
+.db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > .db-control-panel-navigation-item-group,
+.db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item > .db-control-panel-navigation-item, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > db-control-panel-navigation-item > .db-control-panel-navigation-item, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > .db-control-panel-navigation-item {
+  white-space: nowrap;
+}
+.db-control-panel-desktop[data-orientation=horizontal] .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-control-panel-desktop[data-orientation=horizontal] .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-control-panel-desktop[data-orientation=horizontal] .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-control-panel-desktop[data-orientation=horizontal] .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-control-panel-desktop[data-orientation=horizontal] .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-control-panel-desktop[data-orientation=horizontal] .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-control-panel-desktop[data-orientation=horizontal] .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-control-panel-desktop[data-orientation=horizontal] .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-control-panel-desktop[data-orientation=horizontal] .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-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu {
+  padding-block: calc(var(--db-spacing-fixed-md) + env(safe-area-inset-top));
+  /* 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-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item > .db-control-panel-navigation-item::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > db-control-panel-navigation-item > .db-control-panel-navigation-item::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > .db-control-panel-navigation-item::after,
+.db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > .db-control-panel-navigation-item-group::after {
+  block-size: var(--db-border-width-xs);
+  inline-size: 0;
+  transform: translate(-50%, 0);
+  inset-inline-start: 50%;
+  inset-block: auto calc(-1 * var(--db-spacing-fixed-xs));
+}
+.db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item > .db-control-panel-navigation-item:has([aria-current=page])::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item > .db-control-panel-navigation-item:has([data-active=true])::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item > .db-control-panel-navigation-item[aria-current=page]::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item > .db-control-panel-navigation-item[data-active=true]::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > db-control-panel-navigation-item > .db-control-panel-navigation-item:has([aria-current=page])::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > db-control-panel-navigation-item > .db-control-panel-navigation-item:has([data-active=true])::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > db-control-panel-navigation-item > .db-control-panel-navigation-item[aria-current=page]::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > db-control-panel-navigation-item > .db-control-panel-navigation-item[data-active=true]::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > .db-control-panel-navigation-item:has([aria-current=page])::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > .db-control-panel-navigation-item:has([data-active=true])::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > .db-control-panel-navigation-item[aria-current=page]::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > .db-control-panel-navigation-item[data-active=true]::after,
+.db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group:has([aria-current=page])::after,
+.db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group:has([data-active=true])::after,
+.db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group[aria-current=page]::after,
+.db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group[data-active=true]::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group:has([aria-current=page])::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group:has([data-active=true])::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group[aria-current=page]::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group[data-active=true]::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > .db-control-panel-navigation-item-group:has([aria-current=page])::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > .db-control-panel-navigation-item-group:has([data-active=true])::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > .db-control-panel-navigation-item-group[aria-current=page]::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > .db-control-panel-navigation-item-group[data-active=true]::after {
+  block-size: var(--db-border-width-xs);
+  inline-size: 100%;
+}
+@media (forced-colors: active), print {
+  .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item > .db-control-panel-navigation-item:has([aria-current=page])::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item > .db-control-panel-navigation-item:has([data-active=true])::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item > .db-control-panel-navigation-item[aria-current=page]::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item > .db-control-panel-navigation-item[data-active=true]::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > db-control-panel-navigation-item > .db-control-panel-navigation-item:has([aria-current=page])::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > db-control-panel-navigation-item > .db-control-panel-navigation-item:has([data-active=true])::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > db-control-panel-navigation-item > .db-control-panel-navigation-item[aria-current=page]::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > db-control-panel-navigation-item > .db-control-panel-navigation-item[data-active=true]::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > .db-control-panel-navigation-item:has([aria-current=page])::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > .db-control-panel-navigation-item:has([data-active=true])::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > .db-control-panel-navigation-item[aria-current=page]::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > .db-control-panel-navigation-item[data-active=true]::after,
+  .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group:has([aria-current=page])::after,
+  .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group:has([data-active=true])::after,
+  .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group[aria-current=page]::after,
+  .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group[data-active=true]::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group:has([aria-current=page])::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group:has([data-active=true])::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group[aria-current=page]::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group[data-active=true]::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > .db-control-panel-navigation-item-group:has([aria-current=page])::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > .db-control-panel-navigation-item-group:has([data-active=true])::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > .db-control-panel-navigation-item-group[aria-current=page]::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > .db-control-panel-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-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item > .db-control-panel-navigation-item > * > db-control-panel-navigation-item > .db-control-panel-navigation-item, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item > .db-control-panel-navigation-item > db-control-panel-navigation-item > .db-control-panel-navigation-item, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item > .db-control-panel-navigation-item > .db-control-panel-navigation-item,
+.db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item > .db-control-panel-navigation-item > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item > .db-control-panel-navigation-item > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item > .db-control-panel-navigation-item > .db-control-panel-navigation-item-group, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > db-control-panel-navigation-item > .db-control-panel-navigation-item > * > db-control-panel-navigation-item > .db-control-panel-navigation-item, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > db-control-panel-navigation-item > .db-control-panel-navigation-item > db-control-panel-navigation-item > .db-control-panel-navigation-item, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > db-control-panel-navigation-item > .db-control-panel-navigation-item > .db-control-panel-navigation-item,
+.db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > db-control-panel-navigation-item > .db-control-panel-navigation-item > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > db-control-panel-navigation-item > .db-control-panel-navigation-item > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > db-control-panel-navigation-item > .db-control-panel-navigation-item > .db-control-panel-navigation-item-group, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > .db-control-panel-navigation-item > * > db-control-panel-navigation-item > .db-control-panel-navigation-item, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > .db-control-panel-navigation-item > db-control-panel-navigation-item > .db-control-panel-navigation-item, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > .db-control-panel-navigation-item > .db-control-panel-navigation-item,
+.db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > .db-control-panel-navigation-item > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > .db-control-panel-navigation-item > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > .db-control-panel-navigation-item > .db-control-panel-navigation-item-group,
+.db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > * > db-control-panel-navigation-item > .db-control-panel-navigation-item,
+.db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > db-control-panel-navigation-item > .db-control-panel-navigation-item,
+.db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > .db-control-panel-navigation-item,
+.db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group,
+.db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group,
+.db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > * > db-control-panel-navigation-item > .db-control-panel-navigation-item, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > db-control-panel-navigation-item > .db-control-panel-navigation-item, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > .db-control-panel-navigation-item,
+.db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > .db-control-panel-navigation-item-group > * > db-control-panel-navigation-item > .db-control-panel-navigation-item, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > .db-control-panel-navigation-item-group > db-control-panel-navigation-item > .db-control-panel-navigation-item, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > .db-control-panel-navigation-item-group > .db-control-panel-navigation-item,
+.db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > .db-control-panel-navigation-item-group > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > .db-control-panel-navigation-item-group > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > .db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group {
+  /* Workaround for custom-elements */
+}
+.db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item > .db-control-panel-navigation-item > * > db-control-panel-navigation-item > .db-control-panel-navigation-item::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item > .db-control-panel-navigation-item > db-control-panel-navigation-item > .db-control-panel-navigation-item::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item > .db-control-panel-navigation-item > .db-control-panel-navigation-item::after,
+.db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item > .db-control-panel-navigation-item > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item > .db-control-panel-navigation-item > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item > .db-control-panel-navigation-item > .db-control-panel-navigation-item-group::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > db-control-panel-navigation-item > .db-control-panel-navigation-item > * > db-control-panel-navigation-item > .db-control-panel-navigation-item::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > db-control-panel-navigation-item > .db-control-panel-navigation-item > db-control-panel-navigation-item > .db-control-panel-navigation-item::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > db-control-panel-navigation-item > .db-control-panel-navigation-item > .db-control-panel-navigation-item::after,
+.db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > db-control-panel-navigation-item > .db-control-panel-navigation-item > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > db-control-panel-navigation-item > .db-control-panel-navigation-item > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > db-control-panel-navigation-item > .db-control-panel-navigation-item > .db-control-panel-navigation-item-group::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > .db-control-panel-navigation-item > * > db-control-panel-navigation-item > .db-control-panel-navigation-item::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > .db-control-panel-navigation-item > db-control-panel-navigation-item > .db-control-panel-navigation-item::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > .db-control-panel-navigation-item > .db-control-panel-navigation-item::after,
+.db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > .db-control-panel-navigation-item > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > .db-control-panel-navigation-item > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > .db-control-panel-navigation-item > .db-control-panel-navigation-item-group::after,
+.db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > * > db-control-panel-navigation-item > .db-control-panel-navigation-item::after,
+.db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > db-control-panel-navigation-item > .db-control-panel-navigation-item::after,
+.db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > .db-control-panel-navigation-item::after,
+.db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group::after,
+.db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group::after,
+.db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > * > db-control-panel-navigation-item > .db-control-panel-navigation-item::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > db-control-panel-navigation-item > .db-control-panel-navigation-item::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > .db-control-panel-navigation-item::after,
+.db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > .db-control-panel-navigation-item-group > * > db-control-panel-navigation-item > .db-control-panel-navigation-item::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > .db-control-panel-navigation-item-group > db-control-panel-navigation-item > .db-control-panel-navigation-item::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > .db-control-panel-navigation-item-group > .db-control-panel-navigation-item::after,
+.db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > .db-control-panel-navigation-item-group > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > .db-control-panel-navigation-item-group > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group::after, .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu > .db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group::after {
+  content: none;
+}
+.db-control-panel-desktop[data-orientation=vertical] {
+  border-inline-end: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
+  block-size: 100%;
+  grid-template: [brand] "brand" auto [scroll] "scroll" 1fr [primary] "primary" auto [secondary] "secondary" auto [button] "button" auto;
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  .db-control-panel-desktop[data-orientation=vertical] {
+    transition: inline-size var(--db-transition-straight-functional);
+  }
+}
+@media screen and (prefers-reduced-motion: no-preference) and (prefers-reduced-motion: no-preference) {
+  .db-control-panel-desktop[data-orientation=vertical] > .db-control-panel-desktop-button .db-button::before {
+    transition: transform var(--db-transition-straight-functional);
+  }
+}
+.db-control-panel-desktop[data-orientation=vertical] {
+  /* jscpd:ignore-start */
+}
+[data-open=false].db-control-panel-desktop[data-orientation=vertical] {
+  inline-size: auto;
+  /* stylelint-disable-next-line declaration-property-value-no-unknown */
+  inline-size: calc-size(auto, size);
+}
+[data-open=false].db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation-item-group,
+[data-open=false].db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation-item,
+[data-open=false].db-control-panel-desktop[data-orientation=vertical] .db-control-panel-primary-actions,
+[data-open=false].db-control-panel-desktop[data-orientation=vertical] .db-control-panel-secondary-actions,
+[data-open=false].db-control-panel-desktop[data-orientation=vertical] .db-control-panel-meta {
+  display: none;
+}
+[data-open=false].db-control-panel-desktop[data-orientation=vertical] .db-control-panel-brand {
+  inline-size: var(--db-sizing-md);
+  overflow: hidden;
+}
+[data-open=false].db-control-panel-desktop[data-orientation=vertical] .db-control-panel-brand::before {
+  margin: auto;
+  aspect-ratio: var(--db-logo-aspect-ratio-short, var(--db-logo-aspect-ratio));
+  background-image: var(--db-logo-url-short, var(--db-logo-url));
+}
+[data-open=false].db-control-panel-desktop[data-orientation=vertical] > .db-control-panel-desktop-button {
+  justify-content: center;
+}
+[data-open=false].db-control-panel-desktop[data-orientation=vertical] > .db-control-panel-desktop-button .db-button::before {
+  transform: rotate(-180deg);
+}
+.db-control-panel-desktop[data-orientation=vertical] {
+  /* jscpd:ignore-end */
+}
+[data-open=true].db-control-panel-desktop[data-orientation=vertical] {
+  inline-size: var(--db-control-panel-desktop-inline-size, var(--db-container-xs));
+}
+.db-control-panel-desktop[data-orientation=vertical] > .db-control-panel-desktop-button {
+  grid-area: button;
+  padding-block: var(--db-spacing-fixed-xs);
+  display: flex;
+  justify-content: flex-end;
+  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
+  position: var(--db-tooltip-parent-position, relative);
+}
+.db-control-panel-desktop[data-orientation=vertical] > .db-control-panel-desktop-button[data-emphasis=strong] {
+  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
+}
+.db-control-panel-desktop[data-orientation=vertical] > .db-control-panel-desktop-button::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 */
+}
+@media (forced-colors: active) {
+  .db-control-panel-desktop[data-orientation=vertical] > .db-control-panel-desktop-button::before {
+    /* stylelint-disable-next-line db-ux/use-border-color */
+    border-block-start: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  }
+}
+.db-control-panel-desktop[data-orientation=vertical] > .db-control-panel-desktop-button::before {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* jscpd:ignore-end */
+}
+.db-control-panel-desktop[data-orientation=vertical] .db-control-panel-primary-actions,
+.db-control-panel-desktop[data-orientation=vertical] .db-control-panel-secondary-actions,
+.db-control-panel-desktop[data-orientation=vertical] > .db-control-panel-desktop-button {
+  padding: var(--db-spacing-fixed-sm) calc(var(--db-spacing-fixed-sm) + env(safe-area-inset-left));
+}
+.db-control-panel-desktop[data-orientation=vertical] .db-control-panel-desktop-brand-container {
+  inline-size: 100%;
+  padding: var(--db-spacing-fixed-sm) calc(var(--db-spacing-fixed-sm) + env(safe-area-inset-left));
+  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
+  position: var(--db-tooltip-parent-position, relative);
+}
+.db-control-panel-desktop[data-orientation=vertical] .db-control-panel-desktop-brand-container[data-emphasis=strong] {
+  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
+}
+.db-control-panel-desktop[data-orientation=vertical] .db-control-panel-desktop-brand-container::after {
+  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 */
+}
+@media (forced-colors: active) {
+  .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-desktop-brand-container::after {
+    /* stylelint-disable-next-line db-ux/use-border-color */
+    border-block-end: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  }
+}
+.db-control-panel-desktop[data-orientation=vertical] .db-control-panel-desktop-brand-container::after {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* jscpd:ignore-end */
+}
+.db-control-panel-desktop[data-orientation=vertical] .db-control-panel-desktop-brand-container::before {
+  flex-direction: column;
+  overflow: hidden;
+}
+.db-control-panel-desktop[data-orientation=vertical] > .db-control-panel-desktop-scroll-container {
+  display: grid;
+  overflow: hidden auto;
+  grid-area: scroll;
+  grid-template-areas: "navigation" "meta";
+}
+.db-control-panel-desktop[data-orientation=vertical] > .db-control-panel-desktop-scroll-container .db-control-panel-meta {
+  margin-block-start: auto;
+  flex-flow: column nowrap;
+  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
+  position: var(--db-tooltip-parent-position, relative);
+}
+.db-control-panel-desktop[data-orientation=vertical] > .db-control-panel-desktop-scroll-container .db-control-panel-meta[data-emphasis=strong] {
+  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
+}
+.db-control-panel-desktop[data-orientation=vertical] > .db-control-panel-desktop-scroll-container .db-control-panel-meta::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 */
+}
+@media (forced-colors: active) {
+  .db-control-panel-desktop[data-orientation=vertical] > .db-control-panel-desktop-scroll-container .db-control-panel-meta::before {
+    /* stylelint-disable-next-line db-ux/use-border-color */
+    border-block-start: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  }
+}
+.db-control-panel-desktop[data-orientation=vertical] > .db-control-panel-desktop-scroll-container .db-control-panel-meta::before {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* jscpd:ignore-end */
+}
+.db-control-panel-desktop[data-orientation=vertical] .db-control-panel-primary-actions,
+.db-control-panel-desktop[data-orientation=vertical] .db-control-panel-secondary-actions {
+  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
+  position: var(--db-tooltip-parent-position, relative);
+}
+.db-control-panel-desktop[data-orientation=vertical] .db-control-panel-primary-actions[data-emphasis=strong],
+.db-control-panel-desktop[data-orientation=vertical] .db-control-panel-secondary-actions[data-emphasis=strong] {
+  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
+}
+.db-control-panel-desktop[data-orientation=vertical] .db-control-panel-primary-actions::before,
+.db-control-panel-desktop[data-orientation=vertical] .db-control-panel-secondary-actions::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 */
+}
+@media (forced-colors: active) {
+  .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-primary-actions::before,
+  .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-secondary-actions::before {
+    /* stylelint-disable-next-line db-ux/use-border-color */
+    border-block-start: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  }
+}
+.db-control-panel-desktop[data-orientation=vertical] .db-control-panel-primary-actions::before,
+.db-control-panel-desktop[data-orientation=vertical] .db-control-panel-secondary-actions::before {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* jscpd:ignore-end */
+}
+.db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation {
+  padding-block: var(--db-spacing-fixed-sm);
+}
+.db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation:not([data-variant]) > menu .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-menu, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation[data-variant=popover] > menu .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-menu {
+  inset-inline-start: calc(100% + var(--db-spacing-fixed-xs));
+}
+.db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation:not([data-variant]) > menu .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-menu::before, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation[data-variant=popover] > menu .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-menu::before {
+  content: "";
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  block-size: 100%;
+  inline-size: var(--db-control-panel-navigation-item-inline-size, 100%);
+  background-color: transparent;
+  transform: translateX(-100%);
+  clip-path: var(--db-control-panel-navigation-item-clip-path, polygon(10% calc(1lh + var(--db-spacing-fixed-2xs)), 100% 0, 100% 100%));
+}
+.db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation:not([data-variant]) > menu .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-menu::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation[data-variant=popover] > menu .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-menu::after {
+  content: "";
+  position: absolute;
+  padding: var(--db-spacing-fixed-xs);
+  inset-block-start: var(--db-spacing-fixed-3xs);
+  inset-inline-end: calc(-1 * var(--db-spacing-fixed-xs));
+  block-size: calc(100% - 2 * var(--db-spacing-fixed-3xs));
+  inline-size: var(--db-spacing-fixed-xs);
+}
+.db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu {
+  flex-direction: column;
+  padding-inline: calc(var(--db-spacing-fixed-sm) + env(safe-area-inset-left));
+}
+.db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu .db-control-panel-navigation-item-group,
+.db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu .db-control-panel-navigation-item {
+  inline-size: 100%;
+}
+.db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu .db-control-panel-navigation-item-end-slot-container {
+  inset-inline-end: var(--db-spacing-fixed-sm);
+}
+.db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation {
+  /* jscpd:ignore-start */
+}
+.db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item > .db-control-panel-navigation-item::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > db-control-panel-navigation-item > .db-control-panel-navigation-item::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > .db-control-panel-navigation-item::after,
+.db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > .db-control-panel-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-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item > .db-control-panel-navigation-item:has([aria-current=page])::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item > .db-control-panel-navigation-item:has([data-active=true])::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item > .db-control-panel-navigation-item[aria-current=page]::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item > .db-control-panel-navigation-item[data-active=true]::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > db-control-panel-navigation-item > .db-control-panel-navigation-item:has([aria-current=page])::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > db-control-panel-navigation-item > .db-control-panel-navigation-item:has([data-active=true])::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > db-control-panel-navigation-item > .db-control-panel-navigation-item[aria-current=page]::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > db-control-panel-navigation-item > .db-control-panel-navigation-item[data-active=true]::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > .db-control-panel-navigation-item:has([aria-current=page])::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > .db-control-panel-navigation-item:has([data-active=true])::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > .db-control-panel-navigation-item[aria-current=page]::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > .db-control-panel-navigation-item[data-active=true]::after,
+.db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group:has([aria-current=page])::after,
+.db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group:has([data-active=true])::after,
+.db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group[aria-current=page]::after,
+.db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group[data-active=true]::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group:has([aria-current=page])::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group:has([data-active=true])::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group[aria-current=page]::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group[data-active=true]::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > .db-control-panel-navigation-item-group:has([aria-current=page])::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > .db-control-panel-navigation-item-group:has([data-active=true])::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > .db-control-panel-navigation-item-group[aria-current=page]::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > .db-control-panel-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), print {
+  .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item > .db-control-panel-navigation-item:has([aria-current=page])::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item > .db-control-panel-navigation-item:has([data-active=true])::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item > .db-control-panel-navigation-item[aria-current=page]::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item > .db-control-panel-navigation-item[data-active=true]::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > db-control-panel-navigation-item > .db-control-panel-navigation-item:has([aria-current=page])::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > db-control-panel-navigation-item > .db-control-panel-navigation-item:has([data-active=true])::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > db-control-panel-navigation-item > .db-control-panel-navigation-item[aria-current=page]::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > db-control-panel-navigation-item > .db-control-panel-navigation-item[data-active=true]::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > .db-control-panel-navigation-item:has([aria-current=page])::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > .db-control-panel-navigation-item:has([data-active=true])::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > .db-control-panel-navigation-item[aria-current=page]::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > .db-control-panel-navigation-item[data-active=true]::after,
+  .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group:has([aria-current=page])::after,
+  .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group:has([data-active=true])::after,
+  .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group[aria-current=page]::after,
+  .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group[data-active=true]::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group:has([aria-current=page])::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group:has([data-active=true])::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group[aria-current=page]::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group[data-active=true]::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > .db-control-panel-navigation-item-group:has([aria-current=page])::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > .db-control-panel-navigation-item-group:has([data-active=true])::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > .db-control-panel-navigation-item-group[aria-current=page]::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > .db-control-panel-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-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item > .db-control-panel-navigation-item > * > db-control-panel-navigation-item > .db-control-panel-navigation-item, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item > .db-control-panel-navigation-item > db-control-panel-navigation-item > .db-control-panel-navigation-item, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item > .db-control-panel-navigation-item > .db-control-panel-navigation-item,
+.db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item > .db-control-panel-navigation-item > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item > .db-control-panel-navigation-item > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item > .db-control-panel-navigation-item > .db-control-panel-navigation-item-group, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > db-control-panel-navigation-item > .db-control-panel-navigation-item > * > db-control-panel-navigation-item > .db-control-panel-navigation-item, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > db-control-panel-navigation-item > .db-control-panel-navigation-item > db-control-panel-navigation-item > .db-control-panel-navigation-item, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > db-control-panel-navigation-item > .db-control-panel-navigation-item > .db-control-panel-navigation-item,
+.db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > db-control-panel-navigation-item > .db-control-panel-navigation-item > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > db-control-panel-navigation-item > .db-control-panel-navigation-item > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > db-control-panel-navigation-item > .db-control-panel-navigation-item > .db-control-panel-navigation-item-group, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > .db-control-panel-navigation-item > * > db-control-panel-navigation-item > .db-control-panel-navigation-item, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > .db-control-panel-navigation-item > db-control-panel-navigation-item > .db-control-panel-navigation-item, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > .db-control-panel-navigation-item > .db-control-panel-navigation-item,
+.db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > .db-control-panel-navigation-item > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > .db-control-panel-navigation-item > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > .db-control-panel-navigation-item > .db-control-panel-navigation-item-group,
+.db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > * > db-control-panel-navigation-item > .db-control-panel-navigation-item,
+.db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > db-control-panel-navigation-item > .db-control-panel-navigation-item,
+.db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > .db-control-panel-navigation-item,
+.db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group,
+.db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group,
+.db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > * > db-control-panel-navigation-item > .db-control-panel-navigation-item, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > db-control-panel-navigation-item > .db-control-panel-navigation-item, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > .db-control-panel-navigation-item,
+.db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > .db-control-panel-navigation-item-group > * > db-control-panel-navigation-item > .db-control-panel-navigation-item, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > .db-control-panel-navigation-item-group > db-control-panel-navigation-item > .db-control-panel-navigation-item, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > .db-control-panel-navigation-item-group > .db-control-panel-navigation-item,
+.db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > .db-control-panel-navigation-item-group > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > .db-control-panel-navigation-item-group > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > .db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group {
+  /* Workaround for custom-elements */
+}
+.db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item > .db-control-panel-navigation-item > * > db-control-panel-navigation-item > .db-control-panel-navigation-item::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item > .db-control-panel-navigation-item > db-control-panel-navigation-item > .db-control-panel-navigation-item::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item > .db-control-panel-navigation-item > .db-control-panel-navigation-item::after,
+.db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item > .db-control-panel-navigation-item > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item > .db-control-panel-navigation-item > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item > .db-control-panel-navigation-item > .db-control-panel-navigation-item-group::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > db-control-panel-navigation-item > .db-control-panel-navigation-item > * > db-control-panel-navigation-item > .db-control-panel-navigation-item::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > db-control-panel-navigation-item > .db-control-panel-navigation-item > db-control-panel-navigation-item > .db-control-panel-navigation-item::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > db-control-panel-navigation-item > .db-control-panel-navigation-item > .db-control-panel-navigation-item::after,
+.db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > db-control-panel-navigation-item > .db-control-panel-navigation-item > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > db-control-panel-navigation-item > .db-control-panel-navigation-item > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > db-control-panel-navigation-item > .db-control-panel-navigation-item > .db-control-panel-navigation-item-group::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > .db-control-panel-navigation-item > * > db-control-panel-navigation-item > .db-control-panel-navigation-item::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > .db-control-panel-navigation-item > db-control-panel-navigation-item > .db-control-panel-navigation-item::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > .db-control-panel-navigation-item > .db-control-panel-navigation-item::after,
+.db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > .db-control-panel-navigation-item > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > .db-control-panel-navigation-item > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > .db-control-panel-navigation-item > .db-control-panel-navigation-item-group::after,
+.db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > * > db-control-panel-navigation-item > .db-control-panel-navigation-item::after,
+.db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > db-control-panel-navigation-item > .db-control-panel-navigation-item::after,
+.db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > .db-control-panel-navigation-item::after,
+.db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group::after,
+.db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group::after,
+.db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > * > db-control-panel-navigation-item > .db-control-panel-navigation-item::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > db-control-panel-navigation-item > .db-control-panel-navigation-item::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > .db-control-panel-navigation-item::after,
+.db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > .db-control-panel-navigation-item-group > * > db-control-panel-navigation-item > .db-control-panel-navigation-item::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > .db-control-panel-navigation-item-group > db-control-panel-navigation-item > .db-control-panel-navigation-item::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > .db-control-panel-navigation-item-group > .db-control-panel-navigation-item::after,
+.db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > .db-control-panel-navigation-item-group > * > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > .db-control-panel-navigation-item-group > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group::after, .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu > .db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group::after {
+  content: none;
+}
+.db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation {
+  /* jscpd:ignore-end */
+}
+.db-control-panel-desktop {
+  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));
+  grid-area: control-panel;
+}
+.db-control-panel-desktop .db-link {
+  display: inline-block;
+}
+.db-control-panel-desktop .db-control-panel-navigation {
+  grid-area: navigation;
+}