.nw-mybagpopup {
  min-height: 150px;

  .nwc-modal {
    top: 50px;
    max-height: calc(100% - 55px);
    height: auto;
  }
}

.nw-mybagpopup-head {
  margin: 0;
  border-bottom: 1px solid $header-desktop-mybagpopup-border-color;
  padding: 5px 0 10px 30px;
  font-size: $font-size-sm;
}

.nwc-mybagpopup-close {
  // justify-content: flex-end;
  margin-top: -10px;
  border: 0;
  font-size: $font-size-lg;
}

.nw-mybagpopup-item {
  position: relative;
  margin: 0 0 10px;
  border-bottom: 1px solid $header-desktop-mybagpopup-border-color;
  padding: 10px 0;
  font-size: $font-size-xs;
}

.nw-mybagpopup-individialloader {
  @extend %nwc-centeralign-items;
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.nw-mybagpopup-itemimage {
  width: 100%;
}

.nw-mybagpopup-itemhead {
  @include nw-product-brand($font-size-xxs);
  margin: 4px 0;
}

.nw-mybagpopup-itemname {
  @include nw-product-name($font-size-xxs);
  margin: 4px 0 10px;
}

.nw-mybagpopup-itemlabel {
  margin: 4px 0 6px;
  font-weight: 600;
}

.nw-mybagpopup-itemvalue {
  font-size: $font-size-xxs;
  font-weight: 300;
}

.nw-mybagpopup-itemprice {
  @include nw-product-price($font-size-xxs);
  margin: 4px 0;
}

.nw-mybagpopup-moretext {
  margin: 10px 0 15px;
  text-align: center;
}

.nw-mybagpopup-btncol {
  padding: 10px 30px;

  &.is-empty {
    display: none;
  }
}

.nw-mybagpopup-btn {
  width: 100%;
  padding: 15px 0;
  font-weight: 600;
  text-align: center;
}

.nw-mybagpopup-noitems {
  display: none;
  margin: 30px 0;
  text-align: center;

  &.is-empty {
    display: block;
  }
}

.nw-continue-shopping-btn {
  display: none;
  margin: auto;
  padding: 15px 30px;

  &:hover {
    color: $color-primary;
    border-color: $color-primary;
  }

  &.is-empty {
    display: block;
  }
}

@media screen and (min-width: $screen-min-sm) {
  .nw-mybagpopup {
    .nwc-modal {
      position: absolute;
      left: initial;
      right: 30px;
      transform: translate(0, 0);
      margin-top: 0;
      max-width: 375px;
    }
  }
}

@media screen and (min-width: $body-maxwidth-media-breakpoint) {
  .nw-mybagpopup {
    .nwc-modal {
      right: calc((100vw - 1200px) / 2);
    }
  }
}


.nw-mybagpopup-loader {
  position: absolute;
  top: 50%;
  left: 45%;
}