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

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 (103) hide show
  1. package/CHANGELOG.md +28 -0
  2. package/agent/Best-Practise_Common-AI-Mistakes.md +3 -3
  3. package/build/components/accordion-item/accordion-item.css +0 -1
  4. package/build/components/brand/brand.css +0 -1
  5. package/build/components/brand/brand.scss +0 -1
  6. package/build/components/button/button.css +4 -9
  7. package/build/components/checkbox/checkbox.css +0 -3
  8. package/build/components/checkbox/checkbox.scss +0 -2
  9. package/build/components/custom-button/custom-button.css +8 -13
  10. package/build/components/custom-button/custom-button.scss +2 -3
  11. package/build/components/custom-select/custom-select.css +0 -1
  12. package/build/components/custom-select-list-item/custom-select-list-item.css +6 -2
  13. package/build/components/custom-select-list-item/custom-select-list-item.scss +8 -3
  14. package/build/components/drawer/drawer.css +32 -21
  15. package/build/components/drawer/drawer.scss +50 -26
  16. package/build/components/header/header.css +3 -10
  17. package/build/components/header/header.scss +7 -6
  18. package/build/components/icon/icon.css +0 -6
  19. package/build/components/infotext/infotext.css +0 -4
  20. package/build/components/infotext/infotext.scss +0 -2
  21. package/build/components/input/input.css +0 -5
  22. package/build/components/link/link.css +6 -9
  23. package/build/components/link/link.scss +8 -3
  24. package/build/components/navigation/navigation.css +1 -2
  25. package/build/components/navigation/navigation.scss +2 -2
  26. package/build/components/navigation-item/navigation-item.css +5 -28
  27. package/build/components/navigation-item/navigation-item.scss +5 -24
  28. package/build/components/notification/notification.css +1 -5
  29. package/build/components/notification/notification.scss +0 -2
  30. package/build/components/page/page.css +0 -8
  31. package/build/components/page/page.scss +0 -8
  32. package/build/components/select/select.css +0 -1
  33. package/build/components/stack/stack-web-component.css +0 -1
  34. package/build/components/stack/stack.css +0 -1
  35. package/build/components/switch/switch.css +0 -3
  36. package/build/components/switch/switch.scss +0 -1
  37. package/build/components/tab-item/tab-item.css +120 -98
  38. package/build/components/tab-item/tab-item.scss +89 -90
  39. package/build/components/tab-list/tab-list.css +38 -36
  40. package/build/components/tab-list/tab-list.scss +11 -9
  41. package/build/components/tab-panel/tab-panel.css +30 -4
  42. package/build/components/tab-panel/tab-panel.scss +60 -2
  43. package/build/components/table/table.css +0 -4
  44. package/build/components/table-row/table-row.css +0 -4
  45. package/build/components/table-row/table-row.scss +0 -5
  46. package/build/components/tabs/tabs.css +152 -263
  47. package/build/components/tabs/tabs.scss +243 -198
  48. package/build/components/tag/tag.css +2 -21
  49. package/build/components/tag/tag.scss +5 -7
  50. package/build/styles/absolute.css +12 -12
  51. package/build/styles/bundle.css +12 -12
  52. package/build/styles/index.css +11 -11
  53. package/build/styles/index.scss +3 -17
  54. package/build/styles/internal/_button-components.scss +7 -4
  55. package/build/styles/internal/_custom-elements.scss +8 -32
  56. package/build/styles/internal/_icon-passing.scss +9 -10
  57. package/build/styles/internal/_link-components.scss +1 -3
  58. package/build/styles/relative.css +12 -12
  59. package/build/styles/rollup.css +12 -12
  60. package/build/styles/wc-workarounds.css +1 -1
  61. package/build/styles/wc-workarounds.scss +0 -11
  62. package/build/styles/webpack.css +12 -12
  63. package/package.json +4 -4
  64. package/build/components/control-panel-brand/control-panel-brand.css +0 -53
  65. package/build/components/control-panel-brand/control-panel-brand.scss +0 -48
  66. package/build/components/control-panel-desktop/control-panel-desktop.css +0 -579
  67. package/build/components/control-panel-desktop/control-panel-desktop.scss +0 -30
  68. package/build/components/control-panel-flat-icon/control-panel-flat-icon.css +0 -258
  69. package/build/components/control-panel-flat-icon/control-panel-flat-icon.scss +0 -239
  70. package/build/components/control-panel-meta/control-panel-meta.css +0 -14
  71. package/build/components/control-panel-meta/control-panel-meta.scss +0 -15
  72. package/build/components/control-panel-mobile/control-panel-mobile.css +0 -442
  73. package/build/components/control-panel-mobile/control-panel-mobile.scss +0 -119
  74. package/build/components/control-panel-navigation/control-panel-navigation.css +0 -402
  75. package/build/components/control-panel-navigation/control-panel-navigation.scss +0 -186
  76. package/build/components/control-panel-navigation-item/control-panel-navigation-item.css +0 -87
  77. package/build/components/control-panel-navigation-item/control-panel-navigation-item.scss +0 -39
  78. package/build/components/control-panel-navigation-item-group/control-panel-navigation-item-group-menu-popover.css +0 -21
  79. package/build/components/control-panel-navigation-item-group/control-panel-navigation-item-group-menu-popover.scss +0 -129
  80. package/build/components/control-panel-navigation-item-group/control-panel-navigation-item-group-menu-tree.css +0 -35
  81. package/build/components/control-panel-navigation-item-group/control-panel-navigation-item-group-menu-tree.scss +0 -36
  82. package/build/components/control-panel-navigation-item-group/control-panel-navigation-item-group.css +0 -158
  83. package/build/components/control-panel-navigation-item-group/control-panel-navigation-item-group.scss +0 -80
  84. package/build/components/control-panel-primary-actions/control-panel-primary-actions.css +0 -12
  85. package/build/components/control-panel-primary-actions/control-panel-primary-actions.scss +0 -7
  86. package/build/components/control-panel-secondary-actions/control-panel-secondary-actions.css +0 -12
  87. package/build/components/control-panel-secondary-actions/control-panel-secondary-actions.scss +0 -7
  88. package/build/components/control-panel-skip-navigation/control-panel-skip-navigation.css +0 -23
  89. package/build/components/control-panel-skip-navigation/control-panel-skip-navigation.scss +0 -25
  90. package/build/components/shell/shell-desktop.css +0 -475
  91. package/build/components/shell/shell-desktop.scss +0 -105
  92. package/build/components/shell/shell-mobile.css +0 -441
  93. package/build/components/shell/shell-mobile.scss +0 -148
  94. package/build/components/shell/shell.css +0 -1670
  95. package/build/components/shell/shell.scss +0 -70
  96. package/build/components/shell-content/shell-content.css +0 -34
  97. package/build/components/shell-content/shell-content.scss +0 -53
  98. package/build/components/shell-sub-navigation/shell-sub-navigation.css +0 -51
  99. package/build/components/shell-sub-navigation/shell-sub-navigation.scss +0 -184
  100. package/build/styles/internal/_control-panel-actions.scss +0 -11
  101. package/build/styles/internal/_control-panel-desktop.scss +0 -412
  102. package/build/styles/internal/_control-panel-mobile.scss +0 -107
  103. package/build/styles/internal/_navigation-item.scss +0 -122
@@ -1,579 +0,0 @@
1
- .db-visually-hidden,
2
- [data-visually-hidden=true] {
3
- position: absolute !important;
4
- inset-block-start: 0 !important;
5
- inline-size: 1px !important;
6
- block-size: 1px !important;
7
- overflow: hidden !important;
8
- clip: rect(0, 0, 0, 0) !important;
9
- white-space: nowrap !important;
10
- border: 0 !important;
11
- padding: 0 !important;
12
- pointer-events: none !important;
13
- }
14
-
15
- /* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
16
- /* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
17
- /* Variants for adaptive components like input, select, notification, ... */
18
- /* Sub components for shell */
19
- .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,
20
- .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,
21
- .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 {
22
- content: "";
23
- position: absolute;
24
- border-radius: var(--db-border-radius-xs);
25
- 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);
26
- }
27
- @media (prefers-reduced-motion: no-preference) {
28
- .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,
29
- .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,
30
- .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 {
31
- 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);
32
- }
33
- }
34
-
35
- @keyframes popover-animation {
36
- 0% {
37
- pointer-events: none;
38
- opacity: 0;
39
- transform: translate(var(--db-popover-center-x, var(--db-popover-translate-x, 0%)), var(--db-popover-center-y, var(--db-popover-translate-y, 0%)));
40
- }
41
- 100% {
42
- pointer-events: auto;
43
- opacity: 1;
44
- transform: translate(var(--db-popover-center-x, 0%), var(--db-popover-center-y, 0%));
45
- }
46
- }
47
- @keyframes rotate {
48
- 100% {
49
- transform: rotate(1turn);
50
- }
51
- }
52
- .db-control-panel-desktop[data-orientation=horizontal] {
53
- border-block-end: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
54
- column-gap: var(--db-spacing-fixed-sm);
55
- 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;
56
- }
57
- .db-control-panel-desktop[data-orientation=horizontal] > .db-control-panel-desktop-scroll-container {
58
- display: contents;
59
- }
60
- .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-brand {
61
- padding-inline: var(--db-spacing-fixed-sm);
62
- }
63
- .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-primary-actions,
64
- .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-secondary-actions {
65
- block-size: var(--db-sizing-md);
66
- }
67
- .db-control-panel-desktop[data-orientation=horizontal] > .db-control-panel-desktop-button {
68
- display: none;
69
- }
70
- .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-secondary-actions {
71
- padding-inline-start: var(--db-spacing-fixed-sm);
72
- --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
73
- position: var(--db-tooltip-parent-position, relative);
74
- }
75
- .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-secondary-actions[data-emphasis=strong] {
76
- --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
77
- }
78
- .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-secondary-actions::before {
79
- content: "";
80
- background-color: var(--db-divider-bg-color);
81
- position: absolute;
82
- /* jscpd:ignore-start */
83
- inline-size: var(--db-border-width-3xs);
84
- inset-inline-start: 0;
85
- inset-block: 0;
86
- /* stylelint-disable-next-line db-ux/use-border-color */
87
- }
88
- @media (forced-colors: active) {
89
- .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-secondary-actions::before {
90
- /* stylelint-disable-next-line db-ux/use-border-color */
91
- border-inline-start: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
92
- }
93
- }
94
- .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-secondary-actions::before {
95
- /* stylelint-disable-next-line at-rule-empty-line-before */
96
- /* jscpd:ignore-end */
97
- }
98
- .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation {
99
- --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
100
- position: var(--db-tooltip-parent-position, relative);
101
- }
102
- .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation[data-emphasis=strong] {
103
- --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
104
- }
105
- .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation::before {
106
- content: "";
107
- background-color: var(--db-divider-bg-color);
108
- position: absolute;
109
- /* jscpd:ignore-start */
110
- inline-size: var(--db-border-width-3xs);
111
- inset-inline-start: 0;
112
- inset-block: 0;
113
- /* stylelint-disable-next-line db-ux/use-border-color */
114
- }
115
- @media (forced-colors: active) {
116
- .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation::before {
117
- /* stylelint-disable-next-line db-ux/use-border-color */
118
- border-inline-start: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
119
- }
120
- }
121
- .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation::before {
122
- /* stylelint-disable-next-line at-rule-empty-line-before */
123
- /* jscpd:ignore-end */
124
- }
125
- .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation::before {
126
- inset-block: calc(var(--db-spacing-fixed-md) + env(safe-area-inset-top));
127
- }
128
- .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation .overflow-scroll-left-button,
129
- .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation .overflow-scroll-right-button {
130
- display: flex;
131
- }
132
- [data-width=small].db-control-panel-desktop[data-orientation=horizontal] {
133
- margin-inline: auto;
134
- max-inline-size: 48em;
135
- }
136
- [data-width=medium].db-control-panel-desktop[data-orientation=horizontal] {
137
- margin-inline: auto;
138
- max-inline-size: 64em;
139
- }
140
- [data-width=large].db-control-panel-desktop[data-orientation=horizontal] {
141
- margin-inline: auto;
142
- max-inline-size: 90em;
143
- }
144
- .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation {
145
- --db-overflow-scroll-button-inset-block: calc(var(--db-spacing-fixed-md) + env(safe-area-inset-top));
146
- --db-overflow-scroll-button-inset-inline-start: calc(
147
- var(--db-spacing-fixed-sm) / 2
148
- );
149
- display: grid;
150
- --db-control-panel-navigation-horizontal: 1;
151
- /*
152
- * Scroll left / right buttons
153
- */
154
- }
155
- .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) {
156
- inset-inline-start: var(--db-overflow-scroll-button-inset-inline-start, 0);
157
- }
158
- .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) {
159
- inset-inline-end: 0;
160
- }
161
- .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),
162
- .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation .overflow-scroll-right-button > .db-button,
163
- .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation .overflow-scroll-right-button:is(.db-button) {
164
- position: absolute;
165
- z-index: 22;
166
- inset-block: var(--db-overflow-scroll-button-inset-block, var(--db-spacing-fixed-xs));
167
- }
168
- .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation:has(.overflow-scroll-left-button) > menu::before {
169
- content: "";
170
- }
171
- .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation:has(.overflow-scroll-right-button) > menu::after {
172
- content: "";
173
- }
174
- .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 {
175
- position: absolute;
176
- z-index: 21;
177
- background-color: var(--db-adaptive-bg-basic-level-1-default);
178
- inline-size: var(--db-sizing-md);
179
- block-size: calc(var(--db-overflow-scroll-button-background-block-size, var(--db-spacing-fixed-sm)) + var(--db-sizing-md));
180
- flex: 0 0 auto;
181
- }
182
- .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation:has(.db-button) > menu::before {
183
- inset-inline-start: var(--db-overflow-scroll-button-inset-inline-start, 0);
184
- }
185
- .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation:has(.db-button) > menu::after {
186
- inset-inline-end: 0;
187
- }
188
- @supports (scrollbar-width: none) {
189
- .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation:has(.db-button) > menu {
190
- scrollbar-width: none;
191
- }
192
- }
193
- .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation:has(.db-button) > menu::-webkit-scrollbar {
194
- display: none;
195
- }
196
- .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 {
197
- block-size: calc(100% - var(--db-border-width-3xs));
198
- inset-block: 0;
199
- flex: none;
200
- }
201
- .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu {
202
- overflow: auto hidden;
203
- flex-direction: row;
204
- }
205
- .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,
206
- .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 {
207
- white-space: nowrap;
208
- }
209
- .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 {
210
- --db-icon-trailing: "chevron_down";
211
- }
212
- .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 {
213
- inset-block-start: calc(100% + var(--db-popover-distance, var(--db-spacing-fixed-md)));
214
- }
215
- .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 {
216
- content: "";
217
- position: absolute;
218
- inset-inline-start: 0;
219
- inline-size: 100%;
220
- block-size: calc(var(--db-spacing-fixed-3xs) + var(--db-spacing-fixed-md));
221
- inset-block-start: calc(-1 * var(--db-spacing-fixed-md) - var(--db-spacing-fixed-3xs));
222
- }
223
- .db-control-panel-desktop[data-orientation=horizontal] .db-control-panel-navigation > menu {
224
- padding-block: calc(var(--db-spacing-fixed-md) + env(safe-area-inset-top));
225
- /* workaround for showing correct scrolling and focus */
226
- padding-inline-start: calc(var(--db-spacing-fixed-sm) / 2);
227
- margin-inline-start: calc(var(--db-spacing-fixed-sm) / 2);
228
- }
229
- .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,
230
- .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 {
231
- block-size: var(--db-border-width-xs);
232
- inline-size: 0;
233
- transform: translate(-50%, 0);
234
- inset-inline-start: 50%;
235
- inset-block: auto calc(-1 * var(--db-spacing-fixed-xs));
236
- }
237
- .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,
238
- .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,
239
- .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,
240
- .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,
241
- .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 {
242
- block-size: var(--db-border-width-xs);
243
- inline-size: 100%;
244
- }
245
- @media (forced-colors: active), print {
246
- .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,
247
- .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,
248
- .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,
249
- .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,
250
- .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 {
251
- border: calc(var(--db-border-width-xs) - 1px) solid var(--db-adaptive-on-bg-basic-emphasis-100-default);
252
- }
253
- }
254
- .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,
255
- .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,
256
- .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,
257
- .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,
258
- .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,
259
- .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,
260
- .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,
261
- .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,
262
- .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,
263
- .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,
264
- .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,
265
- .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 {
266
- /* Workaround for custom-elements */
267
- }
268
- .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,
269
- .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,
270
- .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,
271
- .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,
272
- .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,
273
- .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,
274
- .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,
275
- .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,
276
- .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,
277
- .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,
278
- .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,
279
- .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 {
280
- content: none;
281
- }
282
-
283
- .db-control-panel-desktop[data-orientation=vertical] {
284
- border-inline-end: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
285
- block-size: 100%;
286
- grid-template: [brand] "brand" auto [scroll] "scroll" 1fr [primary] "primary" auto [secondary] "secondary" auto [button] "button" auto;
287
- }
288
- @media screen and (prefers-reduced-motion: no-preference) {
289
- .db-control-panel-desktop[data-orientation=vertical] {
290
- transition: inline-size var(--db-transition-straight-functional);
291
- }
292
- }
293
- @media screen and (prefers-reduced-motion: no-preference) and (prefers-reduced-motion: no-preference) {
294
- .db-control-panel-desktop[data-orientation=vertical] > .db-control-panel-desktop-button .db-button::before {
295
- transition: transform var(--db-transition-straight-functional);
296
- }
297
- }
298
- .db-control-panel-desktop[data-orientation=vertical] {
299
- /* jscpd:ignore-start */
300
- }
301
- [data-open=false].db-control-panel-desktop[data-orientation=vertical] {
302
- inline-size: auto;
303
- /* stylelint-disable-next-line declaration-property-value-no-unknown */
304
- inline-size: calc-size(auto, size);
305
- }
306
- [data-open=false].db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation-item-group,
307
- [data-open=false].db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation-item,
308
- [data-open=false].db-control-panel-desktop[data-orientation=vertical] .db-control-panel-primary-actions,
309
- [data-open=false].db-control-panel-desktop[data-orientation=vertical] .db-control-panel-secondary-actions,
310
- [data-open=false].db-control-panel-desktop[data-orientation=vertical] .db-control-panel-meta {
311
- display: none;
312
- }
313
- [data-open=false].db-control-panel-desktop[data-orientation=vertical] .db-control-panel-brand {
314
- inline-size: var(--db-sizing-md);
315
- overflow: hidden;
316
- }
317
- [data-open=false].db-control-panel-desktop[data-orientation=vertical] .db-control-panel-brand::before {
318
- margin: auto;
319
- aspect-ratio: var(--db-logo-aspect-ratio-short, var(--db-logo-aspect-ratio));
320
- background-image: var(--db-logo-url-short, var(--db-logo-url));
321
- }
322
- [data-open=false].db-control-panel-desktop[data-orientation=vertical] > .db-control-panel-desktop-button {
323
- justify-content: center;
324
- }
325
- [data-open=false].db-control-panel-desktop[data-orientation=vertical] > .db-control-panel-desktop-button .db-button::before {
326
- transform: rotate(-180deg);
327
- }
328
- .db-control-panel-desktop[data-orientation=vertical] {
329
- /* jscpd:ignore-end */
330
- }
331
- [data-open=true].db-control-panel-desktop[data-orientation=vertical] {
332
- inline-size: var(--db-control-panel-desktop-inline-size, var(--db-container-xs));
333
- }
334
- .db-control-panel-desktop[data-orientation=vertical] > .db-control-panel-desktop-button {
335
- grid-area: button;
336
- padding-block: var(--db-spacing-fixed-xs);
337
- display: flex;
338
- justify-content: flex-end;
339
- --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
340
- position: var(--db-tooltip-parent-position, relative);
341
- }
342
- .db-control-panel-desktop[data-orientation=vertical] > .db-control-panel-desktop-button[data-emphasis=strong] {
343
- --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
344
- }
345
- .db-control-panel-desktop[data-orientation=vertical] > .db-control-panel-desktop-button::before {
346
- content: "";
347
- background-color: var(--db-divider-bg-color);
348
- position: absolute;
349
- /* jscpd:ignore-start */
350
- block-size: var(--db-border-width-3xs);
351
- inset-block-start: 0;
352
- inset-inline: 0;
353
- /* stylelint-disable-next-line db-ux/use-border-color */
354
- }
355
- @media (forced-colors: active) {
356
- .db-control-panel-desktop[data-orientation=vertical] > .db-control-panel-desktop-button::before {
357
- /* stylelint-disable-next-line db-ux/use-border-color */
358
- border-block-start: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
359
- }
360
- }
361
- .db-control-panel-desktop[data-orientation=vertical] > .db-control-panel-desktop-button::before {
362
- /* stylelint-disable-next-line at-rule-empty-line-before */
363
- /* jscpd:ignore-end */
364
- }
365
- .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-primary-actions,
366
- .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-secondary-actions,
367
- .db-control-panel-desktop[data-orientation=vertical] > .db-control-panel-desktop-button {
368
- padding: var(--db-spacing-fixed-sm) calc(var(--db-spacing-fixed-sm) + env(safe-area-inset-left));
369
- }
370
- .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-desktop-brand-container {
371
- inline-size: 100%;
372
- padding: var(--db-spacing-fixed-sm) calc(var(--db-spacing-fixed-sm) + env(safe-area-inset-left));
373
- --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
374
- position: var(--db-tooltip-parent-position, relative);
375
- }
376
- .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-desktop-brand-container[data-emphasis=strong] {
377
- --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
378
- }
379
- .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-desktop-brand-container::after {
380
- content: "";
381
- background-color: var(--db-divider-bg-color);
382
- position: absolute;
383
- /* jscpd:ignore-start */
384
- block-size: var(--db-border-width-3xs);
385
- inset-block-end: 0;
386
- inset-inline: 0;
387
- /* stylelint-disable-next-line db-ux/use-border-color */
388
- }
389
- @media (forced-colors: active) {
390
- .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-desktop-brand-container::after {
391
- /* stylelint-disable-next-line db-ux/use-border-color */
392
- border-block-end: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
393
- }
394
- }
395
- .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-desktop-brand-container::after {
396
- /* stylelint-disable-next-line at-rule-empty-line-before */
397
- /* jscpd:ignore-end */
398
- }
399
- .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-desktop-brand-container::before {
400
- flex-direction: column;
401
- overflow: hidden;
402
- }
403
- .db-control-panel-desktop[data-orientation=vertical] > .db-control-panel-desktop-scroll-container {
404
- display: grid;
405
- overflow: hidden auto;
406
- grid-area: scroll;
407
- grid-template-areas: "navigation" "meta";
408
- }
409
- .db-control-panel-desktop[data-orientation=vertical] > .db-control-panel-desktop-scroll-container .db-control-panel-meta {
410
- margin-block-start: auto;
411
- flex-flow: column nowrap;
412
- --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
413
- position: var(--db-tooltip-parent-position, relative);
414
- }
415
- .db-control-panel-desktop[data-orientation=vertical] > .db-control-panel-desktop-scroll-container .db-control-panel-meta[data-emphasis=strong] {
416
- --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
417
- }
418
- .db-control-panel-desktop[data-orientation=vertical] > .db-control-panel-desktop-scroll-container .db-control-panel-meta::before {
419
- content: "";
420
- background-color: var(--db-divider-bg-color);
421
- position: absolute;
422
- /* jscpd:ignore-start */
423
- block-size: var(--db-border-width-3xs);
424
- inset-block-start: 0;
425
- inset-inline: 0;
426
- /* stylelint-disable-next-line db-ux/use-border-color */
427
- }
428
- @media (forced-colors: active) {
429
- .db-control-panel-desktop[data-orientation=vertical] > .db-control-panel-desktop-scroll-container .db-control-panel-meta::before {
430
- /* stylelint-disable-next-line db-ux/use-border-color */
431
- border-block-start: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
432
- }
433
- }
434
- .db-control-panel-desktop[data-orientation=vertical] > .db-control-panel-desktop-scroll-container .db-control-panel-meta::before {
435
- /* stylelint-disable-next-line at-rule-empty-line-before */
436
- /* jscpd:ignore-end */
437
- }
438
- .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-primary-actions,
439
- .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-secondary-actions {
440
- --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
441
- position: var(--db-tooltip-parent-position, relative);
442
- }
443
- .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-primary-actions[data-emphasis=strong],
444
- .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-secondary-actions[data-emphasis=strong] {
445
- --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
446
- }
447
- .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-primary-actions::before,
448
- .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-secondary-actions::before {
449
- content: "";
450
- background-color: var(--db-divider-bg-color);
451
- position: absolute;
452
- /* jscpd:ignore-start */
453
- block-size: var(--db-border-width-3xs);
454
- inset-block-start: 0;
455
- inset-inline: 0;
456
- /* stylelint-disable-next-line db-ux/use-border-color */
457
- }
458
- @media (forced-colors: active) {
459
- .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-primary-actions::before,
460
- .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-secondary-actions::before {
461
- /* stylelint-disable-next-line db-ux/use-border-color */
462
- border-block-start: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
463
- }
464
- }
465
- .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-primary-actions::before,
466
- .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-secondary-actions::before {
467
- /* stylelint-disable-next-line at-rule-empty-line-before */
468
- /* jscpd:ignore-end */
469
- }
470
- .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation {
471
- padding-block: var(--db-spacing-fixed-sm);
472
- }
473
- .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 {
474
- inset-inline-start: calc(100% + var(--db-spacing-fixed-xs));
475
- }
476
- .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 {
477
- content: "";
478
- position: absolute;
479
- inset-block-start: 0;
480
- inset-inline-start: 0;
481
- block-size: 100%;
482
- inline-size: var(--db-control-panel-navigation-item-inline-size, 100%);
483
- background-color: transparent;
484
- transform: translateX(-100%);
485
- clip-path: var(--db-control-panel-navigation-item-clip-path, polygon(10% calc(1lh + var(--db-spacing-fixed-2xs)), 100% 0, 100% 100%));
486
- }
487
- .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 {
488
- content: "";
489
- position: absolute;
490
- padding: var(--db-spacing-fixed-xs);
491
- inset-block-start: var(--db-spacing-fixed-3xs);
492
- inset-inline-end: calc(-1 * var(--db-spacing-fixed-xs));
493
- block-size: calc(100% - 2 * var(--db-spacing-fixed-3xs));
494
- inline-size: var(--db-spacing-fixed-xs);
495
- }
496
- .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu {
497
- flex-direction: column;
498
- padding-inline: calc(var(--db-spacing-fixed-sm) + env(safe-area-inset-left));
499
- }
500
- .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu .db-control-panel-navigation-item-group,
501
- .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu .db-control-panel-navigation-item {
502
- inline-size: 100%;
503
- }
504
- .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation > menu .db-control-panel-navigation-item-end-slot-container {
505
- inset-inline-end: var(--db-spacing-fixed-sm);
506
- }
507
- .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation {
508
- /* jscpd:ignore-start */
509
- }
510
- .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,
511
- .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 {
512
- block-size: 0;
513
- inline-size: var(--db-border-width-xs);
514
- transform: translate(0, -50%);
515
- inset-block: var(--indicator-vertical-inset-block-start, 50%) auto;
516
- inset-inline-start: calc(-1 * var(--db-spacing-fixed-xs));
517
- }
518
- .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,
519
- .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,
520
- .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,
521
- .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,
522
- .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 {
523
- block-size: var(--indicator-vertical-block-size, 100%);
524
- inline-size: var(--db-border-width-xs);
525
- }
526
- @media (forced-colors: active), print {
527
- .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,
528
- .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,
529
- .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,
530
- .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,
531
- .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 {
532
- border: calc(var(--db-border-width-xs) - 1px) solid var(--db-adaptive-on-bg-basic-emphasis-100-default);
533
- }
534
- }
535
- .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,
536
- .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,
537
- .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,
538
- .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,
539
- .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,
540
- .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,
541
- .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,
542
- .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,
543
- .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,
544
- .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,
545
- .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,
546
- .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 {
547
- /* Workaround for custom-elements */
548
- }
549
- .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,
550
- .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,
551
- .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,
552
- .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,
553
- .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,
554
- .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,
555
- .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,
556
- .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,
557
- .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,
558
- .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,
559
- .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,
560
- .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 {
561
- content: none;
562
- }
563
- .db-control-panel-desktop[data-orientation=vertical] .db-control-panel-navigation {
564
- /* jscpd:ignore-end */
565
- }
566
-
567
- .db-control-panel-desktop {
568
- background-color: var(--db-adaptive-bg-basic-level-1-default);
569
- display: grid;
570
- position: relative;
571
- min-block-size: calc(var(--db-sizing-md) + 2 * var(--db-spacing-fixed-xs));
572
- grid-area: control-panel;
573
- }
574
- .db-control-panel-desktop .db-link {
575
- display: inline-block;
576
- }
577
- .db-control-panel-desktop .db-control-panel-navigation {
578
- grid-area: navigation;
579
- }