@inera/ids-design 7.2.2 → 8.0.0

package/components/mobile-menu/mobile-menu.css

@@ -5,7 +5,7 @@
 * BUTTONS
 ********/
 /*******
-* SCROLLBARS
+* SCROLLBAR
 ********/
 /*******
 * FORM
@@ -15,36 +15,40 @@
 ********/
 .ids-mobile-menu-item__sub-items {
   display: none;
+  margin: 0 !important;
+  padding: 0 !important;
 }
 
 .ids-mobile-menu-item--expanded > .ids-mobile-menu-item__sub-items {
   display: block;
 }
 
+/* VARIATION 1 */
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item,
 .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item {
   position: relative;
   min-height: 3rem;
   min-width: 3rem;
 }
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item > .ids-mobile-menu-item__inner,
 .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item > .ids-mobile-menu-item__inner {
   cursor: pointer;
   display: flex;
-  font-family: var(--IDS-MOBILE-MENU-ITEM__FONT-FAMILY);
+  font-family: var(--IDS-FONT-FAMILY-BASE);
   font-size: 1rem;
   min-height: 3rem;
   width: 100%;
   position: relative;
 }
-.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item > .ids-mobile-menu-item__inner ::slotted([slot=link].ids-mobile-menu-item-link--inline),
-.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item > .ids-mobile-menu-item__inner .ids-mobile-menu-item-link--inline {
-  display: inline !important;
-}
-.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item > .ids-mobile-menu-item__inner > a, .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item > .ids-mobile-menu-item__inner > .ids-mobile-menu-item-link,
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item > .ids-mobile-menu-item__inner > a, .ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item > .ids-mobile-menu-item__inner > .ids-mobile-menu-item-link,
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item > .ids-mobile-menu-item__inner ::slotted([slot=link]),
+.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item > .ids-mobile-menu-item__inner > a,
+.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item > .ids-mobile-menu-item__inner > .ids-mobile-menu-item-link,
 .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item > .ids-mobile-menu-item__inner ::slotted([slot=link]) {
   width: 100%;
-  display: inline-flex;
   flex-grow: 1;
-  align-items: center;
+  display: inline-flex;
+  align-items: flex-start;
   gap: 0.5rem;
   color: inherit !important;
   font-size: 1rem;
@@ -54,12 +58,28 @@
   text-align: start;
   padding: 0.75rem 0.75rem 0.75rem 1.25rem !important;
 }
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item > .ids-mobile-menu-item__inner,
 .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item > .ids-mobile-menu-item__inner {
   font-weight: var(--IDS-MOBILE-MENU-ITEM__FONT-WEIGHT);
-  border-bottom: var(--IDS-MOBILE-MENU-ITEM__BORDER-BOTTOM);
+  border-bottom: 0.063rem solid var(--IDS-MOBILE-MENU-ITEM__BORDER-BOTTOM-COLOR);
+}
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item > .ids-mobile-menu-item__inner:hover::before,
+.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item > .ids-mobile-menu-item__inner:hover::before {
+  content: "";
+  display: block;
+  position: absolute;
+  height: 100%;
+  width: 0.625rem;
+  left: 0;
+  z-index: 0;
+  background-color: var(--IDS-MOBILE-MENU-ITEM--HOVER__BEFORE-BACKGROUND-COLOR);
+}
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item > .ids-mobile-menu-item__inner,
+.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item > .ids-mobile-menu-item__inner {
   background-color: var(--IDS-MOBILE-MENU-ITEM__BACKGROUND-COLOR);
   color: var(--IDS-MOBILE-MENU-ITEM__COLOR);
 }
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item > .ids-mobile-menu-item__inner::before,
 .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item > .ids-mobile-menu-item__inner::before {
   content: "";
   display: block;
@@ -70,6 +90,7 @@
   z-index: 0;
   background-color: var(--IDS-MOBILE-MENU-ITEM__BEFORE-BACKGROUND-COLOR);
 }
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item > .ids-mobile-menu-item__inner:hover::before,
 .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item > .ids-mobile-menu-item__inner:hover::before {
   content: "";
   display: block;
@@ -80,20 +101,21 @@
   z-index: 0;
   background-color: var(--IDS-MOBILE-MENU-ITEM--HOVER__BEFORE-BACKGROUND-COLOR);
 }
-.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item > .ids-mobile-menu-item__inner > a:focus, .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item > .ids-mobile-menu-item__inner > .ids-mobile-menu-item-link:focus,
-.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item > .ids-mobile-menu-item__inner ::slotted([slot=link]):focus {
-  outline: 0.125rem solid;
-  outline-offset: -0.25rem !important;
-  z-index: 1;
-  outline-color: var(--IDS-MOBILE-MENU-ITEM--FOCUS__OUTLINE-COLOR) !important;
-}
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item > .ids-mobile-menu-item__inner > a:focus, .ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item > .ids-mobile-menu-item__inner > .ids-mobile-menu-item-link:focus,
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item > .ids-mobile-menu-item__inner a:focus,
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item > .ids-mobile-menu-item__inner ::slotted(:focus),
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item > .ids-mobile-menu-item__inner ::slotted([slot=link]:focus),
+.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item > .ids-mobile-menu-item__inner > a:focus,
+.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item > .ids-mobile-menu-item__inner > .ids-mobile-menu-item-link:focus,
+.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item > .ids-mobile-menu-item__inner a:focus,
 .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item > .ids-mobile-menu-item__inner ::slotted(:focus),
-.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item > .ids-mobile-menu-item__inner a:focus {
+.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item > .ids-mobile-menu-item__inner ::slotted([slot=link]:focus) {
   outline: 0.125rem solid;
   outline-offset: -0.25rem !important;
+  outline-color: var(--IDS-MOBILE-MENU--FOCUS-OUTLINE-COLOR) !important;
   z-index: 1;
-  outline-color: var(--IDS-MOBILE-MENU-ITEM--FOCUS__OUTLINE-COLOR) !important;
 }
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn,
 .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn {
   min-width: 1.5rem;
   min-height: 1.5rem;
@@ -110,14 +132,18 @@
   -ms-user-select: none;
   user-select: none;
   min-height: 3rem;
-  min-width: 3.25rem;
+  min-width: 3.5rem;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   text-align: start;
   position: relative;
+  box-sizing: border-box;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
 }
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn::before,
 .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn::before {
   font: icon;
   font-family: "Inera-Design-Icons" !important;
@@ -130,37 +156,38 @@
   width: 1rem;
   height: 1rem;
 }
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn:before,
+.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn:before {
+  background-color: var(--IDS-MOBILE-MENU-ITEM__BACKGROUND-COLOR);
+  outline: 0.25rem solid var(--IDS-MOBILE-MENU-ITEM__BACKGROUND-COLOR);
+}
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn.ids-mobile-menu__chevron--expanded::before,
 .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn.ids-mobile-menu__chevron--expanded::before {
   content: "\e939";
 }
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn.ids-mobile-menu-item__expand-btn--headline,
+.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn.ids-mobile-menu-item__expand-btn--headline {
+  padding-right: 3.125rem;
+}
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn.ids-mobile-menu-item__expand-btn--headline::before,
 .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn.ids-mobile-menu-item__expand-btn--headline::before {
   right: 1.25rem;
 }
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn:focus,
 .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn:focus {
   outline: 0.125rem solid;
   outline-offset: -0.25rem !important;
+  outline-color: var(--IDS-MOBILE-MENU--FOCUS-OUTLINE-COLOR) !important;
   z-index: 1;
-  outline-color: var(--IDS-MOBILE-MENU-ITEM--FOCUS__OUTLINE-COLOR) !important;
 }
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn:only-child,
 .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn:only-child {
   width: 100%;
   justify-content: space-between;
   padding-left: 1.25rem;
 }
-.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn:only-child .ids-icon {
-  margin-right: 1.5rem;
-}
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item.ids-mobile-menu-item--active > .ids-mobile-menu-item__inner::before,
 .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item.ids-mobile-menu-item--active > .ids-mobile-menu-item__inner::before {
-  content: "";
-  display: block;
-  position: absolute;
-  height: 100%;
-  width: 0.625rem;
-  left: 0;
-  z-index: 0;
-  background-color: var(--IDS-MOBILE-MENU-ITEM--ACTIVE__BEFORE-BACKGROUND-COLOR);
-}
-.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item.ids-mobile-menu-item--active:hover > .ids-mobile-menu-item__inner::before {
   content: "";
   display: block;
   position: absolute;
@@ -170,25 +197,25 @@
   z-index: 0;
   background-color: var(--IDS-MOBILE-MENU-ITEM--HOVER__BEFORE-BACKGROUND-COLOR);
 }
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item.ids-mobile-menu-item--secondary > .ids-mobile-menu-item__inner,
 .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item.ids-mobile-menu-item--secondary > .ids-mobile-menu-item__inner {
   cursor: pointer;
   display: flex;
-  font-family: var(--IDS-MOBILE-MENU-ITEM__FONT-FAMILY);
+  font-family: var(--IDS-FONT-FAMILY-BASE);
   font-size: 1rem;
   min-height: 3rem;
   width: 100%;
   position: relative;
 }
-.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item.ids-mobile-menu-item--secondary > .ids-mobile-menu-item__inner ::slotted([slot=link].ids-mobile-menu-item-link--inline),
-.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item.ids-mobile-menu-item--secondary > .ids-mobile-menu-item__inner .ids-mobile-menu-item-link--inline {
-  display: inline !important;
-}
-.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item.ids-mobile-menu-item--secondary > .ids-mobile-menu-item__inner > a, .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item.ids-mobile-menu-item--secondary > .ids-mobile-menu-item__inner > .ids-mobile-menu-item-link,
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item.ids-mobile-menu-item--secondary > .ids-mobile-menu-item__inner > a, .ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item.ids-mobile-menu-item--secondary > .ids-mobile-menu-item__inner > .ids-mobile-menu-item-link,
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item.ids-mobile-menu-item--secondary > .ids-mobile-menu-item__inner ::slotted([slot=link]),
+.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item.ids-mobile-menu-item--secondary > .ids-mobile-menu-item__inner > a,
+.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item.ids-mobile-menu-item--secondary > .ids-mobile-menu-item__inner > .ids-mobile-menu-item-link,
 .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item.ids-mobile-menu-item--secondary > .ids-mobile-menu-item__inner ::slotted([slot=link]) {
   width: 100%;
-  display: inline-flex;
   flex-grow: 1;
-  align-items: center;
+  display: inline-flex;
+  align-items: flex-start;
   gap: 0.5rem;
   color: inherit !important;
   font-size: 1rem;
@@ -198,12 +225,28 @@
   text-align: start;
   padding: 0.75rem 0.75rem 0.75rem 1.25rem !important;
 }
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item.ids-mobile-menu-item--secondary > .ids-mobile-menu-item__inner,
 .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item.ids-mobile-menu-item--secondary > .ids-mobile-menu-item__inner {
   font-weight: var(--IDS-MOBILE-MENU-ITEM__FONT-WEIGHT);
-  border-bottom: var(--IDS-MOBILE-MENU-ITEM__BORDER-BOTTOM);
+  border-bottom: 0.063rem solid var(--IDS-MOBILE-MENU-ITEM__BORDER-BOTTOM-COLOR);
+}
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item.ids-mobile-menu-item--secondary > .ids-mobile-menu-item__inner:hover::before,
+.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item.ids-mobile-menu-item--secondary > .ids-mobile-menu-item__inner:hover::before {
+  content: "";
+  display: block;
+  position: absolute;
+  height: 100%;
+  width: 0.625rem;
+  left: 0;
+  z-index: 0;
+  background-color: var(--IDS-MOBILE-MENU-ITEM--HOVER__BEFORE-BACKGROUND-COLOR);
+}
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item.ids-mobile-menu-item--secondary > .ids-mobile-menu-item__inner,
+.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item.ids-mobile-menu-item--secondary > .ids-mobile-menu-item__inner {
   color: var(--IDS-MOBILE-MENU-ITEM-SECONDARY__COLOR);
   background-color: var(--IDS-MOBILE-MENU-ITEM-SECONDARY__BACKGROUND-COLOR);
 }
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item.ids-mobile-menu-item--secondary > .ids-mobile-menu-item__inner::before,
 .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item.ids-mobile-menu-item--secondary > .ids-mobile-menu-item__inner::before {
   content: "";
   display: block;
@@ -214,9 +257,7 @@
   z-index: 0;
   background-color: var(--IDS-MOBILE-MENU-ITEM-SECONDARY__BEFORE-BACKGROUND-COLOR);
 }
-.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item.ids-mobile-menu-item--secondary > .ids-mobile-menu-item__inner:hover {
-  color: var(--IDS-MOBILE-MENU-ITEM-SECONDARY--HOVER__BEFORE-BACKGROUND-COLOR);
-}
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item.ids-mobile-menu-item--secondary > .ids-mobile-menu-item__inner:hover::before,
 .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item.ids-mobile-menu-item--secondary > .ids-mobile-menu-item__inner:hover::before {
   content: "";
   display: block;
@@ -227,20 +268,21 @@
   z-index: 0;
   background-color: var(--IDS-MOBILE-MENU-ITEM-SECONDARY--HOVER__BEFORE-BACKGROUND-COLOR);
 }
-.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item.ids-mobile-menu-item--secondary > .ids-mobile-menu-item__inner > a:focus, .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item.ids-mobile-menu-item--secondary > .ids-mobile-menu-item__inner > .ids-mobile-menu-item-link:focus,
-.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item.ids-mobile-menu-item--secondary > .ids-mobile-menu-item__inner ::slotted([slot=link]):focus {
-  outline: 0.125rem solid;
-  outline-offset: -0.25rem !important;
-  z-index: 1;
-  outline-color: var(--IDS-MOBILE-MENU-ITEM-SECONDARY--FOCUS__OUTLINE-COLOR) !important;
-}
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item.ids-mobile-menu-item--secondary > .ids-mobile-menu-item__inner > a:focus, .ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item.ids-mobile-menu-item--secondary > .ids-mobile-menu-item__inner > .ids-mobile-menu-item-link:focus,
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item.ids-mobile-menu-item--secondary > .ids-mobile-menu-item__inner a:focus,
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item.ids-mobile-menu-item--secondary > .ids-mobile-menu-item__inner ::slotted(:focus),
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item.ids-mobile-menu-item--secondary > .ids-mobile-menu-item__inner ::slotted([slot=link]:focus),
+.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item.ids-mobile-menu-item--secondary > .ids-mobile-menu-item__inner > a:focus,
+.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item.ids-mobile-menu-item--secondary > .ids-mobile-menu-item__inner > .ids-mobile-menu-item-link:focus,
+.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item.ids-mobile-menu-item--secondary > .ids-mobile-menu-item__inner a:focus,
 .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item.ids-mobile-menu-item--secondary > .ids-mobile-menu-item__inner ::slotted(:focus),
-.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item.ids-mobile-menu-item--secondary > .ids-mobile-menu-item__inner a:focus {
+.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item.ids-mobile-menu-item--secondary > .ids-mobile-menu-item__inner ::slotted([slot=link]:focus) {
   outline: 0.125rem solid;
   outline-offset: -0.25rem !important;
+  outline-color: var(--IDS-MOBILE-MENU--FOCUS-OUTLINE-COLOR) !important;
   z-index: 1;
-  outline-color: var(--IDS-MOBILE-MENU-ITEM-SECONDARY--FOCUS__OUTLINE-COLOR) !important;
 }
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item.ids-mobile-menu-item--secondary > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn,
 .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item.ids-mobile-menu-item--secondary > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn {
   min-width: 1.5rem;
   min-height: 1.5rem;
@@ -257,14 +299,18 @@
   -ms-user-select: none;
   user-select: none;
   min-height: 3rem;
-  min-width: 3.25rem;
+  min-width: 3.5rem;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   text-align: start;
   position: relative;
+  box-sizing: border-box;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
 }
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item.ids-mobile-menu-item--secondary > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn::before,
 .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item.ids-mobile-menu-item--secondary > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn::before {
   font: icon;
   font-family: "Inera-Design-Icons" !important;
@@ -277,29 +323,37 @@
   width: 1rem;
   height: 1rem;
 }
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item.ids-mobile-menu-item--secondary > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn:before,
+.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item.ids-mobile-menu-item--secondary > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn:before {
+  background-color: var(--IDS-MOBILE-MENU-ITEM-SECONDARY__BACKGROUND-COLOR);
+  outline: 0.25rem solid var(--IDS-MOBILE-MENU-ITEM-SECONDARY__BACKGROUND-COLOR);
+}
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item.ids-mobile-menu-item--secondary > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn.ids-mobile-menu__chevron--expanded::before,
 .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item.ids-mobile-menu-item--secondary > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn.ids-mobile-menu__chevron--expanded::before {
   content: "\e939";
 }
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item.ids-mobile-menu-item--secondary > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn.ids-mobile-menu-item__expand-btn--headline,
+.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item.ids-mobile-menu-item--secondary > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn.ids-mobile-menu-item__expand-btn--headline {
+  padding-right: 3.125rem;
+}
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item.ids-mobile-menu-item--secondary > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn.ids-mobile-menu-item__expand-btn--headline::before,
 .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item.ids-mobile-menu-item--secondary > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn.ids-mobile-menu-item__expand-btn--headline::before {
   right: 1.25rem;
 }
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item.ids-mobile-menu-item--secondary > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn:focus,
 .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item.ids-mobile-menu-item--secondary > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn:focus {
   outline: 0.125rem solid;
   outline-offset: -0.25rem !important;
+  outline-color: var(--IDS-MOBILE-MENU--FOCUS-OUTLINE-COLOR) !important;
   z-index: 1;
-  outline-color: var(--IDS-MOBILE-MENU-ITEM-SECONDARY--FOCUS__OUTLINE-COLOR) !important;
 }
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item.ids-mobile-menu-item--secondary > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn:only-child,
 .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item.ids-mobile-menu-item--secondary > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn:only-child {
   width: 100%;
   justify-content: space-between;
   padding-left: 1.25rem;
 }
-.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item.ids-mobile-menu-item--secondary > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn:only-child .ids-icon {
-  margin-right: 1.5rem;
-}
-.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item.ids-mobile-menu-item--secondary.ids-mobile-menu-item--active > .ids-mobile-menu-item__inner {
-  color: var(--IDS-MOBILE-MENU-ITEM-SECONDARY--ACTIVE__BEFORE-BACKGROUND-COLOR);
-}
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item.ids-mobile-menu-item--secondary.ids-mobile-menu-item--active > .ids-mobile-menu-item__inner::before,
 .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item.ids-mobile-menu-item--secondary.ids-mobile-menu-item--active > .ids-mobile-menu-item__inner::before {
   content: "";
   display: block;
@@ -308,43 +362,31 @@
   width: 0.625rem;
   left: 0;
   z-index: 0;
-  background-color: var(--IDS-MOBILE-MENU-ITEM-SECONDARY--ACTIVE__BEFORE-BACKGROUND-COLOR);
-}
-.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item.ids-mobile-menu-item--secondary.ids-mobile-menu-item--active:hover > .ids-mobile-menu-item__inner {
-  color: var(--IDS-MOBILE-MENU-ITEM-SECONDARY--HOVER__BEFORE-BACKGROUND-COLOR);
-}
-.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item.ids-mobile-menu-item--secondary.ids-mobile-menu-item--active:hover > .ids-mobile-menu-item__inner::before {
-  content: "";
-  display: block;
-  position: absolute;
-  height: 100%;
-  width: 0.625rem;
-  left: 0;
-  z-index: 0;
-  background-color: var(--IDS-MOBILE-MENU-ITEM-SECONDARY--HOVER__BEFORE-BACKGROUND-COLOR);
+  background-color: var(--IDS-MOBILE-MENU-ITEM--HOVER__BEFORE-BACKGROUND-COLOR);
 }
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item--2,
 .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--2 {
   position: relative;
 }
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner,
 .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner {
   cursor: pointer;
   display: flex;
-  font-family: var(--IDS-MOBILE-MENU-ITEM__FONT-FAMILY);
+  font-family: var(--IDS-FONT-FAMILY-BASE);
   font-size: 1rem;
   min-height: 3rem;
   width: 100%;
   position: relative;
 }
-.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner ::slotted([slot=link].ids-mobile-menu-item-link--inline),
-.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner .ids-mobile-menu-item-link--inline {
-  display: inline !important;
-}
-.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner > a, .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item-link,
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner > a, .ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item-link,
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner ::slotted([slot=link]),
+.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner > a,
+.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item-link,
 .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner ::slotted([slot=link]) {
   width: 100%;
-  display: inline-flex;
   flex-grow: 1;
-  align-items: center;
+  display: inline-flex;
+  align-items: flex-start;
   gap: 0.5rem;
   color: inherit !important;
   font-size: 1rem;
@@ -354,12 +396,14 @@
   text-align: start;
   padding: 0.75rem 0.75rem 0.75rem 2.5rem !important;
 }
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner,
 .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner {
   background-color: var(--IDS-MOBILE-MENU-ITEM--L2__BACKGROUND-COLOR);
   color: var(--IDS-MOBILE-MENU-ITEM--L2__COLOR);
   font-weight: var(--IDS-MOBILE-MENU-ITEM--L2__FONT-WEIGHT);
-  border-bottom: var(--IDS-MOBILE-MENU-ITEM--L2__BORDER-BOTTOM);
+  border-bottom: 0.063rem solid var(--IDS-MOBILE-MENU-ITEM--L2__BORDER-BOTTOM-COLOR);
 }
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner::before,
 .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner::before {
   content: "";
   display: block;
@@ -370,9 +414,7 @@
   z-index: 0;
   background-color: var(--IDS-MOBILE-MENU-ITEM--L2__BEFORE-BACKGROUND-COLOR);
 }
-.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner:hover {
-  color: var(--IDS-MOBILE-MENU-ITEM--L2-HOVER__COLOR);
-}
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner:hover::before,
 .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner:hover::before {
   content: "";
   display: block;
@@ -383,24 +425,22 @@
   z-index: 0;
   background-color: var(--IDS-MOBILE-MENU-ITEM--L2-HOVER__BEFORE-BACKGROUND-COLOR);
 }
-.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner:has(.ids-mobile-menu-item__expand-btn) {
-  font-weight: var(--IDS-MOBILE-MENU-ITEM--L2-HAS-CHILDREN__FONT-WEIGHT);
-}
-.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner > a:focus, .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item-link:focus,
-.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner ::slotted([slot=link]):focus {
-  outline: 0.125rem solid;
-  outline-offset: -0.25rem !important;
-  z-index: 1;
-  outline-color: var(--IDS-MOBILE-MENU-ITEM--L2-FOCUS__OUTLINE-COLOR) !important;
-}
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner > a:focus, .ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item-link:focus,
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner a:focus,
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner ::slotted(:focus),
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner ::slotted([slot=link]:focus),
+.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner > a:focus,
+.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item-link:focus,
+.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner a:focus,
 .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner ::slotted(:focus),
-.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner a:focus {
+.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner ::slotted([slot=link]:focus) {
   outline: 0.125rem solid;
   outline-offset: -0.25rem !important;
+  outline-color: var(--IDS-MOBILE-MENU--FOCUS-OUTLINE-COLOR) !important;
   z-index: 1;
-  outline-color: var(--IDS-MOBILE-MENU-ITEM--L2-FOCUS__OUTLINE-COLOR) !important;
 }
-.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner .ids-mobile-menu-item__expand-btn {
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn,
+.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn {
   min-width: 1.5rem;
   min-height: 1.5rem;
   background: none;
@@ -416,15 +456,19 @@
   -ms-user-select: none;
   user-select: none;
   min-height: 3rem;
-  min-width: 3.25rem;
+  min-width: 3.5rem;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   text-align: start;
   position: relative;
+  box-sizing: border-box;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
 }
-.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner .ids-mobile-menu-item__expand-btn::before {
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn::before,
+.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn::before {
   font: icon;
   font-family: "Inera-Design-Icons" !important;
   display: block;
@@ -436,37 +480,38 @@
   width: 1rem;
   height: 1rem;
 }
-.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner .ids-mobile-menu-item__expand-btn.ids-mobile-menu__chevron--expanded::before {
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn:before,
+.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn:before {
+  background-color: var(--IDS-MOBILE-MENU-ITEM__BACKGROUND-COLOR);
+  outline: 0.25rem solid var(--IDS-MOBILE-MENU-ITEM__BACKGROUND-COLOR);
+}
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn.ids-mobile-menu__chevron--expanded::before,
+.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn.ids-mobile-menu__chevron--expanded::before {
   content: "\e939";
 }
-.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner .ids-mobile-menu-item__expand-btn.ids-mobile-menu-item__expand-btn--headline::before {
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn.ids-mobile-menu-item__expand-btn--headline,
+.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn.ids-mobile-menu-item__expand-btn--headline {
+  padding-right: 3.125rem;
+}
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn.ids-mobile-menu-item__expand-btn--headline::before,
+.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn.ids-mobile-menu-item__expand-btn--headline::before {
   right: 1.25rem;
 }
-.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner .ids-mobile-menu-item__expand-btn:focus {
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn:focus,
+.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn:focus {
   outline: 0.125rem solid;
   outline-offset: -0.25rem !important;
+  outline-color: var(--IDS-MOBILE-MENU--FOCUS-OUTLINE-COLOR) !important;
   z-index: 1;
-  outline-color: var(--IDS-MOBILE-MENU-ITEM--L2-FOCUS__OUTLINE-COLOR) !important;
 }
-.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner .ids-mobile-menu-item__expand-btn:only-child {
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn:only-child,
+.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn:only-child {
   width: 100%;
   justify-content: space-between;
   padding-left: 2.5rem;
 }
-.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner .ids-mobile-menu-item__expand-btn:only-child .ids-icon {
-  margin-right: 1.5rem;
-}
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item--2.ids-mobile-menu-item--active > .ids-mobile-menu-item__inner::before,
 .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--2.ids-mobile-menu-item--active > .ids-mobile-menu-item__inner::before {
-  content: "";
-  display: block;
-  position: absolute;
-  height: 100%;
-  width: 0.625rem;
-  left: 0;
-  z-index: 0;
-  background-color: var(--IDS-MOBILE-MENU-ITEM--L2-ACTIVE__BEFORE-BACKGROUND-COLOR);
-}
-.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--2.ids-mobile-menu-item--active:hover > .ids-mobile-menu-item__inner::before {
   content: "";
   display: block;
   position: absolute;
@@ -476,28 +521,29 @@
   z-index: 0;
   background-color: var(--IDS-MOBILE-MENU-ITEM--L2-HOVER__BEFORE-BACKGROUND-COLOR);
 }
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item--3,
 .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--3 {
   position: relative;
 }
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner,
 .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner {
   cursor: pointer;
   display: flex;
-  font-family: var(--IDS-MOBILE-MENU-ITEM__FONT-FAMILY);
+  font-family: var(--IDS-FONT-FAMILY-BASE);
   font-size: 1rem;
   min-height: 3rem;
   width: 100%;
   position: relative;
 }
-.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner ::slotted([slot=link].ids-mobile-menu-item-link--inline),
-.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner .ids-mobile-menu-item-link--inline {
-  display: inline !important;
-}
-.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner > a, .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item-link,
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner > a, .ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item-link,
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner ::slotted([slot=link]),
+.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner > a,
+.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item-link,
 .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner ::slotted([slot=link]) {
   width: 100%;
-  display: inline-flex;
   flex-grow: 1;
-  align-items: center;
+  display: inline-flex;
+  align-items: flex-start;
   gap: 0.5rem;
   color: inherit !important;
   font-size: 1rem;
@@ -507,12 +553,14 @@
   text-align: start;
   padding: 0.75rem 0.75rem 0.75rem 3.75rem !important;
 }
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner,
 .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner {
   background-color: var(--IDS-MOBILE-MENU-ITEM--L2__BACKGROUND-COLOR);
   color: var(--IDS-MOBILE-MENU-ITEM--L2__COLOR);
   font-weight: var(--IDS-MOBILE-MENU-ITEM--L2__FONT-WEIGHT);
-  border-bottom: var(--IDS-MOBILE-MENU-ITEM--L2__BORDER-BOTTOM);
+  border-bottom: 0.063rem solid var(--IDS-MOBILE-MENU-ITEM--L2__BORDER-BOTTOM-COLOR);
 }
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner::before,
 .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner::before {
   content: "";
   display: block;
@@ -523,9 +571,7 @@
   z-index: 0;
   background-color: var(--IDS-MOBILE-MENU-ITEM--L2__BEFORE-BACKGROUND-COLOR);
 }
-.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner:hover {
-  color: var(--IDS-MOBILE-MENU-ITEM--L2-HOVER__COLOR);
-}
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner:hover::before,
 .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner:hover::before {
   content: "";
   display: block;
@@ -536,21 +582,22 @@
   z-index: 0;
   background-color: var(--IDS-MOBILE-MENU-ITEM--L2-HOVER__BEFORE-BACKGROUND-COLOR);
 }
-.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner > a:focus, .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item-link:focus,
-.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner ::slotted([slot=link]):focus {
-  outline: 0.125rem solid;
-  outline-offset: -0.25rem !important;
-  z-index: 1;
-  outline-color: var(--IDS-MOBILE-MENU-ITEM--L2-FOCUS__OUTLINE-COLOR) !important;
-}
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner > a:focus, .ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item-link:focus,
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner a:focus,
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner ::slotted(:focus),
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner ::slotted([slot=link]:focus),
+.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner > a:focus,
+.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item-link:focus,
+.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner a:focus,
 .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner ::slotted(:focus),
-.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner a:focus {
+.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner ::slotted([slot=link]:focus) {
   outline: 0.125rem solid;
   outline-offset: -0.25rem !important;
+  outline-color: var(--IDS-MOBILE-MENU--FOCUS-OUTLINE-COLOR) !important;
   z-index: 1;
-  outline-color: var(--IDS-MOBILE-MENU-ITEM--L2-FOCUS__OUTLINE-COLOR) !important;
 }
-.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner .ids-mobile-menu-item__expand-btn {
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn,
+.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn {
   min-width: 1.5rem;
   min-height: 1.5rem;
   background: none;
@@ -566,15 +613,19 @@
   -ms-user-select: none;
   user-select: none;
   min-height: 3rem;
-  min-width: 3.25rem;
+  min-width: 3.5rem;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   text-align: start;
   position: relative;
+  box-sizing: border-box;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
 }
-.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner .ids-mobile-menu-item__expand-btn::before {
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn::before,
+.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn::before {
   font: icon;
   font-family: "Inera-Design-Icons" !important;
   display: block;
@@ -586,37 +637,38 @@
   width: 1rem;
   height: 1rem;
 }
-.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner .ids-mobile-menu-item__expand-btn.ids-mobile-menu__chevron--expanded::before {
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn:before,
+.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn:before {
+  background-color: var(--IDS-MOBILE-MENU-ITEM__BACKGROUND-COLOR);
+  outline: 0.25rem solid var(--IDS-MOBILE-MENU-ITEM__BACKGROUND-COLOR);
+}
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn.ids-mobile-menu__chevron--expanded::before,
+.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn.ids-mobile-menu__chevron--expanded::before {
   content: "\e939";
 }
-.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner .ids-mobile-menu-item__expand-btn.ids-mobile-menu-item__expand-btn--headline::before {
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn.ids-mobile-menu-item__expand-btn--headline,
+.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn.ids-mobile-menu-item__expand-btn--headline {
+  padding-right: 3.125rem;
+}
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn.ids-mobile-menu-item__expand-btn--headline::before,
+.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn.ids-mobile-menu-item__expand-btn--headline::before {
   right: 1.25rem;
 }
-.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner .ids-mobile-menu-item__expand-btn:focus {
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn:focus,
+.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn:focus {
   outline: 0.125rem solid;
   outline-offset: -0.25rem !important;
+  outline-color: var(--IDS-MOBILE-MENU--FOCUS-OUTLINE-COLOR) !important;
   z-index: 1;
-  outline-color: var(--IDS-MOBILE-MENU-2-ITEM--L3-FOCUS__OUTLINE-COLOR) !important;
 }
-.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner .ids-mobile-menu-item__expand-btn:only-child {
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn:only-child,
+.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn:only-child {
   width: 100%;
   justify-content: space-between;
   padding-left: 3.75rem;
 }
-.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner .ids-mobile-menu-item__expand-btn:only-child .ids-icon {
-  margin-right: 1.5rem;
-}
+.ids-mobile-menu.ids-mobile-menu--variation-1 .ids-mobile-menu-item--3.ids-mobile-menu-item--active > .ids-mobile-menu-item__inner::before,
 .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--3.ids-mobile-menu-item--active > .ids-mobile-menu-item__inner::before {
-  content: "";
-  display: block;
-  position: absolute;
-  height: 100%;
-  width: 0.625rem;
-  left: 0;
-  z-index: 0;
-  background-color: var(--IDS-MOBILE-MENU-ITEM--L2-ACTIVE__BEFORE-BACKGROUND-COLOR);
-}
-.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--3.ids-mobile-menu-item--active:hover > .ids-mobile-menu-item__inner::before {
   content: "";
   display: block;
   position: absolute;
@@ -632,25 +684,22 @@
   position: relative;
 }
 .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item > .ids-mobile-menu-item__inner {
+  position: relative;
   cursor: pointer;
   display: flex;
-  font-family: var(--IDS-MOBILE-MENU-ITEM__FONT-FAMILY);
+  font-family: var(--IDS-FONT-FAMILY-BASE);
   font-size: 1rem;
   min-height: 3rem;
   width: 100%;
   position: relative;
   border-bottom: none;
 }
-.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item > .ids-mobile-menu-item__inner ::slotted([slot=link].ids-mobile-menu-item-link--inline),
-.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item > .ids-mobile-menu-item__inner .ids-mobile-menu-item-link--inline {
-  display: inline !important;
-}
 .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item > .ids-mobile-menu-item__inner > a, .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item > .ids-mobile-menu-item__inner > .ids-mobile-menu-item-link,
 .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item > .ids-mobile-menu-item__inner ::slotted([slot=link]) {
   width: 100%;
-  display: inline-flex;
   flex-grow: 1;
-  align-items: center;
+  display: inline-flex;
+  align-items: flex-start;
   gap: 0.5rem;
   color: inherit !important;
   font-size: 1rem;
@@ -701,18 +750,13 @@
   background-color: var(--IDS-MOBILE-MENU-2-ITEM--HOVER__BEFORE-BACKGROUND-COLOR);
 }
 .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item > .ids-mobile-menu-item__inner > a:focus, .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item > .ids-mobile-menu-item__inner > .ids-mobile-menu-item-link:focus,
-.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item > .ids-mobile-menu-item__inner ::slotted([slot=link]):focus {
-  outline: 0.125rem solid;
-  outline-offset: -0.25rem !important;
-  z-index: 1;
-  outline-color: var(--IDS-MOBILE-MENU-2-ITEM--FOCUS__OUTLINE-COLOR) !important;
-}
+.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item > .ids-mobile-menu-item__inner a:focus,
 .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item > .ids-mobile-menu-item__inner ::slotted(:focus),
-.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item > .ids-mobile-menu-item__inner a:focus {
+.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item > .ids-mobile-menu-item__inner ::slotted([slot=link]:focus) {
   outline: 0.125rem solid;
   outline-offset: -0.25rem !important;
+  outline-color: var(--IDS-MOBILE-MENU-2--FOCUS-OUTLINE-COLOR) !important;
   z-index: 1;
-  outline-color: var(--IDS-MOBILE-MENU-2-ITEM--FOCUS__OUTLINE-COLOR) !important;
 }
 .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn {
   min-width: 1.5rem;
@@ -730,13 +774,16 @@
   -ms-user-select: none;
   user-select: none;
   min-height: 3rem;
-  min-width: 3.25rem;
+  min-width: 3.5rem;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   text-align: start;
   position: relative;
+  box-sizing: border-box;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
 }
 .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn::before {
   font: icon;
@@ -750,49 +797,65 @@
   width: 1rem;
   height: 1rem;
 }
+.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn:before {
+  background-color: var(--IDS-MOBILE-MENU-ITEM__BACKGROUND-COLOR);
+  outline: 0.25rem solid var(--IDS-MOBILE-MENU-ITEM__BACKGROUND-COLOR);
+}
 .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn.ids-mobile-menu__chevron--expanded::before {
   content: "\e939";
 }
+.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn.ids-mobile-menu-item__expand-btn--headline {
+  padding-right: 3.125rem;
+}
 .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn.ids-mobile-menu-item__expand-btn--headline::before {
   right: 1.25rem;
 }
 .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn:focus {
   outline: 0.125rem solid;
   outline-offset: -0.25rem !important;
+  outline-color: var(--IDS-MOBILE-MENU-2--FOCUS-OUTLINE-COLOR) !important;
   z-index: 1;
-  outline-color: var(--IDS-MOBILE-MENU-2-ITEM--FOCUS__OUTLINE-COLOR) !important;
 }
 .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn:only-child {
   width: 100%;
   justify-content: space-between;
   padding-left: 1.25rem;
 }
-.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn:only-child .ids-icon {
-  margin-right: 1.5rem;
+.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn:before {
+  background-color: var(--IDS-MOBILE-MENU-2-ITEM__BACKGROUND-COLOR);
+  outline: 0.25rem solid var(--IDS-MOBILE-MENU-2-ITEM__BACKGROUND-COLOR);
+  right: 1.25rem !important;
+}
+.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item.ids-mobile-menu-item--active > .ids-mobile-menu-item__inner::before {
+  content: "";
+  display: block;
+  position: absolute;
+  height: 100%;
+  width: 0.625rem;
+  left: 0;
+  z-index: 0;
+  background-color: var(--IDS-MOBILE-MENU-2-ITEM--HOVER__BEFORE-BACKGROUND-COLOR);
 }
 .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--2 {
   position: relative;
 }
 .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner {
+  position: relative;
   cursor: pointer;
   display: flex;
-  font-family: var(--IDS-MOBILE-MENU-ITEM__FONT-FAMILY);
+  font-family: var(--IDS-FONT-FAMILY-BASE);
   font-size: 1rem;
   min-height: 3rem;
   width: 100%;
   position: relative;
   border-bottom: none;
 }
-.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner ::slotted([slot=link].ids-mobile-menu-item-link--inline),
-.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner .ids-mobile-menu-item-link--inline {
-  display: inline !important;
-}
 .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner > a, .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item-link,
 .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner ::slotted([slot=link]) {
   width: 100%;
-  display: inline-flex;
   flex-grow: 1;
-  align-items: center;
+  display: inline-flex;
+  align-items: flex-start;
   gap: 0.5rem;
   color: inherit !important;
   font-size: 1rem;
@@ -830,7 +893,7 @@
   background-color: var(--IDS-MOBILE-MENU-2-ITEM--L2__BORDER-BOTTOM-COLOR);
 }
 .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner:hover {
-  color: var(--IDS-MOBILE-MENU-2-ITEM--L2-HOVER__COLOR);
+  color: var(--IDS-MOBILE-MENU-2-ITEM--HOVER__COLOR);
 }
 .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner:hover::before {
   content: "";
@@ -842,24 +905,16 @@
   z-index: 0;
   background-color: var(--IDS-MOBILE-MENU-2-ITEM--L2-HOVER__BEFORE-BACKGROUND-COLOR);
 }
-.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner:has(.ids-mobile-menu-item__expand-btn) {
-  font-weight: normal;
-}
 .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner > a:focus, .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item-link:focus,
-.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner ::slotted([slot=link]):focus {
-  outline: 0.125rem solid;
-  outline-offset: -0.25rem !important;
-  z-index: 1;
-  outline-color: var(--IDS-MOBILE-MENU-2-ITEM--L2-FOCUS__OUTLINE-COLOR) !important;
-}
+.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner a:focus,
 .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner ::slotted(:focus),
-.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner a:focus {
+.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner ::slotted([slot=link]:focus) {
   outline: 0.125rem solid;
   outline-offset: -0.25rem !important;
+  outline-color: var(--IDS-MOBILE-MENU-2--FOCUS-OUTLINE-COLOR) !important;
   z-index: 1;
-  outline-color: var(--IDS-MOBILE-MENU-2-ITEM--L2-FOCUS__OUTLINE-COLOR) !important;
 }
-.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner .ids-mobile-menu-item__expand-btn {
+.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn {
   min-width: 1.5rem;
   min-height: 1.5rem;
   background: none;
@@ -875,15 +930,18 @@
   -ms-user-select: none;
   user-select: none;
   min-height: 3rem;
-  min-width: 3.25rem;
+  min-width: 3.5rem;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   text-align: start;
   position: relative;
+  box-sizing: border-box;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
 }
-.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner .ids-mobile-menu-item__expand-btn::before {
+.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn::before {
   font: icon;
   font-family: "Inera-Design-Icons" !important;
   display: block;
@@ -895,49 +953,65 @@
   width: 1rem;
   height: 1rem;
 }
-.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner .ids-mobile-menu-item__expand-btn.ids-mobile-menu__chevron--expanded::before {
+.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn:before {
+  background-color: var(--IDS-MOBILE-MENU-ITEM__BACKGROUND-COLOR);
+  outline: 0.25rem solid var(--IDS-MOBILE-MENU-ITEM__BACKGROUND-COLOR);
+}
+.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn.ids-mobile-menu__chevron--expanded::before {
   content: "\e939";
 }
-.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner .ids-mobile-menu-item__expand-btn.ids-mobile-menu-item__expand-btn--headline::before {
+.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn.ids-mobile-menu-item__expand-btn--headline {
+  padding-right: 3.125rem;
+}
+.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn.ids-mobile-menu-item__expand-btn--headline::before {
   right: 1.25rem;
 }
-.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner .ids-mobile-menu-item__expand-btn:focus {
+.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn:focus {
   outline: 0.125rem solid;
   outline-offset: -0.25rem !important;
+  outline-color: var(--IDS-MOBILE-MENU-2--FOCUS-OUTLINE-COLOR) !important;
   z-index: 1;
-  outline-color: var(--IDS-MOBILE-MENU-2-ITEM--L2-FOCUS__OUTLINE-COLOR) !important;
 }
-.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner .ids-mobile-menu-item__expand-btn:only-child {
+.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn:only-child {
   width: 100%;
   justify-content: space-between;
   padding-left: 2.5rem;
 }
-.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner .ids-mobile-menu-item__expand-btn:only-child .ids-icon {
-  margin-right: 1.5rem;
+.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn:before {
+  background-color: var(--IDS-MOBILE-MENU-2-ITEM__BACKGROUND-COLOR);
+  outline: 0.25rem solid var(--IDS-MOBILE-MENU-2-ITEM__BACKGROUND-COLOR);
+  right: 1.25rem !important;
+}
+.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--2.ids-mobile-menu-item--active > .ids-mobile-menu-item__inner::before {
+  content: "";
+  display: block;
+  position: absolute;
+  height: 100%;
+  width: 0.625rem;
+  left: 0;
+  z-index: 0;
+  background-color: var(--IDS-MOBILE-MENU-2-ITEM--L2-HOVER__BEFORE-BACKGROUND-COLOR);
 }
 .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--3 {
   position: relative;
 }
 .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner {
+  position: relative;
   cursor: pointer;
   display: flex;
-  font-family: var(--IDS-MOBILE-MENU-ITEM__FONT-FAMILY);
+  font-family: var(--IDS-FONT-FAMILY-BASE);
   font-size: 1rem;
   min-height: 3rem;
   width: 100%;
   position: relative;
   border-bottom: none;
 }
-.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner ::slotted([slot=link].ids-mobile-menu-item-link--inline),
-.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner .ids-mobile-menu-item-link--inline {
-  display: inline !important;
-}
 .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner > a, .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item-link,
 .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner ::slotted([slot=link]) {
   width: 100%;
-  display: inline-flex;
   flex-grow: 1;
-  align-items: center;
+  display: inline-flex;
+  align-items: flex-start;
   gap: 0.5rem;
   color: inherit !important;
   font-size: 1rem;
@@ -964,18 +1038,18 @@
   width: 0.625rem;
   left: 0;
   z-index: 0;
-  background-color: var(--IDS-MOBILE-MENU-2-ITEM--L3__BEFORE-BACKGROUND-COLOR);
+  background-color: var(--IDS-MOBILE-MENU-2-ITEM--L2__BEFORE-BACKGROUND-COLOR);
 }
 .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner {
-  background-color: var(--IDS-MOBILE-MENU-2-ITEM--L3__BACKGROUND-COLOR);
-  color: var(--IDS-MOBILE-MENU-2-ITEM--L3__COLOR);
-  font-weight: normal;
+  background-color: var(--IDS-MOBILE-MENU-2-ITEM--L2__BACKGROUND-COLOR);
+  color: var(--IDS-MOBILE-MENU-2-ITEM--L2__COLOR);
+  font-weight: var(--IDS-MOBILE-MENU-2-ITEM--L2__FONT-WEIGHT);
 }
 .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner::after {
-  background-color: var(--IDS-MOBILE-MENU-2-ITEM--L3__BORDER-BOTTOM-COLOR);
+  background-color: var(--IDS-MOBILE-MENU-2-ITEM--L2__BORDER-BOTTOM-COLOR);
 }
 .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner:hover {
-  color: var(--IDS-MOBILE-MENU-2-ITEM--L3-HOVER__COLOR);
+  color: var(--IDS-MOBILE-MENU-2-ITEM--HOVER__COLOR);
 }
 .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner:hover::before {
   content: "";
@@ -985,23 +1059,18 @@
   width: 0.625rem;
   left: 0;
   z-index: 0;
-  background-color: var(--IDS-MOBILE-MENU-2-ITEM--L3-HOVER__BEFORE-BACKGROUND-COLOR);
+  background-color: var(--IDS-MOBILE-MENU-2-ITEM--L2-HOVER__BEFORE-BACKGROUND-COLOR);
 }
 .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner > a:focus, .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item-link:focus,
-.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner ::slotted([slot=link]):focus {
-  outline: 0.125rem solid;
-  outline-offset: -0.25rem !important;
-  z-index: 1;
-  outline-color: var(--IDS-MOBILE-MENU-2-ITEM--L3-FOCUS__OUTLINE-COLOR) !important;
-}
+.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner a:focus,
 .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner ::slotted(:focus),
-.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner a:focus {
+.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner ::slotted([slot=link]:focus) {
   outline: 0.125rem solid;
   outline-offset: -0.25rem !important;
+  outline-color: var(--IDS-MOBILE-MENU-2--FOCUS-OUTLINE-COLOR) !important;
   z-index: 1;
-  outline-color: var(--IDS-MOBILE-MENU-2-ITEM--L3-FOCUS__OUTLINE-COLOR) !important;
 }
-.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner .ids-mobile-menu-item__expand-btn {
+.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn {
   min-width: 1.5rem;
   min-height: 1.5rem;
   background: none;
@@ -1017,15 +1086,18 @@
   -ms-user-select: none;
   user-select: none;
   min-height: 3rem;
-  min-width: 3.25rem;
+  min-width: 3.5rem;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   text-align: start;
   position: relative;
+  box-sizing: border-box;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
 }
-.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner .ids-mobile-menu-item__expand-btn::before {
+.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn::before {
   font: icon;
   font-family: "Inera-Design-Icons" !important;
   display: block;
@@ -1037,27 +1109,51 @@
   width: 1rem;
   height: 1rem;
 }
-.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner .ids-mobile-menu-item__expand-btn.ids-mobile-menu__chevron--expanded::before {
+.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn:before {
+  background-color: var(--IDS-MOBILE-MENU-ITEM__BACKGROUND-COLOR);
+  outline: 0.25rem solid var(--IDS-MOBILE-MENU-ITEM__BACKGROUND-COLOR);
+}
+.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn.ids-mobile-menu__chevron--expanded::before {
   content: "\e939";
 }
-.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner .ids-mobile-menu-item__expand-btn.ids-mobile-menu-item__expand-btn--headline::before {
+.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn.ids-mobile-menu-item__expand-btn--headline {
+  padding-right: 3.125rem;
+}
+.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn.ids-mobile-menu-item__expand-btn--headline::before {
   right: 1.25rem;
 }
-.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner .ids-mobile-menu-item__expand-btn:focus {
+.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn:focus {
   outline: 0.125rem solid;
   outline-offset: -0.25rem !important;
+  outline-color: var(--IDS-MOBILE-MENU-2--FOCUS-OUTLINE-COLOR) !important;
   z-index: 1;
-  outline-color: var(--IDS-MOBILE-MENU-2-ITEM--L3-FOCUS__OUTLINE-COLOR) !important;
 }
-.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner .ids-mobile-menu-item__expand-btn:only-child {
+.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn:only-child {
   width: 100%;
   justify-content: space-between;
   padding-left: 3.75rem;
 }
-.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner .ids-mobile-menu-item__expand-btn:only-child .ids-icon {
-  margin-right: 1.5rem;
+.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn:before {
+  background-color: var(--IDS-MOBILE-MENU-2-ITEM__BACKGROUND-COLOR);
+  outline: 0.25rem solid var(--IDS-MOBILE-MENU-2-ITEM__BACKGROUND-COLOR);
+  right: 1.25rem !important;
+}
+.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--3.ids-mobile-menu-item--active > .ids-mobile-menu-item__inner::before {
+  content: "";
+  display: block;
+  position: absolute;
+  height: 100%;
+  width: 0.625rem;
+  left: 0;
+  z-index: 0;
+  background-color: var(--IDS-MOBILE-MENU-2-ITEM--L2-HOVER__BEFORE-BACKGROUND-COLOR);
 }
 
+.ids-mobile-menu {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
 .ids-mobile-menu ul {
   list-style: none;
   padding: 0;