@inera/ids-design 8.2.0 → 9.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (385) hide show
  1. package/components/accordion/accordion-lit.js +1 -1
  2. package/components/accordion/accordion-shadow-lit.js +9 -0
  3. package/components/accordion/accordion-shadow.css +115 -0
  4. package/components/accordion/accordion.css +10 -16
  5. package/components/action-link/action-link-lit.js +1 -1
  6. package/components/{carousel/carousel-item-lit.js → action-link/action-link-shadow-lit.js} +3 -3
  7. package/components/{carousel/carousel-item.css → action-link/action-link-shadow.css} +43 -51
  8. package/components/action-link/action-link.css +5 -10
  9. package/components/alert/alert-lit.js +1 -1
  10. package/components/alert/alert-shadow-lit.js +7 -0
  11. package/components/alert/alert-shadow.css +63 -0
  12. package/components/alert/alert.css +27 -20
  13. package/components/badge/badge-lit.js +1 -1
  14. package/components/badge/badge.css +1 -1
  15. package/components/box-link/box-link-lit.js +1 -1
  16. package/components/box-link/box-link-shadow-lit.js +7 -0
  17. package/components/box-link/box-link-shadow.css +109 -0
  18. package/components/box-link/box-link.css +16 -28
  19. package/components/breadcrumbs/breadcrumbs-lit.js +1 -1
  20. package/components/breadcrumbs/breadcrumbs-shadow-lit.js +7 -0
  21. package/components/breadcrumbs/breadcrumbs-shadow.css +35 -0
  22. package/components/breadcrumbs/breadcrumbs.css +7 -15
  23. package/components/button-group/button-group-lit.js +1 -1
  24. package/components/button-group/button-group.css +2 -2
  25. package/components/card/card-lit.js +1 -1
  26. package/components/card/card-shadow-lit.js +9 -0
  27. package/components/card/card-shadow.css +30 -0
  28. package/components/card/card.css +58 -65
  29. package/components/carousel/carousel-lit.js +1 -1
  30. package/components/carousel/carousel-shadow-lit.js +7 -0
  31. package/components/carousel/carousel-shadow.css +56 -0
  32. package/components/carousel/carousel.css +110 -33
  33. package/components/data-pagination/data-pagination-lit.js +7 -0
  34. package/components/data-pagination/data-pagination-shadow-lit.d.ts +2 -0
  35. package/components/data-pagination/data-pagination-shadow-lit.js +7 -0
  36. package/components/data-pagination/data-pagination-shadow.css +251 -0
  37. package/components/{pagination/data-pagination → data-pagination}/data-pagination.css +36 -77
  38. package/components/data-table/data-table-lit.js +1 -1
  39. package/components/data-table/data-table.css +48 -40
  40. package/components/date-label/date-label-lit.js +1 -1
  41. package/components/date-label/date-label.css +28 -35
  42. package/components/dialog/dialog-lit.js +1 -1
  43. package/components/dialog/dialog-shadow-lit.d.ts +2 -0
  44. package/components/dialog/dialog-shadow-lit.js +7 -0
  45. package/components/dialog/dialog-shadow.css +27 -0
  46. package/components/dialog/dialog.css +39 -32
  47. package/components/dropdown/dropdown-lit.js +1 -1
  48. package/components/dropdown/dropdown-shadow-lit.d.ts +2 -0
  49. package/components/dropdown/dropdown-shadow-lit.js +9 -0
  50. package/components/dropdown/dropdown-shadow.css +90 -0
  51. package/components/dropdown/dropdown.css +56 -66
  52. package/components/footer-1177/footer-1177-lit.js +1 -1
  53. package/components/footer-1177/footer-1177-shadow-lit.d.ts +2 -0
  54. package/components/footer-1177/footer-1177-shadow-lit.js +7 -0
  55. package/components/footer-1177/footer-1177-shadow.css +61 -0
  56. package/components/footer-1177/footer-1177.css +20 -20
  57. package/components/footer-1177-admin/footer-1177-admin-lit.js +1 -1
  58. package/components/footer-1177-admin/footer-1177-admin-shadow-lit.d.ts +2 -0
  59. package/components/footer-1177-admin/footer-1177-admin-shadow-lit.js +7 -0
  60. package/components/footer-1177-admin/footer-1177-admin-shadow.css +113 -0
  61. package/components/footer-1177-admin/footer-1177-admin.css +21 -33
  62. package/components/footer-1177-pro/footer-1177-pro-lit.js +1 -1
  63. package/components/footer-1177-pro/footer-1177-pro-shadow-lit.d.ts +2 -0
  64. package/components/footer-1177-pro/footer-1177-pro-shadow-lit.js +7 -0
  65. package/components/footer-1177-pro/footer-1177-pro-shadow.css +125 -0
  66. package/components/footer-1177-pro/footer-1177-pro.css +26 -32
  67. package/components/footer-inera/footer-inera-lit.js +1 -1
  68. package/components/footer-inera/footer-inera-shadow-lit.d.ts +2 -0
  69. package/components/footer-inera/footer-inera-shadow-lit.js +7 -0
  70. package/components/footer-inera/footer-inera-shadow.css +113 -0
  71. package/components/footer-inera/footer-inera.css +20 -18
  72. package/components/footer-inera-admin/footer-inera-admin-lit.js +1 -1
  73. package/components/footer-inera-admin/footer-inera-admin-shadow-lit.d.ts +2 -0
  74. package/components/footer-inera-admin/footer-inera-admin-shadow-lit.js +7 -0
  75. package/components/footer-inera-admin/footer-inera-admin-shadow.css +113 -0
  76. package/components/footer-inera-admin/footer-inera-admin.css +21 -33
  77. package/components/form/darkmode-toggle/darkmode-toggle-lit.d.ts +2 -0
  78. package/components/form/darkmode-toggle/darkmode-toggle-lit.js +9 -0
  79. package/components/form/darkmode-toggle/darkmode-toggle.css +179 -0
  80. package/components/form/datepicker/datepicker-lit.js +1 -1
  81. package/components/form/datepicker/datepicker.css +9 -7
  82. package/components/form/error-message/error-message-lit.js +1 -1
  83. package/components/form/error-message/error-message.css +1 -2
  84. package/components/form/group/group-lit.js +1 -1
  85. package/components/form/group/group.css +37 -68
  86. package/components/form/range/range-lit.js +1 -1
  87. package/components/form/range/range.css +9 -10
  88. package/components/form/select-multiple/select-multiple-lit.js +1 -1
  89. package/components/form/select-multiple/select-multiple.css +27 -31
  90. package/components/form/spinner/spinner-lit.js +1 -1
  91. package/components/form/spinner/spinner.css +6 -3
  92. package/components/global-alert/global-alert-lit.js +1 -1
  93. package/components/global-alert/global-alert.css +15 -15
  94. package/components/grid/column/column-lit.js +1 -1
  95. package/components/grid/column/column.css +203 -204
  96. package/components/grid/container/container-lit.js +1 -1
  97. package/components/grid/container/container.css +2 -5
  98. package/components/grid/row/row-lit.js +1 -1
  99. package/components/grid/row/row.css +11 -32
  100. package/components/grid-layout/grid-column/grid-column-lit.d.ts +2 -0
  101. package/components/grid-layout/grid-column/grid-column-lit.js +7 -0
  102. package/components/grid-layout/grid-column/grid-column.css +286 -0
  103. package/components/grid-layout/grid-container/grid-container-lit.d.ts +2 -0
  104. package/components/grid-layout/grid-container/grid-container-lit.js +7 -0
  105. package/components/grid-layout/grid-container/grid-container.css +11 -0
  106. package/components/grid-layout/grid-row/grid-row-lit.d.ts +2 -0
  107. package/components/grid-layout/grid-row/grid-row-lit.js +7 -0
  108. package/components/grid-layout/grid-row/grid-row.css +53 -0
  109. package/components/header-1177/composite-header-1177.css +247 -1106
  110. package/components/header-1177/header-1177-avatar-lit.js +1 -1
  111. package/components/header-1177/header-1177-avatar-shadow-lit.d.ts +2 -0
  112. package/components/header-1177/header-1177-avatar-shadow-lit.js +7 -0
  113. package/components/header-1177/header-1177-avatar-shadow.css +86 -0
  114. package/components/header-1177/header-1177-avatar.css +50 -390
  115. package/components/header-1177/header-1177-item-lit.js +1 -1
  116. package/components/header-1177/header-1177-item-shadow-lit.d.ts +2 -0
  117. package/components/header-1177/header-1177-item-shadow-lit.js +7 -0
  118. package/components/header-1177/header-1177-item-shadow.css +230 -0
  119. package/components/header-1177/header-1177-item.css +89 -323
  120. package/components/header-1177/header-1177-lit.js +1 -1
  121. package/components/header-1177/header-1177-menu-mobile-lit.js +1 -1
  122. package/components/header-1177/header-1177-menu-mobile.css +39 -48
  123. package/components/header-1177/header-1177-nav-item-lit.js +1 -1
  124. package/components/header-1177/header-1177-nav-item-mobile-lit.js +1 -1
  125. package/components/header-1177/header-1177-nav-item-mobile-shadow-lit.d.ts +2 -0
  126. package/components/header-1177/header-1177-nav-item-mobile-shadow-lit.js +7 -0
  127. package/components/header-1177/header-1177-nav-item-mobile-shadow.css +87 -0
  128. package/components/header-1177/header-1177-nav-item-mobile.css +60 -147
  129. package/components/header-1177/header-1177-nav-item-shadow-lit.d.ts +2 -0
  130. package/components/header-1177/header-1177-nav-item-shadow-lit.js +7 -0
  131. package/components/header-1177/header-1177-nav-item-shadow.css +98 -0
  132. package/components/header-1177/header-1177-nav-item.css +51 -28
  133. package/components/header-1177/header-1177-nav-lit.js +1 -1
  134. package/components/header-1177/header-1177-nav.css +16 -100
  135. package/components/header-1177/header-1177-region-picker-lit.js +1 -1
  136. package/components/header-1177/header-1177-region-picker-mobile-lit.js +1 -1
  137. package/components/header-1177/header-1177-region-picker-mobile.css +55 -17
  138. package/components/header-1177/header-1177-region-picker.css +52 -13
  139. package/components/header-1177/header-1177-shadow-lit.d.ts +2 -0
  140. package/components/header-1177/header-1177-shadow-lit.js +7 -0
  141. package/components/header-1177/header-1177-shadow.css +102 -0
  142. package/components/header-1177/header-1177.css +53 -18
  143. package/components/header-1177-admin/composite-header-1177-admin.css +1318 -0
  144. package/components/header-1177-admin/header-1177-admin-avatar-lit.js +1 -1
  145. package/components/header-1177-admin/header-1177-admin-avatar-mobile-lit.js +1 -1
  146. package/components/header-1177-admin/header-1177-admin-avatar-mobile-shadow-lit.d.ts +2 -0
  147. package/components/header-1177-admin/header-1177-admin-avatar-mobile-shadow-lit.js +7 -0
  148. package/components/header-1177-admin/header-1177-admin-avatar-mobile-shadow.css +37 -0
  149. package/components/header-1177-admin/header-1177-admin-avatar-mobile.css +15 -22
  150. package/components/header-1177-admin/header-1177-admin-avatar-shadow-lit.d.ts +2 -0
  151. package/components/header-1177-admin/header-1177-admin-avatar-shadow-lit.js +7 -0
  152. package/components/header-1177-admin/header-1177-admin-avatar-shadow.css +23 -0
  153. package/components/header-1177-admin/header-1177-admin-avatar.css +34 -291
  154. package/components/header-1177-admin/header-1177-admin-item-lit.js +1 -1
  155. package/components/header-1177-admin/header-1177-admin-item-shadow-lit.d.ts +2 -0
  156. package/components/header-1177-admin/header-1177-admin-item-shadow-lit.js +7 -0
  157. package/components/header-1177-admin/header-1177-admin-item-shadow.css +158 -0
  158. package/components/header-1177-admin/header-1177-admin-item.css +28 -247
  159. package/components/header-1177-admin/header-1177-admin-lit.js +1 -1
  160. package/components/header-1177-admin/header-1177-admin-menu-mobile-lit.js +1 -1
  161. package/components/header-1177-admin/header-1177-admin-menu-mobile.css +39 -46
  162. package/components/header-1177-admin/header-1177-admin-nav-item-lit.js +1 -1
  163. package/components/header-1177-admin/header-1177-admin-nav-item-mobile-lit.d.ts +2 -0
  164. package/components/header-1177-admin/header-1177-admin-nav-item-mobile-lit.js +7 -0
  165. package/components/header-1177-admin/header-1177-admin-nav-item-mobile-shadow-lit.d.ts +2 -0
  166. package/components/header-1177-admin/header-1177-admin-nav-item-mobile-shadow-lit.js +7 -0
  167. package/components/header-1177-admin/header-1177-admin-nav-item-mobile-shadow.css +35 -0
  168. package/components/header-1177-admin/header-1177-admin-nav-item-mobile.css +76 -0
  169. package/components/header-1177-admin/header-1177-admin-nav-item-shadow-lit.d.ts +2 -0
  170. package/components/header-1177-admin/header-1177-admin-nav-item-shadow-lit.js +7 -0
  171. package/components/header-1177-admin/header-1177-admin-nav-item-shadow.css +47 -0
  172. package/components/header-1177-admin/header-1177-admin-nav-item.css +9 -22
  173. package/components/header-1177-admin/header-1177-admin-nav-lit.js +1 -1
  174. package/components/header-1177-admin/header-1177-admin-nav.css +9 -64
  175. package/components/header-1177-admin/header-1177-admin-shadow-lit.d.ts +2 -0
  176. package/components/header-1177-admin/header-1177-admin-shadow-lit.js +7 -0
  177. package/components/header-1177-admin/header-1177-admin-shadow.css +33 -0
  178. package/components/header-1177-admin/header-1177-admin.css +15 -31
  179. package/components/header-1177-pro/composite-header-1177-pro.css +1506 -0
  180. package/components/header-1177-pro/header-1177-pro-avatar-lit.js +1 -1
  181. package/components/header-1177-pro/header-1177-pro-avatar-mobile-lit.js +1 -1
  182. package/components/header-1177-pro/header-1177-pro-avatar-mobile-shadow-lit.d.ts +2 -0
  183. package/components/header-1177-pro/header-1177-pro-avatar-mobile-shadow-lit.js +7 -0
  184. package/components/header-1177-pro/header-1177-pro-avatar-mobile-shadow.css +38 -0
  185. package/components/header-1177-pro/header-1177-pro-avatar-mobile.css +26 -31
  186. package/components/header-1177-pro/header-1177-pro-avatar-shadow-lit.d.ts +2 -0
  187. package/components/header-1177-pro/header-1177-pro-avatar-shadow-lit.js +7 -0
  188. package/components/header-1177-pro/header-1177-pro-avatar-shadow.css +23 -0
  189. package/components/header-1177-pro/header-1177-pro-avatar.css +34 -279
  190. package/components/header-1177-pro/header-1177-pro-item-lit.js +1 -1
  191. package/components/header-1177-pro/header-1177-pro-item-shadow-lit.d.ts +2 -0
  192. package/components/header-1177-pro/header-1177-pro-item-shadow-lit.js +7 -0
  193. package/components/header-1177-pro/header-1177-pro-item-shadow.css +169 -0
  194. package/components/header-1177-pro/header-1177-pro-item.css +45 -286
  195. package/components/header-1177-pro/header-1177-pro-lit.js +1 -1
  196. package/components/header-1177-pro/header-1177-pro-menu-mobile-lit.js +1 -1
  197. package/components/header-1177-pro/header-1177-pro-menu-mobile.css +39 -47
  198. package/components/header-1177-pro/header-1177-pro-nav-item-lit.js +1 -1
  199. package/components/header-1177-pro/header-1177-pro-nav-item-mobile-lit.d.ts +2 -0
  200. package/components/header-1177-pro/header-1177-pro-nav-item-mobile-lit.js +7 -0
  201. package/components/header-1177-pro/header-1177-pro-nav-item-mobile-shadow-lit.d.ts +2 -0
  202. package/components/header-1177-pro/header-1177-pro-nav-item-mobile-shadow-lit.js +7 -0
  203. package/components/header-1177-pro/header-1177-pro-nav-item-mobile-shadow.css +35 -0
  204. package/components/header-1177-pro/header-1177-pro-nav-item-mobile.css +76 -0
  205. package/components/header-1177-pro/header-1177-pro-nav-item-shadow-lit.d.ts +2 -0
  206. package/components/header-1177-pro/header-1177-pro-nav-item-shadow-lit.js +7 -0
  207. package/components/header-1177-pro/header-1177-pro-nav-item-shadow.css +67 -0
  208. package/components/header-1177-pro/header-1177-pro-nav-item.css +9 -26
  209. package/components/header-1177-pro/header-1177-pro-nav-lit.js +1 -1
  210. package/components/header-1177-pro/header-1177-pro-nav.css +15 -97
  211. package/components/header-1177-pro/header-1177-pro-region-picker-lit.js +1 -1
  212. package/components/header-1177-pro/header-1177-pro-region-picker-mobile-lit.js +1 -1
  213. package/components/header-1177-pro/header-1177-pro-region-picker-mobile.css +4 -6
  214. package/components/header-1177-pro/header-1177-pro-region-picker.css +1 -2
  215. package/components/header-1177-pro/header-1177-pro-shadow-lit.d.ts +2 -0
  216. package/components/header-1177-pro/header-1177-pro-shadow-lit.js +7 -0
  217. package/components/header-1177-pro/header-1177-pro-shadow.css +69 -0
  218. package/components/header-1177-pro/header-1177-pro.css +9 -24
  219. package/components/header-inera/composite-header-inera.css +633 -0
  220. package/components/header-inera/header-inera-item-lit.js +1 -1
  221. package/components/header-inera/header-inera-item-shadow-lit.d.ts +2 -0
  222. package/components/header-inera/header-inera-item-shadow-lit.js +7 -0
  223. package/components/header-inera/header-inera-item-shadow.css +100 -0
  224. package/components/header-inera/header-inera-item.css +52 -18
  225. package/components/header-inera/header-inera-lit.js +1 -1
  226. package/components/header-inera/header-inera-menu-mobile-lit.js +1 -1
  227. package/components/header-inera/header-inera-menu-mobile.css +9 -11
  228. package/components/header-inera/header-inera-nav-item-lit.js +1 -1
  229. package/components/header-inera/header-inera-nav-item-shadow-lit.d.ts +2 -0
  230. package/components/header-inera/header-inera-nav-item-shadow-lit.js +7 -0
  231. package/components/header-inera/header-inera-nav-item-shadow.css +46 -0
  232. package/components/header-inera/header-inera-nav-item.css +9 -21
  233. package/components/header-inera/header-inera-nav-lit.js +1 -1
  234. package/components/header-inera/header-inera-nav.css +8 -12
  235. package/components/header-inera/header-inera-shadow-lit.d.ts +2 -0
  236. package/components/header-inera/header-inera-shadow-lit.js +7 -0
  237. package/components/header-inera/header-inera-shadow.css +48 -0
  238. package/components/header-inera/header-inera.css +52 -44
  239. package/components/header-inera-admin/composite-header-inera-admin.css +191 -377
  240. package/components/header-inera-admin/header-inera-admin-avatar-lit.js +1 -1
  241. package/components/header-inera-admin/header-inera-admin-avatar-mobile-lit.js +1 -1
  242. package/components/header-inera-admin/header-inera-admin-avatar-mobile-shadow-lit.d.ts +2 -0
  243. package/components/header-inera-admin/header-inera-admin-avatar-mobile-shadow-lit.js +7 -0
  244. package/components/header-inera-admin/header-inera-admin-avatar-mobile-shadow.css +20 -0
  245. package/components/header-inera-admin/header-inera-admin-avatar-mobile.css +11 -18
  246. package/components/header-inera-admin/header-inera-admin-avatar-shadow-lit.d.ts +2 -0
  247. package/components/header-inera-admin/header-inera-admin-avatar-shadow-lit.js +7 -0
  248. package/components/header-inera-admin/header-inera-admin-avatar-shadow.css +8 -0
  249. package/components/header-inera-admin/header-inera-admin-avatar.css +32 -269
  250. package/components/header-inera-admin/header-inera-admin-item-lit.js +1 -1
  251. package/components/header-inera-admin/header-inera-admin-item-shadow-lit.d.ts +2 -0
  252. package/components/header-inera-admin/header-inera-admin-item-shadow-lit.js +7 -0
  253. package/components/header-inera-admin/header-inera-admin-item-shadow.css +83 -0
  254. package/components/header-inera-admin/header-inera-admin-item.css +72 -36
  255. package/components/header-inera-admin/header-inera-admin-lit.js +1 -1
  256. package/components/header-inera-admin/header-inera-admin-menu-mobile-lit.js +1 -1
  257. package/components/header-inera-admin/header-inera-admin-menu-mobile.css +9 -11
  258. package/components/header-inera-admin/header-inera-admin-nav-item-lit.js +1 -1
  259. package/components/header-inera-admin/header-inera-admin-nav-item-mobile-lit.d.ts +2 -0
  260. package/components/header-inera-admin/header-inera-admin-nav-item-mobile-lit.js +7 -0
  261. package/components/header-inera-admin/header-inera-admin-nav-item-mobile-shadow-lit.d.ts +2 -0
  262. package/components/header-inera-admin/header-inera-admin-nav-item-mobile-shadow-lit.js +7 -0
  263. package/components/header-inera-admin/header-inera-admin-nav-item-mobile-shadow.css +20 -0
  264. package/components/header-inera-admin/header-inera-admin-nav-item-mobile.css +61 -0
  265. package/components/header-inera-admin/header-inera-admin-nav-item-shadow-lit.d.ts +2 -0
  266. package/components/header-inera-admin/header-inera-admin-nav-item-shadow-lit.js +7 -0
  267. package/components/header-inera-admin/header-inera-admin-nav-item-shadow.css +31 -0
  268. package/components/header-inera-admin/header-inera-admin-nav-item.css +16 -29
  269. package/components/header-inera-admin/header-inera-admin-nav-lit.js +1 -1
  270. package/components/header-inera-admin/header-inera-admin-nav.css +3 -7
  271. package/components/header-inera-admin/header-inera-admin-shadow-lit.d.ts +2 -0
  272. package/components/header-inera-admin/header-inera-admin-shadow-lit.js +7 -0
  273. package/components/header-inera-admin/header-inera-admin-shadow.css +43 -0
  274. package/components/header-inera-admin/header-inera-admin.css +4 -13
  275. package/components/header-patient/header-patient-lit.js +1 -1
  276. package/components/header-patient/header-patient-shadow-lit.d.ts +2 -0
  277. package/components/header-patient/header-patient-shadow-lit.js +7 -0
  278. package/components/header-patient/header-patient-shadow.css +4 -0
  279. package/components/header-patient/header-patient.css +8 -14
  280. package/components/list-pagination/list-pagination-lit.d.ts +2 -0
  281. package/components/list-pagination/list-pagination-lit.js +9 -0
  282. package/components/list-pagination/list-pagination-shadow-lit.d.ts +2 -0
  283. package/components/list-pagination/list-pagination-shadow-lit.js +9 -0
  284. package/components/list-pagination/list-pagination-shadow.css +125 -0
  285. package/components/{pagination/list-pagination → list-pagination}/list-pagination.css +88 -36
  286. package/components/mobile-menu/mobile-menu-lit.js +1 -1
  287. package/components/mobile-menu/mobile-menu-shadow-lit.d.ts +2 -0
  288. package/components/mobile-menu/mobile-menu-shadow-lit.js +7 -0
  289. package/components/mobile-menu/mobile-menu-shadow.css +170 -0
  290. package/components/mobile-menu/mobile-menu.css +26 -79
  291. package/components/navigation-content/navigation-content-lit.d.ts +2 -0
  292. package/components/navigation-content/navigation-content-lit.js +7 -0
  293. package/components/navigation-content/navigation-content-shadow-lit.d.ts +2 -0
  294. package/components/navigation-content/navigation-content-shadow-lit.js +7 -0
  295. package/components/navigation-content/navigation-content-shadow.css +6 -0
  296. package/components/{navigation/content → navigation-content}/navigation-content.css +24 -3
  297. package/components/navigation-local/navigation-local-lit.d.ts +2 -0
  298. package/components/navigation-local/navigation-local-lit.js +7 -0
  299. package/components/navigation-local/navigation-local-shadow-lit.d.ts +2 -0
  300. package/components/navigation-local/navigation-local-shadow-lit.js +7 -0
  301. package/components/navigation-local/navigation-local-shadow.css +37 -0
  302. package/components/{navigation/local → navigation-local}/navigation-local.css +11 -17
  303. package/components/notification-badge/notification-badge-lit.js +1 -1
  304. package/components/notification-badge/notification-badge-shadow-lit.d.ts +2 -0
  305. package/components/notification-badge/notification-badge-shadow-lit.js +7 -0
  306. package/components/notification-badge/notification-badge-shadow.css +10 -0
  307. package/components/notification-badge/notification-badge.css +2 -4
  308. package/components/popover/popover-lit.js +1 -1
  309. package/components/popover/popover-shadow-lit.d.ts +2 -0
  310. package/components/popover/popover-shadow-lit.js +7 -0
  311. package/components/popover/popover-shadow.css +73 -0
  312. package/components/popover/popover.css +389 -1
  313. package/components/progressbar/progressbar-lit.js +1 -1
  314. package/components/progressbar/progressbar.css +2 -2
  315. package/components/puff-list/puff-list-lit.js +1 -1
  316. package/components/puff-list/puff-list-shadow-lit.d.ts +2 -0
  317. package/components/puff-list/puff-list-shadow-lit.js +7 -0
  318. package/components/puff-list/puff-list-shadow.css +110 -0
  319. package/components/puff-list/puff-list.css +32 -26
  320. package/components/region-icon/region-icon-lit.js +1 -1
  321. package/components/region-icon/region-icon.css +1 -1
  322. package/components/side-menu/side-menu-lit.js +1 -1
  323. package/components/side-menu/side-menu-shadow-lit.d.ts +2 -0
  324. package/components/side-menu/side-menu-shadow-lit.js +7 -0
  325. package/components/side-menu/side-menu-shadow.css +79 -0
  326. package/components/side-menu/side-menu.css +42 -44
  327. package/components/side-panel/side-panel-lit.js +1 -1
  328. package/components/side-panel/side-panel-shadow-lit.d.ts +2 -0
  329. package/components/side-panel/side-panel-shadow-lit.js +7 -0
  330. package/components/side-panel/side-panel-shadow.css +4 -0
  331. package/components/side-panel/side-panel.css +41 -14
  332. package/components/stepper/stepper-lit.js +1 -1
  333. package/components/stepper/stepper-shadow-lit.d.ts +2 -0
  334. package/components/stepper/stepper-shadow-lit.js +7 -0
  335. package/components/stepper/stepper-shadow.css +63 -0
  336. package/components/stepper/stepper.css +9 -21
  337. package/components/table/table.css +12 -6
  338. package/components/tabs/tab-panel-shadow-lit.d.ts +2 -0
  339. package/components/tabs/tab-panel-shadow-lit.js +7 -0
  340. package/components/tabs/tab-panel-shadow.css +3 -0
  341. package/components/tabs/tab-shadow-lit.d.ts +2 -0
  342. package/components/tabs/tab-shadow-lit.js +7 -0
  343. package/components/tabs/tab-shadow.css +33 -0
  344. package/components/tabs/tabs-lit.js +3 -3
  345. package/components/tabs/tabs.css +155 -1
  346. package/components/tag/tag-lit.js +1 -1
  347. package/components/tag/tag-shadow-lit.d.ts +2 -0
  348. package/components/tag/tag-shadow-lit.js +7 -0
  349. package/components/tag/tag-shadow.css +58 -0
  350. package/components/tag/tag.css +63 -12
  351. package/components/tooltip/tooltip-lit.js +1 -1
  352. package/components/tooltip/tooltip.css +1 -0
  353. package/global/global.css +10072 -2466
  354. package/global/icons/Inera-Design-Icons.eot +0 -0
  355. package/global/icons/Inera-Design-Icons.svg +10 -1
  356. package/global/icons/Inera-Design-Icons.ttf +0 -0
  357. package/global/icons/Inera-Design-Icons.woff +0 -0
  358. package/global/util/util.css +51 -2517
  359. package/layout/breakpoints.scss +18 -0
  360. package/package.json +1 -1
  361. package/styles.css +10434 -2681
  362. package/tokens/component-tokens.scss +5 -4
  363. package/tokens/themes/1177-admin-tokens.css +115 -76
  364. package/tokens/themes/1177-pro-tokens.css +112 -73
  365. package/tokens/themes/1177-tokens.css +112 -73
  366. package/tokens/themes/inera-admin-tokens.css +101 -62
  367. package/tokens/themes/inera-tokens.css +98 -59
  368. package/components/navigation/content/navigation-content-lit.js +0 -7
  369. package/components/navigation/local/navigation-local-lit.js +0 -7
  370. package/components/pagination/data-pagination/data-pagination-lit.js +0 -7
  371. package/components/pagination/list-pagination/list-pagination-lit.js +0 -9
  372. package/components/popover/popover-content-lit.js +0 -7
  373. package/components/popover/popover-content.css +0 -401
  374. package/components/tabs/tab-lit.js +0 -7
  375. package/components/tabs/tab-panel-lit.js +0 -7
  376. package/components/tabs/tab-panel.css +0 -21
  377. package/components/tabs/tab.css +0 -142
  378. /package/components/{carousel/carousel-item-lit.d.ts → accordion/accordion-shadow-lit.d.ts} +0 -0
  379. /package/components/{navigation/content/navigation-content-lit.d.ts → action-link/action-link-shadow-lit.d.ts} +0 -0
  380. /package/components/{navigation/local/navigation-local-lit.d.ts → alert/alert-shadow-lit.d.ts} +0 -0
  381. /package/components/{pagination/data-pagination/data-pagination-lit.d.ts → box-link/box-link-shadow-lit.d.ts} +0 -0
  382. /package/components/{pagination/list-pagination/list-pagination-lit.d.ts → breadcrumbs/breadcrumbs-shadow-lit.d.ts} +0 -0
  383. /package/components/{popover/popover-content-lit.d.ts → card/card-shadow-lit.d.ts} +0 -0
  384. /package/components/{tabs/tab-lit.d.ts → carousel/carousel-shadow-lit.d.ts} +0 -0
  385. /package/components/{tabs/tab-panel-lit.d.ts → data-pagination/data-pagination-lit.d.ts} +0 -0
package/components/header-1177/composite-header-1177.css CHANGED
@@ -13,7 +13,7 @@
13
13
  /*******
14
14
  * A11Y
15
15
  ********/
16
- @media (max-width: 1023px) {
16
+ @media (max-width: 639px) {
17
17
  .ids-desktop {
18
18
  display: none !important;
19
19
  }
@@ -25,11 +25,53 @@
25
25
  }
26
26
  }
27
27
 
28
+ .ids--light, .ids--dark {
29
+ --IDS-FONT-FAMILY-BASE: "Open Sans";
30
+ --IDS-FONT-FAMILY-HEADING: "Inter";
31
+ --IDS-FONT-COLOR: var(--ids-color-surface-text-on-default);
32
+ --IDS-HEADING-XXL__MARGIN-BOTTOM: 1.875rem;
33
+ --IDS-HEADING-XL__MARGIN-BOTTOM: 1.875rem;
34
+ --IDS-HEADING-L__MARGIN-BOTTOM: 1.875rem;
35
+ --IDS-PAGE-LIST__COLOR: var(--ids-color-brand-text-primary);
36
+ --IDS-PAGE-LIST__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
37
+ --IDS-PAGE-LIST__FONT-SIZE: 1.25rem;
38
+ --IDS-PAGE-LIST__LINE-HEIGHT: 1.5rem;
39
+ --IDS-PAGE-LIST__FONT-WEIGHT: 700;
40
+ --IDS-PAGE-LIST__LETTER-SPACING: -0.025rem;
41
+ --IDS-BULLET-LIST__MARKER-COLOR: var(--ids-color-brand-text-primary);
42
+ --IDS-BULLET-LIST__MARKER-FONT-WEIGHT: bold;
43
+ --IDS-BULLET-LIST__LINE-HEIGHT: 1.5rem;
44
+ --IDS-DIVIDER__COLOR: var(--ids-color-surface-border-default);
45
+ }
46
+ .ids--light.ids--1177-pro, .ids--light.ids--1177-admin, .ids--dark.ids--1177-pro, .ids--dark.ids--1177-admin {
47
+ --IDS-PAGE-LIST__COLOR: var(--ids-color-interactive-text-default);
48
+ }
49
+ .ids--light.ids--inera, .ids--light.ids--inera-admin, .ids--dark.ids--inera, .ids--dark.ids--inera-admin {
50
+ --IDS-FONT-FAMILY-BASE: "Open Sans";
51
+ --IDS-FONT-FAMILY-HEADING: "Poppins";
52
+ --IDS-HEADING-XXL__MARGIN-BOTTOM: 1.25rem;
53
+ --IDS-HEADING-XL__MARGIN-BOTTOM: 1.25rem;
54
+ --IDS-HEADING-L__MARGIN-BOTTOM: 1.25rem;
55
+ --IDS-PAGE-LIST__FONT-WEIGHT: 600;
56
+ --IDS-PAGE-LIST__LETTER-SPACING: 0;
57
+ --IDS-BULLET-LIST__MARKER-FONT-WEIGHT: normal;
58
+ --IDS-BULLET-LIST__LINE-HEIGHT: 1.625rem;
59
+ --IDS-DESCRIPTION-LIST__TERM-FONT-WEIGHT: 600;
60
+ }
61
+ .ids--light.ids--dark, .ids--dark.ids--dark {
62
+ --IDS-PAGE-LIST__COLOR: var(--ids-color-navigation-text-default);
63
+ }
64
+ .ids--light.ids--dark.ids--1177-pro, .ids--light.ids--dark.ids--1177-admin, .ids--light.ids--dark.ids--inera, .ids--light.ids--dark.ids--inera-admin, .ids--dark.ids--dark.ids--1177-pro, .ids--dark.ids--dark.ids--1177-admin, .ids--dark.ids--dark.ids--inera, .ids--dark.ids--dark.ids--inera-admin {
65
+ --IDS-PAGE-LIST__COLOR: var(--ids-color-interactive-text-default);
66
+ }
67
+
28
68
  header.ids-header-1177 {
29
69
  position: relative;
70
+ z-index: 4;
30
71
  border-bottom: 0.0625rem solid var(--IDS-HEADER-1177__BORDER-COLOR);
31
72
  }
32
73
  header.ids-header-1177 .ids-header-1177__skip-to-content {
74
+ display: block;
33
75
  position: relative;
34
76
  z-index: 20;
35
77
  }
@@ -176,27 +218,24 @@ header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__con
176
218
  font-family: "Inera-Design-Icons" !important;
177
219
  display: block;
178
220
  position: absolute;
179
- pointer-events: none;
180
221
  -webkit-font-smoothing: antialiased;
181
222
  -moz-osx-font-smoothing: grayscale;
182
223
  content: "\e91e";
183
224
  color: var(--IDS-HEADER-1177__LOGO-COLOR);
184
225
  font-size: 6.625rem;
185
226
  }
186
- header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo-wrapper .ids-header-1177__logo a:focus-visible,
187
- header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo-wrapper .ids-header-1177__logo ::slotted([slot=logo]):focus-visible {
227
+ header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo-wrapper .ids-header-1177__logo a:focus-visible {
188
228
  outline: var(--IDS-FOCUS__OUTLINE--LIGHT);
189
229
  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
190
230
  }
191
- header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo-wrapper .ids-header-1177__logo a,
192
- header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo-wrapper .ids-header-1177__logo ::slotted([slot=logo]) {
231
+ header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo-wrapper .ids-header-1177__logo a {
193
232
  display: flex;
194
233
  align-items: center;
195
234
  font-size: 6.625rem;
196
235
  color: var(--IDS-HEADER-1177__LOGO-COLOR);
197
236
  border-radius: 0.0625rem;
198
237
  }
199
- header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo-wrapper .ids-header-1177__logo ::slotted([slot=logo]:focus-visible) {
238
+ header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo-wrapper .ids-header-1177__logo a:focus-visible {
200
239
  outline: var(--IDS-FOCUS__OUTLINE--LIGHT);
201
240
  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
202
241
  }
@@ -241,8 +280,7 @@ header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__con
241
280
  header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo-wrapper .ids-header-1177__logo .ids-header-1177__logo-link:before {
242
281
  font-size: 3rem;
243
282
  }
244
- header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo-wrapper .ids-header-1177__logo a,
245
- header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo-wrapper .ids-header-1177__logo ::slotted([slot=logo]) {
283
+ header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo-wrapper .ids-header-1177__logo a {
246
284
  font-size: 3rem;
247
285
  }
248
286
  }
@@ -271,7 +309,7 @@ header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__con
271
309
  display: none;
272
310
  }
273
311
  }
274
- header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-mobile {
312
+ header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-nav__mobile {
275
313
  display: none;
276
314
  background-color: var(--IDS-HEADER-1177__NAV-MOBILE-BACKGROUND-COLOR);
277
315
  flex-wrap: wrap;
@@ -280,7 +318,7 @@ header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav
280
318
  height: 3.125rem;
281
319
  }
282
320
  @media (max-width: 1024px) {
283
- header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-mobile {
321
+ header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-nav__mobile {
284
322
  display: flex;
285
323
  }
286
324
  }
@@ -383,27 +421,24 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container
383
421
  font-family: "Inera-Design-Icons" !important;
384
422
  display: block;
385
423
  position: absolute;
386
- pointer-events: none;
387
424
  -webkit-font-smoothing: antialiased;
388
425
  -moz-osx-font-smoothing: grayscale;
389
426
  content: "\e91e";
390
427
  color: var(--IDS-HEADER-1177__LOGO-COLOR);
391
428
  font-size: 6.625rem;
392
429
  }
393
- header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo-wrapper .ids-header-1177__logo a:focus-visible,
394
- header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo-wrapper .ids-header-1177__logo ::slotted([slot=logo]):focus-visible {
430
+ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo-wrapper .ids-header-1177__logo a:focus-visible {
395
431
  outline: var(--IDS-FOCUS__OUTLINE--LIGHT);
396
432
  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
397
433
  }
398
- header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo-wrapper .ids-header-1177__logo a,
399
- header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo-wrapper .ids-header-1177__logo ::slotted([slot=logo]) {
434
+ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo-wrapper .ids-header-1177__logo a {
400
435
  display: flex;
401
436
  align-items: center;
402
437
  font-size: 6.625rem;
403
438
  color: var(--IDS-HEADER-1177__LOGO-COLOR);
404
439
  border-radius: 0.0625rem;
405
440
  }
406
- header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo-wrapper .ids-header-1177__logo ::slotted([slot=logo]:focus-visible) {
441
+ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo-wrapper .ids-header-1177__logo a:focus-visible {
407
442
  outline: var(--IDS-FOCUS__OUTLINE--LIGHT);
408
443
  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
409
444
  }
@@ -421,7 +456,7 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container
421
456
  position: relative;
422
457
  margin-left: 1.875rem;
423
458
  }
424
- header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__nav-mobile {
459
+ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177-nav__mobile {
425
460
  display: none;
426
461
  background-color: var(--IDS-HEADER-1177__NAV-MOBILE-BACKGROUND-COLOR);
427
462
  flex-wrap: wrap;
@@ -456,7 +491,6 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__nav-mobil
456
491
  font-family: "Inera-Design-Icons" !important;
457
492
  display: block;
458
493
  position: absolute;
459
- pointer-events: none;
460
494
  -webkit-font-smoothing: antialiased;
461
495
  -moz-osx-font-smoothing: grayscale;
462
496
  content: "\e936";
@@ -513,7 +547,7 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__nav-mobil
513
547
  }
514
548
 
515
549
  .ids-header-1177-region-picker-mobile {
516
- display: flex;
550
+ display: none;
517
551
  flex-grow: 1;
518
552
  align-items: center;
519
553
  }
@@ -542,7 +576,6 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__nav-mobil
542
576
  font-family: "Inera-Design-Icons" !important;
543
577
  display: block;
544
578
  position: absolute;
545
- pointer-events: none;
546
579
  -webkit-font-smoothing: antialiased;
547
580
  -moz-osx-font-smoothing: grayscale;
548
581
  content: "\e921";
@@ -557,7 +590,6 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__nav-mobil
557
590
  font-family: "Inera-Design-Icons" !important;
558
591
  display: block;
559
592
  position: absolute;
560
- pointer-events: none;
561
593
  -webkit-font-smoothing: antialiased;
562
594
  -moz-osx-font-smoothing: grayscale;
563
595
  content: "\e936";
@@ -593,106 +625,13 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__nav-mobil
593
625
  .ids-header-1177-region-picker-mobile.ids-header-1177-region-picker-mobile--selected-region .ids-header-1177-region-picker-mobile__button .ids-header-1177-region-picker-mobile__button-text {
594
626
  display: none;
595
627
  }
596
- @media (min-width: 1024px) {
628
+ @media (max-width: 1024px) {
597
629
  .ids-header-1177-region-picker-mobile {
598
- display: none;
630
+ display: flex;
599
631
  }
600
632
  }
601
633
 
602
- .ids-header-1177--unresponsive .ids-header-1177-item {
603
- display: flex;
604
- flex-direction: column;
605
- align-items: center;
606
- justify-content: flex-end;
607
- margin-left: 1.25rem;
608
- text-decoration: none;
609
- position: relative;
610
- height: 3.875rem;
611
- min-width: 2rem;
612
- border-radius: 0.0313rem;
613
- }
614
- .ids-header-1177--unresponsive .ids-header-1177-item .ids-header-1177-item-icon {
615
- max-width: 1.5rem;
616
- max-height: 1.5rem;
617
- display: flex;
618
- position: absolute;
619
- top: 0;
620
- left: 50%;
621
- transform: translateX(-50%);
622
- }
623
- .ids-header-1177--unresponsive .ids-header-1177-item .ids-header-1177-item-icon ::slotted([class^=ids-icon-]),
624
- .ids-header-1177--unresponsive .ids-header-1177-item .ids-header-1177-item-icon [class^=ids-icon-] {
625
- font-size: 1.5rem;
626
- color: var(--IDS-HEADER-1177-ITEM__ICON-COLOR);
627
- }
628
- .ids-header-1177--unresponsive .ids-header-1177-item a,
629
- .ids-header-1177--unresponsive .ids-header-1177-item ::slotted(a) {
630
- cursor: pointer;
631
- position: relative;
632
- height: 3.875rem;
633
- z-index: 1;
634
- inset: 0;
635
- padding: 0;
636
- margin: 0;
637
- border: 0;
638
- color: var(--IDS-HEADER-1177-ITEM__COLOR);
639
- font-family: var(--IDS-FONT-FAMILY-BASE);
640
- line-height: 1.5rem;
641
- font-size: 1.125rem;
642
- text-align: center;
643
- bottom: 0;
644
- width: 100%;
645
- left: 50%;
646
- transform: translateX(-50%);
647
- display: flex;
648
- align-items: flex-end;
649
- justify-content: center;
650
- white-space: nowrap;
651
- text-decoration: none;
652
- border-radius: 0.0313rem;
653
- }
654
- .ids-header-1177--unresponsive .ids-header-1177-item button,
655
- .ids-header-1177--unresponsive .ids-header-1177-item ::slotted(button) {
656
- cursor: pointer;
657
- position: relative;
658
- height: 3.875rem;
659
- z-index: 1;
660
- inset: 0;
661
- padding: 0;
662
- margin: 0;
663
- border: 0;
664
- background-color: transparent;
665
- color: var(--IDS-HEADER-1177-ITEM__COLOR);
666
- font-family: var(--IDS-FONT-FAMILY-BASE);
667
- line-height: 1.5rem;
668
- font-size: 1.125rem;
669
- text-align: center;
670
- bottom: 0;
671
- width: 100%;
672
- left: 50%;
673
- transform: translateX(-50%);
674
- display: flex;
675
- align-items: flex-end;
676
- justify-content: center;
677
- white-space: nowrap;
678
- border-radius: 0.0313rem;
679
- }
680
- .ids-header-1177--unresponsive .ids-header-1177-item:hover .ids-header-1177-item-icon {
681
- color: var(--IDS-HEADER-1177-ITEM__HOVER-COLOR);
682
- }
683
- .ids-header-1177--unresponsive .ids-header-1177-item:hover .ids-header-1177-item-icon ::slotted([class^=ids-icon-]):before,
684
- .ids-header-1177--unresponsive .ids-header-1177-item:hover .ids-header-1177-item-icon [class^=ids-icon-]:before {
685
- color: var(--IDS-HEADER-1177-ITEM__HOVER-COLOR);
686
- }
687
- .ids-header-1177--unresponsive .ids-header-1177-item a:hover,
688
- .ids-header-1177--unresponsive .ids-header-1177-item ::slotted(a:hover),
689
- .ids-header-1177--unresponsive .ids-header-1177-item button:hover,
690
- .ids-header-1177--unresponsive .ids-header-1177-item ::slotted(button:hover) {
691
- color: var(--IDS-HEADER-1177-ITEM__HOVER-COLOR);
692
- text-decoration: underline !important;
693
- text-underline-offset: 0.125rem;
694
- }
695
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item {
634
+ .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) {
696
635
  display: flex;
697
636
  flex-direction: column;
698
637
  align-items: center;
@@ -704,34 +643,31 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__nav-mobil
704
643
  min-width: 2rem;
705
644
  border-radius: 0.0313rem;
706
645
  }
707
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item .ids-header-1177-item-icon {
708
- max-width: 1.5rem;
709
- max-height: 1.5rem;
646
+ .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) .ids-header-1177-item-icon {
647
+ max-width: 2rem;
648
+ max-height: 2rem;
649
+ margin-left: 0;
650
+ margin-right: 0;
710
651
  display: flex;
711
652
  position: absolute;
712
653
  top: 0;
713
654
  left: 50%;
714
655
  transform: translateX(-50%);
715
656
  }
716
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item .ids-header-1177-item-icon ::slotted([class^=ids-icon-]),
717
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item .ids-header-1177-item-icon [class^=ids-icon-] {
718
- font-size: 1.5rem;
657
+ .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) .ids-header-1177-item-icon [class^=ids-icon-] {
658
+ font-size: 2rem;
719
659
  color: var(--IDS-HEADER-1177-ITEM__ICON-COLOR);
720
660
  }
721
- @media (min-width: 1024px) {
722
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item .ids-header-1177-item-icon {
723
- max-width: 2rem;
724
- max-height: 2rem;
725
- margin-left: 0;
726
- margin-right: 0;
661
+ @media (max-width: 1024px) {
662
+ .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) .ids-header-1177-item-icon {
663
+ max-width: 1.5rem;
664
+ max-height: 1.5rem;
727
665
  }
728
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item .ids-header-1177-item-icon ::slotted([class^=ids-icon-]),
729
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item .ids-header-1177-item-icon [class^=ids-icon-] {
730
- font-size: 2rem;
666
+ .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) .ids-header-1177-item-icon [class^=ids-icon-] {
667
+ font-size: 1.5rem;
731
668
  }
732
669
  }
733
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item a,
734
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item ::slotted(a) {
670
+ .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) a {
735
671
  cursor: pointer;
736
672
  position: relative;
737
673
  height: 3.875rem;
@@ -742,7 +678,7 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__nav-mobil
742
678
  border: 0;
743
679
  color: var(--IDS-HEADER-1177-ITEM__COLOR);
744
680
  font-family: var(--IDS-FONT-FAMILY-BASE);
745
- line-height: 1.5rem;
681
+ line-height: 1.5rem !important;
746
682
  font-size: 1.125rem;
747
683
  text-align: center;
748
684
  bottom: 0;
@@ -756,8 +692,7 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__nav-mobil
756
692
  text-decoration: none;
757
693
  border-radius: 0.0313rem;
758
694
  }
759
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item button,
760
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item ::slotted(button) {
695
+ .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) button {
761
696
  cursor: pointer;
762
697
  position: relative;
763
698
  height: 3.875rem;
@@ -769,7 +704,7 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__nav-mobil
769
704
  background-color: transparent;
770
705
  color: var(--IDS-HEADER-1177-ITEM__COLOR);
771
706
  font-family: var(--IDS-FONT-FAMILY-BASE);
772
- line-height: 1.5rem;
707
+ line-height: 1.5rem !important;
773
708
  font-size: 1.125rem;
774
709
  text-align: center;
775
710
  bottom: 0;
@@ -782,37 +717,30 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__nav-mobil
782
717
  white-space: nowrap;
783
718
  border-radius: 0.0313rem;
784
719
  }
785
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item:hover .ids-header-1177-item-icon {
720
+ .ids-header-1177-item:not(.ids-header-1177-item--unresponsive):hover .ids-header-1177-item-icon {
786
721
  color: var(--IDS-HEADER-1177-ITEM__HOVER-COLOR);
787
722
  }
788
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item:hover .ids-header-1177-item-icon ::slotted([class^=ids-icon-]):before,
789
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item:hover .ids-header-1177-item-icon [class^=ids-icon-]:before {
723
+ .ids-header-1177-item:not(.ids-header-1177-item--unresponsive):hover .ids-header-1177-item-icon [class^=ids-icon-]:before {
790
724
  color: var(--IDS-HEADER-1177-ITEM__HOVER-COLOR);
791
725
  }
792
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item a:hover,
793
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item ::slotted(a:hover),
794
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item button:hover,
795
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item ::slotted(button:hover) {
726
+ .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) a:hover,
727
+ .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) button:hover {
796
728
  color: var(--IDS-HEADER-1177-ITEM__HOVER-COLOR);
797
729
  text-decoration: underline !important;
798
730
  text-underline-offset: 0.125rem;
799
731
  }
800
732
  @media (max-width: 1024px) {
801
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item {
733
+ .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) {
802
734
  margin-left: 1rem;
803
735
  height: 2rem;
804
736
  }
805
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item .ids-header-1177-item-icon {
737
+ .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) .ids-header-1177-item-icon {
806
738
  top: 0.25rem;
807
739
  }
808
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item a,
809
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item ::slotted(a),
810
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item a:hover,
811
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item ::slotted(a:hover),
812
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item button,
813
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item ::slotted(button),
814
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item button:hover,
815
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item ::slotted(button:hover) {
740
+ .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) a,
741
+ .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) a:hover,
742
+ .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) button,
743
+ .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) button:hover {
816
744
  color: transparent;
817
745
  font-size: 0.0063rem;
818
746
  height: 2rem;
@@ -820,14 +748,12 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__nav-mobil
820
748
  }
821
749
  }
822
750
  @media (max-width: 1024px) {
823
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item.ids-header-1177-item--keep-text .ids-header-1177-item-icon {
751
+ .ids-header-1177-item:not(.ids-header-1177-item--unresponsive).ids-header-1177-item--keep-text .ids-header-1177-item-icon {
824
752
  left: 0;
825
753
  transform: none;
826
754
  }
827
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item.ids-header-1177-item--keep-text a,
828
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item.ids-header-1177-item--keep-text ::slotted(a),
829
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item.ids-header-1177-item--keep-text button,
830
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item.ids-header-1177-item--keep-text ::slotted(button) {
755
+ .ids-header-1177-item:not(.ids-header-1177-item--unresponsive).ids-header-1177-item--keep-text a,
756
+ .ids-header-1177-item:not(.ids-header-1177-item--unresponsive).ids-header-1177-item--keep-text button {
831
757
  color: var(--IDS-HEADER-1177-ITEM__COLOR);
832
758
  font-size: 1.125rem;
833
759
  padding-left: 2rem;
@@ -837,10 +763,8 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__nav-mobil
837
763
  width: auto;
838
764
  align-items: center;
839
765
  }
840
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item.ids-header-1177-item--keep-text a:hover,
841
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item.ids-header-1177-item--keep-text ::slotted(a:hover),
842
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item.ids-header-1177-item--keep-text button:hover,
843
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item.ids-header-1177-item--keep-text ::slotted(button:hover) {
766
+ .ids-header-1177-item:not(.ids-header-1177-item--unresponsive).ids-header-1177-item--keep-text a:hover,
767
+ .ids-header-1177-item:not(.ids-header-1177-item--unresponsive).ids-header-1177-item--keep-text button:hover {
844
768
  color: var(--IDS-HEADER-1177-ITEM__COLOR);
845
769
  font-size: 1.125rem;
846
770
  color: var(--IDS-HEADER-1177-ITEM__HOVER-COLOR);
@@ -849,12 +773,11 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__nav-mobil
849
773
  }
850
774
  }
851
775
  @media (max-width: 1024px) {
852
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item:not(.ids-header-1177-item--mobile) {
776
+ .ids-header-1177-item:not(.ids-header-1177-item--unresponsive):not(.ids-header-1177-item--mobile) {
853
777
  display: none;
854
778
  }
855
779
  }
856
-
857
- :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) {
780
+ .ids-header-1177-item.ids-header-1177-item--unresponsive {
858
781
  display: flex;
859
782
  flex-direction: column;
860
783
  align-items: center;
@@ -866,34 +789,22 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__nav-mobil
866
789
  min-width: 2rem;
867
790
  border-radius: 0.0313rem;
868
791
  }
869
- :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) .ids-header-1177-item-icon {
870
- max-width: 1.5rem;
871
- max-height: 1.5rem;
792
+ .ids-header-1177-item.ids-header-1177-item--unresponsive .ids-header-1177-item-icon {
793
+ max-width: 2rem;
794
+ max-height: 2rem;
795
+ margin-left: 0;
796
+ margin-right: 0;
872
797
  display: flex;
873
798
  position: absolute;
874
799
  top: 0;
875
800
  left: 50%;
876
801
  transform: translateX(-50%);
877
802
  }
878
- :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) .ids-header-1177-item-icon ::slotted([class^=ids-icon-]),
879
- :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) .ids-header-1177-item-icon [class^=ids-icon-] {
880
- font-size: 1.5rem;
803
+ .ids-header-1177-item.ids-header-1177-item--unresponsive .ids-header-1177-item-icon [class^=ids-icon-] {
804
+ font-size: 2rem;
881
805
  color: var(--IDS-HEADER-1177-ITEM__ICON-COLOR);
882
806
  }
883
- @media (min-width: 1024px) {
884
- :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) .ids-header-1177-item-icon {
885
- max-width: 2rem;
886
- max-height: 2rem;
887
- margin-left: 0;
888
- margin-right: 0;
889
- }
890
- :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) .ids-header-1177-item-icon ::slotted([class^=ids-icon-]),
891
- :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) .ids-header-1177-item-icon [class^=ids-icon-] {
892
- font-size: 2rem;
893
- }
894
- }
895
- :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) a,
896
- :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) ::slotted(a) {
807
+ .ids-header-1177-item.ids-header-1177-item--unresponsive a {
897
808
  cursor: pointer;
898
809
  position: relative;
899
810
  height: 3.875rem;
@@ -904,7 +815,7 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__nav-mobil
904
815
  border: 0;
905
816
  color: var(--IDS-HEADER-1177-ITEM__COLOR);
906
817
  font-family: var(--IDS-FONT-FAMILY-BASE);
907
- line-height: 1.5rem;
818
+ line-height: 1.5rem !important;
908
819
  font-size: 1.125rem;
909
820
  text-align: center;
910
821
  bottom: 0;
@@ -918,8 +829,7 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__nav-mobil
918
829
  text-decoration: none;
919
830
  border-radius: 0.0313rem;
920
831
  }
921
- :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) button,
922
- :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) ::slotted(button) {
832
+ .ids-header-1177-item.ids-header-1177-item--unresponsive button {
923
833
  cursor: pointer;
924
834
  position: relative;
925
835
  height: 3.875rem;
@@ -931,7 +841,7 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__nav-mobil
931
841
  background-color: transparent;
932
842
  color: var(--IDS-HEADER-1177-ITEM__COLOR);
933
843
  font-family: var(--IDS-FONT-FAMILY-BASE);
934
- line-height: 1.5rem;
844
+ line-height: 1.5rem !important;
935
845
  font-size: 1.125rem;
936
846
  text-align: center;
937
847
  bottom: 0;
@@ -944,576 +854,50 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__nav-mobil
944
854
  white-space: nowrap;
945
855
  border-radius: 0.0313rem;
946
856
  }
947
- :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive):hover .ids-header-1177-item-icon {
857
+ .ids-header-1177-item.ids-header-1177-item--unresponsive:hover .ids-header-1177-item-icon {
948
858
  color: var(--IDS-HEADER-1177-ITEM__HOVER-COLOR);
949
859
  }
950
- :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive):hover .ids-header-1177-item-icon ::slotted([class^=ids-icon-]):before,
951
- :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive):hover .ids-header-1177-item-icon [class^=ids-icon-]:before {
860
+ .ids-header-1177-item.ids-header-1177-item--unresponsive:hover .ids-header-1177-item-icon [class^=ids-icon-]:before {
952
861
  color: var(--IDS-HEADER-1177-ITEM__HOVER-COLOR);
953
862
  }
954
- :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) a:hover,
955
- :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) ::slotted(a:hover),
956
- :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) button:hover,
957
- :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) ::slotted(button:hover) {
863
+ .ids-header-1177-item.ids-header-1177-item--unresponsive a:hover,
864
+ .ids-header-1177-item.ids-header-1177-item--unresponsive button:hover {
958
865
  color: var(--IDS-HEADER-1177-ITEM__HOVER-COLOR);
959
866
  text-decoration: underline !important;
960
867
  text-underline-offset: 0.125rem;
961
868
  }
962
- @media (max-width: 1024px) {
963
- :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) {
964
- margin-left: 1rem;
965
- height: 2rem;
966
- }
967
- :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) .ids-header-1177-item-icon {
968
- top: 0.25rem;
969
- }
970
- :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) a,
971
- :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) ::slotted(a),
972
- :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) a:hover,
973
- :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) ::slotted(a:hover),
974
- :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) button,
975
- :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) ::slotted(button),
976
- :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) button:hover,
977
- :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) ::slotted(button:hover) {
978
- color: transparent;
979
- font-size: 0.0063rem;
980
- height: 2rem;
981
- width: 2rem;
982
- }
983
- }
984
- @media (max-width: 1024px) {
985
- :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive).ids-header-1177-item--keep-text .ids-header-1177-item-icon {
986
- left: 0;
987
- transform: none;
988
- }
989
- :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive).ids-header-1177-item--keep-text a,
990
- :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive).ids-header-1177-item--keep-text ::slotted(a),
991
- :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive).ids-header-1177-item--keep-text button,
992
- :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive).ids-header-1177-item--keep-text ::slotted(button) {
993
- color: var(--IDS-HEADER-1177-ITEM__COLOR);
994
- font-size: 1.125rem;
995
- padding-left: 2rem;
996
- top: auto;
997
- left: auto;
998
- transform: none;
999
- width: auto;
1000
- align-items: center;
1001
- }
1002
- :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive).ids-header-1177-item--keep-text a:hover,
1003
- :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive).ids-header-1177-item--keep-text ::slotted(a:hover),
1004
- :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive).ids-header-1177-item--keep-text button:hover,
1005
- :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive).ids-header-1177-item--keep-text ::slotted(button:hover) {
1006
- color: var(--IDS-HEADER-1177-ITEM__COLOR);
1007
- font-size: 1.125rem;
1008
- color: var(--IDS-HEADER-1177-ITEM__HOVER-COLOR);
1009
- text-decoration: underline !important;
1010
- text-underline-offset: 0.125rem;
1011
- }
1012
- }
1013
- @media (max-width: 1024px) {
1014
- :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive):not(.ids-header-1177-item--mobile) {
1015
- display: none;
1016
- }
1017
- }
1018
- :host .ids-header-1177-item.ids-header-1177-item--unresponsive {
869
+ .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) {
870
+ justify-self: flex-end;
871
+ justify-content: flex-end;
1019
872
  display: flex;
1020
- flex-direction: column;
1021
873
  align-items: center;
1022
- justify-content: flex-end;
1023
- margin-left: 1.25rem;
1024
- text-decoration: none;
1025
- position: relative;
1026
- height: 3.875rem;
1027
- min-width: 2rem;
1028
- border-radius: 0.0313rem;
874
+ flex-wrap: wrap;
875
+ flex-grow: 1;
876
+ margin-left: 0.5rem;
1029
877
  }
1030
- :host .ids-header-1177-item.ids-header-1177-item--unresponsive .ids-header-1177-item-icon {
1031
- max-width: 1.5rem;
1032
- max-height: 1.5rem;
878
+ .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__avatar {
879
+ position: relative;
880
+ justify-self: flex-end;
881
+ justify-content: flex-end;
1033
882
  display: flex;
1034
- position: absolute;
1035
- top: 0;
1036
- left: 50%;
1037
- transform: translateX(-50%);
1038
- }
1039
- :host .ids-header-1177-item.ids-header-1177-item--unresponsive .ids-header-1177-item-icon ::slotted([class^=ids-icon-]),
1040
- :host .ids-header-1177-item.ids-header-1177-item--unresponsive .ids-header-1177-item-icon [class^=ids-icon-] {
1041
- font-size: 1.5rem;
1042
- color: var(--IDS-HEADER-1177-ITEM__ICON-COLOR);
883
+ align-items: center;
884
+ flex-wrap: wrap;
885
+ flex-grow: 1;
886
+ margin-top: 0.0625rem;
1043
887
  }
1044
- :host .ids-header-1177-item.ids-header-1177-item--unresponsive a,
1045
- :host .ids-header-1177-item.ids-header-1177-item--unresponsive ::slotted(a) {
1046
- cursor: pointer;
1047
- position: relative;
1048
- height: 3.875rem;
1049
- z-index: 1;
1050
- inset: 0;
1051
- padding: 0;
1052
- margin: 0;
1053
- border: 0;
1054
- color: var(--IDS-HEADER-1177-ITEM__COLOR);
1055
- font-family: var(--IDS-FONT-FAMILY-BASE);
1056
- line-height: 1.5rem;
1057
- font-size: 1.125rem;
1058
- text-align: center;
1059
- bottom: 0;
1060
- width: 100%;
1061
- left: 50%;
1062
- transform: translateX(-50%);
888
+ .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__menu-wrapper {
889
+ position: absolute;
890
+ left: 0;
891
+ right: 0;
892
+ top: 50%;
893
+ transform: translateY(-50%);
1063
894
  display: flex;
1064
- align-items: flex-end;
1065
- justify-content: center;
1066
- white-space: nowrap;
1067
- text-decoration: none;
1068
- border-radius: 0.0313rem;
895
+ justify-content: flex-end;
1069
896
  }
1070
- :host .ids-header-1177-item.ids-header-1177-item--unresponsive button,
1071
- :host .ids-header-1177-item.ids-header-1177-item--unresponsive ::slotted(button) {
1072
- cursor: pointer;
897
+ .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__button {
1073
898
  position: relative;
1074
- height: 3.875rem;
1075
- z-index: 1;
1076
- inset: 0;
1077
- padding: 0;
1078
- margin: 0;
1079
- border: 0;
1080
- background-color: transparent;
1081
- color: var(--IDS-HEADER-1177-ITEM__COLOR);
1082
- font-family: var(--IDS-FONT-FAMILY-BASE);
1083
- line-height: 1.5rem;
1084
- font-size: 1.125rem;
1085
- text-align: center;
1086
- bottom: 0;
1087
- width: 100%;
1088
- left: 50%;
1089
- transform: translateX(-50%);
1090
899
  display: flex;
1091
- align-items: flex-end;
1092
- justify-content: center;
1093
- white-space: nowrap;
1094
- border-radius: 0.0313rem;
1095
- }
1096
- :host .ids-header-1177-item.ids-header-1177-item--unresponsive:hover .ids-header-1177-item-icon {
1097
- color: var(--IDS-HEADER-1177-ITEM__HOVER-COLOR);
1098
- }
1099
- :host .ids-header-1177-item.ids-header-1177-item--unresponsive:hover .ids-header-1177-item-icon ::slotted([class^=ids-icon-]):before,
1100
- :host .ids-header-1177-item.ids-header-1177-item--unresponsive:hover .ids-header-1177-item-icon [class^=ids-icon-]:before {
1101
- color: var(--IDS-HEADER-1177-ITEM__HOVER-COLOR);
1102
- }
1103
- :host .ids-header-1177-item.ids-header-1177-item--unresponsive a:hover,
1104
- :host .ids-header-1177-item.ids-header-1177-item--unresponsive ::slotted(a:hover),
1105
- :host .ids-header-1177-item.ids-header-1177-item--unresponsive button:hover,
1106
- :host .ids-header-1177-item.ids-header-1177-item--unresponsive ::slotted(button:hover) {
1107
- color: var(--IDS-HEADER-1177-ITEM__HOVER-COLOR);
1108
- text-decoration: underline !important;
1109
- text-underline-offset: 0.125rem;
1110
- }
1111
- .ids--light, .ids--dark {
1112
- --IDS-FONT-FAMILY-BASE: "Open Sans";
1113
- --IDS-FONT-FAMILY-HEADING: "Inter";
1114
- --IDS-FONT-COLOR: var(--ids-color-surface-text-on-default);
1115
- --IDS-HEADING-XXL__MARGIN-BOTTOM: 1.875rem;
1116
- --IDS-HEADING-XL__MARGIN-BOTTOM: 1.875rem;
1117
- --IDS-HEADING-L__MARGIN-BOTTOM: 1.875rem;
1118
- --IDS-PAGE-LIST__COLOR: var(--ids-color-brand-text-primary);
1119
- --IDS-PAGE-LIST__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
1120
- --IDS-PAGE-LIST__FONT-SIZE: 1.25rem;
1121
- --IDS-PAGE-LIST__LINE-HEIGHT: 1.5rem;
1122
- --IDS-PAGE-LIST__FONT-WEIGHT: 700;
1123
- --IDS-PAGE-LIST__LETTER-SPACING: -0.025rem;
1124
- --IDS-BULLET-LIST__MARKER-COLOR: var(--ids-color-brand-text-primary);
1125
- --IDS-BULLET-LIST__MARKER-FONT-WEIGHT: bold;
1126
- --IDS-BULLET-LIST__LINE-HEIGHT: 1.5rem;
1127
- --IDS-DIVIDER__COLOR: var(--ids-color-surface-border-default);
1128
- }
1129
- .ids--light.ids--1177-pro, .ids--light.ids--1177-admin, .ids--dark.ids--1177-pro, .ids--dark.ids--1177-admin {
1130
- --IDS-PAGE-LIST__COLOR: var(--ids-color-interactive-text-default);
1131
- }
1132
- .ids--light.ids--inera, .ids--light.ids--inera-admin, .ids--dark.ids--inera, .ids--dark.ids--inera-admin {
1133
- --IDS-FONT-FAMILY-BASE: "Open Sans";
1134
- --IDS-FONT-FAMILY-HEADING: "Poppins";
1135
- --IDS-HEADING-XXL__MARGIN-BOTTOM: 1.25rem;
1136
- --IDS-HEADING-XL__MARGIN-BOTTOM: 1.25rem;
1137
- --IDS-HEADING-L__MARGIN-BOTTOM: 1.25rem;
1138
- --IDS-PAGE-LIST__FONT-WEIGHT: 600;
1139
- --IDS-PAGE-LIST__LETTER-SPACING: 0;
1140
- --IDS-BULLET-LIST__MARKER-FONT-WEIGHT: normal;
1141
- --IDS-BULLET-LIST__LINE-HEIGHT: 1.625rem;
1142
- --IDS-DESCRIPTION-LIST__TERM-FONT-WEIGHT: 600;
1143
- }
1144
- .ids--light.ids--dark, .ids--dark.ids--dark {
1145
- --IDS-PAGE-LIST__COLOR: var(--ids-color-navigation-text-default);
1146
- }
1147
- .ids--light.ids--dark.ids--1177-pro, .ids--light.ids--dark.ids--1177-admin, .ids--light.ids--dark.ids--inera, .ids--light.ids--dark.ids--inera-admin, .ids--dark.ids--dark.ids--1177-pro, .ids--dark.ids--dark.ids--1177-admin, .ids--dark.ids--dark.ids--inera, .ids--dark.ids--dark.ids--inera-admin {
1148
- --IDS-PAGE-LIST__COLOR: var(--ids-color-interactive-text-default);
1149
- }
1150
-
1151
- .ids-header-1177--unresponsive .ids-header-1177-avatar {
1152
- justify-self: flex-end;
1153
- justify-content: flex-end;
1154
- display: flex;
1155
- align-items: center;
1156
- flex-wrap: wrap;
1157
- flex-grow: 1;
1158
- margin-left: 0.5rem;
1159
- }
1160
- .ids-header-1177--unresponsive .ids-header-1177-avatar .ids-header-1177-avatar__avatar {
1161
- position: relative;
1162
- justify-self: flex-end;
1163
- justify-content: flex-end;
1164
- display: flex;
1165
- align-items: center;
1166
- flex-wrap: wrap;
1167
- flex-grow: 1;
1168
- margin-top: 0.0625rem;
1169
- }
1170
- .ids-header-1177--unresponsive .ids-header-1177-avatar .ids-header-1177-avatar__menu-wrapper {
1171
- position: absolute;
1172
- left: 0;
1173
- right: 0;
1174
- top: 50%;
1175
- transform: translateY(-50%);
1176
- display: flex;
1177
- justify-content: flex-end;
1178
- }
1179
- .ids-header-1177--unresponsive .ids-header-1177-avatar .ids-header-1177-avatar__button {
1180
- position: relative;
1181
- display: flex;
1182
- align-items: center;
1183
- justify-content: center;
1184
- min-width: 8.5rem;
1185
- max-width: 100%;
1186
- padding: 0.75rem 1.25rem 0.75rem 1.75rem;
1187
- background-color: var(--IDS-HEADER-1177-AVATAR__BACKGROUND-COLOR);
1188
- border-radius: 2rem;
1189
- overflow: hidden;
1190
- border: 0.0625rem solid var(--IDS-HEADER-1177-AVATAR__BORDER-COLOR);
1191
- cursor: pointer;
1192
- }
1193
- .ids-header-1177--unresponsive .ids-header-1177-avatar .ids-header-1177-avatar__button:focus-visible {
1194
- outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
1195
- outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
1196
- }
1197
- .ids-header-1177--unresponsive .ids-header-1177-avatar .ids-header-1177-avatar__button:before {
1198
- font: icon;
1199
- font-family: "Inera-Design-Icons" !important;
1200
- display: block;
1201
- position: absolute;
1202
- pointer-events: none;
1203
- -webkit-font-smoothing: antialiased;
1204
- -moz-osx-font-smoothing: grayscale;
1205
- content: "\e923";
1206
- font-size: 1.75rem;
1207
- color: var(--IDS-HEADER-1177-AVATAR__ICON-COLOR);
1208
- left: 1.5rem;
1209
- top: 50%;
1210
- transform: translateY(-50%);
1211
- }
1212
- .ids-header-1177--unresponsive .ids-header-1177-avatar .ids-header-1177-avatar__button:after {
1213
- font: icon;
1214
- font-family: "Inera-Design-Icons" !important;
1215
- display: block;
1216
- position: absolute;
1217
- pointer-events: none;
1218
- -webkit-font-smoothing: antialiased;
1219
- -moz-osx-font-smoothing: grayscale;
1220
- content: "\e936";
1221
- font-size: 1rem;
1222
- padding: 0.25rem;
1223
- color: var(--IDS-HEADER-1177-AVATAR__ICON-COLOR);
1224
- background-color: var(--IDS-HEADER-1177-AVATAR__BACKGROUND-COLOR);
1225
- right: 1.25rem;
1226
- top: 50%;
1227
- transform: translateY(-50%);
1228
- }
1229
- .ids-header-1177--unresponsive .ids-header-1177-avatar .ids-header-1177-avatar__button:hover:before, .ids-header-1177--unresponsive .ids-header-1177-avatar .ids-header-1177-avatar__button:hover::after {
1230
- color: var(--IDS-HEADER-1177-AVATAR__ICON-HOVER-COLOR);
1231
- }
1232
- .ids-header-1177--unresponsive .ids-header-1177-avatar .ids-header-1177-avatar__button:focus-visible {
1233
- z-index: 20;
1234
- }
1235
- .ids-header-1177--unresponsive .ids-header-1177-avatar .ids-header-1177-avatar__button.ids-header-1177-avatar__button--expanded:after {
1236
- content: "\e939";
1237
- }
1238
- .ids-header-1177--unresponsive .ids-header-1177-avatar .ids-header-1177-avatar__button .ids-header-1177-avatar__name {
1239
- text-align: start;
1240
- padding: 0 1.75rem 0 2rem;
1241
- font-size: 1rem;
1242
- line-height: 1.5rem;
1243
- white-space: nowrap;
1244
- overflow: hidden;
1245
- position: relative;
1246
- text-overflow: ellipsis;
1247
- text-align: left;
1248
- color: var(--IDS-HEADER-1177-AVATAR__COLOR);
1249
- }
1250
- .ids-header-1177--unresponsive .ids-header-1177-avatar .ids-header-1177-avatar__menu {
1251
- display: none;
1252
- position: absolute;
1253
- top: calc(100% + 0.0625rem);
1254
- left: auto;
1255
- right: 0;
1256
- z-index: 12;
1257
- background-color: var(--IDS-HEADER-1177-AVATAR__DROPDOWN-BACKGROUND-COLOR);
1258
- border: 0.0625rem solid var(--IDS-HEADER-1177-AVATAR__DROPDOWN-BORDER-COLOR);
1259
- padding: 1.25rem;
1260
- box-sizing: border-box;
1261
- border-radius: 0.625rem;
1262
- box-shadow: var(--IDS-BOX-SHADOW-ELEVATED-2);
1263
- width: 100%;
1264
- max-width: 20rem;
1265
- gap: 1.5rem;
1266
- flex-direction: column;
1267
- }
1268
- .ids-header-1177--unresponsive .ids-header-1177-avatar .ids-header-1177-avatar__menu.ids-header-1177-avatar__menu--expanded {
1269
- display: flex;
1270
- }
1271
- .ids-header-1177--unresponsive .ids-header-1177-avatar .ids-header-1177-avatar__menu .ids-header-1177-avatar__agent p,
1272
- .ids-header-1177--unresponsive .ids-header-1177-avatar .ids-header-1177-avatar__menu .ids-header-1177-avatar__agent ::slotted(p) {
1273
- font-style: normal;
1274
- color: var(--ids-color-surface-text-on-default);
1275
- font-family: var(--ids-font-family-body-text);
1276
- font-size: var(--ids-font-size-body-text);
1277
- line-height: var(--ids-line-height-body-text);
1278
- font-weight: var(--ids-font-weight-body-text);
1279
- letter-spacing: 0;
1280
- margin-top: 0.75rem !important;
1281
- margin-bottom: 0 !important;
1282
- }
1283
- .ids-header-1177--unresponsive .ids-header-1177-avatar .ids-header-1177-avatar__menu .ids-header-1177-avatar__menu-links {
1284
- display: flex;
1285
- flex-direction: column;
1286
- gap: 1.5rem;
1287
- }
1288
- .ids-header-1177--unresponsive .ids-header-1177-avatar .ids-header-1177-avatar__menu hr,
1289
- .ids-header-1177--unresponsive .ids-header-1177-avatar .ids-header-1177-avatar__menu ::slotted(hr) {
1290
- width: 100%;
1291
- height: 0.0625rem;
1292
- display: block;
1293
- margin: 0;
1294
- border: 0;
1295
- border-top: 0.0625rem solid var(--IDS-HEADER-1177-AVATAR__MENU-SEPARATOR-COLOR);
1296
- }
1297
-
1298
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar {
1299
- justify-self: flex-end;
1300
- justify-content: flex-end;
1301
- display: flex;
1302
- align-items: center;
1303
- flex-wrap: wrap;
1304
- flex-grow: 1;
1305
- margin-left: 0.5rem;
1306
- }
1307
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__avatar {
1308
- position: relative;
1309
- justify-self: flex-end;
1310
- justify-content: flex-end;
1311
- display: flex;
1312
- align-items: center;
1313
- flex-wrap: wrap;
1314
- flex-grow: 1;
1315
- margin-top: 0.0625rem;
1316
- }
1317
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__menu-wrapper {
1318
- position: absolute;
1319
- left: 0;
1320
- right: 0;
1321
- top: 50%;
1322
- transform: translateY(-50%);
1323
- display: flex;
1324
- justify-content: flex-end;
1325
- }
1326
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__button {
1327
- position: relative;
1328
- display: flex;
1329
- align-items: center;
1330
- justify-content: center;
1331
- min-width: 8.5rem;
1332
- max-width: 100%;
1333
- padding: 0.75rem 1.25rem 0.75rem 1.75rem;
1334
- background-color: var(--IDS-HEADER-1177-AVATAR__BACKGROUND-COLOR);
1335
- border-radius: 2rem;
1336
- overflow: hidden;
1337
- border: 0.0625rem solid var(--IDS-HEADER-1177-AVATAR__BORDER-COLOR);
1338
- cursor: pointer;
1339
- }
1340
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__button:focus-visible {
1341
- outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
1342
- outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
1343
- }
1344
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__button:before {
1345
- font: icon;
1346
- font-family: "Inera-Design-Icons" !important;
1347
- display: block;
1348
- position: absolute;
1349
- pointer-events: none;
1350
- -webkit-font-smoothing: antialiased;
1351
- -moz-osx-font-smoothing: grayscale;
1352
- content: "\e923";
1353
- font-size: 1.75rem;
1354
- color: var(--IDS-HEADER-1177-AVATAR__ICON-COLOR);
1355
- left: 1.5rem;
1356
- top: 50%;
1357
- transform: translateY(-50%);
1358
- }
1359
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__button:after {
1360
- font: icon;
1361
- font-family: "Inera-Design-Icons" !important;
1362
- display: block;
1363
- position: absolute;
1364
- pointer-events: none;
1365
- -webkit-font-smoothing: antialiased;
1366
- -moz-osx-font-smoothing: grayscale;
1367
- content: "\e936";
1368
- font-size: 1rem;
1369
- padding: 0.25rem;
1370
- color: var(--IDS-HEADER-1177-AVATAR__ICON-COLOR);
1371
- background-color: var(--IDS-HEADER-1177-AVATAR__BACKGROUND-COLOR);
1372
- right: 1.25rem;
1373
- top: 50%;
1374
- transform: translateY(-50%);
1375
- }
1376
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__button:hover:before, .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__button:hover::after {
1377
- color: var(--IDS-HEADER-1177-AVATAR__ICON-HOVER-COLOR);
1378
- }
1379
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__button:focus-visible {
1380
- z-index: 20;
1381
- }
1382
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__button.ids-header-1177-avatar__button--expanded:after {
1383
- content: "\e939";
1384
- }
1385
- @media (max-width: 1024px) {
1386
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__button {
1387
- justify-content: flex-start;
1388
- gap: 0.5rem;
1389
- padding: 0.375rem 0.5rem;
1390
- margin-left: 0.75rem;
1391
- margin-right: 0;
1392
- }
1393
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__button:before {
1394
- font-size: 1.25rem;
1395
- left: 0.75rem;
1396
- }
1397
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__button:after {
1398
- right: 0.5rem;
1399
- }
1400
- }
1401
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__button .ids-header-1177-avatar__name {
1402
- text-align: start;
1403
- padding: 0 1.75rem 0 2rem;
1404
- font-size: 1rem;
1405
- line-height: 1.5rem;
1406
- white-space: nowrap;
1407
- overflow: hidden;
1408
- position: relative;
1409
- text-overflow: ellipsis;
1410
- text-align: left;
1411
- color: var(--IDS-HEADER-1177-AVATAR__COLOR);
1412
- }
1413
- @media (max-width: 1024px) {
1414
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__button .ids-header-1177-avatar__name {
1415
- font-size: 0.875rem;
1416
- line-height: 1.25rem;
1417
- }
1418
- }
1419
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__menu {
1420
- display: none;
1421
- position: absolute;
1422
- top: calc(100% + 0.0625rem);
1423
- left: auto;
1424
- right: 0;
1425
- z-index: 12;
1426
- background-color: var(--IDS-HEADER-1177-AVATAR__DROPDOWN-BACKGROUND-COLOR);
1427
- border: 0.0625rem solid var(--IDS-HEADER-1177-AVATAR__DROPDOWN-BORDER-COLOR);
1428
- padding: 1.25rem;
1429
- box-sizing: border-box;
1430
- border-radius: 0.625rem;
1431
- box-shadow: var(--IDS-BOX-SHADOW-ELEVATED-2);
1432
- width: 100%;
1433
- max-width: 20rem;
1434
- gap: 1.5rem;
1435
- flex-direction: column;
1436
- }
1437
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__menu.ids-header-1177-avatar__menu--expanded {
1438
- display: flex;
1439
- }
1440
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__menu .ids-header-1177-avatar__agent p,
1441
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__menu .ids-header-1177-avatar__agent ::slotted(p) {
1442
- font-style: normal;
1443
- color: var(--ids-color-surface-text-on-default);
1444
- font-family: var(--ids-font-family-body-text);
1445
- font-size: var(--ids-font-size-body-text);
1446
- line-height: var(--ids-line-height-body-text);
1447
- font-weight: var(--ids-font-weight-body-text);
1448
- letter-spacing: 0;
1449
- margin-top: 0.75rem !important;
1450
- margin-bottom: 0 !important;
1451
- }
1452
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__menu .ids-header-1177-avatar__menu-links {
1453
- display: flex;
1454
- flex-direction: column;
1455
- gap: 1.5rem;
1456
- }
1457
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__menu hr,
1458
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__menu ::slotted(hr) {
1459
- width: 100%;
1460
- height: 0.0625rem;
1461
- display: block;
1462
- margin: 0;
1463
- border: 0;
1464
- border-top: 0.0625rem solid var(--IDS-HEADER-1177-AVATAR__MENU-SEPARATOR-COLOR);
1465
- }
1466
- @media (max-width: 1024px) {
1467
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__menu {
1468
- border-top-left-radius: 0;
1469
- border-top-right-radius: 0;
1470
- max-width: 30rem;
1471
- top: calc(100% + 0.4375rem);
1472
- }
1473
- }
1474
- @media (max-width: 640px) {
1475
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__menu {
1476
- width: 100vw;
1477
- max-width: 100vw;
1478
- right: -1.25rem;
1479
- }
1480
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__menu.ids-header-1177-avatar__menu--mobile-menu {
1481
- right: -3.75rem;
1482
- }
1483
- }
1484
-
1485
- :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) {
1486
- justify-self: flex-end;
1487
- justify-content: flex-end;
1488
- display: flex;
1489
- align-items: center;
1490
- flex-wrap: wrap;
1491
- flex-grow: 1;
1492
- margin-left: 0.5rem;
1493
- }
1494
- :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__avatar {
1495
- position: relative;
1496
- justify-self: flex-end;
1497
- justify-content: flex-end;
1498
- display: flex;
1499
- align-items: center;
1500
- flex-wrap: wrap;
1501
- flex-grow: 1;
1502
- margin-top: 0.0625rem;
1503
- }
1504
- :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__menu-wrapper {
1505
- position: absolute;
1506
- left: 0;
1507
- right: 0;
1508
- top: 50%;
1509
- transform: translateY(-50%);
1510
- display: flex;
1511
- justify-content: flex-end;
1512
- }
1513
- :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__button {
1514
- position: relative;
1515
- display: flex;
1516
- align-items: center;
900
+ align-items: center;
1517
901
  justify-content: center;
1518
902
  min-width: 8.5rem;
1519
903
  max-width: 100%;
@@ -1524,16 +908,15 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__nav-mobil
1524
908
  border: 0.0625rem solid var(--IDS-HEADER-1177-AVATAR__BORDER-COLOR);
1525
909
  cursor: pointer;
1526
910
  }
1527
- :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__button:focus-visible {
911
+ .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__button:focus-visible {
1528
912
  outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
1529
913
  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
1530
914
  }
1531
- :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__button:before {
915
+ .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__button:before {
1532
916
  font: icon;
1533
917
  font-family: "Inera-Design-Icons" !important;
1534
918
  display: block;
1535
919
  position: absolute;
1536
- pointer-events: none;
1537
920
  -webkit-font-smoothing: antialiased;
1538
921
  -moz-osx-font-smoothing: grayscale;
1539
922
  content: "\e923";
@@ -1543,12 +926,11 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__nav-mobil
1543
926
  top: 50%;
1544
927
  transform: translateY(-50%);
1545
928
  }
1546
- :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__button:after {
929
+ .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__button:after {
1547
930
  font: icon;
1548
931
  font-family: "Inera-Design-Icons" !important;
1549
932
  display: block;
1550
933
  position: absolute;
1551
- pointer-events: none;
1552
934
  -webkit-font-smoothing: antialiased;
1553
935
  -moz-osx-font-smoothing: grayscale;
1554
936
  content: "\e936";
@@ -1560,32 +942,32 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__nav-mobil
1560
942
  top: 50%;
1561
943
  transform: translateY(-50%);
1562
944
  }
1563
- :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__button:hover:before, :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__button:hover::after {
945
+ .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__button:hover:before, .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__button:hover::after {
1564
946
  color: var(--IDS-HEADER-1177-AVATAR__ICON-HOVER-COLOR);
1565
947
  }
1566
- :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__button:focus-visible {
948
+ .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__button:focus-visible {
1567
949
  z-index: 20;
1568
950
  }
1569
- :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__button.ids-header-1177-avatar__button--expanded:after {
951
+ .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__button.ids-header-1177-avatar__button--expanded:after {
1570
952
  content: "\e939";
1571
953
  }
1572
954
  @media (max-width: 1024px) {
1573
- :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__button {
955
+ .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__button {
1574
956
  justify-content: flex-start;
1575
957
  gap: 0.5rem;
1576
958
  padding: 0.375rem 0.5rem;
1577
959
  margin-left: 0.75rem;
1578
960
  margin-right: 0;
1579
961
  }
1580
- :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__button:before {
962
+ .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__button:before {
1581
963
  font-size: 1.25rem;
1582
964
  left: 0.75rem;
1583
965
  }
1584
- :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__button:after {
966
+ .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__button:after {
1585
967
  right: 0.5rem;
1586
968
  }
1587
969
  }
1588
- :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__button .ids-header-1177-avatar__name {
970
+ .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__button .ids-header-1177-avatar__name {
1589
971
  text-align: start;
1590
972
  padding: 0 1.75rem 0 2rem;
1591
973
  font-size: 1rem;
@@ -1596,14 +978,15 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__nav-mobil
1596
978
  text-overflow: ellipsis;
1597
979
  text-align: left;
1598
980
  color: var(--IDS-HEADER-1177-AVATAR__COLOR);
981
+ font-family: var(--IDS-FONT-FAMILY-BASE);
1599
982
  }
1600
983
  @media (max-width: 1024px) {
1601
- :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__button .ids-header-1177-avatar__name {
984
+ .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__button .ids-header-1177-avatar__name {
1602
985
  font-size: 0.875rem;
1603
986
  line-height: 1.25rem;
1604
987
  }
1605
988
  }
1606
- :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__menu {
989
+ .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__menu {
1607
990
  display: none;
1608
991
  position: absolute;
1609
992
  top: calc(100% + 0.0625rem);
@@ -1618,31 +1001,29 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__nav-mobil
1618
1001
  box-shadow: var(--IDS-BOX-SHADOW-ELEVATED-2);
1619
1002
  width: 100%;
1620
1003
  max-width: 20rem;
1621
- gap: 1.5rem;
1004
+ gap: 1rem;
1622
1005
  flex-direction: column;
1623
1006
  }
1624
- :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__menu.ids-header-1177-avatar__menu--expanded {
1007
+ .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__menu.ids-header-1177-avatar__menu--expanded {
1625
1008
  display: flex;
1626
1009
  }
1627
- :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__menu .ids-header-1177-avatar__agent p,
1628
- :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__menu .ids-header-1177-avatar__agent ::slotted(p) {
1010
+ .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__menu .ids-header-1177-avatar__agent p {
1629
1011
  font-style: normal;
1630
1012
  color: var(--ids-color-surface-text-on-default);
1631
1013
  font-family: var(--ids-font-family-body-text);
1632
1014
  font-size: var(--ids-font-size-body-text);
1633
- line-height: var(--ids-line-height-body-text);
1015
+ line-height: var(--ids-font-line-height-body-text);
1634
1016
  font-weight: var(--ids-font-weight-body-text);
1635
1017
  letter-spacing: 0;
1636
1018
  margin-top: 0.75rem !important;
1637
1019
  margin-bottom: 0 !important;
1638
1020
  }
1639
- :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__menu .ids-header-1177-avatar__menu-links {
1021
+ .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__menu .ids-header-1177-avatar__menu-links {
1640
1022
  display: flex;
1641
1023
  flex-direction: column;
1642
- gap: 1.5rem;
1024
+ gap: 1rem;
1643
1025
  }
1644
- :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__menu hr,
1645
- :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__menu ::slotted(hr) {
1026
+ .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__menu hr {
1646
1027
  width: 100%;
1647
1028
  height: 0.0625rem;
1648
1029
  display: block;
@@ -1651,7 +1032,7 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__nav-mobil
1651
1032
  border-top: 0.0625rem solid var(--IDS-HEADER-1177-AVATAR__MENU-SEPARATOR-COLOR);
1652
1033
  }
1653
1034
  @media (max-width: 1024px) {
1654
- :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__menu {
1035
+ .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__menu {
1655
1036
  border-top-left-radius: 0;
1656
1037
  border-top-right-radius: 0;
1657
1038
  max-width: 30rem;
@@ -1659,16 +1040,16 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__nav-mobil
1659
1040
  }
1660
1041
  }
1661
1042
  @media (max-width: 640px) {
1662
- :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__menu {
1043
+ .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__menu {
1663
1044
  width: 100vw;
1664
1045
  max-width: 100vw;
1665
- right: -1.25rem;
1046
+ right: -3.375rem;
1666
1047
  }
1667
- :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__menu.ids-header-1177-avatar__menu--mobile-menu {
1668
- right: -3.75rem;
1048
+ .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__menu.ids-header-1177-avatar__menu--no-mobile-menu {
1049
+ right: -1rem;
1669
1050
  }
1670
1051
  }
1671
- :host .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive {
1052
+ .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive {
1672
1053
  justify-self: flex-end;
1673
1054
  justify-content: flex-end;
1674
1055
  display: flex;
@@ -1677,7 +1058,7 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__nav-mobil
1677
1058
  flex-grow: 1;
1678
1059
  margin-left: 0.5rem;
1679
1060
  }
1680
- :host .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__avatar {
1061
+ .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__avatar {
1681
1062
  position: relative;
1682
1063
  justify-self: flex-end;
1683
1064
  justify-content: flex-end;
@@ -1687,7 +1068,7 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__nav-mobil
1687
1068
  flex-grow: 1;
1688
1069
  margin-top: 0.0625rem;
1689
1070
  }
1690
- :host .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__menu-wrapper {
1071
+ .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__menu-wrapper {
1691
1072
  position: absolute;
1692
1073
  left: 0;
1693
1074
  right: 0;
@@ -1696,7 +1077,7 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__nav-mobil
1696
1077
  display: flex;
1697
1078
  justify-content: flex-end;
1698
1079
  }
1699
- :host .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__button {
1080
+ .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__button {
1700
1081
  position: relative;
1701
1082
  display: flex;
1702
1083
  align-items: center;
@@ -1710,16 +1091,15 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__nav-mobil
1710
1091
  border: 0.0625rem solid var(--IDS-HEADER-1177-AVATAR__BORDER-COLOR);
1711
1092
  cursor: pointer;
1712
1093
  }
1713
- :host .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__button:focus-visible {
1094
+ .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__button:focus-visible {
1714
1095
  outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
1715
1096
  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
1716
1097
  }
1717
- :host .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__button:before {
1098
+ .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__button:before {
1718
1099
  font: icon;
1719
1100
  font-family: "Inera-Design-Icons" !important;
1720
1101
  display: block;
1721
1102
  position: absolute;
1722
- pointer-events: none;
1723
1103
  -webkit-font-smoothing: antialiased;
1724
1104
  -moz-osx-font-smoothing: grayscale;
1725
1105
  content: "\e923";
@@ -1729,12 +1109,11 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__nav-mobil
1729
1109
  top: 50%;
1730
1110
  transform: translateY(-50%);
1731
1111
  }
1732
- :host .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__button:after {
1112
+ .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__button:after {
1733
1113
  font: icon;
1734
1114
  font-family: "Inera-Design-Icons" !important;
1735
1115
  display: block;
1736
1116
  position: absolute;
1737
- pointer-events: none;
1738
1117
  -webkit-font-smoothing: antialiased;
1739
1118
  -moz-osx-font-smoothing: grayscale;
1740
1119
  content: "\e936";
@@ -1746,16 +1125,16 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__nav-mobil
1746
1125
  top: 50%;
1747
1126
  transform: translateY(-50%);
1748
1127
  }
1749
- :host .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__button:hover:before, :host .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__button:hover::after {
1128
+ .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__button:hover:before, .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__button:hover::after {
1750
1129
  color: var(--IDS-HEADER-1177-AVATAR__ICON-HOVER-COLOR);
1751
1130
  }
1752
- :host .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__button:focus-visible {
1131
+ .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__button:focus-visible {
1753
1132
  z-index: 20;
1754
1133
  }
1755
- :host .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__button.ids-header-1177-avatar__button--expanded:after {
1134
+ .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__button.ids-header-1177-avatar__button--expanded:after {
1756
1135
  content: "\e939";
1757
1136
  }
1758
- :host .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__button .ids-header-1177-avatar__name {
1137
+ .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__button .ids-header-1177-avatar__name {
1759
1138
  text-align: start;
1760
1139
  padding: 0 1.75rem 0 2rem;
1761
1140
  font-size: 1rem;
@@ -1766,8 +1145,9 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__nav-mobil
1766
1145
  text-overflow: ellipsis;
1767
1146
  text-align: left;
1768
1147
  color: var(--IDS-HEADER-1177-AVATAR__COLOR);
1148
+ font-family: var(--IDS-FONT-FAMILY-BASE);
1769
1149
  }
1770
- :host .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__menu {
1150
+ .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__menu {
1771
1151
  display: none;
1772
1152
  position: absolute;
1773
1153
  top: calc(100% + 0.0625rem);
@@ -1782,31 +1162,29 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__nav-mobil
1782
1162
  box-shadow: var(--IDS-BOX-SHADOW-ELEVATED-2);
1783
1163
  width: 100%;
1784
1164
  max-width: 20rem;
1785
- gap: 1.5rem;
1165
+ gap: 1rem;
1786
1166
  flex-direction: column;
1787
1167
  }
1788
- :host .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__menu.ids-header-1177-avatar__menu--expanded {
1168
+ .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__menu.ids-header-1177-avatar__menu--expanded {
1789
1169
  display: flex;
1790
1170
  }
1791
- :host .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__menu .ids-header-1177-avatar__agent p,
1792
- :host .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__menu .ids-header-1177-avatar__agent ::slotted(p) {
1171
+ .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__menu .ids-header-1177-avatar__agent p {
1793
1172
  font-style: normal;
1794
1173
  color: var(--ids-color-surface-text-on-default);
1795
1174
  font-family: var(--ids-font-family-body-text);
1796
1175
  font-size: var(--ids-font-size-body-text);
1797
- line-height: var(--ids-line-height-body-text);
1176
+ line-height: var(--ids-font-line-height-body-text);
1798
1177
  font-weight: var(--ids-font-weight-body-text);
1799
1178
  letter-spacing: 0;
1800
1179
  margin-top: 0.75rem !important;
1801
1180
  margin-bottom: 0 !important;
1802
1181
  }
1803
- :host .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__menu .ids-header-1177-avatar__menu-links {
1182
+ .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__menu .ids-header-1177-avatar__menu-links {
1804
1183
  display: flex;
1805
1184
  flex-direction: column;
1806
- gap: 1.5rem;
1185
+ gap: 1rem;
1807
1186
  }
1808
- :host .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__menu hr,
1809
- :host .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__menu ::slotted(hr) {
1187
+ .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__menu hr {
1810
1188
  width: 100%;
1811
1189
  height: 0.0625rem;
1812
1190
  display: block;
@@ -1815,97 +1193,13 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__nav-mobil
1815
1193
  border-top: 0.0625rem solid var(--IDS-HEADER-1177-AVATAR__MENU-SEPARATOR-COLOR);
1816
1194
  }
1817
1195
 
1818
- .ids-header-1177--unresponsive nav.ids-header-1177__nav {
1819
- background-color: var(--IDS-HEADER-1177-NAV__BACKGROUND-COLOR);
1820
- border-top: 0.0625rem solid var(--IDS-HEADER-1177-NAV__BORDER-COLOR);
1821
- position: relative;
1822
- width: 100%;
1823
- }
1824
- .ids-header-1177--unresponsive nav.ids-header-1177__nav .ids-header-1177__nav-inner {
1825
- max-width: var(--IDS__MAX-WIDTH);
1826
- padding: var(--IDS__CONTAINER-PADDING);
1827
- box-sizing: border-box;
1828
- background-color: var(--IDS-HEADER-1177-NAV__BACKGROUND-COLOR);
1829
- display: flex;
1830
- flex-wrap: wrap;
1831
- align-items: flex-start;
1832
- margin: 0 auto;
1833
- }
1834
- .ids-header-1177--unresponsive nav.ids-header-1177__nav .ids-header-1177__nav-inner .ids-header-1177__nav-content {
1835
- display: flex;
1836
- width: 100%;
1837
- justify-content: flex-start;
1838
- }
1839
- .ids-header-1177--unresponsive nav.ids-header-1177__nav .ids-header-1177__nav-inner-mobile {
1840
- display: none;
1841
- }
1842
- @media (max-width: 1024px) {
1843
- .ids-header-1177--unresponsive nav.ids-header-1177__nav.ids-header-1177__nav--hide-on-tablet {
1844
- display: none;
1845
- }
1846
- }
1847
-
1848
- .ids-header-1177:not(.ids-header-1177--unresponsive) nav.ids-header-1177__nav {
1849
- background-color: var(--IDS-HEADER-1177-NAV__BACKGROUND-COLOR);
1850
- border-top: 0.0625rem solid var(--IDS-HEADER-1177-NAV__BORDER-COLOR);
1851
- position: relative;
1852
- width: 100%;
1853
- }
1854
- .ids-header-1177:not(.ids-header-1177--unresponsive) nav.ids-header-1177__nav .ids-header-1177__nav-inner {
1855
- max-width: var(--IDS__MAX-WIDTH);
1856
- padding: var(--IDS__CONTAINER-PADDING);
1857
- box-sizing: border-box;
1858
- background-color: var(--IDS-HEADER-1177-NAV__BACKGROUND-COLOR);
1859
- display: flex;
1860
- flex-wrap: wrap;
1861
- align-items: flex-start;
1862
- margin: 0 auto;
1863
- }
1864
- .ids-header-1177:not(.ids-header-1177--unresponsive) nav.ids-header-1177__nav .ids-header-1177__nav-inner .ids-header-1177__nav-content {
1865
- display: flex;
1866
- width: 100%;
1867
- justify-content: flex-start;
1868
- }
1869
- .ids-header-1177:not(.ids-header-1177--unresponsive) nav.ids-header-1177__nav .ids-header-1177__nav-inner-mobile {
1870
- display: none;
1871
- }
1872
- @media (max-width: 1024px) {
1873
- .ids-header-1177:not(.ids-header-1177--unresponsive) nav.ids-header-1177__nav {
1874
- border-bottom: none;
1875
- }
1876
- .ids-header-1177:not(.ids-header-1177--unresponsive) nav.ids-header-1177__nav .ids-header-1177__nav-inner-mobile {
1877
- background-color: var(--IDS-HEADER-1177-NAV__BACKGROUND-COLOR);
1878
- display: flex;
1879
- align-items: center;
1880
- justify-content: space-between;
1881
- box-sizing: border-box;
1882
- min-height: 3rem;
1883
- }
1884
- .ids-header-1177:not(.ids-header-1177--unresponsive) nav.ids-header-1177__nav .ids-header-1177__nav-inner-mobile-left {
1885
- justify-content: flex-start;
1886
- margin-left: 1rem;
1887
- }
1888
- .ids-header-1177:not(.ids-header-1177--unresponsive) nav.ids-header-1177__nav .ids-header-1177__nav-inner-mobile-right {
1889
- justify-content: flex-end;
1890
- margin-right: 1rem;
1891
- }
1892
- .ids-header-1177:not(.ids-header-1177--unresponsive) nav.ids-header-1177__nav .ids-header-1177__nav-content {
1893
- margin: 0 1.25rem;
1894
- }
1895
- }
1896
- @media (max-width: 1024px) {
1897
- .ids-header-1177:not(.ids-header-1177--unresponsive) nav.ids-header-1177__nav.ids-header-1177__nav--hide-on-tablet {
1898
- display: none;
1899
- }
1900
- }
1901
-
1902
- :host nav.ids-header-1177__nav:not(.ids-header-1177__nav--unresponsive) {
1196
+ nav.ids-header-1177-nav:not(.ids-header-1177-nav--unresponsive) {
1903
1197
  background-color: var(--IDS-HEADER-1177-NAV__BACKGROUND-COLOR);
1904
1198
  border-top: 0.0625rem solid var(--IDS-HEADER-1177-NAV__BORDER-COLOR);
1905
1199
  position: relative;
1906
1200
  width: 100%;
1907
1201
  }
1908
- :host nav.ids-header-1177__nav:not(.ids-header-1177__nav--unresponsive) .ids-header-1177__nav-inner {
1202
+ nav.ids-header-1177-nav:not(.ids-header-1177-nav--unresponsive) .ids-header-1177-nav__inner {
1909
1203
  max-width: var(--IDS__MAX-WIDTH);
1910
1204
  padding: var(--IDS__CONTAINER-PADDING);
1911
1205
  box-sizing: border-box;
@@ -1915,19 +1209,19 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__nav-mobil
1915
1209
  align-items: flex-start;
1916
1210
  margin: 0 auto;
1917
1211
  }
1918
- :host nav.ids-header-1177__nav:not(.ids-header-1177__nav--unresponsive) .ids-header-1177__nav-inner .ids-header-1177__nav-content {
1212
+ nav.ids-header-1177-nav:not(.ids-header-1177-nav--unresponsive) .ids-header-1177-nav__inner .ids-header-1177-nav__content {
1919
1213
  display: flex;
1920
1214
  width: 100%;
1921
1215
  justify-content: flex-start;
1922
1216
  }
1923
- :host nav.ids-header-1177__nav:not(.ids-header-1177__nav--unresponsive) .ids-header-1177__nav-inner-mobile {
1217
+ nav.ids-header-1177-nav:not(.ids-header-1177-nav--unresponsive) .ids-header-1177-nav__inner-mobile {
1924
1218
  display: none;
1925
1219
  }
1926
1220
  @media (max-width: 1024px) {
1927
- :host nav.ids-header-1177__nav:not(.ids-header-1177__nav--unresponsive) {
1221
+ nav.ids-header-1177-nav:not(.ids-header-1177-nav--unresponsive) {
1928
1222
  border-bottom: none;
1929
1223
  }
1930
- :host nav.ids-header-1177__nav:not(.ids-header-1177__nav--unresponsive) .ids-header-1177__nav-inner-mobile {
1224
+ nav.ids-header-1177-nav:not(.ids-header-1177-nav--unresponsive) .ids-header-1177-nav__inner-mobile {
1931
1225
  background-color: var(--IDS-HEADER-1177-NAV__BACKGROUND-COLOR);
1932
1226
  display: flex;
1933
1227
  align-items: center;
@@ -1935,30 +1229,30 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__nav-mobil
1935
1229
  box-sizing: border-box;
1936
1230
  min-height: 3rem;
1937
1231
  }
1938
- :host nav.ids-header-1177__nav:not(.ids-header-1177__nav--unresponsive) .ids-header-1177__nav-inner-mobile-left {
1232
+ nav.ids-header-1177-nav:not(.ids-header-1177-nav--unresponsive) .ids-header-1177-nav__inner-mobile-left {
1939
1233
  justify-content: flex-start;
1940
1234
  margin-left: 1rem;
1941
1235
  }
1942
- :host nav.ids-header-1177__nav:not(.ids-header-1177__nav--unresponsive) .ids-header-1177__nav-inner-mobile-right {
1236
+ nav.ids-header-1177-nav:not(.ids-header-1177-nav--unresponsive) .ids-header-1177-nav__inner-mobile-right {
1943
1237
  justify-content: flex-end;
1944
1238
  margin-right: 1rem;
1945
1239
  }
1946
- :host nav.ids-header-1177__nav:not(.ids-header-1177__nav--unresponsive) .ids-header-1177__nav-content {
1240
+ nav.ids-header-1177-nav:not(.ids-header-1177-nav--unresponsive) .ids-header-1177-nav__content {
1947
1241
  margin: 0 1.25rem;
1948
1242
  }
1949
1243
  }
1950
1244
  @media (max-width: 1024px) {
1951
- :host nav.ids-header-1177__nav:not(.ids-header-1177__nav--unresponsive).ids-header-1177__nav--hide-on-tablet {
1245
+ nav.ids-header-1177-nav:not(.ids-header-1177-nav--unresponsive).ids-header-1177-nav--hide-on-tablet {
1952
1246
  display: none;
1953
1247
  }
1954
1248
  }
1955
- :host nav.ids-header-1177__nav.ids-header-1177__nav--unresponsive {
1249
+ nav.ids-header-1177-nav.ids-header-1177-nav--unresponsive {
1956
1250
  background-color: var(--IDS-HEADER-1177-NAV__BACKGROUND-COLOR);
1957
1251
  border-top: 0.0625rem solid var(--IDS-HEADER-1177-NAV__BORDER-COLOR);
1958
1252
  position: relative;
1959
1253
  width: 100%;
1960
1254
  }
1961
- :host nav.ids-header-1177__nav.ids-header-1177__nav--unresponsive .ids-header-1177__nav-inner {
1255
+ nav.ids-header-1177-nav.ids-header-1177-nav--unresponsive .ids-header-1177-nav__inner {
1962
1256
  max-width: var(--IDS__MAX-WIDTH);
1963
1257
  padding: var(--IDS__CONTAINER-PADDING);
1964
1258
  box-sizing: border-box;
@@ -1968,16 +1262,16 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__nav-mobil
1968
1262
  align-items: flex-start;
1969
1263
  margin: 0 auto;
1970
1264
  }
1971
- :host nav.ids-header-1177__nav.ids-header-1177__nav--unresponsive .ids-header-1177__nav-inner .ids-header-1177__nav-content {
1265
+ nav.ids-header-1177-nav.ids-header-1177-nav--unresponsive .ids-header-1177-nav__inner .ids-header-1177-nav__content {
1972
1266
  display: flex;
1973
1267
  width: 100%;
1974
1268
  justify-content: flex-start;
1975
1269
  }
1976
- :host nav.ids-header-1177__nav.ids-header-1177__nav--unresponsive .ids-header-1177__nav-inner-mobile {
1270
+ nav.ids-header-1177-nav.ids-header-1177-nav--unresponsive .ids-header-1177-nav__inner-mobile {
1977
1271
  display: none;
1978
1272
  }
1979
1273
  @media (max-width: 1024px) {
1980
- :host nav.ids-header-1177__nav.ids-header-1177__nav--unresponsive.ids-header-1177__nav--hide-on-tablet {
1274
+ nav.ids-header-1177-nav.ids-header-1177-nav--unresponsive.ids-header-1177-nav--hide-on-tablet {
1981
1275
  display: none;
1982
1276
  }
1983
1277
  }
@@ -2029,10 +1323,8 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__nav-mobil
2029
1323
  margin-right: 0.625rem;
2030
1324
  }
2031
1325
  .ids-header-1177-nav-item .ids-header-1177-nav-item__button a,
2032
- .ids-header-1177-nav-item .ids-header-1177-nav-item__button ::slotted(a),
2033
- .ids-header-1177-nav-item .ids-header-1177-nav-item__link a,
2034
- .ids-header-1177-nav-item .ids-header-1177-nav-item__link ::slotted(a) {
2035
- padding: 0;
1326
+ .ids-header-1177-nav-item .ids-header-1177-nav-item__link a {
1327
+ padding: 0.75rem 0;
2036
1328
  font-size: 1.25rem;
2037
1329
  line-height: 1.5rem;
2038
1330
  font-weight: var(--IDS-HEADER-1177-NAV-ITEM__FONT-WEIGHT);
@@ -2040,6 +1332,10 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__nav-mobil
2040
1332
  color: var(--IDS-HEADER-1177-NAV-ITEM__COLOR);
2041
1333
  text-decoration: none;
2042
1334
  }
1335
+ .ids-header-1177-nav-item .ids-header-1177-nav-item__button a:focus-visible,
1336
+ .ids-header-1177-nav-item .ids-header-1177-nav-item__link a:focus-visible {
1337
+ outline: var(--IDS-FOCUS__OUTLINE);
1338
+ }
2043
1339
  .ids-header-1177-nav-item .ids-header-1177-nav-item__button:hover,
2044
1340
  .ids-header-1177-nav-item .ids-header-1177-nav-item__link:hover {
2045
1341
  text-decoration: none;
@@ -2049,11 +1345,7 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__nav-mobil
2049
1345
  width: auto;
2050
1346
  right: 0;
2051
1347
  }
2052
- .ids-header-1177-nav-item .ids-header-1177-nav-item__button a:focus-visible,
2053
- .ids-header-1177-nav-item .ids-header-1177-nav-item__button ::slotted(a:focus-visible), .ids-header-1177-nav-item .ids-header-1177-nav-item__button:focus-visible,
2054
- .ids-header-1177-nav-item .ids-header-1177-nav-item__link a:focus-visible,
2055
- .ids-header-1177-nav-item .ids-header-1177-nav-item__link ::slotted(a:focus-visible),
2056
- .ids-header-1177-nav-item .ids-header-1177-nav-item__link:focus-visible {
1348
+ .ids-header-1177-nav-item button:focus-visible {
2057
1349
  outline: var(--IDS-FOCUS__OUTLINE);
2058
1350
  }
2059
1351
  .ids-header-1177-nav-item.ids-header-1177-nav-item--active .ids-header-1177-nav-item__button:after,
@@ -2071,23 +1363,22 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__nav-mobil
2071
1363
  right: 0;
2072
1364
  }
2073
1365
  .ids-header-1177-nav-item .ids-header-1177-nav-item__menu {
1366
+ border-top: 0.0625rem solid var(--IDS-HEADER-1177-NAV__BORDER-COLOR);
2074
1367
  background-color: var(--IDS-HEADER-1177-NAV-ITEM-MENU__BACKGROUND-COLOR);
2075
1368
  box-shadow: var(--IDS-BOX-SHADOW-ELEVATED-2);
2076
1369
  left: 0;
2077
1370
  right: 0;
2078
- top: 101%;
1371
+ top: 100%;
2079
1372
  min-height: 10.813rem;
2080
1373
  overflow: hidden;
2081
1374
  padding: 3rem 0;
2082
1375
  position: absolute;
2083
1376
  width: 100%;
2084
- z-index: 20;
2085
- display: flex;
2086
1377
  box-sizing: border-box;
2087
1378
  display: none;
2088
1379
  }
2089
1380
  .ids-header-1177-nav-item .ids-header-1177-nav-item__menu.ids-header-1177-nav-item__menu--expanded {
2090
- display: block;
1381
+ display: flex;
2091
1382
  }
2092
1383
  .ids-header-1177-nav-item .ids-header-1177-nav-item__menu-content {
2093
1384
  max-width: var(--IDS__MAX-WIDTH);
@@ -2104,16 +1395,6 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__nav-mobil
2104
1395
  flex: 0 25%;
2105
1396
  flex-shrink: 0;
2106
1397
  }
2107
- .ids-header-1177-nav-item ::slotted([slot=col-1]),
2108
- .ids-header-1177-nav-item ::slotted([slot=col-2]),
2109
- .ids-header-1177-nav-item ::slotted([slot=col-3]) {
2110
- display: block;
2111
- padding: 0.5rem 0;
2112
- margin-right: 2.5rem;
2113
- font-size: 1rem;
2114
- line-height: 1.5rem;
2115
- border-bottom: 0.063rem solid var(--IDS-HEADER-1177-NAV-ITEM-MENU__LINK-BORDER-COLOR);
2116
- }
2117
1398
  .ids-header-1177-nav-item .ids-header-1177-nav-item__menu-col-1 ids-link,
2118
1399
  .ids-header-1177-nav-item .ids-header-1177-nav-item__menu-col-1 .ids-header-1177-nav__menu-item-wrapper,
2119
1400
  .ids-header-1177-nav-item .ids-header-1177-nav-item__menu-col-2 ids-link,
@@ -2133,53 +1414,7 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__nav-mobil
2133
1414
  }
2134
1415
  }
2135
1416
 
2136
- :host .ids-header-1177-nav-item {
2137
- margin-bottom: -0.0625rem;
2138
- }
2139
-
2140
- .ids-header-1177--unresponsive .ids-header-1177-nav-item-mobile {
2141
- display: none;
2142
- gap: 0.5rem;
2143
- align-items: center;
2144
- justify-content: center;
2145
- font-size: 0.875rem;
2146
- padding: 0 0.25rem;
2147
- margin-left: 0.75rem;
2148
- height: 2rem;
2149
- position: relative;
2150
- color: var(--IDS-HEADER-1177-NAV-ITEM-MOBILE__COLOR);
2151
- cursor: pointer;
2152
- }
2153
- .ids-header-1177--unresponsive .ids-header-1177-nav-item-mobile .ids-header-1177-nav-item-mobile__icon {
2154
- font-size: 1.5rem;
2155
- display: inline-block;
2156
- margin-bottom: -0.1875rem;
2157
- color: var(--IDS-HEADER-1177-NAV-ITEM-MOBILE__COLOR);
2158
- position: absolute;
2159
- left: 0.25rem;
2160
- }
2161
- .ids-header-1177--unresponsive .ids-header-1177-nav-item-mobile a,
2162
- .ids-header-1177--unresponsive .ids-header-1177-nav-item-mobile ::slotted(a) {
2163
- height: 2rem;
2164
- display: flex;
2165
- text-decoration: none;
2166
- color: var(--IDS-HEADER-1177-NAV-ITEM-MOBILE__COLOR);
2167
- align-items: center;
2168
- justify-content: flex-end;
2169
- padding-left: 2rem;
2170
- padding-right: 0.25rem;
2171
- }
2172
- .ids-header-1177--unresponsive .ids-header-1177-nav-item-mobile:hover .ids-header-1177-nav-item-mobile__icon {
2173
- color: var(--IDS-HEADER-1177-NAV-ITEM-MOBILE__HOVER-COLOR);
2174
- }
2175
- .ids-header-1177--unresponsive .ids-header-1177-nav-item-mobile a:hover,
2176
- .ids-header-1177--unresponsive .ids-header-1177-nav-item-mobile ::slotted(a:hover) {
2177
- color: var(--IDS-HEADER-1177-NAV-ITEM-MOBILE__HOVER-COLOR);
2178
- text-decoration: underline;
2179
- text-underline-offset: 0.125rem;
2180
- }
2181
-
2182
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-nav-item-mobile {
1417
+ .ids-header-1177-nav-item-mobile {
2183
1418
  display: none;
2184
1419
  gap: 0.5rem;
2185
1420
  align-items: center;
@@ -2192,7 +1427,7 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__nav-mobil
2192
1427
  color: var(--IDS-HEADER-1177-NAV-ITEM-MOBILE__COLOR);
2193
1428
  cursor: pointer;
2194
1429
  }
2195
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-nav-item-mobile .ids-header-1177-nav-item-mobile__icon {
1430
+ .ids-header-1177-nav-item-mobile .ids-header-1177-nav-item-mobile__icon {
2196
1431
  font-size: 1.5rem;
2197
1432
  display: inline-block;
2198
1433
  margin-bottom: -0.1875rem;
@@ -2200,8 +1435,8 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__nav-mobil
2200
1435
  position: absolute;
2201
1436
  left: 0.25rem;
2202
1437
  }
2203
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-nav-item-mobile a,
2204
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-nav-item-mobile ::slotted(a) {
1438
+ .ids-header-1177-nav-item-mobile a,
1439
+ .ids-header-1177-nav-item-mobile button {
2205
1440
  height: 2rem;
2206
1441
  display: flex;
2207
1442
  text-decoration: none;
@@ -2210,138 +1445,51 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__nav-mobil
2210
1445
  justify-content: flex-end;
2211
1446
  padding-left: 2rem;
2212
1447
  padding-right: 0.25rem;
2213
- }
2214
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-nav-item-mobile:hover .ids-header-1177-nav-item-mobile__icon {
2215
- color: var(--IDS-HEADER-1177-NAV-ITEM-MOBILE__HOVER-COLOR);
2216
- }
2217
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-nav-item-mobile a:hover,
2218
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-nav-item-mobile ::slotted(a:hover) {
2219
- color: var(--IDS-HEADER-1177-NAV-ITEM-MOBILE__HOVER-COLOR);
2220
- text-decoration: underline;
2221
- text-underline-offset: 0.125rem;
2222
- }
2223
- @media (max-width: 1024px) {
2224
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-nav-item-mobile {
2225
- display: flex;
2226
- }
2227
- }
2228
-
2229
- :host .ids-header-1177-nav-item-mobile:not(.ids-header-1177-nav-item-mobile--unresponsive) {
2230
- display: none;
2231
- gap: 0.5rem;
2232
- align-items: center;
2233
- justify-content: center;
2234
- font-size: 0.875rem;
2235
- padding: 0 0.25rem;
2236
- margin-left: 0.75rem;
2237
- height: 2rem;
2238
- position: relative;
2239
- color: var(--IDS-HEADER-1177-NAV-ITEM-MOBILE__COLOR);
1448
+ background: none;
1449
+ border: none;
2240
1450
  cursor: pointer;
2241
1451
  }
2242
- :host .ids-header-1177-nav-item-mobile:not(.ids-header-1177-nav-item-mobile--unresponsive) .ids-header-1177-nav-item-mobile__icon {
2243
- font-size: 1.5rem;
2244
- display: inline-block;
2245
- margin-bottom: -0.1875rem;
2246
- color: var(--IDS-HEADER-1177-NAV-ITEM-MOBILE__COLOR);
2247
- position: absolute;
2248
- left: 0.25rem;
2249
- }
2250
- :host .ids-header-1177-nav-item-mobile:not(.ids-header-1177-nav-item-mobile--unresponsive) a,
2251
- :host .ids-header-1177-nav-item-mobile:not(.ids-header-1177-nav-item-mobile--unresponsive) ::slotted(a) {
2252
- height: 2rem;
2253
- display: flex;
2254
- text-decoration: none;
2255
- color: var(--IDS-HEADER-1177-NAV-ITEM-MOBILE__COLOR);
2256
- align-items: center;
2257
- justify-content: flex-end;
2258
- padding-left: 2rem;
2259
- padding-right: 0.25rem;
2260
- }
2261
- :host .ids-header-1177-nav-item-mobile:not(.ids-header-1177-nav-item-mobile--unresponsive):hover .ids-header-1177-nav-item-mobile__icon {
1452
+ .ids-header-1177-nav-item-mobile:hover .ids-header-1177-nav-item-mobile__icon {
2262
1453
  color: var(--IDS-HEADER-1177-NAV-ITEM-MOBILE__HOVER-COLOR);
2263
1454
  }
2264
- :host .ids-header-1177-nav-item-mobile:not(.ids-header-1177-nav-item-mobile--unresponsive) a:hover,
2265
- :host .ids-header-1177-nav-item-mobile:not(.ids-header-1177-nav-item-mobile--unresponsive) ::slotted(a:hover) {
1455
+ .ids-header-1177-nav-item-mobile a:hover,
1456
+ .ids-header-1177-nav-item-mobile button:hover {
2266
1457
  color: var(--IDS-HEADER-1177-NAV-ITEM-MOBILE__HOVER-COLOR);
2267
1458
  text-decoration: underline;
2268
1459
  text-underline-offset: 0.125rem;
2269
1460
  }
2270
1461
  @media (max-width: 1024px) {
2271
- :host .ids-header-1177-nav-item-mobile:not(.ids-header-1177-nav-item-mobile--unresponsive) {
1462
+ .ids-header-1177-nav-item-mobile:not(.ids-header-1177-nav-item-mobile--unresponsive) {
2272
1463
  display: flex;
2273
1464
  }
2274
1465
  }
2275
- :host .ids-header-1177-nav-item-mobile.ids-header-1177-nav-item-mobile--unresponsive {
2276
- display: none;
2277
- gap: 0.5rem;
2278
- align-items: center;
2279
- justify-content: center;
2280
- font-size: 0.875rem;
2281
- padding: 0 0.25rem;
2282
- margin-left: 0.75rem;
2283
- height: 2rem;
2284
- position: relative;
2285
- color: var(--IDS-HEADER-1177-NAV-ITEM-MOBILE__COLOR);
2286
- cursor: pointer;
2287
- }
2288
- :host .ids-header-1177-nav-item-mobile.ids-header-1177-nav-item-mobile--unresponsive .ids-header-1177-nav-item-mobile__icon {
2289
- font-size: 1.5rem;
2290
- display: inline-block;
2291
- margin-bottom: -0.1875rem;
2292
- color: var(--IDS-HEADER-1177-NAV-ITEM-MOBILE__COLOR);
2293
- position: absolute;
2294
- left: 0.25rem;
2295
- }
2296
- :host .ids-header-1177-nav-item-mobile.ids-header-1177-nav-item-mobile--unresponsive a,
2297
- :host .ids-header-1177-nav-item-mobile.ids-header-1177-nav-item-mobile--unresponsive ::slotted(a) {
2298
- height: 2rem;
2299
- display: flex;
2300
- text-decoration: none;
2301
- color: var(--IDS-HEADER-1177-NAV-ITEM-MOBILE__COLOR);
2302
- align-items: center;
2303
- justify-content: flex-end;
2304
- padding-left: 2rem;
2305
- padding-right: 0.25rem;
2306
- }
2307
- :host .ids-header-1177-nav-item-mobile.ids-header-1177-nav-item-mobile--unresponsive:hover .ids-header-1177-nav-item-mobile__icon {
2308
- color: var(--IDS-HEADER-1177-NAV-ITEM-MOBILE__HOVER-COLOR);
2309
- }
2310
- :host .ids-header-1177-nav-item-mobile.ids-header-1177-nav-item-mobile--unresponsive a:hover,
2311
- :host .ids-header-1177-nav-item-mobile.ids-header-1177-nav-item-mobile--unresponsive ::slotted(a:hover) {
2312
- color: var(--IDS-HEADER-1177-NAV-ITEM-MOBILE__HOVER-COLOR);
2313
- text-decoration: underline;
2314
- text-underline-offset: 0.125rem;
2315
- }
2316
1466
 
2317
1467
  .ids-header-1177-menu-mobile {
2318
- background: none;
2319
- color: inherit;
2320
- border: none;
2321
- padding: 0;
2322
- font: inherit;
2323
- cursor: pointer;
2324
- outline: inherit;
1468
+ display: none;
2325
1469
  }
2326
- .ids-header-1177-menu-mobile:focus-visible {
1470
+ .ids-header-1177-menu-mobile .ids-header-1177-menu-mobile__button:focus-visible {
2327
1471
  outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
2328
1472
  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
2329
1473
  }
2330
- .ids-header-1177-menu-mobile {
2331
- padding: 0.5rem;
1474
+ .ids-header-1177-menu-mobile .ids-header-1177-menu-mobile__button {
1475
+ border: 0;
1476
+ background-color: transparent;
2332
1477
  height: 2.25rem;
2333
- margin-right: 0;
2334
- margin-left: 0.5rem;
1478
+ width: 2.25rem;
1479
+ justify-content: center;
1480
+ align-items: center;
1481
+ display: flex;
2335
1482
  cursor: pointer;
1483
+ margin-left: 0.75rem;
2336
1484
  }
2337
- .ids-header-1177-menu-mobile .ids-hamburger {
1485
+ .ids-header-1177-menu-mobile .ids-header-1177-menu-mobile__button .ids-hamburger {
2338
1486
  transition: all 0.2s;
2339
1487
  cursor: pointer;
2340
1488
  user-select: none;
2341
1489
  position: relative;
2342
1490
  flex-shrink: 0;
2343
1491
  }
2344
- .ids-header-1177-menu-mobile .ids-hamburger__lines {
1492
+ .ids-header-1177-menu-mobile .ids-header-1177-menu-mobile__button .ids-hamburger__lines {
2345
1493
  display: block;
2346
1494
  cursor: pointer;
2347
1495
  width: 1.3125rem;
@@ -2352,8 +1500,8 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__nav-mobil
2352
1500
  height: 0.125rem;
2353
1501
  width: 1.25rem;
2354
1502
  }
2355
- .ids-header-1177-menu-mobile .ids-hamburger__lines:before,
2356
- .ids-header-1177-menu-mobile .ids-hamburger__lines:after {
1503
+ .ids-header-1177-menu-mobile .ids-header-1177-menu-mobile__button .ids-hamburger__lines:before,
1504
+ .ids-header-1177-menu-mobile .ids-header-1177-menu-mobile__button .ids-hamburger__lines:after {
2357
1505
  display: inline-block;
2358
1506
  width: 1.3125rem;
2359
1507
  border-radius: 0.125rem;
@@ -2365,31 +1513,31 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__nav-mobil
2365
1513
  -webkit-transform-origin: 0.09375rem center;
2366
1514
  transform-origin: 0.09375rem center;
2367
1515
  }
2368
- .ids-header-1177-menu-mobile .ids-hamburger__lines:before,
2369
- .ids-header-1177-menu-mobile .ids-hamburger__lines:after {
1516
+ .ids-header-1177-menu-mobile .ids-header-1177-menu-mobile__button .ids-hamburger__lines:before,
1517
+ .ids-header-1177-menu-mobile .ids-header-1177-menu-mobile__button .ids-hamburger__lines:after {
2370
1518
  height: 0.125rem;
2371
1519
  width: 1.25rem;
2372
1520
  }
2373
- .ids-header-1177-menu-mobile .ids-hamburger__lines:before,
2374
- .ids-header-1177-menu-mobile .ids-hamburger__lines:after {
1521
+ .ids-header-1177-menu-mobile .ids-header-1177-menu-mobile__button .ids-hamburger__lines:before,
1522
+ .ids-header-1177-menu-mobile .ids-header-1177-menu-mobile__button .ids-hamburger__lines:after {
2375
1523
  -webkit-transform-origin: 0.13393rem center;
2376
1524
  transform-origin: 0.13393rem center;
2377
1525
  }
2378
- .ids-header-1177-menu-mobile .ids-hamburger__lines:before {
1526
+ .ids-header-1177-menu-mobile .ids-header-1177-menu-mobile__button .ids-hamburger__lines:before {
2379
1527
  top: 0.5rem;
2380
1528
  }
2381
- .ids-header-1177-menu-mobile .ids-hamburger__lines:after {
1529
+ .ids-header-1177-menu-mobile .ids-header-1177-menu-mobile__button .ids-hamburger__lines:after {
2382
1530
  top: -0.5rem;
2383
1531
  }
2384
- .ids-header-1177-menu-mobile:hover .ids-hamburger__lines,
2385
- .ids-header-1177-menu-mobile:hover .ids-hamburger__lines:before,
2386
- .ids-header-1177-menu-mobile:hover .ids-hamburger__lines:after {
1532
+ .ids-header-1177-menu-mobile .ids-header-1177-menu-mobile__button:hover .ids-hamburger__lines,
1533
+ .ids-header-1177-menu-mobile .ids-header-1177-menu-mobile__button:hover .ids-hamburger__lines:before,
1534
+ .ids-header-1177-menu-mobile .ids-header-1177-menu-mobile__button:hover .ids-hamburger__lines:after {
2387
1535
  background-color: var(--IDS-HEADER-1177-MOBILE-MENU__HAMBURGER-HOVER-COLOR);
2388
1536
  }
2389
- .ids-header-1177-menu-mobile[aria-expanded=true] .ids-hamburger .ids-hamburger__lines {
1537
+ .ids-header-1177-menu-mobile .ids-header-1177-menu-mobile__button[aria-expanded=true] .ids-hamburger .ids-hamburger__lines {
2390
1538
  background: transparent;
2391
1539
  }
2392
- .ids-header-1177-menu-mobile[aria-expanded=true] .ids-hamburger .ids-hamburger__lines:before, .ids-header-1177-menu-mobile[aria-expanded=true] .ids-hamburger .ids-hamburger__lines:after {
1540
+ .ids-header-1177-menu-mobile .ids-header-1177-menu-mobile__button[aria-expanded=true] .ids-hamburger .ids-hamburger__lines:before, .ids-header-1177-menu-mobile .ids-header-1177-menu-mobile__button[aria-expanded=true] .ids-hamburger .ids-hamburger__lines:after {
2393
1541
  -ms-transform-origin: 50% 50%;
2394
1542
  -webkit-transform-origin: 50% 50%;
2395
1543
  transform-origin: 50% 50%;
@@ -2397,50 +1545,43 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__nav-mobil
2397
1545
  width: 1.5rem;
2398
1546
  left: -0.1rem;
2399
1547
  }
2400
- .ids-header-1177-menu-mobile[aria-expanded=true] .ids-hamburger .ids-hamburger__lines:before {
1548
+ .ids-header-1177-menu-mobile .ids-header-1177-menu-mobile__button[aria-expanded=true] .ids-hamburger .ids-hamburger__lines:before {
2401
1549
  -ms-transform: rotate(45deg);
2402
1550
  -webkit-transform: rotate3d(0, 0, 1, 45deg);
2403
1551
  transform: rotate3d(0, 0, 1, 45deg);
2404
1552
  }
2405
- .ids-header-1177-menu-mobile[aria-expanded=true] .ids-hamburger .ids-hamburger__lines:after {
1553
+ .ids-header-1177-menu-mobile .ids-header-1177-menu-mobile__button[aria-expanded=true] .ids-hamburger .ids-hamburger__lines:after {
2406
1554
  -ms-transform: rotate(-45deg);
2407
1555
  -webkit-transform: rotate3d(0, 0, 1, -45deg);
2408
1556
  transform: rotate3d(0, 0, 1, -45deg);
2409
1557
  }
2410
- .ids-header-1177-menu-mobile:focus-visible {
1558
+ .ids-header-1177-menu-mobile .ids-header-1177-menu-mobile__button:focus-visible {
2411
1559
  outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
2412
1560
  outline-offset: 0 !important;
2413
- outline-color: var(--IDS-HEADER-1177-MOBILE-MENU__HAMBURGER-COLOR) !important;
2414
1561
  border-radius: 0.0625rem;
2415
1562
  }
2416
- .ids-header-1177-menu-mobile:focus-visible[aria-expanded=true] {
1563
+ .ids-header-1177-menu-mobile .ids-header-1177-menu-mobile__button:focus-visible[aria-expanded=true] {
2417
1564
  border-radius: 100%;
2418
1565
  }
2419
- .ids-header-1177-menu-mobile {
2420
- display: none;
2421
- }
2422
- @media (max-width: 1024px) {
2423
- .ids-header-1177-menu-mobile {
2424
- display: block;
2425
- }
2426
- }
2427
- .ids-header-1177-menu-mobile.ids-header-1177-menu-mobile--unresponsive {
2428
- display: none;
2429
- }
2430
-
2431
- .ids-header-1177-menu-mobile__items {
1566
+ .ids-header-1177-menu-mobile .ids-header-1177-menu-mobile__items {
2432
1567
  box-shadow: var(--IDS-BOX-SHADOW-ELEVATED-1);
2433
1568
  background-color: var(--IDS-HEADER-1177-MOBILE-MENU__BACKGROUND-COLOR);
2434
1569
  border-top: 0.0625rem solid var(--IDS-HEADER-1177-MOBILE-MENU__BORDER-COLOR);
2435
- display: none;
2436
1570
  position: absolute;
2437
1571
  left: 0;
2438
1572
  right: 0;
2439
1573
  z-index: 10;
2440
1574
  top: 100%;
1575
+ display: none;
2441
1576
  }
2442
1577
  @media (max-width: 1024px) {
2443
- .ids-header-1177-menu-mobile__items {
1578
+ .ids-header-1177-menu-mobile {
2444
1579
  display: block;
2445
1580
  }
1581
+ }
1582
+ .ids-header-1177-menu-mobile.ids-header-1177-menu-mobile--expanded .ids-header-1177-menu-mobile__items {
1583
+ display: block;
1584
+ }
1585
+ .ids-header-1177-menu-mobile.ids-header-1177-menu-mobile--unresponsive {
1586
+ display: none;
2446
1587
  }