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

@import "@css[shared]/modules/_quantity-discounts";

.quantity-discounts-wrapper {
   margin-bottom: $spacer;
   position: relative;

   .title-default {
      font-weight: $font-weight-bold;
      color: $text-dark;
      position: relative;
      padding-left: 25px;

      &::before {
         @include fonticon;

         content: $icons_badges;
         color: $text-muted;
         font-size: $font-size-h3;
         position: absolute;
         left: 0;
      }
   }
}

.quantity-discounts-inner {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}

.quantity-discounts-item {
   width: calc(50% - ($grid-gutter-width / 2));
   border-radius: $border-radius-base;
   margin-bottom: calc($grid-gutter-width / 2);
   padding: 5px 10px;
   min-height: 40px;

   .pieces {
      font-weight: normal;
      width: auto;
   }

   .discount {
      line-height: unset;
      width: auto;
      white-space: nowrap;
      margin-left: auto;
   }

   .price {
      width: auto;
      white-space: nowrap;

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

   @media screen and (min-width: $lg) and (max-width: $xxl - 1),
      screen and (max-width: $sm - 1) {
      width: 100%;

      .pieces {
         flex: 1;
      }

      .price {
         width: 100px;
      }
   }
}

.quantity-discounts-inner-overlay {
   max-height: 120px;
   overflow: hidden;
   position: relative;

   &::after {
      content: '';
      display: block;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 40px;
      background: linear-gradient(0deg, rgba($body-bg, 1) 0%, rgba($body-bg, 0) 100%);
      z-index: 1;
   }

   &.is-active {
      @include delete-after;

      max-height: none;
   }
}

.quantity-discounts-show-more {
   position: relative;
   border-top: 1px solid $border-color;
   display: flex;
   justify-content: center;
   z-index: 1;

   .btn {
      position: absolute;
      top: -15px;

      .is-active {
         display: none;
      }

      &.is-active {
         .is-active {
            display: inline;
         }

         .is-inactive {
            display: none;
         }
      }
   }
}
