@inera/ids-design 7.2.1 → 8.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 (200) hide show
  1. package/components/accordion/accordion-lit.js +1 -1
  2. package/components/accordion/accordion.css +157 -11
  3. package/components/alert/alert-lit.js +1 -1
  4. package/components/alert/alert.css +275 -77
  5. package/components/badge/badge-lit.js +1 -1
  6. package/components/badge/badge.css +16 -10
  7. package/components/box-link/box-link-lit.js +1 -1
  8. package/components/box-link/box-link.css +16 -28
  9. package/components/breadcrumbs/breadcrumbs-lit.js +1 -1
  10. package/components/breadcrumbs/breadcrumbs.css +11 -6
  11. package/components/button-group/button-group-lit.js +1 -1
  12. package/components/button-group/button-group.css +4 -0
  13. package/components/card/card-lit.js +1 -1
  14. package/components/card/card.css +162 -33
  15. package/components/carousel/carousel-item-lit.js +1 -1
  16. package/components/carousel/carousel-item.css +169 -7
  17. package/components/carousel/carousel-lit.js +1 -1
  18. package/components/carousel/carousel.css +18 -12
  19. package/components/data-table/data-table-lit.js +1 -1
  20. package/components/data-table/data-table.css +14 -6
  21. package/components/date-label/date-label-lit.js +1 -1
  22. package/components/date-label/date-label.css +35 -14
  23. package/components/dialog/dialog-lit.js +1 -1
  24. package/components/dialog/dialog.css +34 -39
  25. package/components/dropdown/dropdown-lit.js +1 -1
  26. package/components/dropdown/dropdown.css +87 -28
  27. package/components/footer-1177/footer-1177-lit.js +1 -1
  28. package/components/footer-1177/footer-1177.css +225 -116
  29. package/components/footer-1177-admin/footer-1177-admin-lit.js +1 -1
  30. package/components/footer-1177-admin/footer-1177-admin.css +292 -135
  31. package/components/footer-1177-pro/footer-1177-pro-lit.js +1 -1
  32. package/components/footer-1177-pro/footer-1177-pro.css +390 -104
  33. package/components/footer-inera/footer-inera-lit.js +1 -1
  34. package/components/footer-inera/footer-inera.css +279 -159
  35. package/components/footer-inera-admin/footer-inera-admin-lit.js +1 -1
  36. package/components/footer-inera-admin/footer-inera-admin.css +338 -183
  37. package/components/form/error-message/error-message-lit.js +1 -1
  38. package/components/form/error-message/error-message.css +10 -6
  39. package/components/form/group/group-lit.js +1 -1
  40. package/components/form/group/group.css +148 -1
  41. package/components/form/range/range-lit.js +1 -1
  42. package/components/form/range/range.css +225 -2
  43. package/components/form/select-multiple/select-multiple-lit.js +1 -1
  44. package/components/form/select-multiple/select-multiple.css +37 -33
  45. package/components/form/spinner/spinner-lit.js +1 -1
  46. package/components/form/spinner/spinner.css +6 -11
  47. package/components/global-alert/global-alert-lit.js +9 -0
  48. package/components/global-alert/global-alert.css +354 -0
  49. package/components/grid/container/container-lit.js +1 -1
  50. package/components/grid/container/container.css +2 -9
  51. package/components/header-1177/composite-header-1177.css +1105 -974
  52. package/components/header-1177/header-1177-avatar-lit.js +1 -1
  53. package/components/header-1177/header-1177-avatar.css +406 -191
  54. package/components/header-1177/header-1177-item-lit.js +1 -1
  55. package/components/header-1177/header-1177-item.css +125 -75
  56. package/components/header-1177/header-1177-lit.js +1 -1
  57. package/components/header-1177/header-1177-menu-mobile-lit.js +1 -1
  58. package/components/header-1177/header-1177-menu-mobile.css +14 -9
  59. package/components/header-1177/header-1177-nav-item-lit.js +1 -1
  60. package/components/header-1177/header-1177-nav-item-mobile-lit.js +1 -1
  61. package/components/header-1177/header-1177-nav-item-mobile.css +107 -164
  62. package/components/header-1177/header-1177-nav-item.css +109 -88
  63. package/components/header-1177/header-1177-nav-lit.js +1 -1
  64. package/components/header-1177/header-1177-nav.css +100 -45
  65. package/components/header-1177/header-1177-region-picker-lit.d.ts +2 -0
  66. package/components/header-1177/header-1177-region-picker-lit.js +7 -0
  67. package/components/header-1177/header-1177-region-picker-mobile-lit.d.ts +2 -0
  68. package/components/header-1177/header-1177-region-picker-mobile-lit.js +9 -0
  69. package/components/header-1177/header-1177-region-picker-mobile.css +112 -0
  70. package/components/header-1177/header-1177-region-picker.css +107 -0
  71. package/components/header-1177/header-1177.css +125 -450
  72. package/components/header-1177-admin/header-1177-admin-avatar-lit.js +1 -1
  73. package/components/header-1177-admin/header-1177-admin-avatar-mobile-lit.js +1 -1
  74. package/components/header-1177-admin/header-1177-admin-avatar-mobile.css +170 -29
  75. package/components/header-1177-admin/header-1177-admin-avatar.css +490 -278
  76. package/components/header-1177-admin/header-1177-admin-item-lit.js +1 -1
  77. package/components/header-1177-admin/header-1177-admin-item.css +131 -89
  78. package/components/header-1177-admin/header-1177-admin-lit.js +1 -1
  79. package/components/header-1177-admin/header-1177-admin-menu-mobile-lit.js +7 -0
  80. package/components/header-1177-admin/header-1177-admin-menu-mobile.css +145 -0
  81. package/components/header-1177-admin/header-1177-admin-nav-item-lit.js +1 -1
  82. package/components/header-1177-admin/header-1177-admin-nav-item.css +163 -134
  83. package/components/header-1177-admin/header-1177-admin-nav-lit.js +1 -1
  84. package/components/header-1177-admin/header-1177-admin-nav.css +76 -47
  85. package/components/header-1177-admin/header-1177-admin.css +91 -285
  86. package/components/header-1177-pro/header-1177-pro-avatar-lit.js +1 -1
  87. package/components/header-1177-pro/header-1177-pro-avatar-mobile-lit.js +1 -1
  88. package/components/header-1177-pro/header-1177-pro-avatar-mobile.css +146 -74
  89. package/components/header-1177-pro/header-1177-pro-avatar.css +448 -275
  90. package/components/header-1177-pro/header-1177-pro-item-lit.js +1 -1
  91. package/components/header-1177-pro/header-1177-pro-item.css +169 -103
  92. package/components/header-1177-pro/header-1177-pro-lit.js +1 -1
  93. package/components/header-1177-pro/header-1177-pro-menu-mobile-lit.js +7 -0
  94. package/components/header-1177-pro/header-1177-pro-menu-mobile.css +146 -0
  95. package/components/header-1177-pro/header-1177-pro-nav-item-lit.js +1 -1
  96. package/components/header-1177-pro/header-1177-pro-nav-item.css +139 -122
  97. package/components/header-1177-pro/header-1177-pro-nav-lit.js +1 -1
  98. package/components/header-1177-pro/header-1177-pro-nav.css +75 -46
  99. package/components/header-1177-pro/header-1177-pro-region-picker-lit.js +1 -1
  100. package/components/header-1177-pro/header-1177-pro-region-picker-mobile-lit.js +9 -0
  101. package/components/header-1177-pro/header-1177-pro-region-picker-mobile.css +117 -0
  102. package/components/header-1177-pro/header-1177-pro-region-picker.css +38 -810
  103. package/components/header-1177-pro/header-1177-pro.css +140 -139
  104. package/components/header-inera/header-inera-item-lit.js +1 -1
  105. package/components/header-inera/header-inera-item.css +31 -21
  106. package/components/header-inera/header-inera-lit.js +1 -1
  107. package/components/header-inera/header-inera-menu-mobile-lit.d.ts +2 -0
  108. package/components/header-inera/header-inera-menu-mobile-lit.js +7 -0
  109. package/components/header-inera/header-inera-menu-mobile.css +136 -0
  110. package/components/header-inera/header-inera-nav-item-lit.js +1 -1
  111. package/components/header-inera/header-inera-nav-item.css +26 -23
  112. package/components/header-inera/header-inera-nav-lit.js +1 -1
  113. package/components/header-inera/header-inera-nav.css +11 -8
  114. package/components/header-inera/header-inera.css +50 -21
  115. package/components/header-inera-admin/composite-header-inera-admin.css +858 -245
  116. package/components/header-inera-admin/header-inera-admin-avatar-lit.js +1 -1
  117. package/components/header-inera-admin/header-inera-admin-avatar-mobile-lit.js +1 -1
  118. package/components/header-inera-admin/header-inera-admin-avatar-mobile.css +173 -44
  119. package/components/header-inera-admin/header-inera-admin-avatar.css +558 -100
  120. package/components/header-inera-admin/header-inera-admin-item-lit.js +1 -1
  121. package/components/header-inera-admin/header-inera-admin-item.css +14 -7
  122. package/components/header-inera-admin/header-inera-admin-lit.js +1 -1
  123. package/components/header-inera-admin/header-inera-admin-menu-mobile-lit.d.ts +2 -0
  124. package/components/header-inera-admin/header-inera-admin-menu-mobile-lit.js +7 -0
  125. package/components/header-inera-admin/header-inera-admin-menu-mobile.css +147 -0
  126. package/components/header-inera-admin/header-inera-admin-nav-item-lit.js +1 -1
  127. package/components/header-inera-admin/header-inera-admin-nav-item.css +28 -25
  128. package/components/header-inera-admin/header-inera-admin-nav-lit.js +1 -1
  129. package/components/header-inera-admin/header-inera-admin-nav.css +16 -16
  130. package/components/header-inera-admin/header-inera-admin.css +34 -24
  131. package/components/header-patient/header-patient-lit.js +1 -1
  132. package/components/header-patient/header-patient.css +166 -8
  133. package/components/mobile-menu/mobile-menu-lit.js +1 -1
  134. package/components/mobile-menu/mobile-menu.css +340 -244
  135. package/components/navigation/content/navigation-content-lit.js +1 -1
  136. package/components/navigation/content/navigation-content.css +203 -16
  137. package/components/navigation/local/navigation-local-lit.js +1 -1
  138. package/components/navigation/local/navigation-local.css +37 -56
  139. package/components/notification-badge/notification-badge-lit.js +1 -1
  140. package/components/notification-badge/notification-badge.css +15 -13
  141. package/components/pagination/data-pagination/data-pagination-lit.js +1 -1
  142. package/components/pagination/data-pagination/data-pagination.css +206 -44
  143. package/components/pagination/list-pagination/list-pagination-lit.js +1 -1
  144. package/components/pagination/list-pagination/list-pagination.css +5 -5
  145. package/components/popover/popover-content-lit.js +1 -1
  146. package/components/popover/popover-content.css +262 -114
  147. package/components/progressbar/progressbar-lit.js +1 -1
  148. package/components/progressbar/progressbar.css +147 -4
  149. package/components/puff-list/puff-list-lit.js +1 -1
  150. package/components/puff-list/puff-list.css +258 -35
  151. package/components/region-icon/region-icon-lit.js +1 -1
  152. package/components/region-icon/region-icon.css +5 -5
  153. package/components/side-menu/side-menu-lit.js +1 -1
  154. package/components/side-menu/side-menu.css +6 -9
  155. package/components/side-panel/side-panel-lit.js +1 -1
  156. package/components/side-panel/side-panel.css +61 -26
  157. package/components/stepper/stepper-lit.js +1 -1
  158. package/components/stepper/stepper.css +170 -22
  159. package/components/table/table.css +6 -3
  160. package/components/tabs/tab-lit.js +1 -1
  161. package/components/tabs/tab-panel-lit.js +1 -1
  162. package/components/tabs/tab-panel.css +2 -0
  163. package/components/tabs/tab.css +26 -14
  164. package/components/tabs/tabs-lit.js +2 -2
  165. package/components/tabs/tabs.css +1 -1
  166. package/components/tag/tag-lit.js +1 -1
  167. package/components/tag/tag.css +10 -7
  168. package/components/tooltip/tooltip-lit.js +1 -1
  169. package/components/tooltip/tooltip.css +8 -5
  170. package/global/_partials.css +15 -0
  171. package/{themes/1177-pro/1177-pro.css → global/global.css} +3958 -3504
  172. package/global/icons/Inera-Design-Icons.eot +0 -0
  173. package/global/icons/Inera-Design-Icons.svg +9 -0
  174. package/global/icons/Inera-Design-Icons.ttf +0 -0
  175. package/global/icons/Inera-Design-Icons.woff +0 -0
  176. package/global/util/util.css +2745 -0
  177. package/package.json +1 -1
  178. package/reset.css +90 -0
  179. package/styles.css +8320 -0
  180. package/tokens/component-tokens.scss +86 -0
  181. package/tokens/themes/1177-admin-tokens.css +340 -263
  182. package/tokens/themes/1177-pro-tokens.css +340 -263
  183. package/tokens/themes/1177-tokens.css +340 -263
  184. package/tokens/themes/inera-admin-tokens.css +294 -252
  185. package/tokens/themes/inera-tokens.css +294 -252
  186. package/components/alert-global/alert-global-lit.js +0 -7
  187. package/components/alert-global/alert-global.css +0 -195
  188. package/components/header-1177-pro/header-1177-pro-nav-menu-mobile-lit.js +0 -7
  189. package/components/header-1177-pro/header-1177-pro-nav-menu-mobile.css +0 -304
  190. package/components/header-inera/header-inera-nav-mobile-lit.js +0 -7
  191. package/components/header-inera/header-inera-nav-mobile.css +0 -126
  192. package/components/header-inera-admin/header-inera-admin-nav-mobile-lit.js +0 -7
  193. package/components/header-inera-admin/header-inera-admin-nav-mobile.css +0 -126
  194. package/themes/1177/1177.css +0 -6196
  195. package/themes/inera/inera.css +0 -6220
  196. package/themes/inera-admin/inera-admin.css +0 -6293
  197. /package/components/{alert-global/alert-global-lit.d.ts → global-alert/global-alert-lit.d.ts} +0 -0
  198. /package/components/{header-1177-pro/header-1177-pro-nav-menu-mobile-lit.d.ts → header-1177-admin/header-1177-admin-menu-mobile-lit.d.ts} +0 -0
  199. /package/components/{header-inera-admin/header-inera-admin-nav-mobile-lit.d.ts → header-1177-pro/header-1177-pro-menu-mobile-lit.d.ts} +0 -0
  200. /package/components/{header-inera/header-inera-nav-mobile-lit.d.ts → header-1177-pro/header-1177-pro-region-picker-mobile-lit.d.ts} +0 -0
@@ -5,7 +5,7 @@
5
5
  * BUTTONS
6
6
  ********/
7
7
  /*******
8
- * SCROLLBARS
8
+ * SCROLLBAR
9
9
  ********/
10
10
  /*******
11
11
  * FORM
@@ -25,16 +25,15 @@
25
25
  }
26
26
  }
27
27
 
28
- .ids-header-1177-pro__items {
29
- display: block;
30
- margin-left: auto;
31
- }
32
-
33
28
  header.ids-header-1177-pro {
34
- background: var(--IDS-COLOR-NEUTRAL-100);
29
+ background-color: var(--IDS-HEADER-1177-PRO__BACKGROUND-COLOR);
30
+ border-bottom: 0.0625rem solid var(--IDS-HEADER-1177-PRO__BORDER-COLOR);
35
31
  position: relative;
36
- z-index: 1;
37
- border-top: 0.25rem solid var(--IDS-COLOR-ACCENT-40);
32
+ z-index: 2;
33
+ }
34
+ header.ids-header-1177-pro .ids-header-1177-pro__skip-to-content {
35
+ position: relative;
36
+ z-index: 20;
38
37
  }
39
38
  header.ids-header-1177-pro .ids-header-1177-pro__skip-to-content ::slotted(a),
40
39
  header.ids-header-1177-pro .ids-header-1177-pro__skip-to-content a {
@@ -44,8 +43,8 @@ header.ids-header-1177-pro .ids-header-1177-pro__skip-to-content a {
44
43
  padding: 0 1rem;
45
44
  height: 3rem;
46
45
  text-align: center;
47
- background-color: var(--IDS-COLOR-NEUTRAL-100);
48
- box-shadow: rgba(0, 0, 0, 0.3) 0 0 0.625rem 0;
46
+ background-color: var(--IDS-SKIP-TO-CONTENT-LINK__BACKGROUND-COLOR);
47
+ box-shadow: var(--IDS-BOX-SHADOW);
49
48
  z-index: 20;
50
49
  font-family: var(--IDS-LINK__FONT-FAMILY);
51
50
  font-size: 1rem;
@@ -66,60 +65,73 @@ header.ids-header-1177-pro .ids-header-1177-pro__skip-to-content a:focus {
66
65
  text-decoration-color: var(--IDS-LINK--COLOR-PRESET-1__HOVER-COLOR);
67
66
  outline-offset: -0.375rem !important;
68
67
  }
69
- header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container {
70
- padding: 0;
71
- position: relative;
72
- z-index: 2;
68
+ header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive):before {
69
+ content: "";
70
+ position: absolute;
71
+ top: 0;
72
+ left: 0;
73
+ right: 0;
74
+ height: 0.5rem;
75
+ z-index: 3;
76
+ background-color: var(--IDS-HEADER-1177-PRO__BRAND-BORDER-COLOR);
73
77
  }
74
78
  @media (max-width: 1024px) {
75
- header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container {
76
- box-shadow: 0 0 0.625rem 0 rgba(0, 0, 0, 0.2);
79
+ header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive):before {
80
+ height: 0.25rem;
77
81
  }
78
82
  }
79
- header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner {
83
+ header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__main {
80
84
  max-width: var(--IDS__MAX-WIDTH);
85
+ padding: var(--IDS__CONTAINER-PADDING);
81
86
  box-sizing: border-box;
82
87
  margin-left: auto;
83
88
  margin-right: auto;
84
89
  width: 100%;
85
90
  min-height: 7.25rem;
86
91
  position: relative;
87
- margin-left: auto;
88
- margin-right: auto;
89
92
  display: flex;
90
- flex-wrap: wrap;
91
93
  align-items: center;
92
94
  justify-content: space-between;
93
95
  }
96
+ header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__main .ids-header-1177-pro__region-picker {
97
+ display: flex;
98
+ flex-grow: 1;
99
+ align-items: center;
100
+ position: relative;
101
+ margin-left: 1.875rem;
102
+ }
94
103
  @media (max-width: 1024px) {
95
- header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner {
96
- padding: 0 1rem;
104
+ header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__main {
105
+ padding: 0.125rem 1rem 0 1rem;
97
106
  min-height: 3rem;
98
107
  }
108
+ header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__main .ids-header-1177-pro__region-picker {
109
+ display: none;
110
+ }
99
111
  }
100
- header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col {
112
+ header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__main .ids-header-1177-pro__main-left {
101
113
  display: flex;
102
114
  align-items: center;
103
115
  }
104
- header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo {
116
+ header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__main .ids-header-1177-pro__main-left .ids-header-1177-pro__logo {
105
117
  width: 6.438rem;
106
- min-height: 2.5rem;
118
+ height: 2rem;
107
119
  position: relative;
108
120
  display: flex;
109
121
  align-items: center;
110
122
  justify-content: center;
111
- margin-left: 1.25rem;
112
123
  margin-right: 1.5rem;
113
124
  }
114
- header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo .ids-header-1177-pro__logo-link {
125
+ header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__main .ids-header-1177-pro__main-left .ids-header-1177-pro__logo .ids-header-1177-pro__logo-link {
115
126
  position: relative;
116
127
  display: flex;
117
128
  align-items: center;
118
129
  width: 6.438rem;
119
- min-height: 2.5rem;
130
+ height: 2.25rem;
131
+ overflow: hidden;
120
132
  cursor: pointer;
121
133
  }
122
- header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo .ids-header-1177-pro__logo-link:before {
134
+ header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__main .ids-header-1177-pro__main-left .ids-header-1177-pro__logo .ids-header-1177-pro__logo-link:before {
123
135
  font: icon;
124
136
  font-family: "Inera-Design-Icons" !important;
125
137
  display: block;
@@ -128,162 +140,147 @@ header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1
128
140
  -webkit-font-smoothing: antialiased;
129
141
  -moz-osx-font-smoothing: grayscale;
130
142
  content: "\e91e";
131
- color: var(--IDS-ICON__COLOR);
143
+ color: var(--IDS-HEADER-1177-PRO__LOGO-COLOR);
132
144
  font-size: 6.125rem;
133
145
  }
134
- header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo a,
135
- header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo ::slotted([slot=logo]),
136
- header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo ::slotted(a) {
146
+ header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__main .ids-header-1177-pro__main-left .ids-header-1177-pro__logo a,
147
+ header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__main .ids-header-1177-pro__main-left .ids-header-1177-pro__logo ::slotted([slot=logo]),
148
+ header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__main .ids-header-1177-pro__main-left .ids-header-1177-pro__logo ::slotted(a) {
137
149
  display: flex;
138
150
  align-items: center;
139
151
  width: 6.438rem;
140
- min-height: 2.5rem;
152
+ overflow: hidden;
153
+ height: 2.25rem;
141
154
  font-size: 6.125rem;
142
- color: var(--IDS-ICON__COLOR);
155
+ color: var(--IDS-HEADER-1177-PRO__LOGO-COLOR);
143
156
  }
144
- header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo a:focus,
145
- header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo ::slotted([slot=logo]):focus,
146
- header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo ::slotted(a):focus {
157
+ header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__main .ids-header-1177-pro__main-left .ids-header-1177-pro__logo a:focus,
158
+ header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__main .ids-header-1177-pro__main-left .ids-header-1177-pro__logo ::slotted([slot=logo]):focus,
159
+ header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__main .ids-header-1177-pro__main-left .ids-header-1177-pro__logo ::slotted(a):focus {
147
160
  outline: var(--IDS-FOCUS__OUTLINE);
148
161
  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
149
162
  }
150
- header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo a:focus,
151
- header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo ::slotted([slot=logo]:focus),
152
- header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo ::slotted(a:focus) {
163
+ header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__main .ids-header-1177-pro__main-left .ids-header-1177-pro__logo a:focus,
164
+ header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__main .ids-header-1177-pro__main-left .ids-header-1177-pro__logo ::slotted([slot=logo]:focus),
165
+ header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__main .ids-header-1177-pro__main-left .ids-header-1177-pro__logo ::slotted(a:focus) {
153
166
  outline: var(--IDS-FOCUS__OUTLINE) !important;
154
167
  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET);
155
168
  }
156
169
  @media (max-width: 1024px) {
157
- header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo {
170
+ header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__main .ids-header-1177-pro__main-left .ids-header-1177-pro__logo {
158
171
  width: 2.563rem;
159
172
  margin-left: 0;
160
173
  margin-right: 0.75rem;
161
174
  }
162
- header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo .ids-header-1177-pro__logo-link:before {
175
+ header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__main .ids-header-1177-pro__main-left .ids-header-1177-pro__logo .ids-header-1177-pro__logo-link {
176
+ height: 1.875rem;
177
+ }
178
+ header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__main .ids-header-1177-pro__main-left .ids-header-1177-pro__logo .ids-header-1177-pro__logo-link:before {
163
179
  font-size: 2.5rem;
164
180
  }
165
- header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo a,
166
- header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo ::slotted([slot=logo]),
167
- header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo ::slotted(a) {
181
+ header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__main .ids-header-1177-pro__main-left .ids-header-1177-pro__logo a,
182
+ header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__main .ids-header-1177-pro__main-left .ids-header-1177-pro__logo ::slotted([slot=logo]),
183
+ header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__main .ids-header-1177-pro__main-left .ids-header-1177-pro__logo ::slotted(a) {
168
184
  font-size: 2.5rem;
185
+ height: 1.875rem;
169
186
  }
170
187
  }
171
- header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-text {
172
- color: var(--IDS-COLOR-ACCENT-30);
188
+ header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__main .ids-header-1177-pro__main-left .ids-header-1177-pro__logo-text {
189
+ color: var(--IDS-HEADER-1177-PRO__BRAND-TEXT-COLOR);
173
190
  font-family: var(--IDS-FONT-FAMILY-HEADING);
174
191
  font-weight: 700;
175
192
  font-size: 1.25rem;
176
- margin-left: 1.5rem;
177
- margin-right: 1.5rem;
193
+ margin-left: 1.625rem;
194
+ margin-right: 1.625rem;
178
195
  position: relative;
179
196
  }
180
- header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-text::before {
181
- left: -1.5rem;
197
+ header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__main .ids-header-1177-pro__main-left .ids-header-1177-pro__logo-text:before {
182
198
  content: "";
183
199
  position: absolute;
184
- display: block;
200
+ z-index: 1;
201
+ left: -1.5rem;
202
+ width: 0.0313rem;
185
203
  min-height: 4rem;
186
- width: 0.063rem;
187
204
  top: 50%;
188
205
  transform: translateY(-50%);
189
- background: var(--IDS-COLOR-ACCENT-30);
190
- }
191
- @media (max-width: 1024px) {
192
- header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-text::before {
193
- min-height: 2rem;
194
- }
206
+ background-color: var(--IDS-HEADER-1177-PRO__SEPARATOR-COLOR);
195
207
  }
196
208
  @media (max-width: 1024px) {
197
- header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-text {
209
+ header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__main .ids-header-1177-pro__main-left .ids-header-1177-pro__logo-text {
198
210
  margin-left: 0.75rem;
199
211
  margin-right: 0.75rem;
200
212
  font-size: 0.875rem;
201
213
  }
202
- header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-text::before {
203
- min-height: 2rem;
214
+ header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__main .ids-header-1177-pro__main-left .ids-header-1177-pro__logo-text::before {
204
215
  left: -0.75rem;
205
- content: "";
206
- position: absolute;
207
- display: block;
208
- min-height: 4rem;
209
- width: 0.063rem;
210
- top: 50%;
211
- transform: translateY(-50%);
212
- background: var(--IDS-COLOR-ACCENT-30);
213
- }
214
- }
215
- @media (max-width: 1024px) and (max-width: 1024px) {
216
- header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-text::before {
217
- min-height: 2rem;
216
+ min-height: 1.5rem;
218
217
  }
219
218
  }
220
- @media (max-width: 1024px) {
221
- header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-text::after {
222
- display: none;
223
- }
219
+ header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__main .ids-header-1177-pro__main-right {
220
+ flex-grow: 1;
221
+ display: flex;
222
+ justify-content: flex-end;
223
+ align-items: center;
224
+ margin-right: 0;
224
225
  }
225
- header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__items-inner {
226
+ header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__main .ids-header-1177-pro__main-right .ids-header-1177-pro__items {
226
227
  align-self: center;
228
+ align-items: center;
227
229
  display: flex;
228
- padding-right: 1.25rem;
229
- gap: 2.5rem;
230
- }
231
- @media (max-width: 1024px) {
232
- header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__items-inner:not(.ids-header-1177-pro__items__item--mobile) {
233
- gap: 0;
234
- margin-right: 0;
235
- padding-right: 0;
236
- }
237
230
  }
238
- @media (max-width: 1024px) {
239
- header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) {
240
- border-top: 0.25rem solid var(--IDS-COLOR-ACCENT-40);
241
- box-shadow: none;
242
- }
243
- }
244
- header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container {
245
- padding: 0;
246
- position: relative;
247
- z-index: 2;
231
+ header.ids-header-1177-pro.ids-header-1177-pro--unresponsive:before {
232
+ content: "";
233
+ position: absolute;
234
+ top: 0;
235
+ left: 0;
236
+ right: 0;
237
+ height: 0.5rem;
238
+ z-index: 3;
239
+ background-color: var(--IDS-HEADER-1177-PRO__BRAND-BORDER-COLOR);
248
240
  }
249
- header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner {
241
+ header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__main {
250
242
  max-width: var(--IDS__MAX-WIDTH);
243
+ padding: var(--IDS__CONTAINER-PADDING);
251
244
  box-sizing: border-box;
252
245
  margin-left: auto;
253
246
  margin-right: auto;
254
247
  width: 100%;
255
248
  min-height: 7.25rem;
256
249
  position: relative;
257
- margin-left: auto;
258
- margin-right: auto;
259
250
  display: flex;
260
- flex-wrap: wrap;
261
251
  align-items: center;
262
252
  justify-content: space-between;
263
253
  }
264
- header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col {
254
+ header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__main .ids-header-1177-pro__region-picker {
265
255
  display: flex;
256
+ flex-grow: 1;
266
257
  align-items: center;
258
+ position: relative;
259
+ margin-left: 1.875rem;
267
260
  }
268
- header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo {
261
+ header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__main .ids-header-1177-pro__main-left {
262
+ display: flex;
263
+ align-items: center;
264
+ }
265
+ header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__main .ids-header-1177-pro__main-left .ids-header-1177-pro__logo {
269
266
  width: 6.438rem;
270
- min-height: 2.5rem;
267
+ height: 2rem;
271
268
  position: relative;
272
269
  display: flex;
273
270
  align-items: center;
274
271
  justify-content: center;
275
- margin-left: 1.25rem;
276
272
  margin-right: 1.5rem;
277
273
  }
278
- header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo .ids-header-1177-pro__logo-link {
274
+ header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__main .ids-header-1177-pro__main-left .ids-header-1177-pro__logo .ids-header-1177-pro__logo-link {
279
275
  position: relative;
280
276
  display: flex;
281
277
  align-items: center;
282
278
  width: 6.438rem;
283
- min-height: 2.5rem;
279
+ height: 2.25rem;
280
+ overflow: hidden;
284
281
  cursor: pointer;
285
282
  }
286
- header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo .ids-header-1177-pro__logo-link:before {
283
+ header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__main .ids-header-1177-pro__main-left .ids-header-1177-pro__logo .ids-header-1177-pro__logo-link:before {
287
284
  font: icon;
288
285
  font-family: "Inera-Design-Icons" !important;
289
286
  display: block;
@@ -292,57 +289,61 @@ header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pr
292
289
  -webkit-font-smoothing: antialiased;
293
290
  -moz-osx-font-smoothing: grayscale;
294
291
  content: "\e91e";
295
- color: var(--IDS-ICON__COLOR);
292
+ color: var(--IDS-HEADER-1177-PRO__LOGO-COLOR);
296
293
  font-size: 6.125rem;
297
294
  }
298
- header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo a,
299
- header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo ::slotted([slot=logo]),
300
- header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo ::slotted(a) {
295
+ header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__main .ids-header-1177-pro__main-left .ids-header-1177-pro__logo a,
296
+ header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__main .ids-header-1177-pro__main-left .ids-header-1177-pro__logo ::slotted([slot=logo]),
297
+ header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__main .ids-header-1177-pro__main-left .ids-header-1177-pro__logo ::slotted(a) {
301
298
  display: flex;
302
299
  align-items: center;
303
300
  width: 6.438rem;
304
- min-height: 2.5rem;
301
+ overflow: hidden;
302
+ height: 2.25rem;
305
303
  font-size: 6.125rem;
306
- color: var(--IDS-ICON__COLOR);
304
+ color: var(--IDS-HEADER-1177-PRO__LOGO-COLOR);
307
305
  }
308
- header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo a:focus,
309
- header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo ::slotted([slot=logo]):focus,
310
- header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo ::slotted(a):focus {
306
+ header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__main .ids-header-1177-pro__main-left .ids-header-1177-pro__logo a:focus,
307
+ header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__main .ids-header-1177-pro__main-left .ids-header-1177-pro__logo ::slotted([slot=logo]):focus,
308
+ header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__main .ids-header-1177-pro__main-left .ids-header-1177-pro__logo ::slotted(a):focus {
311
309
  outline: var(--IDS-FOCUS__OUTLINE);
312
310
  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
313
311
  }
314
- header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo a:focus,
315
- header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo ::slotted([slot=logo]:focus),
316
- header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo ::slotted(a:focus) {
312
+ header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__main .ids-header-1177-pro__main-left .ids-header-1177-pro__logo a:focus,
313
+ header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__main .ids-header-1177-pro__main-left .ids-header-1177-pro__logo ::slotted([slot=logo]:focus),
314
+ header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__main .ids-header-1177-pro__main-left .ids-header-1177-pro__logo ::slotted(a:focus) {
317
315
  outline: var(--IDS-FOCUS__OUTLINE) !important;
318
316
  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET);
319
317
  }
320
- header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-text {
321
- color: var(--IDS-COLOR-ACCENT-30);
318
+ header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__main .ids-header-1177-pro__main-left .ids-header-1177-pro__logo-text {
319
+ color: var(--IDS-HEADER-1177-PRO__BRAND-TEXT-COLOR);
322
320
  font-family: var(--IDS-FONT-FAMILY-HEADING);
323
321
  font-weight: 700;
324
322
  font-size: 1.25rem;
325
- margin-left: 1.5rem;
326
- margin-right: 1.5rem;
323
+ margin-left: 1.625rem;
324
+ margin-right: 1.625rem;
327
325
  position: relative;
328
326
  }
329
- header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-text::before {
330
- left: -1.5rem;
327
+ header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__main .ids-header-1177-pro__main-left .ids-header-1177-pro__logo-text:before {
331
328
  content: "";
332
329
  position: absolute;
333
- display: block;
330
+ z-index: 1;
331
+ left: -1.5rem;
332
+ width: 0.0313rem;
334
333
  min-height: 4rem;
335
- width: 0.063rem;
336
334
  top: 50%;
337
335
  transform: translateY(-50%);
338
- background: var(--IDS-COLOR-ACCENT-30);
336
+ background-color: var(--IDS-HEADER-1177-PRO__SEPARATOR-COLOR);
339
337
  }
340
- header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__items-inner {
341
- align-self: center;
338
+ header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__main .ids-header-1177-pro__main-right {
339
+ flex-grow: 1;
342
340
  display: flex;
343
- padding-right: 1.25rem;
344
- gap: 2.5rem;
341
+ justify-content: flex-end;
342
+ align-items: center;
343
+ margin-right: 0;
345
344
  }
346
- header.ids-header-1177-pro.ids-header-1177-pro--fluid .ids-header-1177-pro__container .ids-header-1177-pro__inner {
347
- max-width: 100% !important;
345
+ header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__main .ids-header-1177-pro__main-right .ids-header-1177-pro__items {
346
+ align-self: center;
347
+ align-items: center;
348
+ display: flex;
348
349
  }
@@ -1,6 +1,6 @@
1
1
  import { css, unsafeCSS } from 'lit';
2
2
 
3
- var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-header-inera-item{align-items:center;background:none;border:0;cursor:pointer;display:none;line-height:1.5rem;margin-left:.5rem;padding:1rem .5rem;position:relative}.ids-header-inera-item.ids-header-inera-item--mobile{display:flex;max-height:3rem}.ids-header-inera-item .ids-header-inera-item__text{color:var(--IDS-COLOR-PRIMARY-30)!important;display:none;font-family:var(--IDS-FONT-FAMILY-HEADING)!important;font-size:1rem!important;font-weight:600!important;margin-left:.5rem;text-decoration:none}.ids-header-inera-item .ids-header-inera-item__icon{display:flex}.ids-header-inera-item .ids-header-inera-item__icon ::slotted([class^=ids-icon-]),.ids-header-inera-item .ids-header-inera-item__icon [class^=ids-icon-]{color:var(--IDS-COLOR-PRIMARY-40);font-size:1.5rem}.ids-header-inera-item:hover .ids-header-inera-item__icon [class^=ids-icon-]{color:var(--IDS-COLOR-PRIMARY-30)!important}.ids-header-inera-item ::slotted(:not([slot=icon])),.ids-header-inera-item a,.ids-header-inera-item button{bottom:0;cursor:pointer!important;left:0;opacity:0;position:absolute;right:0;top:0;z-index:1}.ids-header-inera-item:focus-within{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:-.125rem}@media (min-width:1024px){.ids-header-inera-item{display:flex;margin-left:1rem;padding-left:0}.ids-header-inera-item .ids-header-inera-item__text{display:flex;font-size:1rem}.ids-header-inera-item.ids-header-inera-item__separator{margin-left:1.5rem}.ids-header-inera-item.ids-header-inera-item__separator:before{background-color:var(--IDS-COLOR-NEUTRAL-90);bottom:0;content:\"\";height:100%;left:-1rem;position:absolute;top:0;width:.063rem}}@media (max-width:1024px){.ids-header-inera-item.ids-header-inera-item--unresponsive,.ids-header-inera-item.ids-header-inera-item--unresponsive .ids-header-inera-item__text{display:flex}}";
3
+ var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-header-inera-item{align-items:center;background:none;border:0;box-sizing:border-box;cursor:pointer;display:none;gap:0;height:2.25rem;line-height:1.5rem;margin-left:.75rem;padding:.5rem;position:relative}.ids-header-inera-item.ids-header-inera-item--mobile{display:flex}.ids-header-inera-item .ids-header-inera-item__text{color:var(--IDS-HEADER-INERA-ITEM__COLOR)!important;display:none;font-family:var(--IDS-FONT-FAMILY-HEADING)!important;font-size:1rem!important;font-weight:600!important;margin-left:.5rem;text-decoration:none}.ids-header-inera-item .ids-header-inera-item__icon{display:flex}.ids-header-inera-item .ids-header-inera-item__icon ::slotted([class^=ids-icon-]),.ids-header-inera-item .ids-header-inera-item__icon [class^=ids-icon-]{color:var(--IDS-HEADER-INERA-ITEM__ICON-COLOR);font-size:1.5rem}.ids-header-inera-item:hover .ids-header-inera-item__text{color:var(--IDS-HEADER-INERA-ITEM__ICON-COLOR);text-decoration:underline;text-underline-offset:.125rem}.ids-header-inera-item:hover .ids-header-inera-item__icon [class^=ids-icon-]{color:var(--IDS-HEADER-INERA-ITEM__ICON-COLOR)!important}.ids-header-inera-item ::slotted(:not([slot=icon])),.ids-header-inera-item a,.ids-header-inera-item button{bottom:0;cursor:pointer!important;left:0;opacity:0;position:absolute;right:0;top:0;z-index:1}.ids-header-inera-item:focus-within{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:-.125rem}@media (min-width:1024px){.ids-header-inera-item{display:flex;gap:.5rem;margin:0 1rem;padding:0 .25rem}.ids-header-inera-item .ids-header-inera-item__text{display:flex;font-size:1rem}}@media (max-width:1024px){.ids-header-inera-item.ids-header-inera-item--unresponsive,.ids-header-inera-item.ids-header-inera-item--unresponsive .ids-header-inera-item__text{display:flex}}";
4
4
 
5
5
  var headerIneraItemLit = css`${unsafeCSS(css_248z)}`;
6
6
 
@@ -10,20 +10,37 @@
10
10
  }
11
11
  }
12
12
 
13
+ /*******
14
+ * ICONS
15
+ ********/
16
+ /*******
17
+ * BUTTONS
18
+ ********/
19
+ /*******
20
+ * SCROLLBAR
21
+ ********/
22
+ /*******
23
+ * FORM
24
+ ********/
25
+ /*******
26
+ * A11Y
27
+ ********/
13
28
  .ids-header-inera-item {
14
29
  position: relative;
15
30
  align-items: center;
16
- margin-left: 0.5rem;
17
- padding: 1rem 0.5rem;
31
+ margin-left: 0.75rem;
32
+ padding: 0.5rem;
18
33
  line-height: 1.5rem;
19
34
  display: none;
20
35
  border: 0;
21
36
  background: none;
22
37
  cursor: pointer;
38
+ box-sizing: border-box;
39
+ height: 2.25rem;
40
+ gap: 0;
23
41
  }
24
42
  .ids-header-inera-item.ids-header-inera-item--mobile {
25
43
  display: flex;
26
- max-height: 3rem;
27
44
  }
28
45
  .ids-header-inera-item .ids-header-inera-item__text {
29
46
  display: none;
@@ -31,7 +48,7 @@
31
48
  font-weight: 600 !important;
32
49
  font-family: var(--IDS-FONT-FAMILY-HEADING) !important;
33
50
  font-size: 1rem !important;
34
- color: var(--IDS-COLOR-PRIMARY-30) !important;
51
+ color: var(--IDS-HEADER-INERA-ITEM__COLOR) !important;
35
52
  margin-left: 0.5rem;
36
53
  }
37
54
  .ids-header-inera-item .ids-header-inera-item__icon {
@@ -40,10 +57,15 @@
40
57
  .ids-header-inera-item .ids-header-inera-item__icon ::slotted([class^=ids-icon-]),
41
58
  .ids-header-inera-item .ids-header-inera-item__icon [class^=ids-icon-] {
42
59
  font-size: 1.5rem;
43
- color: var(--IDS-COLOR-PRIMARY-40);
60
+ color: var(--IDS-HEADER-INERA-ITEM__ICON-COLOR);
61
+ }
62
+ .ids-header-inera-item:hover .ids-header-inera-item__text {
63
+ color: var(--IDS-HEADER-INERA-ITEM__ICON-COLOR);
64
+ text-underline-offset: 0.125rem;
65
+ text-decoration: underline;
44
66
  }
45
67
  .ids-header-inera-item:hover .ids-header-inera-item__icon [class^=ids-icon-] {
46
- color: var(--IDS-COLOR-PRIMARY-30) !important;
68
+ color: var(--IDS-HEADER-INERA-ITEM__ICON-COLOR) !important;
47
69
  }
48
70
  .ids-header-inera-item ::slotted(:not([slot=icon])),
49
71
  .ids-header-inera-item a,
@@ -63,27 +85,15 @@
63
85
  }
64
86
  @media all and (min-width: 1024px) {
65
87
  .ids-header-inera-item {
66
- margin-left: 1rem;
67
88
  display: flex;
68
- padding-left: 0;
89
+ gap: 0.5rem;
90
+ margin: 0 1rem;
91
+ padding: 0 0.25rem;
69
92
  }
70
93
  .ids-header-inera-item .ids-header-inera-item__text {
71
94
  font-size: 1rem;
72
95
  display: flex;
73
96
  }
74
- .ids-header-inera-item.ids-header-inera-item__separator {
75
- margin-left: 1.5rem;
76
- }
77
- .ids-header-inera-item.ids-header-inera-item__separator:before {
78
- content: "";
79
- position: absolute;
80
- background-color: var(--IDS-COLOR-NEUTRAL-90);
81
- width: 0.063rem;
82
- height: 100%;
83
- top: 0;
84
- bottom: 0;
85
- left: -1rem;
86
- }
87
97
  }
88
98
  @media all and (max-width: 1024px) {
89
99
  .ids-header-inera-item.ids-header-inera-item--unresponsive {
@@ -1,6 +1,6 @@
1
1
  import { css, unsafeCSS } from 'lit';
2
2
 
3
- var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-header-inera{box-shadow:0 0 .625rem rgba(0,0,0,.3);display:flex;flex-direction:column;padding:0 1rem;position:relative;z-index:3}.ids-header-inera .ids-header-inera__skip-to-content ::slotted(a),.ids-header-inera .ids-header-inera__skip-to-content a{align-items:center;background-color:var(--IDS-COLOR-NEUTRAL-100);box-shadow:0 0 .625rem 0 rgba(0,0,0,.3);color:var(--IDS-LINK--COLOR-PRESET-1__COLOR);display:flex;font-family:var(--IDS-LINK__FONT-FAMILY);font-size:1rem;height:3rem;justify-content:center;left:0;padding:0 1rem;position:absolute;right:0;text-align:center;text-decoration-color:var(--IDS-LINK--COLOR-PRESET-1__COLOR);text-decoration:underline;transform:translateY(-300%);transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:20}.ids-header-inera .ids-header-inera__skip-to-content ::slotted(a:focus),.ids-header-inera .ids-header-inera__skip-to-content a:focus{color:var(--IDS-LINK--COLOR-PRESET-1__HOVER-COLOR);outline-offset:-.375rem!important;text-decoration-color:var(--IDS-LINK--COLOR-PRESET-1__HOVER-COLOR);transform:translateY(0);transition:transform .3s cubic-bezier(.4,0,.2,1)}.ids-header-inera .ids-header-inera__inner{align-items:center;background-color:var(--IDS-COLOR-BACKGROUND);box-sizing:border-box;display:flex;flex-wrap:wrap;justify-content:space-between;margin-left:auto;margin-right:auto;max-width:var(--IDS__MAX-WIDTH);min-height:3rem;width:100%;z-index:2}.ids-header-inera .ids-header-inera__logo{align-items:center;display:flex;height:1.75rem;position:relative;width:5.125rem}.ids-header-inera .ids-header-inera__logo:before{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--IDS-COLOR-PRIMARY-40);content:\"\\e920\";display:block;font:icon;font-family:Inera-Design-Icons!important;font-size:5.125rem;pointer-events:none;position:absolute}.ids-header-inera .ids-header-inera__logo-custom{align-items:center;display:flex;height:1.75rem;width:5.125rem}.ids-header-inera .ids-header-inera__logo-custom ::slotted(a),.ids-header-inera .ids-header-inera__logo-custom a{align-items:center;color:var(--IDS-COLOR-PRIMARY-40);display:flex;font-size:5.125rem}.ids-header-inera .ids-header-inera__items{align-items:center;display:flex;flex-wrap:wrap}.ids-header-inera.ids-header-inera--fluid .ids-header-inera__inner{margin-left:0;margin-right:0;max-width:none}@media (min-width:1024px){.ids-header-inera{padding:0 .5rem}.ids-header-inera .ids-header-inera__inner{min-height:5.625rem}.ids-header-inera .ids-header-inera__logo{width:9.25rem}.ids-header-inera .ids-header-inera__logo:before{font-size:9.25rem}.ids-header-inera .ids-header-inera__logo-custom ::slotted(a),.ids-header-inera .ids-header-inera__logo-custom a{font-size:9.25rem}}@media (max-width:1024px){.ids-header-inera.ids-header-inera--unresponsive .ids-header-inera__inner{min-height:5.625rem}}";
3
+ var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-header-inera{background-color:var(--IDS-HEADER-INERA__BACKGROUND-COLOR);border-bottom:.0625rem solid var(--IDS-HEADER-INERA__BORDER-COLOR);display:flex;flex-direction:column;position:relative;z-index:3}.ids-header-inera:before{background-color:var(--IDS-HEADER-INERA__BRAND-BORDER-COLOR);content:\"\";height:.25rem;left:0;position:absolute;right:0;top:0;z-index:3}.ids-header-inera .ids-header-inera__inner{padding:0}.ids-header-inera .ids-header-inera__skip-to-content{position:relative;z-index:20}.ids-header-inera .ids-header-inera__skip-to-content ::slotted(a),.ids-header-inera .ids-header-inera__skip-to-content a{align-items:center;background-color:var(--IDS-SKIP-TO-CONTENT-LINK__BACKGROUND-COLOR);box-shadow:var(--IDS-BOX-SHADOW);color:var(--IDS-LINK--COLOR-PRESET-1__COLOR);display:flex;font-family:var(--IDS-LINK__FONT-FAMILY);font-size:1rem;height:3rem;justify-content:center;left:0;padding:0 1rem;position:absolute;right:0;text-align:center;text-decoration-color:var(--IDS-LINK--COLOR-PRESET-1__COLOR);text-decoration:underline;transform:translateY(-300%);transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:20}.ids-header-inera .ids-header-inera__skip-to-content ::slotted(a:focus),.ids-header-inera .ids-header-inera__skip-to-content a:focus{color:var(--IDS-LINK--COLOR-PRESET-1__HOVER-COLOR);outline-offset:-.375rem!important;text-decoration-color:var(--IDS-LINK--COLOR-PRESET-1__HOVER-COLOR);transform:translateY(0);transition:transform .3s cubic-bezier(.4,0,.2,1)}.ids-header-inera .ids-header-inera__main{align-items:center;box-sizing:border-box;display:flex;flex-wrap:wrap;justify-content:space-between;margin:0 auto;max-width:var(--IDS__MAX-WIDTH);min-height:3rem;padding:var(--IDS__CONTAINER-PADDING);width:100%}.ids-header-inera .ids-header-inera__logo{align-items:center;display:flex;height:1.75rem;overflow:hidden;position:relative;width:5.125rem}.ids-header-inera .ids-header-inera__logo:before{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--IDS-HEADER-INERA__LOGO-COLOR);content:\"\\e920\";display:block;font:icon;font-family:Inera-Design-Icons!important;font-size:5.125rem;pointer-events:none;position:absolute}.ids-header-inera .ids-header-inera__logo:focus-visible{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)}.ids-header-inera .ids-header-inera__logo-custom{align-items:center;display:flex;height:1.75rem;width:5.125rem}.ids-header-inera .ids-header-inera__logo-custom ::slotted(a),.ids-header-inera .ids-header-inera__logo-custom a{align-items:center;color:var(--IDS-HEADER-INERA__LOGO-COLOR);display:flex;font-size:5.125rem;height:1.75rem;overflow:hidden;width:5.125rem}.ids-header-inera .ids-header-inera__items{align-items:center;display:flex;flex-wrap:wrap}@media (min-width:1024px){.ids-header-inera:before{height:.5rem}.ids-header-inera .ids-header-inera__inner{padding:0 .25rem}.ids-header-inera .ids-header-inera__main{min-height:5.625rem}.ids-header-inera .ids-header-inera__logo{height:3.125rem;width:9.25rem}.ids-header-inera .ids-header-inera__logo:before{font-size:9.25rem}.ids-header-inera .ids-header-inera__logo-custom{height:3.75rem;width:9.3125rem}.ids-header-inera .ids-header-inera__logo-custom ::slotted(a),.ids-header-inera .ids-header-inera__logo-custom a{font-size:9.25rem;height:3.75rem;width:9.3125rem}}@media (max-width:1024px){.ids-header-inera.ids-header-inera--unresponsive .ids-header-inera__main{min-height:5.625rem}}";
4
4
 
5
5
  var headerIneraLit = css`${unsafeCSS(css_248z)}`;
6
6
 
@@ -0,0 +1,2 @@
1
+ declare const _default: import("lit").CSSResult;
2
+ export default _default;
@@ -0,0 +1,7 @@
1
+ import { css, unsafeCSS } from 'lit';
2
+
3
+ var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-header-inera-menu-mobile{margin-left:.75rem}.ids-header-inera-menu-mobile .ids-header-inera-menu-mobile__button:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}.ids-header-inera-menu-mobile .ids-header-inera-menu-mobile__button{background-color:transparent;border:0;cursor:pointer;height:2rem;margin-top:.25rem}.ids-header-inera-menu-mobile .ids-header-inera-menu-mobile__button .ids-hamburger{cursor:pointer;position:relative;transition:all .2s;user-select:none}.ids-header-inera-menu-mobile .ids-header-inera-menu-mobile__button .ids-hamburger__lines{background-color:var(--IDS-HEADER-INERA-MOBILE-MENU__HAMBURGER-COLOR);border-radius:.125rem;cursor:pointer;display:block;height:.125rem;position:relative;transition:all .2s;width:1.3125rem;width:1.25rem}.ids-header-inera-menu-mobile .ids-header-inera-menu-mobile__button .ids-hamburger__lines:after,.ids-header-inera-menu-mobile .ids-header-inera-menu-mobile__button .ids-hamburger__lines:before{background-color:var(--IDS-HEADER-INERA-MOBILE-MENU__HAMBURGER-COLOR);border-radius:.125rem;content:\"\";display:inline-block;height:.125rem;left:0;position:absolute;-webkit-transform-origin:.09375rem center;transform-origin:.09375rem center;-webkit-transform-origin:.13393rem center;transform-origin:.13393rem center;transition:all .2s;width:1.3125rem;width:1.25rem}.ids-header-inera-menu-mobile .ids-header-inera-menu-mobile__button .ids-hamburger__lines:before{top:.5rem}.ids-header-inera-menu-mobile .ids-header-inera-menu-mobile__button .ids-hamburger__lines:after{top:-.5rem}.ids-header-inera-menu-mobile .ids-header-inera-menu-mobile__button:hover .ids-hamburger__lines,.ids-header-inera-menu-mobile .ids-header-inera-menu-mobile__button:hover .ids-hamburger__lines:after,.ids-header-inera-menu-mobile .ids-header-inera-menu-mobile__button:hover .ids-hamburger__lines:before{background-color:var(--IDS-HEADER-INERA-MOBILE-MENU__HAMBURGER-HOVER-COLOR)}.ids-header-inera-menu-mobile .ids-header-inera-menu-mobile__button[aria-expanded=true] .ids-hamburger .ids-hamburger__lines{background:transparent}.ids-header-inera-menu-mobile .ids-header-inera-menu-mobile__button[aria-expanded=true] .ids-hamburger .ids-hamburger__lines:after,.ids-header-inera-menu-mobile .ids-header-inera-menu-mobile__button[aria-expanded=true] .ids-hamburger .ids-hamburger__lines:before{left:-.1rem;top:0;-ms-transform-origin:50% 50%;-webkit-transform-origin:50% 50%;transform-origin:50% 50%;width:1.5rem}.ids-header-inera-menu-mobile .ids-header-inera-menu-mobile__button[aria-expanded=true] .ids-hamburger .ids-hamburger__lines:before{-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg)}.ids-header-inera-menu-mobile .ids-header-inera-menu-mobile__button[aria-expanded=true] .ids-hamburger .ids-hamburger__lines:after{-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.ids-header-inera-menu-mobile .ids-header-inera-menu-mobile__menu-items{background-color:var(--IDS-HEADER-INERA-MOBILE-MENU__BACKGROUND-COLOR);border-top:.0625rem solid var(--IDS-HEADER-INERA-MOBILE-MENU__BORDER-COLOR);box-shadow:var(--IDS-BOX-SHADOW-BOTTOM);left:0;position:absolute;right:0;top:100%;z-index:10}@media only screen and (min-width:1024px){.ids-header-inera-menu-mobile{display:none}}@media only screen and (max-width:1024px){.ids-header-inera-menu-mobile{display:block}.ids-header-inera-menu-mobile.ids-header-inera-menu-mobile--unresponsive{display:none}}";
4
+
5
+ var headerIneraMenuMobileLit = css`${unsafeCSS(css_248z)}`;
6
+
7
+ export { headerIneraMenuMobileLit as default };