@use "sass:math";

$w-badges-padding: 0 !default;
$w-badges-gap: $gap-width*2 !default;

$w-badge-icon-color: $brand-secondary !default;


.w-badges {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: $w-badges-padding;
   gap: $w-badges-gap;
   container-type: inline-size;
   flex-wrap: wrap;

   @container (inline-size > 991px) {
      @for $i from 1 through 5 {
         @include container-query-selector('&-#{$i}') {
            @include container-query-selector('.w-badge') {
               flex-basis: calc(100% / #{$i} - (#{$w-badges-gap} * (#{$i} - 1) / #{$i}));
            }
         }
      }
   }
}

.w-badge {
   display: flex;
   align-items: center;
   position: relative;
   flex-basis: 100%;

   svg {
      width: 3em;
      height: 3em;
      fill: currentColor;
      margin-right: 20px;
   }

   > div:first-child {
      flex: none;
   }

   > div:last-child {
      flex-grow: 1;

      > *,
      .w-text > * {
         margin-bottom: 0;
      }
   }
}

.w-badge-link {
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
}
