@inera/ids-design 6.2.0 → 7.0.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 (138) hide show
  1. package/components/accordion/accordion-lit.js +1 -1
  2. package/components/accordion/accordion.css +8 -0
  3. package/components/badge/badge-lit.js +1 -1
  4. package/components/badge/badge.css +14 -11
  5. package/components/box-link/box-link-lit.js +1 -1
  6. package/components/box-link/box-link.css +20 -21
  7. package/components/button-group/button-group-lit.js +1 -1
  8. package/components/button-group/button-group.css +2 -0
  9. package/components/card/card-lit.js +1 -1
  10. package/components/card/card.css +8 -15
  11. package/components/carousel/carousel-item-lit.js +1 -1
  12. package/components/carousel/carousel-item.css +3 -5
  13. package/components/carousel/carousel-lit.js +1 -1
  14. package/components/carousel/carousel.css +22 -9
  15. package/components/data-table/data-table-lit.js +1 -1
  16. package/components/data-table/data-table.css +0 -9
  17. package/components/dialog/dialog-lit.js +1 -1
  18. package/components/dialog/dialog.css +18 -20
  19. package/components/dropdown/dropdown-lit.js +1 -1
  20. package/components/dropdown/dropdown.css +47 -30
  21. package/components/footer-1177/footer-1177-lit.js +1 -1
  22. package/components/footer-1177/footer-1177.css +4 -2
  23. package/components/footer-1177-admin/footer-1177-admin-lit.js +1 -1
  24. package/components/footer-1177-admin/footer-1177-admin.css +2 -4
  25. package/components/footer-1177-pro/footer-1177-pro-lit.js +1 -1
  26. package/components/footer-1177-pro/footer-1177-pro.css +8 -17
  27. package/components/form/error-message/error-message-lit.js +1 -1
  28. package/components/form/error-message/error-message.css +1 -0
  29. package/components/form/select-multiple/select-multiple-lit.js +1 -1
  30. package/components/form/select-multiple/select-multiple.css +18 -20
  31. package/components/header-1177/composite-header-1177.css +642 -281
  32. package/components/header-1177/header-1177-avatar-lit.js +1 -1
  33. package/components/header-1177/header-1177-avatar.css +388 -158
  34. package/components/header-1177/header-1177-item-lit.js +1 -1
  35. package/components/header-1177/header-1177-item.css +54 -6
  36. package/components/header-1177/header-1177-lit.js +1 -1
  37. package/components/header-1177/header-1177-menu-mobile-lit.d.ts +2 -0
  38. package/components/header-1177/header-1177-menu-mobile-lit.js +7 -0
  39. package/components/header-1177/header-1177-menu-mobile.css +138 -0
  40. package/components/header-1177/header-1177-nav-item-lit.js +1 -1
  41. package/components/header-1177/header-1177-nav-item-mobile-lit.js +1 -1
  42. package/components/header-1177/header-1177-nav-item-mobile.css +10 -12
  43. package/components/header-1177/header-1177-nav-item.css +8 -8
  44. package/components/header-1177/header-1177-nav-lit.js +1 -1
  45. package/components/header-1177/header-1177-nav.css +7 -2
  46. package/components/header-1177/header-1177.css +63 -95
  47. package/components/header-1177-admin/header-1177-admin-avatar-mobile-lit.js +1 -1
  48. package/components/header-1177-admin/header-1177-admin-avatar-mobile.css +1 -65
  49. package/components/header-1177-admin/header-1177-admin-lit.js +1 -1
  50. package/components/header-1177-admin/header-1177-admin-nav-item-lit.js +1 -1
  51. package/components/header-1177-admin/header-1177-admin-nav-item.css +8 -8
  52. package/components/header-1177-admin/header-1177-admin.css +66 -1
  53. package/components/header-1177-pro/header-1177-pro-avatar-mobile-lit.js +1 -1
  54. package/components/header-1177-pro/header-1177-pro-avatar-mobile.css +1 -0
  55. package/components/header-1177-pro/header-1177-pro-item-lit.js +1 -1
  56. package/components/header-1177-pro/header-1177-pro-item.css +4 -0
  57. package/components/header-1177-pro/header-1177-pro-lit.js +1 -1
  58. package/components/header-1177-pro/header-1177-pro-nav-item-lit.js +1 -1
  59. package/components/header-1177-pro/header-1177-pro-nav-item.css +8 -8
  60. package/components/header-1177-pro/header-1177-pro-nav-lit.js +1 -1
  61. package/components/header-1177-pro/header-1177-pro-nav-menu-mobile-lit.js +1 -1
  62. package/components/header-1177-pro/header-1177-pro-nav-menu-mobile.css +2 -0
  63. package/components/header-1177-pro/header-1177-pro-nav.css +6 -0
  64. package/components/header-1177-pro/header-1177-pro-region-picker-lit.js +1 -1
  65. package/components/header-1177-pro/header-1177-pro-region-picker.css +211 -97
  66. package/components/header-1177-pro/header-1177-pro.css +10 -7
  67. package/components/header-inera/header-inera-item-lit.js +1 -1
  68. package/components/header-inera/header-inera-item.css +13 -6
  69. package/components/header-inera/header-inera-nav-item-lit.js +1 -1
  70. package/components/header-inera/header-inera-nav-item.css +1 -1
  71. package/components/header-inera/header-inera-nav-mobile-lit.js +1 -1
  72. package/components/header-inera/header-inera-nav-mobile.css +1 -0
  73. package/components/header-inera-admin/composite-header-inera-admin.css +24 -11
  74. package/components/header-inera-admin/header-inera-admin-avatar-lit.js +1 -1
  75. package/components/header-inera-admin/header-inera-admin-avatar-mobile-lit.js +1 -1
  76. package/components/header-inera-admin/header-inera-admin-avatar-mobile.css +2 -0
  77. package/components/header-inera-admin/header-inera-admin-avatar.css +5 -0
  78. package/components/header-inera-admin/header-inera-admin-item-lit.js +1 -1
  79. package/components/header-inera-admin/header-inera-admin-item.css +10 -6
  80. package/components/header-inera-admin/header-inera-admin-lit.js +1 -1
  81. package/components/header-inera-admin/header-inera-admin-nav-item-lit.js +1 -1
  82. package/components/header-inera-admin/header-inera-admin-nav-item.css +4 -3
  83. package/components/header-inera-admin/header-inera-admin-nav-mobile-lit.js +1 -1
  84. package/components/header-inera-admin/header-inera-admin-nav-mobile.css +1 -0
  85. package/components/header-inera-admin/header-inera-admin.css +2 -2
  86. package/components/header-patient/header-patient-lit.d.ts +2 -0
  87. package/components/header-patient/header-patient-lit.js +7 -0
  88. package/components/header-patient/header-patient.css +145 -0
  89. package/components/mobile-menu/mobile-menu-lit.js +1 -1
  90. package/components/mobile-menu/mobile-menu.css +159 -116
  91. package/components/navigation/content/navigation-content.css +2 -1
  92. package/components/navigation/local/navigation-local-lit.js +1 -1
  93. package/components/navigation/local/navigation-local.css +5 -4
  94. package/components/notification-badge/notification-badge-lit.js +1 -1
  95. package/components/notification-badge/notification-badge.css +48 -7
  96. package/components/pagination/list-pagination/list-pagination-lit.js +1 -1
  97. package/components/pagination/list-pagination/list-pagination.css +1 -1
  98. package/components/popover/popover-content-lit.js +1 -1
  99. package/components/popover/popover-content.css +53 -66
  100. package/components/puff-list/puff-list-lit.js +1 -1
  101. package/components/puff-list/puff-list.css +90 -89
  102. package/components/region-icon/region-icon-lit.d.ts +2 -0
  103. package/components/region-icon/region-icon-lit.js +7 -0
  104. package/components/region-icon/region-icon.css +191 -0
  105. package/components/side-panel/side-panel-lit.js +1 -1
  106. package/components/side-panel/side-panel.css +29 -25
  107. package/components/stepper/stepper-lit.js +1 -1
  108. package/components/stepper/stepper.css +35 -5
  109. package/components/tabs/tab-lit.js +1 -1
  110. package/components/tabs/tab-panel-lit.js +1 -1
  111. package/components/tabs/tab-panel.css +2 -2
  112. package/components/tabs/tab.css +52 -45
  113. package/components/tabs/tabs-lit.js +2 -2
  114. package/components/tabs/tabs.css +11 -2
  115. package/components/tag/tag-lit.js +1 -1
  116. package/components/tag/tag.css +14 -10
  117. package/global/icons/Inera-Design-Icons.eot +0 -0
  118. package/global/icons/Inera-Design-Icons.svg +409 -0
  119. package/global/icons/Inera-Design-Icons.ttf +0 -0
  120. package/global/icons/Inera-Design-Icons.woff +0 -0
  121. package/package.json +1 -1
  122. package/themes/1177/1177.css +4333 -3968
  123. package/themes/1177-pro/1177-pro.css +4340 -3968
  124. package/themes/inera/inera.css +4325 -3962
  125. package/themes/inera-admin/inera-admin.css +4325 -3962
  126. package/components/grid/column/_column-partials.css +0 -0
  127. package/global/_partials.css +0 -15
  128. package/global/global.css +0 -5025
  129. package/global/icons/font/Inera-Design-Icons.eot +0 -0
  130. package/global/icons/font/Inera-Design-Icons.svg +0 -323
  131. package/global/icons/font/Inera-Design-Icons.ttf +0 -0
  132. package/global/icons/font/Inera-Design-Icons.woff +0 -0
  133. package/global/util/util.css +0 -2282
  134. package/themes/1177/1177-tokens.css +0 -34
  135. package/themes/1177-pro/1177-pro-tokens.css +0 -1
  136. package/themes/inera/inera-tokens.css +0 -53
  137. package/themes/inera-admin/inera-admin-tokens.css +0 -1
  138. package/themes/reset.css +0 -61
@@ -130,7 +130,8 @@ header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1
130
130
  font-size: 6.125rem;
131
131
  }
132
132
  header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo a,
133
- header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo ::slotted([slot=logo]) ::slotted(a) {
133
+ header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo ::slotted([slot=logo]),
134
+ header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo ::slotted(a) {
134
135
  display: flex;
135
136
  align-items: center;
136
137
  width: 6.438rem;
@@ -139,14 +140,14 @@ header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1
139
140
  color: var(--IDS-ICON__COLOR);
140
141
  }
141
142
  header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo a:focus,
142
- header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo ::slotted([slot=logo]) ::slotted(a):focus {
143
+ header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo ::slotted([slot=logo]):focus,
144
+ header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo ::slotted(a):focus {
143
145
  outline: var(--IDS-FOCUS__OUTLINE);
144
146
  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
145
147
  }
146
148
  header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo a:focus,
147
149
  header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo ::slotted([slot=logo]:focus),
148
150
  header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo ::slotted(a:focus) {
149
- display: block;
150
151
  outline: var(--IDS-FOCUS__OUTLINE) !important;
151
152
  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET);
152
153
  }
@@ -160,7 +161,8 @@ header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1
160
161
  font-size: 2.5rem;
161
162
  }
162
163
  header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo a,
163
- header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo ::slotted([slot=logo]) {
164
+ header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo ::slotted([slot=logo]),
165
+ header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo ::slotted(a) {
164
166
  font-size: 2.5rem;
165
167
  }
166
168
  }
@@ -290,7 +292,8 @@ header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pr
290
292
  font-size: 6.125rem;
291
293
  }
292
294
  header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo a,
293
- header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo ::slotted([slot=logo]) ::slotted(a) {
295
+ header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo ::slotted([slot=logo]),
296
+ header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo ::slotted(a) {
294
297
  display: flex;
295
298
  align-items: center;
296
299
  width: 6.438rem;
@@ -299,14 +302,14 @@ header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pr
299
302
  color: var(--IDS-ICON__COLOR);
300
303
  }
301
304
  header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo a:focus,
302
- header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo ::slotted([slot=logo]) ::slotted(a):focus {
305
+ header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo ::slotted([slot=logo]):focus,
306
+ header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo ::slotted(a):focus {
303
307
  outline: var(--IDS-FOCUS__OUTLINE);
304
308
  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
305
309
  }
306
310
  header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo a:focus,
307
311
  header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo ::slotted([slot=logo]:focus),
308
312
  header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo ::slotted(a:focus) {
309
- display: block;
310
313
  outline: var(--IDS-FOCUS__OUTLINE) !important;
311
314
  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET);
312
315
  }
@@ -340,7 +343,7 @@ header.ids-header-1177-pro.ids-header-1177-pro--fluid .ids-header-1177-pro__cont
340
343
  max-width: 100% !important;
341
344
  }
342
345
 
343
- .ids-header-1177-pro--unresponsive .ids-header-1177-pro__region-picker-button {
346
+ .ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__region-picker-button {
344
347
  background: none;
345
348
  color: inherit;
346
349
  border: none;
@@ -349,7 +352,6 @@ header.ids-header-1177-pro.ids-header-1177-pro--fluid .ids-header-1177-pro__cont
349
352
  cursor: pointer;
350
353
  outline: inherit;
351
354
  border: none;
352
- background-color: none;
353
355
  font-size: 0.85rem !important;
354
356
  font-family: var(--IDS-FONT-FAMILY-BASE) !important;
355
357
  color: var(--IDS-COLOR-ACCENT-40) !important;
@@ -362,7 +364,7 @@ header.ids-header-1177-pro.ids-header-1177-pro--fluid .ids-header-1177-pro__cont
362
364
  margin-right: 1rem;
363
365
  padding: 0 2rem 0 0.5rem;
364
366
  }
365
- .ids-header-1177-pro--unresponsive .ids-header-1177-pro__region-picker-button::before {
367
+ .ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__region-picker-button::before {
366
368
  left: -1.5rem;
367
369
  content: "";
368
370
  position: absolute;
@@ -373,7 +375,7 @@ header.ids-header-1177-pro.ids-header-1177-pro--fluid .ids-header-1177-pro__cont
373
375
  transform: translateY(-50%);
374
376
  background: var(--IDS-COLOR-ACCENT-30);
375
377
  }
376
- .ids-header-1177-pro--unresponsive .ids-header-1177-pro__region-picker-button:after {
378
+ .ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__region-picker-button:after {
377
379
  font: icon;
378
380
  font-family: "Inera-Design-Icons" !important;
379
381
  display: block;
@@ -383,24 +385,59 @@ header.ids-header-1177-pro.ids-header-1177-pro--fluid .ids-header-1177-pro__cont
383
385
  color: var(--IDS-ICON__COLOR);
384
386
  right: 0.5rem;
385
387
  }
386
- .ids-header-1177-pro--unresponsive .ids-header-1177-pro__region-picker-button.ids-header-1177-pro__region-picker-button--expanded:after {
388
+ .ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__region-picker-button.ids-header-1177-pro__region-picker-button--expanded:after {
387
389
  content: "\e939";
388
390
  }
389
- .ids-header-1177-pro--unresponsive .ids-header-1177-pro__region-picker-button.ids-header-1177-pro__region-picker-button--mobile {
391
+ .ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__region-picker-button:focus {
392
+ outline: var(--IDS-FOCUS__OUTLINE);
393
+ outline-offset: -0.125rem !important;
394
+ }
395
+ .ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__region-picker-button ::slotted([slot=region]) {
396
+ height: 2.5rem;
397
+ max-width: 12.5rem;
398
+ }
399
+ .ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__region-picker-button--mobile {
400
+ background: none;
401
+ color: inherit;
402
+ border: none;
403
+ padding: 0;
404
+ font: inherit;
405
+ cursor: pointer;
406
+ outline: inherit;
407
+ position: relative;
408
+ border: none;
390
409
  display: none;
391
- padding-right: 2rem;
410
+ padding-right: 2rem !important;
392
411
  margin-right: 0;
412
+ margin-left: 0;
413
+ min-height: 1.875rem;
414
+ align-items: center;
393
415
  }
394
- .ids-header-1177-pro--unresponsive .ids-header-1177-pro__region-picker-button.ids-header-1177-pro__region-picker-button--mobile::before {
416
+ .ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__region-picker-button--mobile::before {
395
417
  display: none;
396
418
  }
397
- .ids-header-1177-pro--unresponsive .ids-header-1177-pro__region-picker-button.ids-header-1177-pro__region-picker-button--mobile .ids-header-1177-pro__region-picker__text {
419
+ .ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__region-picker-button--mobile:after {
420
+ font: icon;
421
+ font-family: "Inera-Design-Icons" !important;
422
+ display: block;
423
+ position: absolute;
424
+ pointer-events: none;
425
+ content: "\e936";
426
+ color: var(--IDS-ICON__COLOR);
427
+ top: 50%;
428
+ transform: translateY(-50%);
429
+ right: 0;
430
+ }
431
+ .ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__region-picker-button--mobile.ids-header-1177-pro__region-picker-button--mobile--expanded:after {
432
+ content: "\e939";
433
+ }
434
+ .ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__region-picker-button--mobile .ids-header-1177-pro__region-picker__text {
398
435
  font-size: 0.875rem;
399
436
  display: flex;
400
437
  position: relative;
401
438
  padding-left: 1.75rem;
402
439
  }
403
- .ids-header-1177-pro--unresponsive .ids-header-1177-pro__region-picker-button.ids-header-1177-pro__region-picker-button--mobile .ids-header-1177-pro__region-picker__text::before {
440
+ .ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__region-picker-button--mobile .ids-header-1177-pro__region-picker__text::before {
404
441
  font: icon;
405
442
  font-family: "Inera-Design-Icons" !important;
406
443
  display: block;
@@ -412,19 +449,14 @@ header.ids-header-1177-pro.ids-header-1177-pro--fluid .ids-header-1177-pro__cont
412
449
  top: 0;
413
450
  left: 0;
414
451
  }
415
- .ids-header-1177-pro--unresponsive .ids-header-1177-pro__region-picker-button:focus {
452
+ .ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__region-picker-button--mobile:focus {
416
453
  outline: var(--IDS-FOCUS__OUTLINE);
417
454
  outline-offset: -0.125rem !important;
418
455
  }
419
- .ids-header-1177-pro--unresponsive .ids-header-1177-pro__region-picker-button ::slotted([slot=region]) {
456
+ .ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__region-picker-button--mobile ::slotted([slot=region-mobile]) {
420
457
  height: 2.5rem;
421
458
  max-width: 12.5rem;
422
459
  }
423
- .ids-header-1177-pro--unresponsive .ids-header-1177-pro__region-picker-button ::slotted([slot=region-mobile]) {
424
- height: 2.5rem;
425
- max-width: 12.5rem;
426
- }
427
-
428
460
  .ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__region-picker-button {
429
461
  background: none;
430
462
  color: inherit;
@@ -434,7 +466,6 @@ header.ids-header-1177-pro.ids-header-1177-pro--fluid .ids-header-1177-pro__cont
434
466
  cursor: pointer;
435
467
  outline: inherit;
436
468
  border: none;
437
- background-color: none;
438
469
  font-size: 0.85rem !important;
439
470
  font-family: var(--IDS-FONT-FAMILY-BASE) !important;
440
471
  color: var(--IDS-COLOR-ACCENT-40) !important;
@@ -476,21 +507,61 @@ header.ids-header-1177-pro.ids-header-1177-pro--fluid .ids-header-1177-pro__cont
476
507
  .ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__region-picker-button.ids-header-1177-pro__region-picker-button--expanded:after {
477
508
  content: "\e939";
478
509
  }
479
- .ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__region-picker-button.ids-header-1177-pro__region-picker-button--mobile {
510
+ .ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__region-picker-button:focus {
511
+ outline: var(--IDS-FOCUS__OUTLINE);
512
+ outline-offset: -0.125rem !important;
513
+ }
514
+ .ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__region-picker-button ::slotted([slot=region]) {
515
+ height: 2.5rem;
516
+ max-width: 12.5rem;
517
+ }
518
+ @media (max-width: 1024px) {
519
+ .ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__region-picker-button {
520
+ display: none;
521
+ }
522
+ }
523
+ .ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__region-picker-button--mobile {
524
+ background: none;
525
+ color: inherit;
526
+ border: none;
527
+ padding: 0;
528
+ font: inherit;
529
+ cursor: pointer;
530
+ outline: inherit;
531
+ position: relative;
532
+ border: none;
480
533
  display: none;
481
- padding-right: 2rem;
534
+ padding-right: 2rem !important;
482
535
  margin-right: 0;
536
+ margin-left: 0;
537
+ min-height: 1.875rem;
538
+ align-items: center;
483
539
  }
484
- .ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__region-picker-button.ids-header-1177-pro__region-picker-button--mobile::before {
540
+ .ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__region-picker-button--mobile::before {
485
541
  display: none;
486
542
  }
487
- .ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__region-picker-button.ids-header-1177-pro__region-picker-button--mobile .ids-header-1177-pro__region-picker__text {
543
+ .ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__region-picker-button--mobile:after {
544
+ font: icon;
545
+ font-family: "Inera-Design-Icons" !important;
546
+ display: block;
547
+ position: absolute;
548
+ pointer-events: none;
549
+ content: "\e936";
550
+ color: var(--IDS-ICON__COLOR);
551
+ top: 50%;
552
+ transform: translateY(-50%);
553
+ right: 0;
554
+ }
555
+ .ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__region-picker-button--mobile.ids-header-1177-pro__region-picker-button--mobile--expanded:after {
556
+ content: "\e939";
557
+ }
558
+ .ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__region-picker-button--mobile .ids-header-1177-pro__region-picker__text {
488
559
  font-size: 0.875rem;
489
560
  display: flex;
490
561
  position: relative;
491
562
  padding-left: 1.75rem;
492
563
  }
493
- .ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__region-picker-button.ids-header-1177-pro__region-picker-button--mobile .ids-header-1177-pro__region-picker__text::before {
564
+ .ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__region-picker-button--mobile .ids-header-1177-pro__region-picker__text::before {
494
565
  font: icon;
495
566
  font-family: "Inera-Design-Icons" !important;
496
567
  display: block;
@@ -503,33 +574,20 @@ header.ids-header-1177-pro.ids-header-1177-pro--fluid .ids-header-1177-pro__cont
503
574
  left: 0;
504
575
  }
505
576
  @media (max-width: 1024px) {
506
- .ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__region-picker-button:not(.ids-header-1177-pro__region-picker-button--mobile) {
507
- display: none;
508
- }
509
- .ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__region-picker-button.ids-header-1177-pro__region-picker-button--mobile {
577
+ .ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__region-picker-button--mobile {
510
578
  display: flex;
511
- margin-left: 0;
512
- gap: 0.75rem;
513
- }
514
- .ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__region-picker-button.ids-header-1177-pro__region-picker-button--mobile ::slotted([slot=region]) {
515
- max-width: 12.5rem;
516
- height: 1.5rem;
517
579
  }
518
580
  }
519
- .ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__region-picker-button:focus {
581
+ .ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__region-picker-button--mobile:focus {
520
582
  outline: var(--IDS-FOCUS__OUTLINE);
521
583
  outline-offset: -0.125rem !important;
522
584
  }
523
- .ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__region-picker-button ::slotted([slot=region]) {
524
- height: 2.5rem;
525
- max-width: 12.5rem;
526
- }
527
- .ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__region-picker-button ::slotted([slot=region-mobile]) {
585
+ .ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__region-picker-button--mobile ::slotted([slot=region-mobile]) {
528
586
  height: 2.5rem;
529
587
  max-width: 12.5rem;
530
588
  }
531
589
 
532
- :host .ids-header-1177-pro__nav:not(.ids-header-1177-pro__nav--unresponsive) .ids-header-1177-pro__region-picker-button {
590
+ :host .ids-header-1177-pro__nav.ids-header-1177-pro__nav--unresponsive .ids-header-1177-pro__region-picker-button {
533
591
  background: none;
534
592
  color: inherit;
535
593
  border: none;
@@ -538,7 +596,6 @@ header.ids-header-1177-pro.ids-header-1177-pro--fluid .ids-header-1177-pro__cont
538
596
  cursor: pointer;
539
597
  outline: inherit;
540
598
  border: none;
541
- background-color: none;
542
599
  font-size: 0.85rem !important;
543
600
  font-family: var(--IDS-FONT-FAMILY-BASE) !important;
544
601
  color: var(--IDS-COLOR-ACCENT-40) !important;
@@ -551,7 +608,7 @@ header.ids-header-1177-pro.ids-header-1177-pro--fluid .ids-header-1177-pro__cont
551
608
  margin-right: 1rem;
552
609
  padding: 0 2rem 0 0.5rem;
553
610
  }
554
- :host .ids-header-1177-pro__nav:not(.ids-header-1177-pro__nav--unresponsive) .ids-header-1177-pro__region-picker-button::before {
611
+ :host .ids-header-1177-pro__nav.ids-header-1177-pro__nav--unresponsive .ids-header-1177-pro__region-picker-button::before {
555
612
  left: -1.5rem;
556
613
  content: "";
557
614
  position: absolute;
@@ -562,12 +619,7 @@ header.ids-header-1177-pro.ids-header-1177-pro--fluid .ids-header-1177-pro__cont
562
619
  transform: translateY(-50%);
563
620
  background: var(--IDS-COLOR-ACCENT-30);
564
621
  }
565
- @media (max-width: 1024px) {
566
- :host .ids-header-1177-pro__nav:not(.ids-header-1177-pro__nav--unresponsive) .ids-header-1177-pro__region-picker-button::before {
567
- min-height: 2rem;
568
- }
569
- }
570
- :host .ids-header-1177-pro__nav:not(.ids-header-1177-pro__nav--unresponsive) .ids-header-1177-pro__region-picker-button:after {
622
+ :host .ids-header-1177-pro__nav.ids-header-1177-pro__nav--unresponsive .ids-header-1177-pro__region-picker-button:after {
571
623
  font: icon;
572
624
  font-family: "Inera-Design-Icons" !important;
573
625
  display: block;
@@ -577,24 +629,59 @@ header.ids-header-1177-pro.ids-header-1177-pro--fluid .ids-header-1177-pro__cont
577
629
  color: var(--IDS-ICON__COLOR);
578
630
  right: 0.5rem;
579
631
  }
580
- :host .ids-header-1177-pro__nav:not(.ids-header-1177-pro__nav--unresponsive) .ids-header-1177-pro__region-picker-button.ids-header-1177-pro__region-picker-button--expanded:after {
632
+ :host .ids-header-1177-pro__nav.ids-header-1177-pro__nav--unresponsive .ids-header-1177-pro__region-picker-button.ids-header-1177-pro__region-picker-button--expanded:after {
581
633
  content: "\e939";
582
634
  }
583
- :host .ids-header-1177-pro__nav:not(.ids-header-1177-pro__nav--unresponsive) .ids-header-1177-pro__region-picker-button.ids-header-1177-pro__region-picker-button--mobile {
635
+ :host .ids-header-1177-pro__nav.ids-header-1177-pro__nav--unresponsive .ids-header-1177-pro__region-picker-button:focus {
636
+ outline: var(--IDS-FOCUS__OUTLINE);
637
+ outline-offset: -0.125rem !important;
638
+ }
639
+ :host .ids-header-1177-pro__nav.ids-header-1177-pro__nav--unresponsive .ids-header-1177-pro__region-picker-button ::slotted([slot=region]) {
640
+ height: 2.5rem;
641
+ max-width: 12.5rem;
642
+ }
643
+ :host .ids-header-1177-pro__nav.ids-header-1177-pro__nav--unresponsive .ids-header-1177-pro__region-picker-button--mobile {
644
+ background: none;
645
+ color: inherit;
646
+ border: none;
647
+ padding: 0;
648
+ font: inherit;
649
+ cursor: pointer;
650
+ outline: inherit;
651
+ position: relative;
652
+ border: none;
584
653
  display: none;
585
- padding-right: 2rem;
654
+ padding-right: 2rem !important;
586
655
  margin-right: 0;
656
+ margin-left: 0;
657
+ min-height: 1.875rem;
658
+ align-items: center;
587
659
  }
588
- :host .ids-header-1177-pro__nav:not(.ids-header-1177-pro__nav--unresponsive) .ids-header-1177-pro__region-picker-button.ids-header-1177-pro__region-picker-button--mobile::before {
660
+ :host .ids-header-1177-pro__nav.ids-header-1177-pro__nav--unresponsive .ids-header-1177-pro__region-picker-button--mobile::before {
589
661
  display: none;
590
662
  }
591
- :host .ids-header-1177-pro__nav:not(.ids-header-1177-pro__nav--unresponsive) .ids-header-1177-pro__region-picker-button.ids-header-1177-pro__region-picker-button--mobile .ids-header-1177-pro__region-picker__text {
663
+ :host .ids-header-1177-pro__nav.ids-header-1177-pro__nav--unresponsive .ids-header-1177-pro__region-picker-button--mobile:after {
664
+ font: icon;
665
+ font-family: "Inera-Design-Icons" !important;
666
+ display: block;
667
+ position: absolute;
668
+ pointer-events: none;
669
+ content: "\e936";
670
+ color: var(--IDS-ICON__COLOR);
671
+ top: 50%;
672
+ transform: translateY(-50%);
673
+ right: 0;
674
+ }
675
+ :host .ids-header-1177-pro__nav.ids-header-1177-pro__nav--unresponsive .ids-header-1177-pro__region-picker-button--mobile.ids-header-1177-pro__region-picker-button--mobile--expanded:after {
676
+ content: "\e939";
677
+ }
678
+ :host .ids-header-1177-pro__nav.ids-header-1177-pro__nav--unresponsive .ids-header-1177-pro__region-picker-button--mobile .ids-header-1177-pro__region-picker__text {
592
679
  font-size: 0.875rem;
593
680
  display: flex;
594
681
  position: relative;
595
682
  padding-left: 1.75rem;
596
683
  }
597
- :host .ids-header-1177-pro__nav:not(.ids-header-1177-pro__nav--unresponsive) .ids-header-1177-pro__region-picker-button.ids-header-1177-pro__region-picker-button--mobile .ids-header-1177-pro__region-picker__text::before {
684
+ :host .ids-header-1177-pro__nav.ids-header-1177-pro__nav--unresponsive .ids-header-1177-pro__region-picker-button--mobile .ids-header-1177-pro__region-picker__text::before {
598
685
  font: icon;
599
686
  font-family: "Inera-Design-Icons" !important;
600
687
  display: block;
@@ -606,33 +693,15 @@ header.ids-header-1177-pro.ids-header-1177-pro--fluid .ids-header-1177-pro__cont
606
693
  top: 0;
607
694
  left: 0;
608
695
  }
609
- @media (max-width: 1024px) {
610
- :host .ids-header-1177-pro__nav:not(.ids-header-1177-pro__nav--unresponsive) .ids-header-1177-pro__region-picker-button:not(.ids-header-1177-pro__region-picker-button--mobile) {
611
- display: none;
612
- }
613
- :host .ids-header-1177-pro__nav:not(.ids-header-1177-pro__nav--unresponsive) .ids-header-1177-pro__region-picker-button.ids-header-1177-pro__region-picker-button--mobile {
614
- display: flex;
615
- margin-left: 0;
616
- gap: 0.75rem;
617
- }
618
- :host .ids-header-1177-pro__nav:not(.ids-header-1177-pro__nav--unresponsive) .ids-header-1177-pro__region-picker-button.ids-header-1177-pro__region-picker-button--mobile ::slotted([slot=region]) {
619
- max-width: 12.5rem;
620
- height: 1.5rem;
621
- }
622
- }
623
- :host .ids-header-1177-pro__nav:not(.ids-header-1177-pro__nav--unresponsive) .ids-header-1177-pro__region-picker-button:focus {
696
+ :host .ids-header-1177-pro__nav.ids-header-1177-pro__nav--unresponsive .ids-header-1177-pro__region-picker-button--mobile:focus {
624
697
  outline: var(--IDS-FOCUS__OUTLINE);
625
698
  outline-offset: -0.125rem !important;
626
699
  }
627
- :host .ids-header-1177-pro__nav:not(.ids-header-1177-pro__nav--unresponsive) .ids-header-1177-pro__region-picker-button ::slotted([slot=region]) {
628
- height: 2.5rem;
629
- max-width: 12.5rem;
630
- }
631
- :host .ids-header-1177-pro__nav:not(.ids-header-1177-pro__nav--unresponsive) .ids-header-1177-pro__region-picker-button ::slotted([slot=region-mobile]) {
700
+ :host .ids-header-1177-pro__nav.ids-header-1177-pro__nav--unresponsive .ids-header-1177-pro__region-picker-button--mobile ::slotted([slot=region-mobile]) {
632
701
  height: 2.5rem;
633
702
  max-width: 12.5rem;
634
703
  }
635
- :host .ids-header-1177-pro__nav.ids-header-1177-pro__nav--unresponsive .ids-header-1177-pro__region-picker-button {
704
+ :host .ids-header-1177-pro__nav:not(.ids-header-1177-pro__nav--unresponsive) .ids-header-1177-pro__region-picker-button {
636
705
  background: none;
637
706
  color: inherit;
638
707
  border: none;
@@ -641,7 +710,6 @@ header.ids-header-1177-pro.ids-header-1177-pro--fluid .ids-header-1177-pro__cont
641
710
  cursor: pointer;
642
711
  outline: inherit;
643
712
  border: none;
644
- background-color: none;
645
713
  font-size: 0.85rem !important;
646
714
  font-family: var(--IDS-FONT-FAMILY-BASE) !important;
647
715
  color: var(--IDS-COLOR-ACCENT-40) !important;
@@ -654,7 +722,7 @@ header.ids-header-1177-pro.ids-header-1177-pro--fluid .ids-header-1177-pro__cont
654
722
  margin-right: 1rem;
655
723
  padding: 0 2rem 0 0.5rem;
656
724
  }
657
- :host .ids-header-1177-pro__nav.ids-header-1177-pro__nav--unresponsive .ids-header-1177-pro__region-picker-button::before {
725
+ :host .ids-header-1177-pro__nav:not(.ids-header-1177-pro__nav--unresponsive) .ids-header-1177-pro__region-picker-button::before {
658
726
  left: -1.5rem;
659
727
  content: "";
660
728
  position: absolute;
@@ -665,7 +733,12 @@ header.ids-header-1177-pro.ids-header-1177-pro--fluid .ids-header-1177-pro__cont
665
733
  transform: translateY(-50%);
666
734
  background: var(--IDS-COLOR-ACCENT-30);
667
735
  }
668
- :host .ids-header-1177-pro__nav.ids-header-1177-pro__nav--unresponsive .ids-header-1177-pro__region-picker-button:after {
736
+ @media (max-width: 1024px) {
737
+ :host .ids-header-1177-pro__nav:not(.ids-header-1177-pro__nav--unresponsive) .ids-header-1177-pro__region-picker-button::before {
738
+ min-height: 2rem;
739
+ }
740
+ }
741
+ :host .ids-header-1177-pro__nav:not(.ids-header-1177-pro__nav--unresponsive) .ids-header-1177-pro__region-picker-button:after {
669
742
  font: icon;
670
743
  font-family: "Inera-Design-Icons" !important;
671
744
  display: block;
@@ -675,24 +748,64 @@ header.ids-header-1177-pro.ids-header-1177-pro--fluid .ids-header-1177-pro__cont
675
748
  color: var(--IDS-ICON__COLOR);
676
749
  right: 0.5rem;
677
750
  }
678
- :host .ids-header-1177-pro__nav.ids-header-1177-pro__nav--unresponsive .ids-header-1177-pro__region-picker-button.ids-header-1177-pro__region-picker-button--expanded:after {
751
+ :host .ids-header-1177-pro__nav:not(.ids-header-1177-pro__nav--unresponsive) .ids-header-1177-pro__region-picker-button.ids-header-1177-pro__region-picker-button--expanded:after {
679
752
  content: "\e939";
680
753
  }
681
- :host .ids-header-1177-pro__nav.ids-header-1177-pro__nav--unresponsive .ids-header-1177-pro__region-picker-button.ids-header-1177-pro__region-picker-button--mobile {
754
+ :host .ids-header-1177-pro__nav:not(.ids-header-1177-pro__nav--unresponsive) .ids-header-1177-pro__region-picker-button:focus {
755
+ outline: var(--IDS-FOCUS__OUTLINE);
756
+ outline-offset: -0.125rem !important;
757
+ }
758
+ :host .ids-header-1177-pro__nav:not(.ids-header-1177-pro__nav--unresponsive) .ids-header-1177-pro__region-picker-button ::slotted([slot=region]) {
759
+ height: 2.5rem;
760
+ max-width: 12.5rem;
761
+ }
762
+ @media (max-width: 1024px) {
763
+ :host .ids-header-1177-pro__nav:not(.ids-header-1177-pro__nav--unresponsive) .ids-header-1177-pro__region-picker-button {
764
+ display: none;
765
+ }
766
+ }
767
+ :host .ids-header-1177-pro__nav:not(.ids-header-1177-pro__nav--unresponsive) .ids-header-1177-pro__region-picker-button--mobile {
768
+ background: none;
769
+ color: inherit;
770
+ border: none;
771
+ padding: 0;
772
+ font: inherit;
773
+ cursor: pointer;
774
+ outline: inherit;
775
+ position: relative;
776
+ border: none;
682
777
  display: none;
683
- padding-right: 2rem;
778
+ padding-right: 2rem !important;
684
779
  margin-right: 0;
780
+ margin-left: 0;
781
+ min-height: 1.875rem;
782
+ align-items: center;
685
783
  }
686
- :host .ids-header-1177-pro__nav.ids-header-1177-pro__nav--unresponsive .ids-header-1177-pro__region-picker-button.ids-header-1177-pro__region-picker-button--mobile::before {
784
+ :host .ids-header-1177-pro__nav:not(.ids-header-1177-pro__nav--unresponsive) .ids-header-1177-pro__region-picker-button--mobile::before {
687
785
  display: none;
688
786
  }
689
- :host .ids-header-1177-pro__nav.ids-header-1177-pro__nav--unresponsive .ids-header-1177-pro__region-picker-button.ids-header-1177-pro__region-picker-button--mobile .ids-header-1177-pro__region-picker__text {
787
+ :host .ids-header-1177-pro__nav:not(.ids-header-1177-pro__nav--unresponsive) .ids-header-1177-pro__region-picker-button--mobile:after {
788
+ font: icon;
789
+ font-family: "Inera-Design-Icons" !important;
790
+ display: block;
791
+ position: absolute;
792
+ pointer-events: none;
793
+ content: "\e936";
794
+ color: var(--IDS-ICON__COLOR);
795
+ top: 50%;
796
+ transform: translateY(-50%);
797
+ right: 0;
798
+ }
799
+ :host .ids-header-1177-pro__nav:not(.ids-header-1177-pro__nav--unresponsive) .ids-header-1177-pro__region-picker-button--mobile.ids-header-1177-pro__region-picker-button--mobile--expanded:after {
800
+ content: "\e939";
801
+ }
802
+ :host .ids-header-1177-pro__nav:not(.ids-header-1177-pro__nav--unresponsive) .ids-header-1177-pro__region-picker-button--mobile .ids-header-1177-pro__region-picker__text {
690
803
  font-size: 0.875rem;
691
804
  display: flex;
692
805
  position: relative;
693
806
  padding-left: 1.75rem;
694
807
  }
695
- :host .ids-header-1177-pro__nav.ids-header-1177-pro__nav--unresponsive .ids-header-1177-pro__region-picker-button.ids-header-1177-pro__region-picker-button--mobile .ids-header-1177-pro__region-picker__text::before {
808
+ :host .ids-header-1177-pro__nav:not(.ids-header-1177-pro__nav--unresponsive) .ids-header-1177-pro__region-picker-button--mobile .ids-header-1177-pro__region-picker__text::before {
696
809
  font: icon;
697
810
  font-family: "Inera-Design-Icons" !important;
698
811
  display: block;
@@ -704,15 +817,16 @@ header.ids-header-1177-pro.ids-header-1177-pro--fluid .ids-header-1177-pro__cont
704
817
  top: 0;
705
818
  left: 0;
706
819
  }
707
- :host .ids-header-1177-pro__nav.ids-header-1177-pro__nav--unresponsive .ids-header-1177-pro__region-picker-button:focus {
820
+ @media (max-width: 1024px) {
821
+ :host .ids-header-1177-pro__nav:not(.ids-header-1177-pro__nav--unresponsive) .ids-header-1177-pro__region-picker-button--mobile {
822
+ display: flex;
823
+ }
824
+ }
825
+ :host .ids-header-1177-pro__nav:not(.ids-header-1177-pro__nav--unresponsive) .ids-header-1177-pro__region-picker-button--mobile:focus {
708
826
  outline: var(--IDS-FOCUS__OUTLINE);
709
827
  outline-offset: -0.125rem !important;
710
828
  }
711
- :host .ids-header-1177-pro__nav.ids-header-1177-pro__nav--unresponsive .ids-header-1177-pro__region-picker-button ::slotted([slot=region]) {
712
- height: 2.5rem;
713
- max-width: 12.5rem;
714
- }
715
- :host .ids-header-1177-pro__nav.ids-header-1177-pro__nav--unresponsive .ids-header-1177-pro__region-picker-button ::slotted([slot=region-mobile]) {
829
+ :host .ids-header-1177-pro__nav:not(.ids-header-1177-pro__nav--unresponsive) .ids-header-1177-pro__region-picker-button--mobile ::slotted([slot=region-mobile]) {
716
830
  height: 2.5rem;
717
831
  max-width: 12.5rem;
718
832
  }
@@ -130,7 +130,8 @@ header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1
130
130
  font-size: 6.125rem;
131
131
  }
132
132
  header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo a,
133
- header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo ::slotted([slot=logo]) ::slotted(a) {
133
+ header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo ::slotted([slot=logo]),
134
+ header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo ::slotted(a) {
134
135
  display: flex;
135
136
  align-items: center;
136
137
  width: 6.438rem;
@@ -139,14 +140,14 @@ header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1
139
140
  color: var(--IDS-ICON__COLOR);
140
141
  }
141
142
  header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo a:focus,
142
- header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo ::slotted([slot=logo]) ::slotted(a):focus {
143
+ header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo ::slotted([slot=logo]):focus,
144
+ header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo ::slotted(a):focus {
143
145
  outline: var(--IDS-FOCUS__OUTLINE);
144
146
  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
145
147
  }
146
148
  header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo a:focus,
147
149
  header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo ::slotted([slot=logo]:focus),
148
150
  header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo ::slotted(a:focus) {
149
- display: block;
150
151
  outline: var(--IDS-FOCUS__OUTLINE) !important;
151
152
  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET);
152
153
  }
@@ -160,7 +161,8 @@ header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1
160
161
  font-size: 2.5rem;
161
162
  }
162
163
  header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo a,
163
- header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo ::slotted([slot=logo]) {
164
+ header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo ::slotted([slot=logo]),
165
+ header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo ::slotted(a) {
164
166
  font-size: 2.5rem;
165
167
  }
166
168
  }
@@ -290,7 +292,8 @@ header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pr
290
292
  font-size: 6.125rem;
291
293
  }
292
294
  header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo a,
293
- header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo ::slotted([slot=logo]) ::slotted(a) {
295
+ header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo ::slotted([slot=logo]),
296
+ header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo ::slotted(a) {
294
297
  display: flex;
295
298
  align-items: center;
296
299
  width: 6.438rem;
@@ -299,14 +302,14 @@ header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pr
299
302
  color: var(--IDS-ICON__COLOR);
300
303
  }
301
304
  header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo a:focus,
302
- header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo ::slotted([slot=logo]) ::slotted(a):focus {
305
+ header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo ::slotted([slot=logo]):focus,
306
+ header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo ::slotted(a):focus {
303
307
  outline: var(--IDS-FOCUS__OUTLINE);
304
308
  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
305
309
  }
306
310
  header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo a:focus,
307
311
  header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo ::slotted([slot=logo]:focus),
308
312
  header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo ::slotted(a:focus) {
309
- display: block;
310
313
  outline: var(--IDS-FOCUS__OUTLINE) !important;
311
314
  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET);
312
315
  }
@@ -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-inera-item{align-items:center;display:none;margin-left:.5rem;padding:1rem .5rem;position:relative}.ids-header-inera-item.ids-header-inera-item--mobile{display:flex}.ids-header-inera-item .ids-header-inera-item__text{color:var(--IDS-COLOR-PRIMARY-30)!important;display:none;font-family:var(--IDS-FONT-FAMILY-HEADING)!important;font-size:1rem!important;font-weight:600!important;margin-left:.5rem;text-decoration:none}.ids-header-inera-item .ids-header-inera-item__icon{display:flex}.ids-header-inera-item .ids-header-inera-item__icon ::slotted([class^=ids-icon-]),.ids-header-inera-item .ids-header-inera-item__icon [class^=ids-icon-]{color:var(--IDS-COLOR-PRIMARY-40);font-size:1.5rem}.ids-header-inera-item ::slotted(:not([slot=icon])),.ids-header-inera-item a,.ids-header-inera-item button{bottom:0;cursor:pointer!important;left:0;opacity:0;position:absolute;right:0;top:0;z-index:1}.ids-header-inera-item:focus-within{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:-.125rem}@media (min-width:1024px){.ids-header-inera-item{display:flex;margin-left:1rem}.ids-header-inera-item .ids-header-inera-item__text{display:flex;font-size:1rem}.ids-header-inera-item.ids-header-inera-item__separator{margin-left:2rem}.ids-header-inera-item.ids-header-inera-item__separator:after{background-color:var(--IDS-COLOR-NEUTRAL-90);border-left:.688rem solid var(--IDS-COLOR-NEUTRAL-100);border-right:.688rem solid var(--IDS-COLOR-NEUTRAL-100);bottom:0;content:\"\";left:-2.063rem;position:absolute;top:0;width:.063rem}}@media (max-width:1024px){.ids-header-inera-item.ids-header-inera-item--unresponsive,.ids-header-inera-item.ids-header-inera-item--unresponsive .ids-header-inera-item__text{display:flex}}";
3
+ var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-header-inera-item{align-items:center;background:none;border:0;cursor:pointer;display:none;line-height:1.5rem;margin-left:.5rem;padding:1rem .5rem;position:relative}.ids-header-inera-item.ids-header-inera-item--mobile{display:flex}.ids-header-inera-item .ids-header-inera-item__text{color:var(--IDS-COLOR-PRIMARY-30)!important;display:none;font-family:var(--IDS-FONT-FAMILY-HEADING)!important;font-size:1rem!important;font-weight:600!important;margin-left:.5rem;text-decoration:none}.ids-header-inera-item .ids-header-inera-item__icon{display:flex}.ids-header-inera-item .ids-header-inera-item__icon ::slotted([class^=ids-icon-]),.ids-header-inera-item .ids-header-inera-item__icon [class^=ids-icon-]{color:var(--IDS-COLOR-PRIMARY-40);font-size:1.5rem}.ids-header-inera-item:hover .ids-header-inera-item__icon [class^=ids-icon-]{color:var(--IDS-COLOR-PRIMARY-30)!important}.ids-header-inera-item ::slotted(:not([slot=icon])),.ids-header-inera-item a,.ids-header-inera-item button{bottom:0;cursor:pointer!important;left:0;opacity:0;position:absolute;right:0;top:0;z-index:1}.ids-header-inera-item:focus-within{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:-.125rem}@media (min-width:1024px){.ids-header-inera-item{display:flex;margin-left:1rem;padding-left:0}.ids-header-inera-item .ids-header-inera-item__text{display:flex;font-size:1rem}.ids-header-inera-item.ids-header-inera-item__separator{margin-left:1.5rem}.ids-header-inera-item.ids-header-inera-item__separator:before{background-color:var(--IDS-COLOR-NEUTRAL-90);bottom:0;content:\"\";height:100%;left:-1rem;position:absolute;top:0;width:.063rem}}@media (max-width:1024px){.ids-header-inera-item.ids-header-inera-item--unresponsive,.ids-header-inera-item.ids-header-inera-item--unresponsive .ids-header-inera-item__text{display:flex}}";
4
4
 
5
5
  var headerIneraItemLit = css`${unsafeCSS(css_248z)}`;
6
6