@use "sass:math";

$wpj-component-discount-background: #F9F4FF !default;
$wpj-component-discount-padding: 10px !default;
$wpj-component-discount-arrow-size: 10px !default;
$wpj-component-discount-icon-fill: #aa46fb !default;

.w-product-discount-coupon-components {
   background-color: $wpj-component-discount-background;
   padding: 10px;
   border-radius: $border-radius-base;
   container-type: inline-size;
   align-items: center;

   &:after {
      content: "";
      display: block;
      width: 0;
      height: 0;
      border-left: $wpj-component-discount-arrow-size solid transparent;
      border-right: $wpj-component-discount-arrow-size solid transparent;
      border-top: $wpj-component-discount-arrow-size solid $wpj-component-discount-background;
      position: absolute;
      bottom: -$wpj-component-discount-arrow-size;
      left: $wpj-component-discount-arrow-size;
   }

   .w-media-img svg {
      width: 42px;
      height: 23px;
      margin-right: $wpj-component-discount-padding;
      fill: $wpj-component-discount-icon-fill;
      vertical-align: middle;
   }

   a {
      cursor: pointer;
      text-transform: uppercase;
      font-weight: $font-weight-bold;

      &.active {
         pointer-events: none;
         cursor: default;
      }

      span + i {
         margin-left: 5px;
      }
   }

   svg {
      width: 1em;
      height: 1em;
      fill: currentColor;
   }

   .loading {
      display: inline-block;
      animation: loader 1s infinite linear;
   }

   @media (min-width: $md) {
      .wpj-col-4 {
         padding-right: $wpj-component-discount-padding;
         text-align: right;
      }
   }
}

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

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