.menu-item-nav-cart {
  a {
    position: relative;
  }
  .cart-count {
    background: #fff;
    border: $muted-border;
    font-size: 0.55em;
    padding: 3px;
    border-radius: 3px;
    color: #333;
    line-height: 1;
    display: inline-block;
  }
}

.nv-nav-cart {
  display: none;
  z-index: 1000;
}

ul[id^="nv-primary-navigation"] a.button {
  padding: 8px 12px;
}

.menu-item-nav-cart.responsive-nav-cart {
  > a {
    display: flex;
    color: $git-black;
    font-size: 1.2em;
  }
}

ul[id^="nv-primary-navigation"] .menu-item-nav-cart:not(.responsive-nav-cart) {
  display: none;
}

@mixin nav-cart--laptop() {
  .nv-nav-cart {
    .widget_shopping_cart_content {
      overflow: hidden;
    }

    .woocommerce-mini-cart {
      width: 400px;
    }

    .woocommerce-mini-cart__total {
      @include soft-box-shadow('true');
    }
  }
  ul[id^="nv-primary-navigation"] > li.menu-item-nav-cart > a {
    display: block;
  }
  .row ul[id^="nv-primary-navigation"] .menu-item-nav-cart:not(.responsive-nav-cart) {
    display: block;
  }
  .menu-item-nav-cart:hover .nv-nav-cart,
  .menu-item-nav-cart > a:focus + .nv-nav-cart,
  .nv-nav-cart:focus-within {
    opacity: 1;
    visibility: visible;
  }
  .nv-nav-cart {
    display: block;
    @include soft-box-shadow();
    opacity: 0;
    visibility: hidden;
    cursor: default;
    border-top: $muted-border;
    transition: $transition_med;
    position: absolute;
    z-index: 100;
    right: 0;
    width: 350px;
    background: $navbar_background_color;
    @include cart-widget();
  }
  ul[id^="nv-primary-navigation"] .widget_shopping_cart li.mini_cart_item {
    padding: $spacing-xs;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: baseline;
    font-size: .85em;
    position: relative;
    width: 350px;
    margin: 0;

    &:hover {
      background: #f9f9f9;
    }
    > *:not(.remove) {
      padding-right: 60px;
    }
    > a {
      padding: 0;
      display: inline;
      grid-column: span 10;
      grid-row-start: 1;
      grid-column-end: -1;
      color: $body-color;

      &:hover {
        text-decoration: underline;
      }
    }

    a.remove {
      grid-column: 1;
      width: 20px;
      height: 20px;
      padding: 0;
      position: static;

      &:hover {
        text-decoration: none;
      }
    }

    span.quantity {
      grid-row-start: 2;
      grid-column-start: span 10;
      grid-column-end: -1;
    }

    dl.variation {
      border: none;
      padding: 0;
      grid-row-start: 3;
      display: flex;
      flex-direction: row;
      grid-column-start: span 10;
      grid-column-end: -1;
    }

    dd {
      margin-bottom: 0;
    }
  }
}