.nb-quantity {
  @include media-breakpoint-up(md) {
    float: left;
    margin-right: 15px;
  }
  @include media-breakpoint-down(sm) {
    margin-bottom: 15px
  }
  .qty {
    width: 46px;
    min-height: 38px;
    line-height: 37px;
    text-align: center;
    border: 0;
    &::-webkit-inner-spin-button, &::-webkit-outer-spin-button {
      appearance: none;
    }
  }
  &.style-1 {
    position: relative;
    width: 92px;
    border: 1px solid #d7d7d7;
    border-radius: 5px;
    .qty-buttons {
      position: absolute;
      top: 0;
      right: 0px;
      width: 45px;
      border-left: 1px solid #d7d7d7;
      bottom: 0;
      span {
        display: block;
        text-align: center;
        border-left: 0;
        
        height: 21.5px;
        padding-left: 5px;
        padding-right: 5px;
        &.quantity-minus {
          border-top: 0;
          &:before {
            position: relative;
            top: 2px;
          }
        }
        &.quantity-plus {
          &:before {
            position: relative;
            top: 3px;
          }
        }
        &:first-child {
          border-top-right-radius: 4px;
        }
        &:last-child {
          border-bottom-right-radius: 4px;
        }
      }

      .icon-angle-up:before{
        position: relative;
        top: 1px;
      }
      .icon-angle-down:before {
        position: relative;
        top: 2px;
      }

      &:hover {
        cursor: pointer;
      }
    }
  }
  &.style-2 {
    display: flex;
    > span {
      border: 1px solid #ccc;
      height: 50px;
      padding-top: 8px;
      background: #f2f2f2;
      &.quantity-plus {
        border-left: 0;
      }
      &.quantity-minus {
        border-right: 0;
      }
    }
  }
}

.single-product {
  .nb-quantity {
    .qty-buttons {
      span {
        height: 23px;
        &:first-child {
          &:hover {
            border-top-right-radius: 3px;
            margin-top: -1px;
            height: 24px;
          }
        }

        &:last-child {
          &:hover {
            border-bottom-right-radius: 3px;
            margin-top: -1px;
            height: 22px;
          }
        }
      }
      &:after{
        background: #e1e1e1;
        top: 22px;
        content: "";
        display: inline-block;
        height: 1px;
        left: 10px;
        position: absolute;
        right: 10px;
      }
    }
    .qty {
      -moz-appearance: textfield;
    }
  }
}

.nb-quantity.style-1 {
  .qty-buttons {
    &:after {
      background: #e1e1e1;
      top: 22px;
      content: "";
      display: inline-block;
      height: 1px;
      left: 0px;
      position: absolute;
      right: 0px;
    }
  }
}