npm - @inera/ids-design - Versions diffs - 5.3.0 → 5.4.1 - Mend

@inera/ids-design 5.3.0 → 5.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (162) hide show

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

@@ -2,7 +2,7 @@
 * BUTTONS
 ********/
 /*******
-* SCROLLBAR
+* SCROLLBARS
 ********/
 /*******
 * FORM
@@ -10,34 +10,38 @@
 /*******
 * A11Y
 ********/
-.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner ::slotted([slot=link]), .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 > a, .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner ::slotted([slot=link]), .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 > a, .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item > .ids-mobile-menu-item__inner ::slotted([slot=link]), .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 > a, .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: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 > a, .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: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 > a, .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .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 > .ids-mobile-menu-item__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--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 > .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 > a {
+.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner ::slotted([slot=link]), .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 > a, .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner ::slotted([slot=link]), .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 > a, .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item > .ids-mobile-menu-item__inner ::slotted([slot=link]), .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 > a, .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: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 > a, .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: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 > a, .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: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 > a, .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .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 > .ids-mobile-menu-item__link, .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item > .ids-mobile-menu-item__inner > a {
   width: 100%;
+  padding: 0.75rem 0.75rem 0.75rem 1.25rem !important;
+  display: inline-flex;
   flex-grow: 1;
-  padding: 12px 12px 12px 20px !important;
-  display: inline-block;
+  align-items: center;
+  gap: 0.5rem;
   color: inherit !important;
+  font-size: 1rem;
+  line-height: 1.5rem;
   font-weight: inherit !important;
   text-decoration: none !important;
   text-align: start;
 }
 .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 > a,
-.ids-mobile-menu.ids-mobile-menu--variation-2 .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 > .ids-mobile-menu-item__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 ::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 > .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 > a,
-.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]) {
-  padding-left: 20px !important;
+.ids-mobile-menu.ids-mobile-menu--variation-2 .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--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 > a,
+.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: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 > a,
+.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item > .ids-mobile-menu-item__inner ::slotted([slot=link]) {
+  padding-left: 1.25rem !important;
 }
 .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 > a,
 .ids-mobile-menu.ids-mobile-menu--variation-2 .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 > .ids-mobile-menu-item__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 ::slotted([slot=link]) {
-  padding-left: 40px !important;
+  padding-left: 2.5rem !important;
 }
 .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 > a,
 .ids-mobile-menu.ids-mobile-menu--variation-2 .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 > .ids-mobile-menu-item__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 ::slotted([slot=link]) {
-  padding-left: 60px !important;
+  padding-left: 3.75rem !important;
 }
 .ids-mobile-menu-item__sub-items {
@@ -50,80 +54,62 @@
 .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item {
   position: relative;
-  min-height: 48px;
-  min-width: 48px;
+  min-height: 3rem;
+  min-width: 3rem;
 }
-.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: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-MOBILE-MENU-ITEM__FONT-FAMILY);
+  font-size: 1rem;
   width: 100%;
   position: relative;
-  color: var(--IDS-MOBILE-MENU-ITEM--SECONDARY__INNER__COLOR);
-  background-color: var(--IDS-MOBILE-MENU-ITEM--SECONDARY__INNER__BACKGROUND-COLOR);
-  font-weight: var(--IDS-MOBILE-MENU-ITEM__INNER__FONT-WEIGHT);
-  border-bottom: var(--IDS-MOBILE-MENU-ITEM__INNER__BORDER-BOTTOM);
-}
-.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 {
-  outline-offset: -4px !important;
-  z-index: 1;
-  outline: 2px solid;
-  outline-color: var(--IDS-MOBILE-MENU-ITEM--SECONDARY--FOCUS--OUTLINE-COLOR) !important;
+  font-weight: var(--IDS-MOBILE-MENU-ITEM__FONT-WEIGHT);
+  border-bottom: var(--IDS-MOBILE-MENU-ITEM__BORDER-BOTTOM);
+  background-color: var(--IDS-MOBILE-MENU-ITEM__BACKGROUND-COLOR);
+  color: var(--IDS-MOBILE-MENU-ITEM__COLOR);
 }
-.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-offset: -4px !important;
-  z-index: 1;
-  outline: 2px solid;
-  outline-color: var(--IDS-MOBILE-MENU-ITEM--SECONDARY--FOCUS--OUTLINE-COLOR) !important;
-}
-.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-within) {
-  outline-offset: -4px !important;
-  z-index: 1;
-  outline: 2px solid;
-  outline-color: var(--IDS-MOBILE-MENU-ITEM--SECONDARY--FOCUS--OUTLINE-COLOR) !important;
-}
-.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 {
+.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item > .ids-mobile-menu-item__inner::before {
   content: "";
   display: block;
   position: absolute;
   height: 100%;
-  width: 10px;
-  left: 0px;
+  width: 0.625rem;
+  left: 0;
   z-index: 0;
-  background-color: var(--IDS-MOBILE-MENU-ITEM--SECONDARY--ACTIVE__INNER__BEFORE__BACKGROUND-COLOR);
+  background-color: var(--IDS-MOBILE-MENU-ITEM__BEFORE-BACKGROUND-COLOR);
 }
-.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);
-  width: 100%;
-  position: relative;
-  background-color: var(--IDS-MOBILE-MENU-ITEM__INNER__BACKGROUND-COLOR);
-  color: var(--IDS-MOBILE-MENU-ITEM__INNER__COLOR);
-  font-weight: var(--IDS-MOBILE-MENU-ITEM__INNER__FONT-WEIGHT);
-  border-bottom: var(--IDS-MOBILE-MENU-ITEM__INNER__BORDER-BOTTOM);
+.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: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 {
-  outline-offset: -4px !important;
+  outline: 0.125rem solid;
+  outline-offset: -0.25rem !important;
   z-index: 1;
-  outline: 2px solid;
-  outline-color: var(--IDS-MOBILE-MENU-ITEM--FOCUS--OUTLINE-COLOR) !important;
+  outline-color: var(--IDS-MOBILE-MENU-ITEM--FOCUS__OUTLINE-COLOR) !important;
 }
 .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item > .ids-mobile-menu-item__inner ::slotted([slot=link]):focus {
-  outline-offset: -4px !important;
+  outline: 0.125rem solid;
+  outline-offset: -0.25rem !important;
   z-index: 1;
-  outline: 2px solid;
-  outline-color: var(--IDS-MOBILE-MENU-ITEM--FOCUS--OUTLINE-COLOR) !important;
+  outline-color: var(--IDS-MOBILE-MENU-ITEM--FOCUS__OUTLINE-COLOR) !important;
 }
 .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item > .ids-mobile-menu-item__inner ::slotted(:focus-within) {
-  outline-offset: -4px !important;
+  outline: 0.125rem solid;
+  outline-offset: -0.25rem !important;
   z-index: 1;
-  outline: 2px solid;
-  outline-color: var(--IDS-MOBILE-MENU-ITEM--FOCUS--OUTLINE-COLOR) !important;
+  outline-color: var(--IDS-MOBILE-MENU-ITEM--FOCUS__OUTLINE-COLOR) !important;
 }
 .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: 24px;
-  min-height: 24px;
+  min-width: 1.5rem;
+  min-height: 1.5rem;
   background: none;
   color: inherit;
   border: none;
@@ -136,43 +122,104 @@
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  min-height: 48px;
-  min-width: 52px;
+  min-height: 3rem;
+  min-width: 3.25rem;
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   text-align: start;
 }
 .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-offset: -4px !important;
+  outline: 0.125rem solid;
+  outline-offset: -0.25rem !important;
   z-index: 1;
-  outline: 2px solid;
-  outline-color: var(--IDS-MOBILE-MENU-ITEM--FOCUS--OUTLINE-COLOR) !important;
+  outline-color: var(--IDS-MOBILE-MENU-ITEM--FOCUS__OUTLINE-COLOR) !important;
 }
 .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: 20px;
+  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: 24px;
-}
-.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-icon {
-  transform: rotate(90deg);
+  margin-right: 1.5rem;
 }
 .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: 10px;
-  left: 0px;
+  width: 0.625rem;
+  left: 0;
   z-index: 0;
-  background-color: var(--IDS-MOBILE-MENU-ITEM--ACTIVE__INNER__BEFORE__BACKGROUND-COLOR);
+  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--expanded .ids-mobile-menu-item__expand-btn {
-  min-width: 24px;
-  min-height: 24px;
+.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;
+  height: 100%;
+  width: 0.625rem;
+  left: 0;
+  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--secondary > .ids-mobile-menu-item__inner {
+  cursor: pointer;
+  display: flex;
+  font-family: var(--IDS-MOBILE-MENU-ITEM__FONT-FAMILY);
+  font-size: 1rem;
+  width: 100%;
+  position: relative;
+  font-weight: var(--IDS-MOBILE-MENU-ITEM__FONT-WEIGHT);
+  border-bottom: var(--IDS-MOBILE-MENU-ITEM__BORDER-BOTTOM);
+  color: var(--IDS-MOBILE-MENU-ITEM-SECONDARY__COLOR);
+  background-color: var(--IDS-MOBILE-MENU-ITEM-SECONDARY__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::before {
+  content: "";
+  display: block;
+  position: absolute;
+  height: 100%;
+  width: 0.625rem;
+  left: 0;
+  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: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-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 > .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 {
+  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: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:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item.ids-mobile-menu-item--secondary > .ids-mobile-menu-item__inner ::slotted(:focus-within) {
+  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: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;
   background: none;
   color: inherit;
   border: none;
@@ -185,29 +232,53 @@
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  min-height: 48px;
-  min-width: 52px;
+  min-height: 3rem;
+  min-width: 3.25rem;
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   text-align: start;
 }
-.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item.ids-mobile-menu-item--expanded .ids-mobile-menu-item__expand-btn:focus {
-  outline-offset: -4px !important;
+.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;
   z-index: 1;
-  outline: 2px solid;
-  outline-color: var(--IDS-MOBILE-MENU-ITEM--FOCUS--OUTLINE-COLOR) !important;
+  outline-color: var(--IDS-MOBILE-MENU-ITEM-SECONDARY--FOCUS__OUTLINE-COLOR) !important;
 }
-.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item.ids-mobile-menu-item--expanded .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: 20px;
+  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: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;
+  position: absolute;
+  height: 100%;
+  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--expanded .ids-mobile-menu-item__expand-btn:only-child .ids-icon {
-  margin-right: 24px;
+.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--expanded .ids-mobile-menu-item__expand-btn .ids-icon {
-  transform: rotate(-90deg);
+.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);
 }
 .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--2 {
   position: relative;
@@ -215,48 +286,62 @@
 .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-MOBILE-MENU-ITEM__FONT-FAMILY);
+  font-size: 1rem;
   width: 100%;
   position: relative;
-  background-color: var(--IDS-MOBILE-MENU-ITEM--2__INNER__BACKGROUND-COLOR);
-  color: var(--IDS-MOBILE-MENU-ITEM--2__INNER__COLOR);
-  font-weight: var(--IDS-MOBILE-MENU-ITEM--2__INNER__FONT-WEIGHT);
-  border-bottom: var(--IDS-MOBILE-MENU-ITEM--2__INNER__BORDER-BOTTOM);
+  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);
 }
 .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--2--HAS-CHILDREN__INNER__FONT-WEIGHT);
+  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::before {
   content: "";
   display: block;
   position: absolute;
   height: 100%;
-  width: 10px;
-  left: 0px;
+  width: 0.625rem;
+  left: 0;
+  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:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--2 > .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--2__INNER__BEFORE__BACKGROUND-COLOR);
+  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 > .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 {
-  outline-offset: -4px !important;
+  outline: 0.125rem solid;
+  outline-offset: -0.25rem !important;
   z-index: 1;
-  outline: 2px solid;
-  outline-color: var(--IDS-MOBILE-MENU-ITEM--2--FOCUS--OUTLINE-COLOR) !important;
+  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 ::slotted([slot=link]):focus {
-  outline-offset: -4px !important;
+  outline: 0.125rem solid;
+  outline-offset: -0.25rem !important;
   z-index: 1;
-  outline: 2px solid;
-  outline-color: var(--IDS-MOBILE-MENU-ITEM--2--FOCUS--OUTLINE-COLOR) !important;
+  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 ::slotted(:focus-within) {
-  outline-offset: -4px !important;
+  outline: 0.125rem solid;
+  outline-offset: -0.25rem !important;
   z-index: 1;
-  outline: 2px solid;
-  outline-color: var(--IDS-MOBILE-MENU-ITEM--2--FOCUS--OUTLINE-COLOR) !important;
+  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 {
-  min-width: 24px;
-  min-height: 24px;
+  min-width: 1.5rem;
+  min-height: 1.5rem;
   background: none;
   color: inherit;
   border: none;
@@ -269,78 +354,47 @@
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  min-height: 48px;
-  min-width: 52px;
+  min-height: 3rem;
+  min-width: 3.25rem;
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   text-align: start;
 }
 .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-offset: -4px !important;
+  outline: 0.125rem solid;
+  outline-offset: -0.25rem !important;
   z-index: 1;
-  outline: 2px solid;
-  outline-color: var(--IDS-MOBILE-MENU-ITEM--2--FOCUS--OUTLINE-COLOR) !important;
+  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 {
   width: 100%;
   justify-content: space-between;
-  padding-left: 40px;
+  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: 24px;
-}
-.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-icon {
-  transform: rotate(90deg);
-}
-.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--2.ids-mobile-menu-item--expanded .ids-mobile-menu-item__expand-btn {
-  min-width: 24px;
-  min-height: 24px;
-  background: none;
-  color: inherit;
-  border: none;
-  padding: 0;
-  font: inherit;
-  cursor: pointer;
-  outline: inherit;
-  -moz-user-select: -moz-none;
-  -khtml-user-select: none;
-  -webkit-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 48px;
-  min-width: 52px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: start;
-}
-.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--2.ids-mobile-menu-item--expanded .ids-mobile-menu-item__expand-btn:focus {
-  outline-offset: -4px !important;
-  z-index: 1;
-  outline: 2px solid;
-  outline-color: var(--IDS-MOBILE-MENU-ITEM--2--FOCUS--OUTLINE-COLOR) !important;
-}
-.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--2.ids-mobile-menu-item--expanded .ids-mobile-menu-item__expand-btn:only-child {
-  width: 100%;
-  justify-content: space-between;
-  padding-left: 40px;
-}
-.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--2.ids-mobile-menu-item--expanded .ids-mobile-menu-item__expand-btn:only-child .ids-icon {
-  margin-right: 24px;
-}
-.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--2.ids-mobile-menu-item--expanded .ids-mobile-menu-item__expand-btn .ids-icon {
-  transform: rotate(-90deg);
+  margin-right: 1.5rem;
 }
 .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: 10px;
-  left: 0px;
+  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;
+  height: 100%;
+  width: 0.625rem;
+  left: 0;
   z-index: 0;
-  background-color: var(--IDS-MOBILE-MENU-ITEM--2--ACTIVE__INNER__BEFORE__BACKGROUND-COLOR);
+  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 {
   position: relative;
@@ -348,45 +402,59 @@
 .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-MOBILE-MENU-ITEM__FONT-FAMILY);
+  font-size: 1rem;
   width: 100%;
   position: relative;
-  background-color: var(--IDS-MOBILE-MENU-ITEM--2__INNER__BACKGROUND-COLOR);
-  color: var(--IDS-MOBILE-MENU-ITEM--2__INNER__COLOR);
-  font-weight: var(--IDS-MOBILE-MENU-ITEM--2__INNER__FONT-WEIGHT);
-  border-bottom: var(--IDS-MOBILE-MENU-ITEM--2__INNER__BORDER-BOTTOM);
+  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);
 }
 .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner::before {
   content: "";
   display: block;
   position: absolute;
   height: 100%;
-  width: 10px;
-  left: 0px;
+  width: 0.625rem;
+  left: 0;
   z-index: 0;
-  background-color: var(--IDS-MOBILE-MENU-ITEM--2__INNER__BEFORE__BACKGROUND-COLOR);
+  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:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--3 > .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--L2-HOVER__BEFORE-BACKGROUND-COLOR);
 }
 .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 {
-  outline-offset: -4px !important;
+  outline: 0.125rem solid;
+  outline-offset: -0.25rem !important;
   z-index: 1;
-  outline: 2px solid;
-  outline-color: var(--IDS-MOBILE-MENU-ITEM--3--FOCUS--OUTLINE-COLOR) !important;
+  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 ::slotted([slot=link]):focus {
-  outline-offset: -4px !important;
+  outline: 0.125rem solid;
+  outline-offset: -0.25rem !important;
   z-index: 1;
-  outline: 2px solid;
-  outline-color: var(--IDS-MOBILE-MENU-ITEM--3--FOCUS--OUTLINE-COLOR) !important;
+  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 ::slotted(:focus-within) {
-  outline-offset: -4px !important;
+  outline: 0.125rem solid;
+  outline-offset: -0.25rem !important;
   z-index: 1;
-  outline: 2px solid;
-  outline-color: var(--IDS-MOBILE-MENU-ITEM--3--FOCUS--OUTLINE-COLOR) !important;
+  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 {
-  min-width: 24px;
-  min-height: 24px;
+  min-width: 1.5rem;
+  min-height: 1.5rem;
   background: none;
   color: inherit;
   border: none;
@@ -399,78 +467,47 @@
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  min-height: 48px;
-  min-width: 52px;
+  min-height: 3rem;
+  min-width: 3.25rem;
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   text-align: start;
 }
 .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-offset: -4px !important;
+  outline: 0.125rem solid;
+  outline-offset: -0.25rem !important;
   z-index: 1;
-  outline: 2px solid;
-  outline-color: var(--IDS-MOBILE-MENU--2-ITEM--3--FOCUS--OUTLINE-COLOR) !important;
+  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 {
   width: 100%;
   justify-content: space-between;
-  padding-left: 60px;
+  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: 24px;
-}
-.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-icon {
-  transform: rotate(90deg);
+  margin-right: 1.5rem;
 }
 .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: 10px;
-  left: 0px;
+  width: 0.625rem;
+  left: 0;
   z-index: 0;
-  background-color: var(--IDS-MOBILE-MENU-ITEM--2--ACTIVE__INNER__BEFORE__BACKGROUND-COLOR);
-}
-.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--3.ids-mobile-menu-item--expanded .ids-mobile-menu-item__expand-btn {
-  min-width: 24px;
-  min-height: 24px;
-  background: none;
-  color: inherit;
-  border: none;
-  padding: 0;
-  font: inherit;
-  cursor: pointer;
-  outline: inherit;
-  -moz-user-select: -moz-none;
-  -khtml-user-select: none;
-  -webkit-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 48px;
-  min-width: 52px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: start;
-}
-.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--3.ids-mobile-menu-item--expanded .ids-mobile-menu-item__expand-btn:focus {
-  outline-offset: -4px !important;
-  z-index: 1;
-  outline: 2px solid;
-  outline-color: var(--IDS-MOBILE-MENU--2-ITEM--3--FOCUS--OUTLINE-COLOR) !important;
-}
-.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--3.ids-mobile-menu-item--expanded .ids-mobile-menu-item__expand-btn:only-child {
-  width: 100%;
-  justify-content: space-between;
-  padding-left: 60px;
-}
-.ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--3.ids-mobile-menu-item--expanded .ids-mobile-menu-item__expand-btn:only-child .ids-icon {
-  margin-right: 24px;
+  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--expanded .ids-mobile-menu-item__expand-btn .ids-icon {
-  transform: rotate(-90deg);
+.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;
+  height: 100%;
+  width: 0.625rem;
+  left: 0;
+  z-index: 0;
+  background-color: var(--IDS-MOBILE-MENU-ITEM--L2-HOVER__BEFORE-BACKGROUND-COLOR);
 }
 /* VARIATION 2 */
@@ -480,47 +517,71 @@
 .ids-mobile-menu.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-MOBILE-MENU-ITEM__FONT-FAMILY);
+  font-size: 1rem;
   width: 100%;
   position: relative;
   border-bottom: none;
-  background-color: var(--IDS-MOBILE-MENU--2-ITEM__INNER__BACKGROUND-COLOR);
-  color: var(--IDS-MOBILE-MENU--2-ITEM__INNER__COLOR);
-  font-weight: var(--IDS-MOBILE-MENU--2-ITEM__INNER__FONT-WEIGHT);
+  background-color: var(--IDS-MOBILE-MENU-2-ITEM__BACKGROUND-COLOR);
+  color: var(--IDS-MOBILE-MENU-2-ITEM__COLOR);
+  font-weight: var(--IDS-MOBILE-MENU-2-ITEM__FONT-WEIGHT);
 }
 .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item > .ids-mobile-menu-item__inner::after {
-  background-color: var(--IDS-MOBILE-MENU--2-ITEM__INNER__BORDER-BOTTOM-COLOR);
+  background-color: var(--IDS-MOBILE-MENU-2-ITEM__BORDER-BOTTOM-COLOR);
+}
+.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item > .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__BEFORE-BACKGROUND-COLOR);
+}
+.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item > .ids-mobile-menu-item__inner:hover {
+  color: var(--IDS-MOBILE-MENU-2-ITEM--HOVER__COLOR);
+}
+.ids-mobile-menu.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-2-ITEM--HOVER__BEFORE-BACKGROUND-COLOR);
 }
 .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item > .ids-mobile-menu-item__inner::after {
   content: "";
   display: block;
-  height: 1px;
-  left: 20px;
-  bottom: 0px;
-  right: 20px;
+  height: 0.063rem;
+  left: 1.25rem;
+  bottom: 0;
+  right: 1.25rem;
   position: absolute;
 }
 .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 > a:focus {
-  outline-offset: -4px !important;
+  outline: 0.125rem solid;
+  outline-offset: -0.25rem !important;
   z-index: 1;
-  outline: 2px solid;
-  outline-color: var(--IDS-MOBILE-MENU--2-ITEM--FOCUS--OUTLINE-COLOR) !important;
+  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 ::slotted([slot=link]):focus {
-  outline-offset: -4px !important;
+  outline: 0.125rem solid;
+  outline-offset: -0.25rem !important;
   z-index: 1;
-  outline: 2px solid;
-  outline-color: var(--IDS-MOBILE-MENU--2-ITEM--FOCUS--OUTLINE-COLOR) !important;
+  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 ::slotted(:focus-within) {
-  outline-offset: -4px !important;
+  outline: 0.125rem solid;
+  outline-offset: -0.25rem !important;
   z-index: 1;
-  outline: 2px solid;
-  outline-color: var(--IDS-MOBILE-MENU--2-ITEM--FOCUS--OUTLINE-COLOR) !important;
+  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: 24px;
-  min-height: 24px;
+  min-width: 1.5rem;
+  min-height: 1.5rem;
   background: none;
   color: inherit;
   border: none;
@@ -533,68 +594,27 @@
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  min-height: 48px;
-  min-width: 52px;
+  min-height: 3rem;
+  min-width: 3.25rem;
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   text-align: start;
 }
 .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-offset: -4px !important;
+  outline: 0.125rem solid;
+  outline-offset: -0.25rem !important;
   z-index: 1;
-  outline: 2px solid;
-  outline-color: var(--IDS-MOBILE-MENU--2-ITEM--FOCUS--OUTLINE-COLOR) !important;
+  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: 20px;
+  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: 24px;
-}
-.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn .ids-icon {
-  transform: rotate(90deg);
-}
-.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item.ids-mobile-menu-item--expanded .ids-mobile-menu-item__expand-btn {
-  min-width: 24px;
-  min-height: 24px;
-  background: none;
-  color: inherit;
-  border: none;
-  padding: 0;
-  font: inherit;
-  cursor: pointer;
-  outline: inherit;
-  -moz-user-select: -moz-none;
-  -khtml-user-select: none;
-  -webkit-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 48px;
-  min-width: 52px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: start;
-}
-.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item.ids-mobile-menu-item--expanded .ids-mobile-menu-item__expand-btn:focus {
-  outline-offset: -4px !important;
-  z-index: 1;
-  outline: 2px solid;
-  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--expanded .ids-mobile-menu-item__expand-btn:only-child {
-  width: 100%;
-  justify-content: space-between;
-  padding-left: 20px;
-}
-.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item.ids-mobile-menu-item--expanded .ids-mobile-menu-item__expand-btn:only-child .ids-icon {
-  margin-right: 24px;
-}
-.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item.ids-mobile-menu-item--expanded .ids-mobile-menu-item__expand-btn .ids-icon {
-  transform: rotate(-90deg);
+  margin-right: 1.5rem;
 }
 .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--2 {
   position: relative;
@@ -602,57 +622,71 @@
 .ids-mobile-menu.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-MOBILE-MENU-ITEM__FONT-FAMILY);
+  font-size: 1rem;
   width: 100%;
   position: relative;
   border-bottom: none;
-  background-color: var(--IDS-MOBILE-MENU--2-ITEM--2__INNER__BACKGROUND-COLOR);
-  color: var(--IDS-MOBILE-MENU--2-ITEM--2__INNER__COLOR);
-  font-weight: var(--IDS-MOBILE-MENU--2-ITEM--2__INNER__FONT-WEIGHT);
+  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--2 > .ids-mobile-menu-item__inner::after {
-  background-color: var(--IDS-MOBILE-MENU--2-ITEM--2__INNER__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--2 > .ids-mobile-menu-item__inner::before {
   content: "";
   display: block;
   position: absolute;
   height: 100%;
-  width: 10px;
-  left: 0px;
+  width: 0.625rem;
+  left: 0;
+  z-index: 0;
+  background-color: var(--IDS-MOBILE-MENU-2-ITEM--L2__BEFORE-BACKGROUND-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);
+}
+.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--2 > .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--2-ITEM--2__INNER__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--2 > .ids-mobile-menu-item__inner::after {
   content: "";
   display: block;
-  height: 1px;
-  left: 20px;
-  bottom: 0px;
-  right: 20px;
+  height: 0.063rem;
+  left: 1.25rem;
+  bottom: 0;
+  right: 1.25rem;
   position: absolute;
 }
 .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 > a:focus {
-  outline-offset: -4px !important;
+  outline: 0.125rem solid;
+  outline-offset: -0.25rem !important;
   z-index: 1;
-  outline: 2px solid;
-  outline-color: var(--IDS-MOBILE-MENU--2-ITEM--2--FOCUS--OUTLINE-COLOR) !important;
+  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 ::slotted([slot=link]):focus {
-  outline-offset: -4px !important;
+  outline: 0.125rem solid;
+  outline-offset: -0.25rem !important;
   z-index: 1;
-  outline: 2px solid;
-  outline-color: var(--IDS-MOBILE-MENU--2-ITEM--2--FOCUS--OUTLINE-COLOR) !important;
+  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 ::slotted(:focus-within) {
-  outline-offset: -4px !important;
+  outline: 0.125rem solid;
+  outline-offset: -0.25rem !important;
   z-index: 1;
-  outline: 2px solid;
-  outline-color: var(--IDS-MOBILE-MENU--2-ITEM--2--FOCUS--OUTLINE-COLOR) !important;
+  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 {
-  min-width: 24px;
-  min-height: 24px;
+  min-width: 1.5rem;
+  min-height: 1.5rem;
   background: none;
   color: inherit;
   border: none;
@@ -665,68 +699,27 @@
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  min-height: 48px;
-  min-width: 52px;
+  min-height: 3rem;
+  min-width: 3.25rem;
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   text-align: start;
 }
 .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-offset: -4px !important;
+  outline: 0.125rem solid;
+  outline-offset: -0.25rem !important;
   z-index: 1;
-  outline: 2px solid;
-  outline-color: var(--IDS-MOBILE-MENU--2-ITEM--2--FOCUS--OUTLINE-COLOR) !important;
+  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 {
   width: 100%;
   justify-content: space-between;
-  padding-left: 40px;
+  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: 24px;
-}
-.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-icon {
-  transform: rotate(90deg);
-}
-.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--2.ids-mobile-menu-item--expanded .ids-mobile-menu-item__expand-btn {
-  min-width: 24px;
-  min-height: 24px;
-  background: none;
-  color: inherit;
-  border: none;
-  padding: 0;
-  font: inherit;
-  cursor: pointer;
-  outline: inherit;
-  -moz-user-select: -moz-none;
-  -khtml-user-select: none;
-  -webkit-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 48px;
-  min-width: 52px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: start;
-}
-.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--2.ids-mobile-menu-item--expanded .ids-mobile-menu-item__expand-btn:focus {
-  outline-offset: -4px !important;
-  z-index: 1;
-  outline: 2px solid;
-  outline-color: var(--IDS-MOBILE-MENU--2-ITEM--2--FOCUS--OUTLINE-COLOR) !important;
-}
-.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--2.ids-mobile-menu-item--expanded .ids-mobile-menu-item__expand-btn:only-child {
-  width: 100%;
-  justify-content: space-between;
-  padding-left: 40px;
-}
-.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--2.ids-mobile-menu-item--expanded .ids-mobile-menu-item__expand-btn:only-child .ids-icon {
-  margin-right: 24px;
-}
-.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--2.ids-mobile-menu-item--expanded .ids-mobile-menu-item__expand-btn .ids-icon {
-  transform: rotate(-90deg);
+  margin-right: 1.5rem;
 }
 .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--3 {
   position: relative;
@@ -734,60 +727,74 @@
 .ids-mobile-menu.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-MOBILE-MENU-ITEM__FONT-FAMILY);
+  font-size: 1rem;
   width: 100%;
   position: relative;
   border-bottom: none;
-  background-color: var(--IDS-MOBILE-MENU--2-ITEM--3__INNER__BACKGROUND-COLOR);
-  color: var(--IDS-MOBILE-MENU--2-ITEM--3__INNER__COLOR);
-  font-weight: var(--IDS-MOBILE-MENU--2-ITEM--3__INNER__FONT-WEIGHT);
+  background-color: var(--IDS-MOBILE-MENU-2-ITEM--L3__BACKGROUND-COLOR);
+  color: var(--IDS-MOBILE-MENU-2-ITEM--L3__COLOR);
+  font-weight: normal;
 }
 .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--3__INNER__BORDER-BOTTOM-COLOR);
+  background-color: var(--IDS-MOBILE-MENU-2-ITEM--L3__BORDER-BOTTOM-COLOR);
 }
 .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner:has(.ids-mobile-menu-item__expand-btn) {
-  font-weight: var(--IDS-MOBILE-MENU--2-ITEM--3--HAS-CHILDREN__INNER__FONT-WEIGHT);
+  font-weight: normal;
 }
 .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner::before {
   content: "";
   display: block;
   position: absolute;
   height: 100%;
-  width: 10px;
-  left: 0px;
+  width: 0.625rem;
+  left: 0;
+  z-index: 0;
+  background-color: var(--IDS-MOBILE-MENU-2-ITEM--L3__BEFORE-BACKGROUND-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);
+}
+.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--3 > .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--2-ITEM--3__INNER__BEFORE__BACKGROUND-COLOR);
+  background-color: var(--IDS-MOBILE-MENU-2-ITEM--L3-HOVER__BEFORE-BACKGROUND-COLOR);
 }
 .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner::after {
   content: "";
   display: block;
-  height: 1px;
-  left: 20px;
-  bottom: 0px;
-  right: 20px;
+  height: 0.063rem;
+  left: 1.25rem;
+  bottom: 0;
+  right: 1.25rem;
   position: absolute;
 }
 .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 > a:focus {
-  outline-offset: -4px !important;
+  outline: 0.125rem solid;
+  outline-offset: -0.25rem !important;
   z-index: 1;
-  outline: 2px solid;
-  outline-color: var(--IDS-MOBILE-MENU--2-ITEM--3--FOCUS--OUTLINE-COLOR) !important;
+  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 ::slotted([slot=link]):focus {
-  outline-offset: -4px !important;
+  outline: 0.125rem solid;
+  outline-offset: -0.25rem !important;
   z-index: 1;
-  outline: 2px solid;
-  outline-color: var(--IDS-MOBILE-MENU--2-ITEM--3--FOCUS--OUTLINE-COLOR) !important;
+  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 ::slotted(:focus-within) {
-  outline-offset: -4px !important;
+  outline: 0.125rem solid;
+  outline-offset: -0.25rem !important;
   z-index: 1;
-  outline: 2px solid;
-  outline-color: var(--IDS-MOBILE-MENU--2-ITEM--3--FOCUS--OUTLINE-COLOR) !important;
+  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 {
-  min-width: 24px;
-  min-height: 24px;
+  min-width: 1.5rem;
+  min-height: 1.5rem;
   background: none;
   color: inherit;
   border: none;
@@ -800,33 +807,31 @@
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  min-height: 48px;
-  min-width: 52px;
+  min-height: 3rem;
+  min-width: 3.25rem;
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   text-align: start;
 }
 .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-offset: -4px !important;
+  outline: 0.125rem solid;
+  outline-offset: -0.25rem !important;
   z-index: 1;
-  outline: 2px solid;
-  outline-color: var(--IDS-MOBILE-MENU--2-ITEM--3--FOCUS--OUTLINE-COLOR) !important;
+  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 {
   width: 100%;
   justify-content: space-between;
-  padding-left: 60px;
+  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: 24px;
-}
-.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-icon {
-  transform: rotate(90deg);
+  margin-right: 1.5rem;
 }
 .ids-mobile-menu ul {
   list-style: none;
-  padding: 0px;
-  margin: 0px;
+  padding: 0;
+  margin: 0;
 }