@use "sass:math";

$wpj-discount-color: $discount-color !default;
$wpj-discount-font-size: $font-size-h4 !default;
$wpj-discount-border: $border-width solid $border-color !default;

.w-product-discount-coupon {
   border: $wpj-discount-border;
   padding: 15px;
   border-radius: $border-radius-base;
   overflow: hidden;
   container-type: inline-size;

   .w-media-img {
      position: absolute;
      top: 15px;
      left: 15px;
      margin: 0;
   }

   .wpj-col-4 {
      align-self: center;
      padding-left: 70px;
   }

   .wpj-col-4,
   .wpj-col-8 {
      max-width: 100%;
      flex-basis: 100%;
   }

   p {
      margin: 0;
   }

   .w-highlight {
      color: $wpj-discount-color;
      font-size: $wpj-discount-font-size;
      font-weight: $font-weight-bold;
      white-space: nowrap;
   }

   a {
      cursor: pointer;

      &:has(.coupon-added) {
         pointer-events: none;
      }
   }

   .coupon-loading {
         &::after {
            animation: add-coupon-loader 1.25s infinite linear;
            border: 2px solid $border-color;
            border-radius: 50%;
            border-right-color: transparent;
            content: '';
            display: inline-block;
            position: relative;
            width: 14px;
            height: 14px;
            margin-left: 5px;
            top: 2px;
         }
   }

   .coupon-added {
         pointer-events: none;

         &::after {
            content: '';
            display: inline-block;
            width: 14px;
            height: 14px;
            background-image:url(iconUrl("check-circle"));
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            text-decoration: none;
            position: relative;
            top: 2px;
            margin-left: 5px;
         }

   }

   @container (inline-size > 415px) {
      @include container-query-selector('.w-media-img') {
         position: inherit;
         top: unset;
         left: unset;
      }

      @include container-query-selector('.wpj-col-4') {
         max-width: percentage(math.div(4, 12));
         flex-basis: percentage(math.div(4, 12));
         padding-left: $blocek-gutter;
      }

      @include container-query-selector('.wpj-col-8') {
         max-width: percentage(math.div(8, 12));
         flex-basis: percentage(math.div(8, 12));
      }
   }
}

@keyframes add-coupon-loader {
   0% {
      transform: rotate(0);
   }

   100% {
      transform: rotate(360deg);
   }
}
