@inera/ids-design 5.3.0 → 5.4.1

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 (162) hide show
  1. package/components/alert/alert-lit.js +1 -1
  2. package/components/alert/alert.css +48 -48
  3. package/components/alert-global/alert-global-lit.js +1 -1
  4. package/components/alert-global/alert-global.css +68 -92
  5. package/components/badge/badge-lit.js +1 -1
  6. package/components/badge/badge.css +10 -6
  7. package/components/breadcrumbs/breadcrumbs-lit.js +1 -1
  8. package/components/breadcrumbs/breadcrumbs.css +48 -25
  9. package/components/button-group/button-group-lit.js +1 -1
  10. package/components/button-group/button-group.css +1 -1
  11. package/components/card/card-lit.js +1 -1
  12. package/components/card/card.css +26 -17
  13. package/components/carousel/carousel-item-lit.d.ts +2 -0
  14. package/components/carousel/carousel-item-lit.js +7 -0
  15. package/components/carousel/carousel-item.css +67 -0
  16. package/components/carousel/carousel-lit.d.ts +2 -0
  17. package/components/carousel/carousel-lit.js +7 -0
  18. package/components/carousel/carousel.css +156 -0
  19. package/components/data-table/data-table-lit.js +1 -1
  20. package/components/data-table/data-table.css +28 -28
  21. package/components/date-label/date-label-lit.js +1 -1
  22. package/components/date-label/date-label.css +13 -13
  23. package/components/dialog/dialog-lit.js +1 -1
  24. package/components/dialog/dialog.css +43 -47
  25. package/components/dropdown/dropdown-lit.js +1 -1
  26. package/components/dropdown/dropdown.css +21 -21
  27. package/components/expandable/expandable-lit.js +1 -1
  28. package/components/expandable/expandable.css +38 -37
  29. package/components/footer/footer-lit.js +1 -1
  30. package/components/footer/footer.css +49 -49
  31. package/components/footer-1177/footer-1177-lit.js +1 -1
  32. package/components/footer-1177/footer-1177.css +72 -70
  33. package/components/footer-1177-admin/footer-1177-admin-lit.js +1 -1
  34. package/components/footer-1177-admin/footer-1177-admin.css +75 -71
  35. package/components/footer-1177-pro/footer-1177-pro-lit.js +1 -1
  36. package/components/footer-1177-pro/footer-1177-pro.css +38 -39
  37. package/components/footer-inera/footer-inera-lit.js +1 -1
  38. package/components/footer-inera/footer-inera.css +84 -84
  39. package/components/footer-inera-admin/footer-inera-admin-lit.js +1 -1
  40. package/components/footer-inera-admin/footer-inera-admin.css +111 -110
  41. package/components/form/error-message/error-message-lit.js +1 -1
  42. package/components/form/error-message/error-message.css +9 -9
  43. package/components/form/group/group-lit.js +1 -1
  44. package/components/form/group/group.css +7 -7
  45. package/components/form/range/range-lit.js +1 -1
  46. package/components/form/range/range.css +15 -16
  47. package/components/form/select-multiple/select-multiple-lit.js +1 -1
  48. package/components/form/select-multiple/select-multiple.css +44 -35
  49. package/components/form/spinner/spinner-lit.js +1 -1
  50. package/components/form/spinner/spinner.css +9 -8
  51. package/components/grid/column/column-lit.js +1 -1
  52. package/components/grid/column/column.css +12 -0
  53. package/components/header-1177/composite-header-1177.css +413 -394
  54. package/components/header-1177/header-1177-avatar-lit.js +1 -1
  55. package/components/header-1177/header-1177-avatar.css +42 -34
  56. package/components/header-1177/header-1177-item-lit.js +1 -1
  57. package/components/header-1177/header-1177-item.css +47 -43
  58. package/components/header-1177/header-1177-lit.js +1 -1
  59. package/components/header-1177/header-1177-nav-item-lit.js +1 -1
  60. package/components/header-1177/header-1177-nav-item-mobile-lit.js +1 -1
  61. package/components/header-1177/header-1177-nav-item-mobile.css +39 -40
  62. package/components/header-1177/header-1177-nav-item.css +141 -141
  63. package/components/header-1177/header-1177-nav-lit.js +1 -1
  64. package/components/header-1177/header-1177-nav.css +22 -22
  65. package/components/header-1177/header-1177.css +125 -117
  66. package/components/header-1177-admin/header-1177-admin-avatar-lit.js +1 -1
  67. package/components/header-1177-admin/header-1177-admin-avatar-mobile-lit.js +1 -1
  68. package/components/header-1177-admin/header-1177-admin-avatar-mobile.css +17 -17
  69. package/components/header-1177-admin/header-1177-admin-avatar.css +62 -61
  70. package/components/header-1177-admin/header-1177-admin-item-lit.js +1 -1
  71. package/components/header-1177-admin/header-1177-admin-item.css +53 -37
  72. package/components/header-1177-admin/header-1177-admin-lit.js +1 -1
  73. package/components/header-1177-admin/header-1177-admin-nav-item-lit.js +1 -1
  74. package/components/header-1177-admin/header-1177-admin-nav-item.css +149 -149
  75. package/components/header-1177-admin/header-1177-admin-nav-lit.js +1 -1
  76. package/components/header-1177-admin/header-1177-admin-nav.css +16 -16
  77. package/components/header-1177-admin/header-1177-admin.css +74 -72
  78. package/components/header-1177-pro/header-1177-pro-avatar-lit.js +1 -1
  79. package/components/header-1177-pro/header-1177-pro-avatar-mobile-lit.js +1 -1
  80. package/components/header-1177-pro/header-1177-pro-avatar-mobile.css +18 -17
  81. package/components/header-1177-pro/header-1177-pro-avatar.css +67 -65
  82. package/components/header-1177-pro/header-1177-pro-item-lit.js +1 -1
  83. package/components/header-1177-pro/header-1177-pro-item.css +17 -13
  84. package/components/header-1177-pro/header-1177-pro-lit.js +1 -1
  85. package/components/header-1177-pro/header-1177-pro-nav-item-lit.js +1 -1
  86. package/components/header-1177-pro/header-1177-pro-nav-item.css +137 -137
  87. package/components/header-1177-pro/header-1177-pro-nav-lit.js +1 -1
  88. package/components/header-1177-pro/header-1177-pro-nav-menu-mobile-lit.js +1 -1
  89. package/components/header-1177-pro/header-1177-pro-nav-menu-mobile.css +32 -32
  90. package/components/header-1177-pro/header-1177-pro-nav.css +20 -24
  91. package/components/header-1177-pro/header-1177-pro-region-picker-lit.js +1 -1
  92. package/components/header-1177-pro/header-1177-pro-region-picker.css +81 -77
  93. package/components/header-1177-pro/header-1177-pro.css +63 -63
  94. package/components/header-inera/header-inera-item-lit.js +1 -1
  95. package/components/header-inera/header-inera-item.css +15 -12
  96. package/components/header-inera/header-inera-lit.js +1 -1
  97. package/components/header-inera/header-inera-nav-item-lit.js +1 -1
  98. package/components/header-inera/header-inera-nav-item.css +37 -50
  99. package/components/header-inera/header-inera-nav-lit.js +1 -1
  100. package/components/header-inera/header-inera-nav-mobile-lit.js +1 -1
  101. package/components/header-inera/header-inera-nav-mobile.css +49 -48
  102. package/components/header-inera/header-inera-nav.css +2 -2
  103. package/components/header-inera/header-inera.css +17 -17
  104. package/components/header-inera-admin/composite-header-inera-admin.css +152 -170
  105. package/components/header-inera-admin/header-inera-admin-avatar-lit.js +1 -1
  106. package/components/header-inera-admin/header-inera-admin-avatar-mobile-lit.js +1 -1
  107. package/components/header-inera-admin/header-inera-admin-avatar-mobile.css +9 -9
  108. package/components/header-inera-admin/header-inera-admin-avatar.css +22 -21
  109. package/components/header-inera-admin/header-inera-admin-item-lit.js +1 -1
  110. package/components/header-inera-admin/header-inera-admin-item.css +11 -11
  111. package/components/header-inera-admin/header-inera-admin-lit.js +1 -1
  112. package/components/header-inera-admin/header-inera-admin-nav-item-lit.js +1 -1
  113. package/components/header-inera-admin/header-inera-admin-nav-item.css +42 -50
  114. package/components/header-inera-admin/header-inera-admin-nav-lit.js +1 -1
  115. package/components/header-inera-admin/header-inera-admin-nav-mobile-lit.js +1 -1
  116. package/components/header-inera-admin/header-inera-admin-nav-mobile.css +49 -48
  117. package/components/header-inera-admin/header-inera-admin-nav.css +2 -2
  118. package/components/header-inera-admin/header-inera-admin.css +30 -30
  119. package/components/list/list-lit.js +1 -1
  120. package/components/list/list.css +38 -21
  121. package/components/mobile-menu/mobile-menu-lit.js +1 -1
  122. package/components/mobile-menu/mobile-menu.css +413 -408
  123. package/components/navigation/content/navigation-content-lit.js +1 -1
  124. package/components/navigation/content/navigation-content.css +15 -15
  125. package/components/navigation/local/navigation-local-lit.js +1 -1
  126. package/components/navigation/local/navigation-local.css +13 -13
  127. package/components/notification-badge/notification-badge-lit.js +1 -1
  128. package/components/notification-badge/notification-badge.css +2 -2
  129. package/components/pagination/data-pagination/data-pagination-lit.js +1 -1
  130. package/components/pagination/data-pagination/data-pagination.css +23 -23
  131. package/components/pagination/list-pagination/list-pagination-lit.js +1 -1
  132. package/components/pagination/list-pagination/list-pagination.css +32 -29
  133. package/components/popover/popover-content-lit.js +1 -1
  134. package/components/popover/popover-content.css +74 -82
  135. package/components/progressbar/progressbar-lit.js +1 -1
  136. package/components/progressbar/progressbar.css +12 -12
  137. package/components/side-menu/side-menu-lit.js +1 -1
  138. package/components/side-menu/side-menu.css +32 -32
  139. package/components/side-panel/side-panel-lit.js +1 -1
  140. package/components/side-panel/side-panel.css +83 -101
  141. package/components/stepper/stepper-lit.js +1 -1
  142. package/components/stepper/stepper.css +28 -24
  143. package/components/table/table.css +5 -5
  144. package/components/tabs/tab-lit.js +1 -1
  145. package/components/tabs/tab-panel-lit.js +1 -1
  146. package/components/tabs/tab-panel.css +2 -2
  147. package/components/tabs/tab.css +24 -24
  148. package/components/tabs/tabs-lit.js +2 -2
  149. package/components/tabs/tabs.css +6 -6
  150. package/components/tag/tag-lit.js +1 -1
  151. package/components/tag/tag.css +19 -43
  152. package/components/tooltip/tooltip-lit.js +1 -1
  153. package/components/tooltip/tooltip.css +11 -14
  154. package/global/_partials.css +1 -1
  155. package/global/global.css +404 -356
  156. package/global/util/util.css +7 -5
  157. package/package.json +1 -1
  158. package/themes/1177/1177.css +812 -822
  159. package/themes/1177-pro/1177-pro.css +912 -929
  160. package/themes/inera/inera.css +812 -858
  161. package/themes/inera-admin/inera-admin.css +860 -934
  162. package/themes/reset.css +1 -1
@@ -15,15 +15,15 @@
15
15
  }
16
16
  .ids-header-1177-admin--unresponsive nav.ids-header-1177-admin__nav .ids-header-1177-admin__nav-inner {
17
17
  list-style: none;
18
- max-width: var(--IDS_MAX-WIDTH);
18
+ max-width: var(--IDS__MAX-WIDTH);
19
19
  display: flex;
20
20
  flex-wrap: wrap;
21
21
  align-items: center;
22
- margin-top: 0px;
23
- margin-bottom: 0px;
22
+ margin-top: 0;
23
+ margin-bottom: 0;
24
24
  margin-left: auto;
25
25
  margin-right: auto;
26
- border-top: 1px solid var(--IDS-COLOR-ACCENT-40);
26
+ border-top: 0.063rem solid var(--IDS-COLOR-ACCENT-40);
27
27
  }
28
28
 
29
29
  .ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) nav.ids-header-1177-admin__nav {
@@ -36,15 +36,15 @@
36
36
  }
37
37
  .ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) nav.ids-header-1177-admin__nav .ids-header-1177-admin__nav-inner {
38
38
  list-style: none;
39
- max-width: var(--IDS_MAX-WIDTH);
39
+ max-width: var(--IDS__MAX-WIDTH);
40
40
  display: flex;
41
41
  flex-wrap: wrap;
42
42
  align-items: center;
43
- margin-top: 0px;
44
- margin-bottom: 0px;
43
+ margin-top: 0;
44
+ margin-bottom: 0;
45
45
  margin-left: auto;
46
46
  margin-right: auto;
47
- border-top: 1px solid var(--IDS-COLOR-ACCENT-40);
47
+ border-top: 0.063rem solid var(--IDS-COLOR-ACCENT-40);
48
48
  }
49
49
 
50
50
  .ids-header-1177-admin--fluid .ids-header-1177-admin__container .ids-header-1177-admin__nav-inner {
@@ -61,30 +61,30 @@
61
61
  }
62
62
  :host nav.ids-header-1177-admin__nav:not(.ids-header-1177-admin__nav--unresponsive) .ids-header-1177-admin__nav-inner {
63
63
  list-style: none;
64
- max-width: var(--IDS_MAX-WIDTH);
64
+ max-width: var(--IDS__MAX-WIDTH);
65
65
  display: flex;
66
66
  flex-wrap: wrap;
67
67
  align-items: center;
68
- margin-top: 0px;
69
- margin-bottom: 0px;
68
+ margin-top: 0;
69
+ margin-bottom: 0;
70
70
  margin-left: auto;
71
71
  margin-right: auto;
72
- border-top: 1px solid var(--IDS-COLOR-ACCENT-40);
72
+ border-top: 0.063rem solid var(--IDS-COLOR-ACCENT-40);
73
73
  }
74
74
  :host nav.ids-header-1177-admin__nav.ids-header-1177-admin__nav--unresponsive {
75
75
  position: relative;
76
76
  }
77
77
  :host nav.ids-header-1177-admin__nav.ids-header-1177-admin__nav--unresponsive .ids-header-1177-admin__nav-inner {
78
78
  list-style: none;
79
- max-width: var(--IDS_MAX-WIDTH);
79
+ max-width: var(--IDS__MAX-WIDTH);
80
80
  display: flex;
81
81
  flex-wrap: wrap;
82
82
  align-items: center;
83
- margin-top: 0px;
84
- margin-bottom: 0px;
83
+ margin-top: 0;
84
+ margin-bottom: 0;
85
85
  margin-left: auto;
86
86
  margin-right: auto;
87
- border-top: 1px solid var(--IDS-COLOR-ACCENT-40);
87
+ border-top: 0.063rem solid var(--IDS-COLOR-ACCENT-40);
88
88
  }
89
89
  :host nav.ids-header-1177-admin__nav.ids-header-1177-admin__nav--fluid .ids-header-1177-admin__nav-inner {
90
90
  max-width: 100%;
@@ -2,7 +2,7 @@
2
2
  * BUTTONS
3
3
  ********/
4
4
  /*******
5
- * SCROLLBAR
5
+ * SCROLLBARS
6
6
  ********/
7
7
  /*******
8
8
  * FORM
@@ -25,7 +25,7 @@
25
25
  .ids-header-1177-admin__mobile-menu {
26
26
  display: none;
27
27
  grid-column: 4;
28
- margin-left: 20px;
28
+ margin-left: 1.25rem;
29
29
  }
30
30
  @media (max-width: 1024px) {
31
31
  .ids-header-1177-admin__mobile-menu {
@@ -42,23 +42,23 @@
42
42
  outline: inherit;
43
43
  display: flex;
44
44
  width: 100%;
45
- gap: 5px;
45
+ gap: 0.313rem;
46
46
  text-decoration: none;
47
47
  background: none;
48
48
  color: inherit;
49
49
  border: none;
50
- padding: 0px;
50
+ padding: 0;
51
51
  font: inherit;
52
52
  cursor: pointer;
53
53
  color: var(--IDS-COLOR-ACCENT-40);
54
54
  align-items: center;
55
55
  justify-content: center;
56
- height: 24px;
57
- width: 24px;
56
+ height: 1.5rem;
57
+ width: 1.5rem;
58
58
  }
59
59
  .ids-header-1177-admin__mobile-menu .ids-header-1177-admin__mobile-menu__btn:focus {
60
- outline: var(--IDS-FOCUS_OUTLINE);
61
- outline-offset: var(--IDS-FOCUS_OUTLINE-OFFSET) !important;
60
+ outline: var(--IDS-FOCUS__OUTLINE);
61
+ outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
62
62
  }
63
63
  .ids-header-1177-admin__mobile-menu .ids-header-1177-admin__mobile-menu__btn .ids-hamburger {
64
64
  transition: 0.2s;
@@ -69,18 +69,18 @@
69
69
  .ids-header-1177-admin__mobile-menu .ids-header-1177-admin__mobile-menu__btn .ids-hamburger__lines {
70
70
  display: block;
71
71
  width: 1.3125rem;
72
- border-radius: 2px;
72
+ border-radius: 0.125rem;
73
73
  transition: 0.2s;
74
74
  background-color: var(--IDS-COLOR-ACCENT-40);
75
75
  position: relative;
76
- height: 3px;
76
+ height: 0.188rem;
77
77
  width: 1.25rem;
78
78
  }
79
79
  .ids-header-1177-admin__mobile-menu .ids-header-1177-admin__mobile-menu__btn .ids-hamburger__lines:before,
80
80
  .ids-header-1177-admin__mobile-menu .ids-header-1177-admin__mobile-menu__btn .ids-hamburger__lines:after {
81
81
  display: inline-block;
82
82
  width: 1.3125rem;
83
- border-radius: 2px;
83
+ border-radius: 0.125rem;
84
84
  transition: 0.2s;
85
85
  background-color: var(--IDS-COLOR-ACCENT-40);
86
86
  position: absolute;
@@ -91,7 +91,7 @@
91
91
  }
92
92
  .ids-header-1177-admin__mobile-menu .ids-header-1177-admin__mobile-menu__btn .ids-hamburger__lines:before,
93
93
  .ids-header-1177-admin__mobile-menu .ids-header-1177-admin__mobile-menu__btn .ids-hamburger__lines:after {
94
- height: 3px;
94
+ height: 0.188rem;
95
95
  width: 1.25rem;
96
96
  }
97
97
  .ids-header-1177-admin__mobile-menu .ids-header-1177-admin__mobile-menu__btn .ids-hamburger__lines:before,
@@ -100,10 +100,10 @@
100
100
  transform-origin: 0.13393rem center;
101
101
  }
102
102
  .ids-header-1177-admin__mobile-menu .ids-header-1177-admin__mobile-menu__btn .ids-hamburger__lines:before {
103
- top: 8px;
103
+ top: 0.5rem;
104
104
  }
105
105
  .ids-header-1177-admin__mobile-menu .ids-header-1177-admin__mobile-menu__btn .ids-hamburger__lines:after {
106
- top: -8px;
106
+ top: -0.5rem;
107
107
  }
108
108
  .ids-header-1177-admin__mobile-menu .ids-header-1177-admin__mobile-menu__btn[aria-expanded=true] .ids-hamburger {
109
109
  -webkit-transform: scale3d(0.8, 0.8, 0.8);
@@ -118,7 +118,7 @@
118
118
  transform-origin: 50% 50%;
119
119
  top: 0;
120
120
  width: 2rem;
121
- left: -5px;
121
+ left: -0.313rem;
122
122
  }
123
123
  .ids-header-1177-admin__mobile-menu .ids-header-1177-admin__mobile-menu__btn[aria-expanded=true] .ids-hamburger .ids-hamburger__lines:before {
124
124
  -ms-transform: rotate(45deg);
@@ -133,7 +133,7 @@
133
133
 
134
134
  .ids-header-1177-admin__nav-mobile__menu-items {
135
135
  display: none;
136
- box-shadow: var(--header-nav-mobile-menu-items_box-shadow);
136
+ box-shadow: 0 0.125rem 0.313rem #c5c5c5;
137
137
  }
138
138
  @media (max-width: 1024px) {
139
139
  .ids-header-1177-admin__nav-mobile__menu-items {
@@ -146,24 +146,24 @@
146
146
  }
147
147
 
148
148
  header.ids-header-1177-admin {
149
- background: white;
150
- box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
149
+ background: var(--IDS-COLOR-NEUTRAL-100);
150
+ box-shadow: 0 0.125rem 0.25rem 0 rgba(0, 0, 0, 0.2);
151
151
  }
152
152
  header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__container {
153
153
  position: relative;
154
- background-color: white;
154
+ background-color: var(--IDS-COLOR-NEUTRAL-100);
155
155
  }
156
156
  @media (max-width: 1024px) {
157
157
  header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__container {
158
- box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
158
+ box-shadow: 0 0.125rem 0.25rem 0 rgba(0, 0, 0, 0.2);
159
159
  z-index: 10;
160
- padding: 0px;
160
+ padding: 0;
161
161
  }
162
162
  }
163
163
  header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__container .ids-header-1177-admin__inner {
164
- max-width: var(--IDS_MAX-WIDTH);
164
+ max-width: var(--IDS__MAX-WIDTH);
165
165
  width: 100%;
166
- height: 60px;
166
+ height: 3.75rem;
167
167
  position: relative;
168
168
  align-items: center;
169
169
  display: grid;
@@ -173,7 +173,7 @@ header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-head
173
173
  }
174
174
  @media (max-width: 1024px) {
175
175
  header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__container .ids-header-1177-admin__inner {
176
- padding: 0px 20px;
176
+ padding: 0 1.25rem;
177
177
  grid-template-columns: auto 1fr;
178
178
  height: 3rem;
179
179
  border-bottom: none;
@@ -187,76 +187,76 @@ header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-head
187
187
  align-items: center;
188
188
  }
189
189
  header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__container .ids-header-1177-admin__inner .ids-header-1177-admin__logo-col .ids-header-1177-admin__logo {
190
- height: 24px;
191
- width: 63px;
192
- margin-right: 20px;
193
- margin-left: 20px;
190
+ height: 1.5rem;
191
+ width: 3.938rem;
192
+ margin-right: 1.25rem;
193
+ margin-left: 1.25rem;
194
194
  }
195
195
  header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__container .ids-header-1177-admin__inner .ids-header-1177-admin__logo-col .ids-header-1177-admin__logo a {
196
196
  display: block;
197
197
  }
198
198
  header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__container .ids-header-1177-admin__inner .ids-header-1177-admin__logo-col .ids-header-1177-admin__logo a:focus {
199
- outline: var(--IDS-FOCUS_OUTLINE);
200
- outline-offset: var(--IDS-FOCUS_OUTLINE-OFFSET) !important;
199
+ outline: var(--IDS-FOCUS__OUTLINE);
200
+ outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
201
201
  }
202
202
  header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__container .ids-header-1177-admin__inner .ids-header-1177-admin__logo-col .ids-header-1177-admin__logo ::slotted([slot=logo]:focus) {
203
203
  display: block;
204
- outline: var(--IDS-FOCUS_OUTLINE) !important;
205
- outline-offset: var(--IDS-FOCUS_OUTLINE-OFFSET);
204
+ outline: var(--IDS-FOCUS__OUTLINE) !important;
205
+ outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET);
206
206
  }
207
207
  @media (max-width: 1024px) {
208
208
  header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__container .ids-header-1177-admin__inner .ids-header-1177-admin__logo-col .ids-header-1177-admin__logo {
209
- margin-left: 0px;
209
+ margin-left: 0;
210
210
  }
211
211
  }
212
212
  header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__container .ids-header-1177-admin__inner .ids-header-1177-admin__logo-col .ids-header-1177-admin__brand {
213
213
  display: flex;
214
214
  flex-direction: column;
215
- margin-left: 20px !important;
215
+ margin-left: 1.25rem !important;
216
216
  position: relative;
217
217
  }
218
218
  header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__container .ids-header-1177-admin__inner .ids-header-1177-admin__logo-col .ids-header-1177-admin__brand :before {
219
219
  content: "";
220
220
  position: absolute;
221
221
  display: block;
222
- width: 1px;
222
+ width: 0.063rem;
223
223
  top: 50%;
224
224
  transform: translateY(-50%);
225
- left: -20px;
226
- height: 44px;
225
+ left: -1.25rem;
226
+ height: 2.75rem;
227
227
  background: var(--IDS-COLOR-ACCENT-30);
228
228
  }
229
229
  @media (max-width: 1024px) {
230
230
  header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__container .ids-header-1177-admin__inner .ids-header-1177-admin__logo-col .ids-header-1177-admin__brand :before {
231
- height: 35px;
231
+ height: 2.188rem;
232
232
  }
233
233
  }
234
234
  header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__container .ids-header-1177-admin__inner .ids-header-1177-admin__logo-col .ids-header-1177-admin__brand .ids-header-1177-admin__brand-text {
235
- margin-top: 0px;
236
- margin-right: 0px;
237
- margin-bottom: 0px;
235
+ margin-top: 0;
236
+ margin-right: 0;
237
+ margin-bottom: 0;
238
238
  color: var(--IDS-COLOR-ACCENT-30);
239
239
  overflow: hidden;
240
240
  text-overflow: ellipsis;
241
241
  font-size: 1.25rem;
242
- font-family: var(--font-family_2);
242
+ font-family: var(--IDS-FONT-FAMILY-HEADING);
243
243
  text-decoration: none;
244
244
  font-weight: 700;
245
245
  }
246
246
  @media (max-width: 1024px) {
247
247
  header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__container .ids-header-1177-admin__inner .ids-header-1177-admin__logo-col .ids-header-1177-admin__brand .ids-header-1177-admin__brand-text {
248
- font-size: 0.75rem;
248
+ font-size: 1rem;
249
249
  }
250
250
  }
251
251
  header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__container .ids-header-1177-admin__inner .ids-header-1177-admin__logo-col .ids-header-1177-admin__brand .ids-header-1177-admin__brand-text.ids-header-1177-admin__brand-text---supplement {
252
252
  line-height: 1.25rem;
253
253
  font-weight: normal;
254
254
  font-size: 0.875rem;
255
- font-family: var(--font-family_2);
255
+ font-family: var(--IDS-FONT-FAMILY-HEADING);
256
256
  }
257
257
  @media (max-width: 1024px) {
258
258
  header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__container .ids-header-1177-admin__inner .ids-header-1177-admin__logo-col .ids-header-1177-admin__brand .ids-header-1177-admin__brand-text.ids-header-1177-admin__brand-text---supplement {
259
- font-size: 0.75rem;
259
+ font-size: 1rem;
260
260
  }
261
261
  }
262
262
  header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__container .ids-header-1177-admin__inner .ids-header-1177-admin__items {
@@ -264,24 +264,25 @@ header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-head
264
264
  display: grid;
265
265
  align-items: center;
266
266
  grid-auto-flow: column;
267
- padding-right: 20px;
268
- gap: 40px;
267
+ padding-right: 1.25rem;
268
+ padding-left: 1rem;
269
+ gap: 2.5rem;
269
270
  }
270
271
  @media (max-width: 1024px) {
271
272
  header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__container .ids-header-1177-admin__inner .ids-header-1177-admin__items {
272
- gap: 0px;
273
- margin-right: 0px;
274
- padding-right: 0px;
273
+ gap: 0;
274
+ margin-right: 0;
275
+ padding-right: 0;
275
276
  }
276
277
  }
277
278
  header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__container {
278
279
  position: relative;
279
- background-color: white;
280
+ background-color: var(--IDS-COLOR-NEUTRAL-100);
280
281
  }
281
282
  header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__container .ids-header-1177-admin__inner {
282
- max-width: var(--IDS_MAX-WIDTH);
283
+ max-width: var(--IDS__MAX-WIDTH);
283
284
  width: 100%;
284
- height: 60px;
285
+ height: 3.75rem;
285
286
  position: relative;
286
287
  align-items: center;
287
288
  display: grid;
@@ -294,49 +295,49 @@ header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-117
294
295
  align-items: center;
295
296
  }
296
297
  header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__container .ids-header-1177-admin__inner .ids-header-1177-admin__logo-col .ids-header-1177-admin__logo {
297
- height: 24px;
298
- width: 63px;
299
- margin-right: 20px;
300
- margin-left: 20px;
298
+ height: 1.5rem;
299
+ width: 3.938rem;
300
+ margin-right: 1.25rem;
301
+ margin-left: 1.25rem;
301
302
  }
302
303
  header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__container .ids-header-1177-admin__inner .ids-header-1177-admin__logo-col .ids-header-1177-admin__logo a {
303
304
  display: block;
304
305
  }
305
306
  header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__container .ids-header-1177-admin__inner .ids-header-1177-admin__logo-col .ids-header-1177-admin__logo a:focus {
306
- outline: var(--IDS-FOCUS_OUTLINE);
307
- outline-offset: var(--IDS-FOCUS_OUTLINE-OFFSET) !important;
307
+ outline: var(--IDS-FOCUS__OUTLINE);
308
+ outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
308
309
  }
309
310
  header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__container .ids-header-1177-admin__inner .ids-header-1177-admin__logo-col .ids-header-1177-admin__logo ::slotted([slot=logo]:focus) {
310
311
  display: block;
311
- outline: var(--IDS-FOCUS_OUTLINE) !important;
312
- outline-offset: var(--IDS-FOCUS_OUTLINE-OFFSET);
312
+ outline: var(--IDS-FOCUS__OUTLINE) !important;
313
+ outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET);
313
314
  }
314
315
  header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__container .ids-header-1177-admin__inner .ids-header-1177-admin__logo-col .ids-header-1177-admin__brand {
315
316
  display: flex;
316
317
  flex-direction: column;
317
- margin-left: 20px !important;
318
+ margin-left: 1.25rem !important;
318
319
  position: relative;
319
320
  }
320
321
  header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__container .ids-header-1177-admin__inner .ids-header-1177-admin__logo-col .ids-header-1177-admin__brand :before {
321
322
  content: "";
322
323
  position: absolute;
323
324
  display: block;
324
- width: 1px;
325
+ width: 0.063rem;
325
326
  top: 50%;
326
327
  transform: translateY(-50%);
327
- left: -20px;
328
- height: 44px;
328
+ left: -1.25rem;
329
+ height: 2.75rem;
329
330
  background: var(--IDS-COLOR-ACCENT-30);
330
331
  }
331
332
  header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__container .ids-header-1177-admin__inner .ids-header-1177-admin__logo-col .ids-header-1177-admin__brand .ids-header-1177-admin__brand-text {
332
- margin-top: 0px;
333
- margin-right: 0px;
334
- margin-bottom: 0px;
333
+ margin-top: 0;
334
+ margin-right: 0;
335
+ margin-bottom: 0;
335
336
  color: var(--IDS-COLOR-ACCENT-30);
336
337
  overflow: hidden;
337
338
  text-overflow: ellipsis;
338
339
  font-size: 1.25rem;
339
- font-family: var(--font-family_2);
340
+ font-family: var(--IDS-FONT-FAMILY-HEADING);
340
341
  text-decoration: none;
341
342
  font-weight: 700;
342
343
  }
@@ -344,15 +345,16 @@ header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-117
344
345
  line-height: 1.25rem;
345
346
  font-weight: normal;
346
347
  font-size: 0.875rem;
347
- font-family: var(--font-family_2);
348
+ font-family: var(--IDS-FONT-FAMILY-HEADING);
348
349
  }
349
350
  header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__container .ids-header-1177-admin__inner .ids-header-1177-admin__items {
350
351
  justify-self: end;
351
352
  display: grid;
352
353
  align-items: center;
353
354
  grid-auto-flow: column;
354
- padding-right: 20px;
355
- gap: 40px;
355
+ padding-right: 1.25rem;
356
+ padding-left: 1rem;
357
+ gap: 2.5rem;
356
358
  }
357
359
  header.ids-header-1177-admin.ids-header-1177-admin--fluid .ids-header-1177-admin__container .ids-header-1177-admin__inner {
358
360
  max-width: 100% !important;
@@ -1,6 +1,6 @@
1
1
  import { css, unsafeCSS } from 'lit';
2
2
 
3
- var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-header-1177-pro--unresponsive .ids-header-1177-pro__avatar .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-content .ids-header-1177-pro__avatar-content__name,.ids-header-1177-pro--unresponsive .ids-header-1177-pro__avatar .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-content .ids-header-1177-pro__avatar-content__unit,.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__avatar .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-content .ids-header-1177-pro__avatar-content__name,.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__avatar .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-content .ids-header-1177-pro__avatar-content__unit,:host .ids-header-1177-pro__avatar.ids-header-1177-pro__avatar--unresponsive .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-content .ids-header-1177-pro__avatar-content__name,:host .ids-header-1177-pro__avatar.ids-header-1177-pro__avatar--unresponsive .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-content .ids-header-1177-pro__avatar-content__unit,:host .ids-header-1177-pro__avatar:not(.ids-header-1177-pro__avatar--unresponsive) .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-content .ids-header-1177-pro__avatar-content__name,:host .ids-header-1177-pro__avatar:not(.ids-header-1177-pro__avatar--unresponsive) .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-content .ids-header-1177-pro__avatar-content__unit{color:var(--IDS-COLOR-NEUTRAL-20);max-width:15.625rem;overflow:hidden;position:relative;text-align:start;text-overflow:ellipsis;white-space:nowrap}.ids-header-1177-pro--unresponsive .ids-header-1177-pro__avatar{align-items:center;display:grid;grid-column:4;justify-self:end;margin-right:20px;padding-left:20px;position:relative}.ids-header-1177-pro--unresponsive .ids-header-1177-pro__avatar button:focus{outline:var(--IDS-FOCUS_OUTLINE);outline-offset:var(--IDS-FOCUS_OUTLINE-OFFSET)!important}.ids-header-1177-pro--unresponsive .ids-header-1177-pro__avatar .ids-header-1177-pro__avatar-box{align-items:center;background:none;border:none;color:inherit;cursor:pointer;display:grid;font:inherit;gap:12px;grid-template-columns:auto auto;justify-content:center;outline:inherit;padding:0}.ids-header-1177-pro--unresponsive .ids-header-1177-pro__avatar .ids-header-1177-pro__avatar-box[aria-expanded=true] .ids-header-1177-pro__avatar-chevron{transform:rotate(180deg)}.ids-header-1177-pro--unresponsive .ids-header-1177-pro__avatar .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-icon{display:flex;max-height:44px;max-width:36px}.ids-header-1177-pro--unresponsive .ids-header-1177-pro__avatar .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-chevron{grid-column:3;width:12px}.ids-header-1177-pro--unresponsive .ids-header-1177-pro__avatar .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-chevron.ids-header-1177-pro__avatar-chevron--expanded .ids-icon{transform:rotate(180deg)}.ids-header-1177-pro--unresponsive .ids-header-1177-pro__avatar .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-content{display:grid;grid-template-rows:1fr;min-width:100px}.ids-header-1177-pro--unresponsive .ids-header-1177-pro__avatar .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-content:has(.ids-header-1177-pro__avatar-content__unit){grid-template-rows:1fr 1fr}.ids-header-1177-pro--unresponsive .ids-header-1177-pro__avatar .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-content .ids-header-1177-pro__avatar-content__unit{font-size:.875rem}.ids-header-1177-pro--unresponsive .ids-header-1177-pro__avatar.ids-header-1177-pro__avatar--expanded .ids-header-1177-pro__avatar-dropdown{display:flex}.ids-header-1177-pro--unresponsive .ids-header-1177-pro__avatar .ids-header-1177-pro__avatar-dropdown{background-color:#fff;box-shadow:0 2px 6px 0 rgba(0,0,0,.3);display:none;flex-direction:column;gap:20px;min-width:280px;padding:32px 40px;position:absolute;right:0;top:calc(100% + 8px);z-index:1}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__avatar{align-items:center;display:grid;grid-column:4;justify-self:end;margin-right:20px;padding-left:20px;position:relative}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__avatar button:focus{outline:var(--IDS-FOCUS_OUTLINE);outline-offset:var(--IDS-FOCUS_OUTLINE-OFFSET)!important}@media (max-width:1024px){.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__avatar{display:none}}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__avatar .ids-header-1177-pro__avatar-box{align-items:center;background:none;border:none;color:inherit;cursor:pointer;display:grid;font:inherit;gap:12px;grid-template-columns:auto auto;justify-content:center;outline:inherit;padding:0}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__avatar .ids-header-1177-pro__avatar-box[aria-expanded=true] .ids-header-1177-pro__avatar-chevron{transform:rotate(180deg)}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__avatar .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-icon{display:flex;max-height:44px;max-width:36px}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__avatar .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-chevron{grid-column:3;width:12px}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__avatar .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-chevron.ids-header-1177-pro__avatar-chevron--expanded .ids-icon{transform:rotate(180deg)}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__avatar .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-content{display:grid;grid-template-rows:1fr;min-width:100px}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__avatar .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-content:has(.ids-header-1177-pro__avatar-content__unit){grid-template-rows:1fr 1fr}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__avatar .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-content .ids-header-1177-pro__avatar-content__unit{font-size:.875rem}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__avatar.ids-header-1177-pro__avatar--expanded .ids-header-1177-pro__avatar-dropdown{display:flex}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__avatar .ids-header-1177-pro__avatar-dropdown{background-color:#fff;box-shadow:0 2px 6px 0 rgba(0,0,0,.3);display:none;flex-direction:column;gap:20px;min-width:280px;padding:32px 40px;position:absolute;right:0;top:calc(100% + 8px);z-index:1}:host .ids-header-1177-pro__avatar:not(.ids-header-1177-pro__avatar--unresponsive){align-items:center;display:grid;grid-column:4;justify-self:end;margin-right:20px;padding-left:20px;position:relative}:host .ids-header-1177-pro__avatar:not(.ids-header-1177-pro__avatar--unresponsive) button:focus{outline:var(--IDS-FOCUS_OUTLINE);outline-offset:var(--IDS-FOCUS_OUTLINE-OFFSET)!important}@media (max-width:1024px){:host .ids-header-1177-pro__avatar:not(.ids-header-1177-pro__avatar--unresponsive){display:none}}:host .ids-header-1177-pro__avatar:not(.ids-header-1177-pro__avatar--unresponsive) .ids-header-1177-pro__avatar-box{align-items:center;background:none;border:none;color:inherit;cursor:pointer;display:grid;font:inherit;gap:12px;grid-template-columns:auto auto;justify-content:center;outline:inherit;padding:0}:host .ids-header-1177-pro__avatar:not(.ids-header-1177-pro__avatar--unresponsive) .ids-header-1177-pro__avatar-box[aria-expanded=true] .ids-header-1177-pro__avatar-chevron{transform:rotate(180deg)}:host .ids-header-1177-pro__avatar:not(.ids-header-1177-pro__avatar--unresponsive) .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-icon{display:flex;max-height:44px;max-width:36px}:host .ids-header-1177-pro__avatar:not(.ids-header-1177-pro__avatar--unresponsive) .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-chevron{grid-column:3;width:12px}:host .ids-header-1177-pro__avatar:not(.ids-header-1177-pro__avatar--unresponsive) .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-chevron.ids-header-1177-pro__avatar-chevron--expanded .ids-icon{transform:rotate(180deg)}:host .ids-header-1177-pro__avatar:not(.ids-header-1177-pro__avatar--unresponsive) .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-content{display:grid;grid-template-rows:1fr;min-width:100px}:host .ids-header-1177-pro__avatar:not(.ids-header-1177-pro__avatar--unresponsive) .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-content:has(.ids-header-1177-pro__avatar-content__unit){grid-template-rows:1fr 1fr}:host .ids-header-1177-pro__avatar:not(.ids-header-1177-pro__avatar--unresponsive) .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-content .ids-header-1177-pro__avatar-content__unit{font-size:.875rem}:host .ids-header-1177-pro__avatar:not(.ids-header-1177-pro__avatar--unresponsive).ids-header-1177-pro__avatar--expanded .ids-header-1177-pro__avatar-dropdown{display:flex}:host .ids-header-1177-pro__avatar:not(.ids-header-1177-pro__avatar--unresponsive) .ids-header-1177-pro__avatar-dropdown{background-color:#fff;box-shadow:0 2px 6px 0 rgba(0,0,0,.3);display:none;flex-direction:column;gap:20px;min-width:280px;padding:32px 40px;position:absolute;right:0;top:calc(100% + 8px);z-index:1}:host .ids-header-1177-pro__avatar.ids-header-1177-pro__avatar--unresponsive{align-items:center;display:grid;grid-column:4;justify-self:end;margin-right:20px;padding-left:20px;position:relative}:host .ids-header-1177-pro__avatar.ids-header-1177-pro__avatar--unresponsive button:focus{outline:var(--IDS-FOCUS_OUTLINE);outline-offset:var(--IDS-FOCUS_OUTLINE-OFFSET)!important}:host .ids-header-1177-pro__avatar.ids-header-1177-pro__avatar--unresponsive .ids-header-1177-pro__avatar-box{align-items:center;background:none;border:none;color:inherit;cursor:pointer;display:grid;font:inherit;gap:12px;grid-template-columns:auto auto;justify-content:center;outline:inherit;padding:0}:host .ids-header-1177-pro__avatar.ids-header-1177-pro__avatar--unresponsive .ids-header-1177-pro__avatar-box[aria-expanded=true] .ids-header-1177-pro__avatar-chevron{transform:rotate(180deg)}:host .ids-header-1177-pro__avatar.ids-header-1177-pro__avatar--unresponsive .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-icon{display:flex;max-height:44px;max-width:36px}:host .ids-header-1177-pro__avatar.ids-header-1177-pro__avatar--unresponsive .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-chevron{grid-column:3;width:12px}:host .ids-header-1177-pro__avatar.ids-header-1177-pro__avatar--unresponsive .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-chevron.ids-header-1177-pro__avatar-chevron--expanded .ids-icon{transform:rotate(180deg)}:host .ids-header-1177-pro__avatar.ids-header-1177-pro__avatar--unresponsive .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-content{display:grid;grid-template-rows:1fr;min-width:100px}:host .ids-header-1177-pro__avatar.ids-header-1177-pro__avatar--unresponsive .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-content:has(.ids-header-1177-pro__avatar-content__unit){grid-template-rows:1fr 1fr}:host .ids-header-1177-pro__avatar.ids-header-1177-pro__avatar--unresponsive .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-content .ids-header-1177-pro__avatar-content__unit{font-size:.875rem}:host .ids-header-1177-pro__avatar.ids-header-1177-pro__avatar--unresponsive.ids-header-1177-pro__avatar--expanded .ids-header-1177-pro__avatar-dropdown{display:flex}:host .ids-header-1177-pro__avatar.ids-header-1177-pro__avatar--unresponsive .ids-header-1177-pro__avatar-dropdown{background-color:#fff;box-shadow:0 2px 6px 0 rgba(0,0,0,.3);display:none;flex-direction:column;gap:20px;min-width:280px;padding:32px 40px;position:absolute;right:0;top:calc(100% + 8px);z-index:1}";
3
+ var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-header-1177-pro--unresponsive .ids-header-1177-pro__avatar .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-content .ids-header-1177-pro__avatar-content__name,.ids-header-1177-pro--unresponsive .ids-header-1177-pro__avatar .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-content .ids-header-1177-pro__avatar-content__unit,.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__avatar .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-content .ids-header-1177-pro__avatar-content__name,.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__avatar .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-content .ids-header-1177-pro__avatar-content__unit,:host .ids-header-1177-pro__avatar.ids-header-1177-pro__avatar--unresponsive .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-content .ids-header-1177-pro__avatar-content__name,:host .ids-header-1177-pro__avatar.ids-header-1177-pro__avatar--unresponsive .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-content .ids-header-1177-pro__avatar-content__unit,:host .ids-header-1177-pro__avatar:not(.ids-header-1177-pro__avatar--unresponsive) .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-content .ids-header-1177-pro__avatar-content__name,:host .ids-header-1177-pro__avatar:not(.ids-header-1177-pro__avatar--unresponsive) .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-content .ids-header-1177-pro__avatar-content__unit{color:var(--IDS-COLOR-NEUTRAL-20);font-family:var(--IDS-FONT-FAMILY-BASE);font-size:1rem;max-width:15.625rem;overflow:hidden;position:relative;text-align:start;text-overflow:ellipsis;white-space:nowrap}.ids-header-1177-pro--unresponsive .ids-header-1177-pro__avatar{align-items:center;display:grid;grid-column:4;justify-self:end;margin-right:1.25rem;padding-left:1.25rem;position:relative}.ids-header-1177-pro--unresponsive .ids-header-1177-pro__avatar button:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}.ids-header-1177-pro--unresponsive .ids-header-1177-pro__avatar .ids-header-1177-pro__avatar-box{align-items:center;background:none;border:none;color:inherit;cursor:pointer;display:grid;font:inherit;gap:.75rem;grid-template-columns:auto auto;justify-content:center;outline:inherit;padding:0}.ids-header-1177-pro--unresponsive .ids-header-1177-pro__avatar .ids-header-1177-pro__avatar-box[aria-expanded=true] .ids-header-1177-pro__avatar-chevron{transform:rotate(180deg)}.ids-header-1177-pro--unresponsive .ids-header-1177-pro__avatar .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-icon{display:flex;max-height:2.75rem;max-width:2.25rem}.ids-header-1177-pro--unresponsive .ids-header-1177-pro__avatar .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-chevron{grid-column:3;width:.75rem}.ids-header-1177-pro--unresponsive .ids-header-1177-pro__avatar .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-chevron.ids-header-1177-pro__avatar-chevron--expanded .ids-icon{transform:rotate(180deg)}.ids-header-1177-pro--unresponsive .ids-header-1177-pro__avatar .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-content{display:grid;grid-template-rows:1fr;min-width:6.25rem}.ids-header-1177-pro--unresponsive .ids-header-1177-pro__avatar .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-content:has(.ids-header-1177-pro__avatar-content__unit){grid-template-rows:1fr 1fr}.ids-header-1177-pro--unresponsive .ids-header-1177-pro__avatar .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-content .ids-header-1177-pro__avatar-content__unit{font-size:.875rem}.ids-header-1177-pro--unresponsive .ids-header-1177-pro__avatar.ids-header-1177-pro__avatar--expanded .ids-header-1177-pro__avatar-dropdown{display:flex}.ids-header-1177-pro--unresponsive .ids-header-1177-pro__avatar .ids-header-1177-pro__avatar-dropdown{background-color:var(--IDS-COLOR-NEUTRAL-100);box-shadow:0 .125rem .375rem 0 rgba(0,0,0,.3);display:none;flex-direction:column;gap:1.25rem;min-width:17.5rem;padding:2rem 2.5rem;position:absolute;right:0;top:calc(100% + .5rem);z-index:1}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__avatar{align-items:center;display:grid;grid-column:4;justify-self:end;margin-right:1.25rem;padding-left:1.25rem;position:relative}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__avatar button:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}@media (max-width:1024px){.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__avatar{display:none}}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__avatar .ids-header-1177-pro__avatar-box{align-items:center;background:none;border:none;color:inherit;cursor:pointer;display:grid;font:inherit;gap:.75rem;grid-template-columns:auto auto;justify-content:center;outline:inherit;padding:0}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__avatar .ids-header-1177-pro__avatar-box[aria-expanded=true] .ids-header-1177-pro__avatar-chevron{transform:rotate(180deg)}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__avatar .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-icon{display:flex;max-height:2.75rem;max-width:2.25rem}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__avatar .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-chevron{grid-column:3;width:.75rem}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__avatar .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-chevron.ids-header-1177-pro__avatar-chevron--expanded .ids-icon{transform:rotate(180deg)}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__avatar .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-content{display:grid;grid-template-rows:1fr;min-width:6.25rem}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__avatar .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-content:has(.ids-header-1177-pro__avatar-content__unit){grid-template-rows:1fr 1fr}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__avatar .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-content .ids-header-1177-pro__avatar-content__unit{font-size:.875rem}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__avatar.ids-header-1177-pro__avatar--expanded .ids-header-1177-pro__avatar-dropdown{display:flex}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__avatar .ids-header-1177-pro__avatar-dropdown{background-color:var(--IDS-COLOR-NEUTRAL-100);box-shadow:0 .125rem .375rem 0 rgba(0,0,0,.3);display:none;flex-direction:column;gap:1.25rem;min-width:17.5rem;padding:2rem 2.5rem;position:absolute;right:0;top:calc(100% + .5rem);z-index:1}:host .ids-header-1177-pro__avatar:not(.ids-header-1177-pro__avatar--unresponsive){align-items:center;display:grid;grid-column:4;justify-self:end;margin-right:1.25rem;padding-left:1.25rem;position:relative}:host .ids-header-1177-pro__avatar:not(.ids-header-1177-pro__avatar--unresponsive) button:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}@media (max-width:1024px){:host .ids-header-1177-pro__avatar:not(.ids-header-1177-pro__avatar--unresponsive){display:none}}:host .ids-header-1177-pro__avatar:not(.ids-header-1177-pro__avatar--unresponsive) .ids-header-1177-pro__avatar-box{align-items:center;background:none;border:none;color:inherit;cursor:pointer;display:grid;font:inherit;gap:.75rem;grid-template-columns:auto auto;justify-content:center;outline:inherit;padding:0}:host .ids-header-1177-pro__avatar:not(.ids-header-1177-pro__avatar--unresponsive) .ids-header-1177-pro__avatar-box[aria-expanded=true] .ids-header-1177-pro__avatar-chevron{transform:rotate(180deg)}:host .ids-header-1177-pro__avatar:not(.ids-header-1177-pro__avatar--unresponsive) .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-icon{display:flex;max-height:2.75rem;max-width:2.25rem}:host .ids-header-1177-pro__avatar:not(.ids-header-1177-pro__avatar--unresponsive) .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-chevron{grid-column:3;width:.75rem}:host .ids-header-1177-pro__avatar:not(.ids-header-1177-pro__avatar--unresponsive) .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-chevron.ids-header-1177-pro__avatar-chevron--expanded .ids-icon{transform:rotate(180deg)}:host .ids-header-1177-pro__avatar:not(.ids-header-1177-pro__avatar--unresponsive) .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-content{display:grid;grid-template-rows:1fr;min-width:6.25rem}:host .ids-header-1177-pro__avatar:not(.ids-header-1177-pro__avatar--unresponsive) .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-content:has(.ids-header-1177-pro__avatar-content__unit){grid-template-rows:1fr 1fr}:host .ids-header-1177-pro__avatar:not(.ids-header-1177-pro__avatar--unresponsive) .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-content .ids-header-1177-pro__avatar-content__unit{font-size:.875rem}:host .ids-header-1177-pro__avatar:not(.ids-header-1177-pro__avatar--unresponsive).ids-header-1177-pro__avatar--expanded .ids-header-1177-pro__avatar-dropdown{display:flex}:host .ids-header-1177-pro__avatar:not(.ids-header-1177-pro__avatar--unresponsive) .ids-header-1177-pro__avatar-dropdown{background-color:var(--IDS-COLOR-NEUTRAL-100);box-shadow:0 .125rem .375rem 0 rgba(0,0,0,.3);display:none;flex-direction:column;gap:1.25rem;min-width:17.5rem;padding:2rem 2.5rem;position:absolute;right:0;top:calc(100% + .5rem);z-index:1}:host .ids-header-1177-pro__avatar.ids-header-1177-pro__avatar--unresponsive{align-items:center;display:grid;grid-column:4;justify-self:end;margin-right:1.25rem;padding-left:1.25rem;position:relative}:host .ids-header-1177-pro__avatar.ids-header-1177-pro__avatar--unresponsive button:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}:host .ids-header-1177-pro__avatar.ids-header-1177-pro__avatar--unresponsive .ids-header-1177-pro__avatar-box{align-items:center;background:none;border:none;color:inherit;cursor:pointer;display:grid;font:inherit;gap:.75rem;grid-template-columns:auto auto;justify-content:center;outline:inherit;padding:0}:host .ids-header-1177-pro__avatar.ids-header-1177-pro__avatar--unresponsive .ids-header-1177-pro__avatar-box[aria-expanded=true] .ids-header-1177-pro__avatar-chevron{transform:rotate(180deg)}:host .ids-header-1177-pro__avatar.ids-header-1177-pro__avatar--unresponsive .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-icon{display:flex;max-height:2.75rem;max-width:2.25rem}:host .ids-header-1177-pro__avatar.ids-header-1177-pro__avatar--unresponsive .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-chevron{grid-column:3;width:.75rem}:host .ids-header-1177-pro__avatar.ids-header-1177-pro__avatar--unresponsive .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-chevron.ids-header-1177-pro__avatar-chevron--expanded .ids-icon{transform:rotate(180deg)}:host .ids-header-1177-pro__avatar.ids-header-1177-pro__avatar--unresponsive .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-content{display:grid;grid-template-rows:1fr;min-width:6.25rem}:host .ids-header-1177-pro__avatar.ids-header-1177-pro__avatar--unresponsive .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-content:has(.ids-header-1177-pro__avatar-content__unit){grid-template-rows:1fr 1fr}:host .ids-header-1177-pro__avatar.ids-header-1177-pro__avatar--unresponsive .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-content .ids-header-1177-pro__avatar-content__unit{font-size:.875rem}:host .ids-header-1177-pro__avatar.ids-header-1177-pro__avatar--unresponsive.ids-header-1177-pro__avatar--expanded .ids-header-1177-pro__avatar-dropdown{display:flex}:host .ids-header-1177-pro__avatar.ids-header-1177-pro__avatar--unresponsive .ids-header-1177-pro__avatar-dropdown{background-color:var(--IDS-COLOR-NEUTRAL-100);box-shadow:0 .125rem .375rem 0 rgba(0,0,0,.3);display:none;flex-direction:column;gap:1.25rem;min-width:17.5rem;padding:2rem 2.5rem;position:absolute;right:0;top:calc(100% + .5rem);z-index:1}";
4
4
 
5
5
  var header1177ProAvatarLit = css`${unsafeCSS(css_248z)}`;
6
6
 
@@ -1,6 +1,6 @@
1
1
  import { css, unsafeCSS } from 'lit';
2
2
 
3
- var css_248z = ".ids-header-1177-pro__avatar-mobile a.ids-header-1177-pro__avatar-mobile__login,:host .ids-header-1177-pro__avatar-mobile .ids-header-1177-pro__avatar-mobile__text,:host .ids-header-1177-pro__avatar-mobile ::slotted([slot=logout]){color:var(--IDS-LINK--COLORPRESET-1__COLOR);font-family:var(--IDS-LINK--FONT-FAMILY)}.ids-header-1177-pro__avatar-mobile a.ids-header-1177-pro__avatar-mobile__login:focus,.ids-header-1177-pro__avatar-mobile a.ids-header-1177-pro__avatar-mobile__login:hover,:host .ids-header-1177-pro__avatar-mobile ::slotted([slot=logout]:hover),:host .ids-header-1177-pro__avatar-mobile:focus-within .ids-header-1177-pro__avatar-mobile__text,:host .ids-header-1177-pro__avatar-mobile:hover .ids-header-1177-pro__avatar-mobile__text{color:var(--IDS-LINK--COLORPRESET-1__HOVER-COLOR);text-decoration:underline;text-decoration-color:var(--IDS-LINK--COLORPRESET-1__COLOR)}.ids-header-1177-pro__avatar-mobile{align-items:center;border-bottom:var(--IDS-MOBILE-MENU-ITEM__INNER__BORDER-BOTTOM);box-sizing:border-box;display:flex;gap:8px;min-height:48px;padding:12px 20px;position:relative}.ids-header-1177-pro__avatar-mobile a.ids-header-1177-pro__avatar-mobile__login{align-items:center;display:flex;gap:8px;height:100%;inset:0;padding-left:20px;position:absolute;text-decoration:none}.ids-header-1177-pro__avatar-mobile a.ids-header-1177-pro__avatar-mobile__login:focus{outline:var(--IDS-FOCUS_OUTLINE);outline-offset:-4px!important}.ids-header-1177-pro__avatar-mobile .ids-header-1177-pro__avatar-mobile__user{display:flex;flex:1;flex-direction:column}.ids-header-1177-pro__avatar-mobile .ids-header-1177-pro__avatar-mobile__user .ids-header-1177-pro__avatar-mobile__user__username{color:var(--IDS-COLOR-NEUTRAL-20);font-family:var(--font-family_1);font-size:1rem;font-style:normal;font-weight:400;line-height:1.5rem}.ids-header-1177-pro__avatar-mobile .ids-header-1177-pro__avatar-mobile__user .ids-header-1177-pro__avatar-mobile__user__unit{color:var(--IDS-COLOR-NEUTRAL-20);font-family:var(--font-family_1);font-size:.875rem;font-style:normal;font-weight:400;line-height:20px}:host .ids-header-1177-pro__avatar-mobile:not(:has(.ids-header-1177-pro__avatar-mobile__user)):focus-within{outline:var(--IDS-FOCUS_OUTLINE);outline-offset:-4px!important}:host .ids-header-1177-pro__avatar-mobile ::slotted([slot=login]){inset:0;opacity:0!important;position:absolute}";
3
+ var css_248z = ".ids-header-1177-pro__avatar-mobile a.ids-header-1177-pro__avatar-mobile__login,:host .ids-header-1177-pro__avatar-mobile .ids-header-1177-pro__avatar-mobile__text,:host .ids-header-1177-pro__avatar-mobile ::slotted([slot=logout]){color:var(--IDS-LINK--COLORPRESET-1__COLOR);font-family:var(--IDS-LINK__FONT-FAMILY);font-size:1rem}.ids-header-1177-pro__avatar-mobile a.ids-header-1177-pro__avatar-mobile__login:focus,.ids-header-1177-pro__avatar-mobile a.ids-header-1177-pro__avatar-mobile__login:hover,:host .ids-header-1177-pro__avatar-mobile ::slotted([slot=logout]:hover),:host .ids-header-1177-pro__avatar-mobile:focus-within .ids-header-1177-pro__avatar-mobile__text,:host .ids-header-1177-pro__avatar-mobile:hover .ids-header-1177-pro__avatar-mobile__text{color:var(--IDS-LINK--COLORPRESET-1__HOVER-COLOR);text-decoration:underline;text-decoration-color:var(--IDS-LINK--COLORPRESET-1__COLOR)}.ids-header-1177-pro__avatar-mobile{align-items:center;border-bottom:var(--IDS-MOBILE-MENU-ITEM__BORDER-BOTTOM);box-sizing:border-box;display:flex;gap:.5rem;min-height:3rem;padding:.75rem 1.25rem;position:relative}.ids-header-1177-pro__avatar-mobile a.ids-header-1177-pro__avatar-mobile__login{align-items:center;display:flex;gap:.5rem;height:100%;inset:0;padding-left:1.25rem;position:absolute;text-decoration:none}.ids-header-1177-pro__avatar-mobile a.ids-header-1177-pro__avatar-mobile__login:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:-.25rem!important}.ids-header-1177-pro__avatar-mobile .ids-header-1177-pro__avatar-mobile__user{display:flex;flex:1;flex-direction:column}.ids-header-1177-pro__avatar-mobile .ids-header-1177-pro__avatar-mobile__user .ids-header-1177-pro__avatar-mobile__user__username{color:var(--IDS-COLOR-NEUTRAL-20);font-family:var(--IDS-FONT-FAMILY-BASE);font-size:1rem;font-style:normal;font-weight:400;line-height:1.5rem}.ids-header-1177-pro__avatar-mobile .ids-header-1177-pro__avatar-mobile__user .ids-header-1177-pro__avatar-mobile__user__unit{color:var(--IDS-COLOR-NEUTRAL-20);font-family:var(--IDS-FONT-FAMILY-BASE);font-size:.875rem;font-style:normal;font-weight:400;line-height:1.25rem}:host .ids-header-1177-pro__avatar-mobile:not(:has(.ids-header-1177-pro__avatar-mobile__user)):focus-within{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:-.25rem!important}:host .ids-header-1177-pro__avatar-mobile ::slotted([slot=login]){inset:0;opacity:0!important;position:absolute}";
4
4
 
5
5
  var header1177ProAvatarMobileLit = css`${unsafeCSS(css_248z)}`;
6
6
 
@@ -2,7 +2,7 @@
2
2
  * BUTTONS
3
3
  ********/
4
4
  /*******
5
- * SCROLLBAR
5
+ * SCROLLBARS
6
6
  ********/
7
7
  /*******
8
8
  * FORM
@@ -11,7 +11,8 @@
11
11
  * A11Y
12
12
  ********/
13
13
  :host .ids-header-1177-pro__avatar-mobile ::slotted([slot=logout]), :host .ids-header-1177-pro__avatar-mobile .ids-header-1177-pro__avatar-mobile__text, .ids-header-1177-pro__avatar-mobile a.ids-header-1177-pro__avatar-mobile__login {
14
- font-family: var(--IDS-LINK--FONT-FAMILY);
14
+ font-size: 1rem;
15
+ font-family: var(--IDS-LINK__FONT-FAMILY);
15
16
  color: var(--IDS-LINK--COLORPRESET-1__COLOR);
16
17
  }
17
18
 
@@ -23,27 +24,27 @@
23
24
 
24
25
  .ids-header-1177-pro__avatar-mobile {
25
26
  display: flex;
26
- min-height: 48px;
27
+ min-height: 3rem;
27
28
  align-items: center;
28
- gap: 8px;
29
- border-bottom: var(--IDS-MOBILE-MENU-ITEM__INNER__BORDER-BOTTOM);
29
+ gap: 0.5rem;
30
+ border-bottom: var(--IDS-MOBILE-MENU-ITEM__BORDER-BOTTOM);
30
31
  box-sizing: border-box;
31
32
  position: relative;
32
- padding: 12px 20px;
33
+ padding: 0.75rem 1.25rem;
33
34
  }
34
35
  .ids-header-1177-pro__avatar-mobile a.ids-header-1177-pro__avatar-mobile__login {
35
36
  display: flex;
36
- gap: 8px;
37
+ gap: 0.5rem;
37
38
  position: absolute;
38
- inset: 0px;
39
+ inset: 0;
39
40
  height: 100%;
40
41
  align-items: center;
41
- padding-left: 20px;
42
+ padding-left: 1.25rem;
42
43
  text-decoration: none;
43
44
  }
44
45
  .ids-header-1177-pro__avatar-mobile a.ids-header-1177-pro__avatar-mobile__login:focus {
45
- outline: var(--IDS-FOCUS_OUTLINE);
46
- outline-offset: -4px !important;
46
+ outline: var(--IDS-FOCUS__OUTLINE);
47
+ outline-offset: -0.25rem !important;
47
48
  }
48
49
  .ids-header-1177-pro__avatar-mobile .ids-header-1177-pro__avatar-mobile__user {
49
50
  display: flex;
@@ -52,7 +53,7 @@
52
53
  }
53
54
  .ids-header-1177-pro__avatar-mobile .ids-header-1177-pro__avatar-mobile__user .ids-header-1177-pro__avatar-mobile__user__username {
54
55
  color: var(--IDS-COLOR-NEUTRAL-20);
55
- font-family: var(--font-family_1);
56
+ font-family: var(--IDS-FONT-FAMILY-BASE);
56
57
  font-size: 1rem;
57
58
  font-style: normal;
58
59
  font-weight: 400;
@@ -61,18 +62,18 @@
61
62
  .ids-header-1177-pro__avatar-mobile .ids-header-1177-pro__avatar-mobile__user .ids-header-1177-pro__avatar-mobile__user__unit {
62
63
  color: var(--IDS-COLOR-NEUTRAL-20);
63
64
  font-size: 0.875rem;
64
- font-family: var(--font-family_1);
65
+ font-family: var(--IDS-FONT-FAMILY-BASE);
65
66
  font-style: normal;
66
67
  font-weight: 400;
67
- line-height: 20px;
68
+ line-height: 1.25rem;
68
69
  }
69
70
 
70
71
  :host .ids-header-1177-pro__avatar-mobile:not(:has(.ids-header-1177-pro__avatar-mobile__user)):focus-within {
71
- outline: var(--IDS-FOCUS_OUTLINE);
72
- outline-offset: -4px !important;
72
+ outline: var(--IDS-FOCUS__OUTLINE);
73
+ outline-offset: -0.25rem !important;
73
74
  }
74
75
  :host .ids-header-1177-pro__avatar-mobile ::slotted([slot=login]) {
75
76
  opacity: 0 !important;
76
77
  position: absolute;
77
- inset: 0px;
78
+ inset: 0;
78
79
  }