.m-neuron-menu-cart {
  > .m-neuron-menu-cart__icon {
    display: inline-block;
    position: relative;

    .m-neuron-menu-cart__icon {
      cursor: pointer;
      z-index: 11;
      position: relative;
    }
  }

  &__sidebar {
    text-align: left;
    box-shadow: 0 0 1px;
  }

  &__overlay {
    bottom: 0;
    pointer-events: none;
    position: fixed;
    opacity: 0;
    width: 100%;
    height: 100%;
    left: 100%;
    right: 0;
    top: 0;
    z-index: 3000;

    transition: opacity $normal-time cubic-bezier(0.785, 0.135, 0.15, 0.86),
      visibility 0s $normal-time, left 0s $normal-time;

    &--open {
      .m-neuron-menu-cart__overlay {
        left: 0;
        opacity: 1;

        transition: opacity $normal-time cubic-bezier(0.785, 0.135, 0.15, 0.86),
          visibility 0s 0s, left 0s 0s;
      }
    }
  }

  &--style {
    &-hover {
      .m-neuron-menu-cart {
        position: relative;

        &__close-button {
          display: none;
        }

        &__icon:hover .m-neuron-menu-cart__sidebar {
          transform: translateY(0);
          opacity: 1;
          visibility: visible;
        }

        &__sidebar {
          width: 320px;
          background-color: #fff;
          position: absolute;
          z-index: 10;
          padding: 20px;
          top: 0;
          right: 0;
          margin-top: 30px;

          transform: translateY(5px);
          transition: transform $authenticMotion $super-fast-time,
            opacity $authenticMotion $super-fast-time,
            visibility $authenticMotion $super-fast-time;

          opacity: 0;
          visibility: hidden;

          &.m-neuron-menu-cart--shown {
            opacity: 1;
            visibility: visible;
          }

          &:before {
            content: "";
            width: 100%;
            height: 30px;
            position: absolute;
            top: 0;
            left: 0;
            margin-top: -30px;
          }
        }
      }
    }

    &-sidebar {
      .m-neuron-menu-cart {
        &__sidebar {
          position: fixed;
          right: 0;
          background-color: #fff;
          z-index: 10000;
          top: 0;

          box-sizing: border-box;

          padding: 40px 30px;
          width: calc(400px - 10px);

          transform: translateX(100%);
          transition: transform $authenticMotion $normal-time;

          &.active {
            transform: translateX(0);
            transition-delay: 0.15s;
          }

          &--hidden {
            left: 100%;
          }
        }

        &__products {
          padding-bottom: 200px;
          width: calc(100% - 60px);
          overflow-y: scroll;
          height: 100%;
          position: absolute;
          z-index: 0;

          -ms-overflow-style: none; /* IE and Edge */
          scrollbar-width: none; /* Firefox */

          /* Hide scrollbar for Chrome, Safari and Opera */
          &::-webkit-scrollbar {
            display: none;
          }
        }

        &__product {
        }

        &__bottom {
          position: absolute;
          left: 0;
          right: 0;
          padding: 0 30px;
          padding-bottom: 20px;
          bottom: 0;
          background: #fff;
          z-index: 1;
        }

        &__main {
          padding: 32px 0;
        }
      }

      &__height-full {
        .m-neuron-menu-cart__sidebar {
          min-height: 100%;
        }
      }
    }
  }

  &__product {
    display: flex;
    position: relative;

    padding-bottom: 16px;
    padding-top: 16px;
    min-height: 90px;
  }

  &__product-name {
    max-width: 90%;

    > a {
      margin-bottom: 16px;
      color: inherit;
    }

    dl {
      margin: 0;
      padding: 0;
      display: flex;
      align-items: center;

      dt {
        color: inherit;

        &:first-child {
          margin-right: 6px;
        }

        margin-bottom: 0;
      }

      dd {
        p {
          margin-bottom: 0;
        }
      }
    }
  }

  &__product-image {
    max-width: 60px;

    a {
      display: block;
    }

    img {
      display: block;
    }
  }

  &__meta {
    padding-left: 20px;
    width: 100%;
  }

  &__product-remove {
    position: absolute;
    right: 0;
    top: auto;

    width: 1em;
    height: 1em;
    text-align: center;
    overflow: hidden;
    line-height: 1;

    &:before {
      font-family: "neuron-icons";
      content: "\e839";
      position: absolute;
      color: #333;
      z-index: 1;
      width: 100%;
      height: 100%;
      display: block;
    }

    > a {
      display: block;
      z-index: 2;
      width: 100%;
      height: 100%;
      overflow: hidden;
      opacity: 0;
      position: absolute;
    }
  }

  &--show-divider-yes {
    .m-neuron-menu-cart__subtotal {
      border-bottom: 1px solid $grey-border;
    }
  }

  &__subtotal {
    padding: 16px 0;
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;

    strong,
    bdi {
      font-family: inherit;
      font-weight: normal;
    }
  }

  &--buttons-inline {
    .m-neuron-menu-cart__footer-buttons {
      grid-template-columns: 1fr 1fr;
    }
  }

  &__footer-buttons {
    display: grid;
    grid-column-gap: 10px;
    grid-row-gap: 10px;

    a {
      text-align: center;
      padding: 14px 0;
    }
  }

  &__toggle {
    color: #333;
    font-size: 18px;
    position: relative;
    z-index: 1000;
  }

  &--empty-indicator-hide {
    .m-neuron-menu-cart__toggle {
      &[data-counter="0"] {
        &:before {
          display: none;
        }
      }
    }
  }

  &--items-indicator-plain {
    .m-neuron-menu-cart__toggle {
      &:before {
        content: attr(data-counter);
        font-size: 14px;
      }
    }
  }

  &--items-indicator-bubble {
    .m-neuron-menu-cart__toggle {
      &:before {
        content: attr(data-counter);
        position: absolute;
        top: -10px;
        right: -10px;
        background-color: #333;
        width: 18px;
        height: 18px;
        text-align: center;
        line-height: 18px;
        border-radius: 50%;
        font-size: 12px;
        color: #fff;
      }
    }
  }

  &__toggle-icon--cart-neuron .m-neuron-menu-cart__toggle i {
    font-family: "neuron-icons";
    font-size: 24px;

    &:before {
      content: "\e806";
    }
  }

  &__toggle-icon--bag-light .m-neuron-menu-cart__toggle i:before {
    content: "\e8e3";
  }

  &__toggle-icon--bag-medium .m-neuron-menu-cart__toggle i:before {
    content: "\e8e4";
  }

  &__toggle-icon--bag-solid .m-neuron-menu-cart__toggle i:before {
    content: "\e8e5";
  }

  &__toggle-icon--basket-light .m-neuron-menu-cart__toggle i:before {
    content: "\e8e6";
  }

  &__toggle-icon--basket-medium .m-neuron-menu-cart__toggle i:before {
    content: "\e8e7";
  }

  &__toggle-icon--basket-solid .m-neuron-menu-cart__toggle i:before {
    content: "\e8e8";
  }

  &__toggle-icon--cart-light .m-neuron-menu-cart__toggle i:before {
    content: "\e8e9";
  }

  &__toggle-icon--cart-medium .m-neuron-menu-cart__toggle i:before {
    content: "\e8ea";
  }

  &__toggle-icon--cart-solid .m-neuron-menu-cart__toggle i:before {
    content: "\e8eb";
  }

  &__close-button {
    cursor: pointer;
    position: absolute;
    z-index: 10;
    top: 30px;
    right: 30px;
    text-transform: uppercase;
    font-size: 13px;
  }
}

.elementor-widget-neuron-woo-menu-cart {
  &:not(.m-neuron-menu-cart--show-remove-button-yes) {
    .m-neuron-menu-cart__product-remove {
      display: none;
    }
  }
}

body.admin-bar {
  .m-neuron-menu-cart--style-sidebar {
    .m-neuron-menu-cart__sidebar {
      margin-top: 32px;
    }
  }
}
