dxp-nav-mobile {
  /**
  * @prop --min-height: Controls the minimum height for the mobile menu.
  */
  --min-height: calc(100vh - 56px - 56px);
  /**
  * @prop --font-size: Controls font size for top-level mobile menu items.
  */
  --font-size: 1.5rem;
  /**
  * @prop --font-weight: Controls font weight for top-level mobile menu items.
  */
  --font-weight: 800;
  /**
  * @prop --line-height: Controls line height for top-level mobile menu items.
  */
  --line-height: 3.333;
  /**
  * @prop --border-bottom: Controls the border displayed at the bottom of the mobile menu.
  */
  --border-bottom: 1px solid #efefef;
  /**
  * @prop --color: Default text color for top-level mobile menu items.
  */
  --color: hsl(0, 0%, 9.8%);
  /**
  * @prop --color-selected: Controls the color for the current active mobile menu item.
  */
  --color-selected: hsl(259.5, 100%, 50%);

  /**
  * @prop --font-size-child: Controls text size for children of top level navigation items.
  */
  --font-size-child: 1.5rem;
  /**
  * @prop --line-height-child: Controls line height for children of top level navigation items.
  */
  --line-height-child: 2.5;
  /**
  * @prop --font-weight-child: Controls font weight for children of top level navigation items.
  */
  --font-weight-child: 400;
  /**
  * @prop --child-menu-background: Controls background color for children of top-level navigation items.
  */
  --child-menu-background: hsl(0, 0%, 100%);

  /**
  * @prop --transition: Controls how fast the menu transitions when a link is clicked.
  */
  --transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  /**
  * @prop --width: Controls the width of the mobile menu.
  */
  width: 100%;
}

.main-navigation-mobile {
  width: 100%;
  position: relative;
}

.main-navigation-mobile__main-menu {
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
  min-height: var(--min-height);
}

.main-navigation-mobile__item {
  font-size: var(--font-size);
  font-weight: var(--font-weight);
  line-height: var(--line-height);
}

.main-navigation-mobile__item-wrapper {
  box-sizing: border-box;
  width: calc(100% - 34px);
  display: flex;
  justify-content: space-between;
  margin-left: 34px;
  border-bottom: var(--border-bottom);
  padding-right: 34px;
  align-items: center;
}

.main-navigation-mobile__item-link {
  text-decoration: none;
  color: var(--color);
  transition: var(--transition);
}

.main-navigation-mobile__item-link--selected {
  color: var(--color-selected);
  transition: var(--transition);
}

.main-navigation-mobile__item-link--selected .main-navigation-mobile__item {
  border-right: 2px solid var(--color-selected);
}

.main-navigation-mobile__item-link--selected svg {
  margin-right: -2px;
}

.main-navigation-mobile__child-menu {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--child-menu-background);
  width: 100%;
  min-height: var(--min-height);
}

.main-navigation-mobile__child-menu-current-item {
  line-height: var(--line-height);
}

.main-navigation-mobile__child-menu-current-item svg {
  margin-right: 6px;
  margin-top: -4px;
}

.main-navigation-mobile__child-menu-current {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-selected);
  text-decoration: none;
}

.main-navigation-mobile__child-menu-current-wrapper {
  width: calc(100% - 34px);
  display: flex;
  align-items: center;
  border-bottom: var(--border-bottom);
  margin-left: 34px;
}

.main-navigation-mobile__child-menu-current app-icon {
  margin-right: 0.5rem;
}

.main-navigation-mobile__child-menu-current .icon-back {
  fill: var(--color-selected);
}

.main-navigation-mobile__child-menu-items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-navigation-mobile__child-menu-item-link {
  text-decoration: none;
  color: var(--color);
}

.main-navigation-mobile__child-menu-item-link.selected {
  color: var(--color-selected);
}

.main-navigation-mobile__child-menu-item-link.selected
  .main-navigation-mobile__child-menu-item-wrapper {
  border-right: 2px solid var(--color-selected);
}

.main-navigation-mobile__child-menu-item-link.selected svg {
  margin-right: 38px;
}

.main-navigation-mobile__child-menu-item {
  font-size: var(--font-size-child);
  line-height: var(--line-height-child);
  font-weight: var(--font-weight-child);
}

.main-navigation-mobile__child-menu-item-wrapper {
  width: calc(100% - 64px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: var(--border-bottom);
  margin-left: 4rem;
  box-sizing: border-box;
}

.main-navigation-mobile__child-menu-item-wrapper svg {
  margin-right: 2.5rem;
}