$quantity-discount-color: null !default;
$quantity-discount-bg: null !default;
$quantity-discount-border-radius: null !default;

@if $flags {
   @if type-of($flags) != map {
      @warn "`$flags` needs to be a map.";
   } @else if map-has-key($flags, discount) {
      @if type-of(map-get($flags, discount)) != map {
         @warn "`$flags` needs to contain a map called discount";
      } @else {
         $quantity-discount-color: map-get(map-get($flags, discount), color) !default;
         $quantity-discount-bg: map-get(map-get($flags, discount), background-color) !default;
      }
   }
}

.quantity-discounts-wrapper {
   margin-bottom: $spacer-lg;
}

.quantity-discounts-item {
   border: 1px solid $border-color;
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: -1px;
   position: relative;
   padding: 7px 20px;

   .pieces {
      font-weight: $font-weight-bold;
      margin-right: 10px;
      width: 30%;
   }

   .price {
      text-align: right;
      margin-left: 10px;
      width: 30%;
   }

   .discount {
      background: $quantity-discount-bg;
      border-radius: $quantity-discount-border-radius;
      color: $quantity-discount-color;
      display: block;
      font-weight: $font-weight-bold;
      line-height: 34px;
      text-align: center;
      width: 40px;
   }

   &.active {
      border-color: $brand-primary;
      z-index: 1;
   }


   @media screen and (max-width: $lg - 1) {
      .price {
         flex-grow: 1;
      }
   }
}
