$mainMenuItemRowHeight: 50px !default;

.et-menu {

  .et-menu-async-loader {
    text-align: center;
  }

  .et-menu-item:not(.et-menu-open) {
    cursor: pointer;
  }

  .et-menu-item,
  .et-menu-item-link {
    background-size: cover;
    background-position: center center;
  }

  .menu-item-row {
    width: calc(100% + #{$grid-gutter-width});
  }

  .et-menu-item-title {
    i:not(:last-child) {
      margin-right: 5px;
    }
  }

  &.center-mode-enabled {
    .menu-item-row {
      justify-content: center;
    }
  }

  &.et-hover-style-default,
  &.et-hover-style-background {
    .et-menu-item:focus,
    .et-menu-item:hover,
    .et-menu-item:active,
    .et-menu-item.et-menu-open,
    .et-menu-overflow-trigger:focus,
    .et-menu-overflow-trigger:hover,
    .et-menu-overflow-trigger:active {
      background-color: $colorPrimary1;
      color: color-yiq($colorPrimary1);
      text-decoration: none;
    }
  }

  &.et-hover-style-underline {
    .et-menu-item:focus,
    .et-menu-item:hover,
    .et-menu-item:active,
    .et-menu-item.et-menu-open,
    .et-menu-overflow-trigger:focus,
    .et-menu-overflow-trigger:hover,
    .et-menu-overflow-trigger:active {
      background-color: inherit;
      color: inherit;
      text-decoration: underline;
    }
  }

  &.et-hover-style-bottomBar {
    .et-menu-item,
    .et-menu-overflow-trigger {
      position: relative;
      &:after {
        position: absolute;
        bottom: 0;
        content: "";
        left: 50%;
        transform: translateX(-50%);
        border-bottom: 5px solid $colorActive;
        transition: width 400ms ease-in-out;
        width: 0;
      }
    }
    .et-menu-item:focus,
    .et-menu-item:hover,
    .et-menu-item:active,
    .et-menu-item.et-menu-open,
    .et-menu-overflow-trigger:focus,
    .et-menu-overflow-trigger:hover,
    .et-menu-overflow-trigger:active {
      &:after {
        width: 100%;
      }
    }
  }

  &.et-menu-main {
    display: flex;
    align-items: stretch;

    .menu-item-row {
      position: relative;
      overflow: hidden;
    }

    .et-menu-overflow-trigger {
      display: none;
      justify-content: center;
      align-items: center;
      width: 1.5em;
      overflow: hidden;
      position: absolute;
      top: 0;
      right: 0;
      padding-left: 15px;
      padding-right: 15px;
      height: $mainMenuItemRowHeight;
      cursor: pointer;
    }

    &[data-menu-overflow-mode="wrap"] .menu-item-row {
      max-height: none;
    }

    &[data-menu-overflow-mode="nowrap"] .menu-item-row {
      max-height: $mainMenuItemRowHeight;
    }

    &[data-menu-overflow-mode="nowrap"].has-overflow .menu-item-row {
      transition: max-height .5s ease;
      padding-right: 30px; // placeholder for the absolutely positioned overflow trigger
      .et-menu-overflow-trigger {
        display: flex;
      }
    }
    &[data-menu-overflow-mode="nowrap"].has-overflow:not(.expanded) {
      .et-menu-overflow-trigger .et-open {
        display: none;
      }
    }
    &[data-menu-overflow-mode="nowrap"].has-overflow.expanded {
      .et-menu-overflow-trigger .et-closed {
        display: none;
      }
    }

    &[data-menu-overflow-mode="nowrap"].has-overflow.expanded .menu-item-row {
      max-height: 100vh;
      /* Enable this if the overflow trigger should disappear after being clicked.
      .et-menu-overflow-trigger {
        display: none;
      }
      */
    }

    &.bg-fullsize,
    &.bg-boxed > .container:not(.et-menu-main-content) {
      background-color: $colorNeutral1;
      color: color-yiq($colorNeutral1);
    }

    a.et-menu-item.et-menu-item-link,
    div.et-menu-item > a.et-menu-item-link {
      min-height: $mainMenuItemRowHeight;
      display: flex;
      align-items: center;
      padding-left: 30px;
      padding-right: 30px;
    }

    div.et-menu-item:not(.et-menu-item-link) {
      padding-left: 0;
      padding-right: 0;
    }

    &.parting-line-enabled {
      .et-menu-item:not(:last-child) {
        border-right: 1px solid $colorContentBackground;
      }
    }
  }
  .et-menu-main-left,
  .et-menu-main-right {
    box-shadow: 0 6px 9px -6px $colorBoxShadow;
    z-index: 1; // else box shadow disappears under the next widget
  }
  .et-menu-main-right {
    display: flex;
    align-items: flex-start;
    z-index: 1031;
  }
  .et-menu-main-center {
    display: flex;
    flex-direction: row;
    align-items: center;
    box-shadow: 0 6px 9px -6px $colorBoxShadow;
    z-index: 1; // else box shadow disappears under the next widget
  }
  .et-menu-main-logo {
    padding: $grid-gutter-width / 2;
    display: flex;
    align-content: center;
    img {
      max-height: $mainMenuItemRowHeight - $grid-gutter-width;
      width: auto;
    }
  }
  .et-menu-main-search,
  .et-menu-main-currency-language,
  .et-menu-main-account,
  .et-menu-main-wishlist,
  .et-menu-main-basket {
    display: flex;
    align-items: center;
    min-height: $mainMenuItemRowHeight;
    .nav-link {
      padding: 0 $grid-gutter-width / 2;
    }
    .nav-link:hover {
      cursor: pointer;
    }
  }
  .et-menu-main-basket {
    /* cart-dropdown */
    .cart-dropdown {
      padding: $grid-gutter-width;
      background-color: $colorNeutral3;
      color: color-yiq($colorNeutral3);

      min-width: 300px; // looks alright in 320px screens
      @include media-breakpoint-up(sm) {
        min-width: 460px;
      }
      max-width: 90vw;

      .dropdown-cart-item {
        padding: $grid-gutter-width 0;
        border-bottom: 2px solid $colorNeutral5;
      }

      .dropdown-cart-item-image {
        img {
          max-width: 100%;
          height: auto;
          border-radius: $border-radius;
        }
      }
      .dropdown-cart-item-details {
        display: flex;
        flex-wrap: wrap;
      }
      .dropdown-cart-item-name {
        word-break: break-word;
        hyphens: auto;
        flex-basis: 75%;
      }
      .dropdown-cart-item-quantity {
        flex-basis: 20%;
        margin-left: auto;
        text-align: right;
      }
      .dropdown-cart-item-remove {
        font-size: small;
        color: $colorFontMuted;
        margin-top: 10px;
        flex-basis: 49%;
      }
      .dropdown-cart-item-price {
        margin-top: 10px;
        flex-basis: 49%;
        text-align: right;
      }
      .dropdown-cart-overflow {
        margin-top: 10px;
        font-size: small;
        text-align: center;
        font-style: italic;

      }

      .cart-dropdown-shipping-notice {
        border-top: 2px solid $colorNeutral5;
        margin-top: 20px;
        padding-top: 20px;
      }

      .cart-items-delete-button {
        padding: 0;
        border: 0;
      }

      .cart-dropdown-total-item {
        margin-top: 10px;
        font-size: $font-size-sm;
      }

      .cart-dropdown-total-item-price {
        float: right;
        white-space: nowrap;
      }

      .cart-dropdown-cart,
      .cart-dropdown-next {
        margin-bottom: 10px;
        @include media-breakpoint-up(lg) {
          margin-bottom: 0;
        }
      }

      .cart-dropdown-buttons {
        margin-top: map-get($spacers, 3);
      }

      .cart-dropdown-empty {
        padding: map-get($spacers, 2);
        white-space: normal;
      }
    }

    /* cart-dropdown-label */
    .cart-icon-dropdown {
      .et-count-badge {
        right: -1 * $grid-gutter-width / 2; // align with outer limit on full size menu
      }
      .cart-icon-dropdown-price {
        display: none;
      }
      .cart-icon-dropdown-icon {
        position: relative;
        margin-right: 0; // maybe removed if we do not use _basket.scss from NOVA
      }
      &:not(.not-empty) {
        .cart-icon-dropdown-icon {
          @include media-breakpoint-up(md) {
            margin-right: 0; // maybe removed if we do not use _basket.scss from NOVA
          }
        }
      }
    }
    &.et-main-menu-basket-amount-enabled {
      .cart-icon-dropdown-price {
        display: initial;
        margin-left: 5px;
      }
    }
  }
  .et-menu-main-currency-language {
    font-weight: $font-weight-bold;
    .dropdown-menu {
      min-width: 0; // make language / currency toggles narrow
    }
  }
  .et-menu-main-wishlist {
    .et-count-badge {
      top: -12px;
      right: -5px;
    }
  }
  .et-menu-main-search {
    [type="text"].form-control {
      border-top-left-radius: 20px;
      border-bottom-left-radius: 20px;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      border-color: $colorNeutral3;
      background-color: $colorNeutral3;
      color: color-yiq($colorNeutral3);
      height: $mainMenuItemRowHeight - $grid-gutter-width;

      &:focus {
        box-shadow: none;
      }
    }

    .input-group {
      flex-wrap: nowrap;

      .twitter-typeahead {
        width: 100%;
      }
    }

    .nav-item {
      flex-basis: 100%;
    }

    .btn {
      border-top-right-radius: 20px;
      border-bottom-right-radius: 20px;
      border-color: $colorNeutral3;
      background-color: $colorNeutral3;
      color: color-yiq($colorNeutral3);
      box-shadow: none;
      height: $mainMenuItemRowHeight - $grid-gutter-width;
      padding-top: 2px;
      padding-bottom: 0;
    }
  }
}

.et-menu-item-align-right {
  margin-left: auto;

  .center-mode-enabled & {
    margin-left: initial;
  }
}

.et-menu-item-align-right ~ .et-menu-item-align-right {
  margin-left: initial;
}

.et-menu-main-content {
  z-index: $zindex-fixed;
  background-color: $colorContentBackground;
  color: color-yiq($colorContentBackground);
  box-shadow: 2px 2px 2px $colorBoxShadow;

  &.et-menu-main-content-size-content {
    padding: $grid-gutter-width / 2;
  }

  .et-menu-item-content {
    width: 100%; // fixes weird behavior when col-s are used
  }

  overflow: hidden;
  overflow-y: auto;
  padding-top: $grid-gutter-width / 2;
  padding-bottom: $grid-gutter-width / 2;

  border-bottom-right-radius: $border-radius;
  border-bottom-left-radius: $border-radius;

  &.et-border-enabled {
    border: 1px solid color-yiq($colorContentBackground);
    border-top: 0;
  }
}

.et-menu-mobile-wrapper {
  position: fixed;
  z-index: $zindex-fixed;
  top: 0;
  right: 100%;
  height: 100vh;
  width: 100vw;
  transition: background-color 0.5s ease;
  background-color: transparent;

  .et-menu-mobile-close,
  .et-menu-mobile-content-back {
    display: flex;

    i {
      font-size: 2em;
    }
  }

  .et-menu-mobile-close {
    align-items: flex-start;
    justify-content: flex-end;
  }

  .et-menu-mobile-back {
    align-items: flex-start;
    justify-content: flex-start;
  }

  .et-menu-mobile {
    background-color: $colorContentBackground;
    color: color-yiq($colorContentBackground);
    height: 100vh;
    width: 80vw;
    overflow-y: auto;
    position: absolute;
    transition: right 0.5s ease;
    top: 0;
    right: 100%;
    display: flex;
    flex-direction: column;
    padding-bottom: 50px; // Prevent iOS browser controls from overlaying actual content (e.g. links)

    .et-menu-item {
      margin-bottom: $grid-gutter-width / 2;
      color: color-yiq($colorContentBackground);
    }

    .et-menu-item-link {
      min-height: 50px;
      display: flex;
      align-items: center;
      background-color: $colorContentBackground;

      .et-menu-item-title {
        padding: $grid-gutter-width / 2;
        width: 70%;
        max-width: 70%;
      }

      .et-menu-item-image {
        margin-left: auto;
        margin-right: 0;
        width: 30%;
        max-width: 30%;

        img {
          height: 100%;
          max-height: 50px;
          width: 100%;
          object-fit: cover;
        }
      }
    }

    .et-menu-item-content-show-all {
      font-weight: $font-weight-bold;
      text-align: center;
      margin-bottom: $grid-gutter-width / 2;
    }

    .et-menu-mobile-content-title {
      text-align: right;
      margin-bottom: 0;
    }

    .et-menu-mobile-content {
      position: absolute;
      background-color: $colorContentBackground;
      color: color-yiq($colorContentBackground);
      top: 0;
      right: 100%;
      width: 100%;
      height: 100%;
      touch-action: pan-y; // this is needed for the underlying mobile menu wrapper to receive swipeleft events
      z-index: $zindex-fixed + 1;
      overflow-y: auto;
      transition: right 0.5s ease;
      padding-bottom: 50px; // Prevent iOS browser controls from overlaying actual content (e.g. links)

      &.active {
        right: 0;
      }
    }

    .et-menu-mobile-content-header {
      background-color: $colorPrimary1;
      color: color-yiq($colorPrimary1);
      padding-top: $grid-gutter-width / 2;
      padding-bottom: $grid-gutter-width / 2;
    }

    .et-menu-mobile-content-container {
      padding-top: $grid-gutter-width / 2;
      padding-bottom: $grid-gutter-width / 2;
    }

    .et-menu-mobile-items {
      padding-top: $grid-gutter-width / 2;
    }


    .et-menu-mobile-account-wishlist-compare {
      font-size: larger;
      text-align: center;
      padding: $grid-gutter-width / 2;
    }

    .et-menu-mobile-language-currency {
      text-align: center;
      padding: $grid-gutter-width / 2;
      .dropdown-menu {
        min-width: 0; // make language / currency toggles narrow
      }
    }

    .et-menu-mobile-header {
      background-color: $colorPrimary1;
      color: color-yiq($colorPrimary1);
      padding-top: $grid-gutter-width / 2;
      padding-bottom: $grid-gutter-width / 2;
    }

    .et-menu-mobile-footer {
      margin-top: auto;
    }

  }

  // we need a separate transition class that is individually removed by JS when the menu is closing, before active is being removed. This prevents the menu from just popping out of existence.
  &.active-transition {
    background-color: rgba(0, 0, 0, 0.5);

    .et-menu-mobile {
      right: calc(20vw - var(--document-scrollbar-width, 0px)); // = 100vw - width of et-menu-mobile - the width of the scrollbar in the menu, if present
    }
  }

  &.active {
    right: 0;
  }
}

/* Table of contents */
.et-toc-nav {
  padding: ($grid-gutter-width / 2) 0;
  &.et-toc-context-widget {
    border: 1px solid $colorPrimary2;
    padding: $grid-gutter-width / 2;
  }
  background-color: $colorContentBackground;
  .et-toc-title {
    font-weight: $font-weight-bold;
    margin-bottom: 10px;
  }
  ol,ul {
    list-style-type: none;
    padding-left: 0;
  }
  li {
    font-size: small;
    a {
      display: inline-block;
      min-height: var(--et-var-wcag-touch-target-min-height, 24px);
    }
  }
  .et-toc-entry-level {
    &-0 {
      padding-left: 0;
    }
    &-1 {
      padding-left: 10px;
    }
    &-2 {
      padding-left: 20px;
    }
    &-3 {
      padding-left: 30px;
    }
    &-4 {
      padding-left: 40px;
    }
    &-5 {
      padding-left: 50px;
    }
  }
  .et-toc-reading-time {
    font-size: small;
  }
  &.et-toc-numbering {
    ol,ul {
      counter-reset: toc-level-0 toc-level-1 toc-level-2 toc-level-3 toc-level-4 toc-level-5;
    }
    .et-toc-entry-level {
      &-0:before {
        counter-set: toc-level-1 0 toc-level-2 0 toc-level-3 0 toc-level-4 0 toc-level-5 0;
        counter-increment: toc-level-0;
        content: counter(toc-level-0, var(--et-toc-numbering-level-0));
        margin-right: 5px;
        min-width: 10px;
        display: inline-block;
      }
      &-1:before {
        counter-set: toc-level-2 0 toc-level-3 0 toc-level-4 0 toc-level-5 0;
        counter-increment: toc-level-1;
        content: counter(toc-level-1, var(--et-toc-numbering-level-1));
        margin-right: 5px;
        min-width: 10px;
        display: inline-block;
      }
      &-2:before {
        counter-set: toc-level-3 0 toc-level-4 0 toc-level-5 0;
        counter-increment: toc-level-2;
        content: counter(toc-level-2, var(--et-toc-numbering-level-2));
        margin-right: 5px;
        min-width: 10px;
        display: inline-block;
      }
      &-3:before {
        counter-set: toc-level-4 0 toc-level-5 0;
        counter-increment: toc-level-3;
        content: counter(toc-level-3, var(--et-toc-numbering-level-3));
        margin-right: 5px;
        min-width: 10px;
        display: inline-block;
      }
      &-4:before {
        counter-set: toc-level-5 0;
        counter-increment: toc-level-4;
        content: counter(toc-level-4, var(--et-toc-numbering-level-4));
        margin-right: 5px;
        min-width: 10px;
        display: inline-block;
      }
      &-5:before {
        counter-increment: toc-level-5;
        content: counter(toc-level-5, var(--et-toc-numbering-level-5));
        margin-right: 5px;
        min-width: 10px;
        display: inline-block;
      }
    }
  }
  --et-toc-numbering-level-0: decimal;
  --et-toc-numbering-level-1: decimal;
  --et-toc-numbering-level-2: decimal;
  --et-toc-numbering-level-3: decimal;
  --et-toc-numbering-level-4: decimal;
  --et-toc-numbering-level-5: decimal;
  &.et-toc-numbering-decimal {
    --et-toc-numbering-level-0: decimal;
    --et-toc-numbering-level-1: decimal;
    --et-toc-numbering-level-2: decimal;
    --et-toc-numbering-level-3: decimal;
    --et-toc-numbering-level-4: decimal;
    --et-toc-numbering-level-5: decimal;
  }
  &.et-toc-numbering-alpha {
    --et-toc-numbering-level-0: upper-alpha;
    --et-toc-numbering-level-1: lower-alpha;
    --et-toc-numbering-level-2: lower-alpha;
    --et-toc-numbering-level-3: lower-alpha;
    --et-toc-numbering-level-4: lower-alpha;
    --et-toc-numbering-level-5: lower-alpha;
  }
  &.et-toc-numbering-roman {
    --et-toc-numbering-level-0: upper-roman;
    --et-toc-numbering-level-1: lower-roman;
    --et-toc-numbering-level-2: lower-roman;
    --et-toc-numbering-level-3: lower-roman;
    --et-toc-numbering-level-4: lower-roman;
    --et-toc-numbering-level-5: lower-roman;
  }
}

.et-toc-position-left {
  .row > * {
    order: 2;
  }
  .row > .et-toc-col {
    order: 1;
  }
}

.et-toc-container {
  .container,
  .container-xs,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-fluid {
    // neutralize containers in the toc-container
    padding: 0;
    max-width: none;
  }
}

/* JTL Defaults */
.nav-dividers {
  .nav-item {
    position: relative;

    &:not(:last-child)::after {
      content: '';
      position: absolute;
      right: 0;
      top: $nav-link-padding-y;
      height: calc(100% - #{2 * $nav-link-padding-y});
      border-right: rem(1px) solid currentColor;
    }
  }
}

// nav scrollbar
.nav-scrollbar {
  overflow: hidden;
  display: flex;
  align-items: center;

  .nav, .navbar-nav {
    flex-wrap: nowrap;
  }

  .nav-item {
    white-space: nowrap;
  }
}

.nav-scrollbar-inner {
  overflow-x: auto;
  padding-bottom: map-get($spacers, 4);
  align-self: flex-start;
}

.nav-scrollbar-arrow {
  width: 3rem;
  cursor: pointer;
  transition: opacity $transition-base-duration;
  font-size: $font-size-lg;
  z-index: 1;

  &.left {
    @include gradient-x($header-bg-color, transparentize($header-bg-color, 0.99), 30%);
    left: 0;
    padding-right: 2rem;
    margin-right: -3rem;
  }

  &.right {
    @include gradient-x(transparentize($header-bg-color, 0.99), $header-bg-color, 0%, 70%);
    right: 0;
    padding-left: 2rem;
    margin-left: -3rem;
  }

  &.disabled {
    pointer-events: none;
    opacity: 0;
  }
}


.nav-panel .nav .nav {
  padding-left: map-get($spacers, 2);
}

.nav-scrollbar-item {
  .nav-mobile-heading {
    display: block;
    padding-right: map-get($spacers, 3);
    @include media-breakpoint-up(lg) {
      padding-right: 0;
    }
    @include text-truncate;
  }

  .dropdown-body {
    padding: 0;
    @include media-breakpoint-up(lg) {
      padding-bottom: map-get($spacers, 4);
      padding-top: map-get($spacers, 4);
    }
  }
}

.nav-tabs .nav-link {
  &:hover,
  &:focus {
    isolation: auto; // Fixes a bug with the hover effect on tab navigation in newer Bootstrap because Bootstrap now sets this to isolate which leads to a new stacking context.
  }
}