/* 
 * Global utility classes 
 */

@each $class, $prop, $value in $utils {
  .#{$class} {
    #{$prop}: #{$value};
  }
}

// loop for each breakpoint
@each $class, $prop, $value in $utils {
  @each $bp, $bpv in $breakpoints {
    @media (min-width: #{$bpv}) {
      .#{$bp}\:#{$class} {
        #{$prop}: #{$value};
      }
    }
  }
}

// multi-properties utils
.is-unstyled {
  list-style: none;
  padding-left: 0;
}
.is-disabled,
[disabled] {
  opacity: 0.6;
  cursor: not-allowed !important;
  filter: grayscale(1);
}
.text-normal {
  font-weight: normal;
  font-style: normal;
  text-transform: none;
}

// loop for each breakpoint
@each $bp, $bpv in $breakpoints {
  @media (min-width: #{$bpv}) {
    .#{$bp}\:visually-hidden {
      position: absolute !important;
      border: 0 !important;
      height: 1px !important;
      width: 1px !important;
      padding: 0 !important;
      overflow: hidden !important;
      clip: rect(0, 0, 0, 0) !important;
    }
    .#{$bp}\:is-unstyled {
      list-style: none;
      padding-left: 0;
    }
    .#{$bp}\:is-disabled {
      opacity: 0.6;
      cursor: not-allowed !important;
      filter: grayscale(1);
    }
    .#{$bp}\:text-normal {
      font-weight: normal;
      font-style: normal;
      text-transform: none;
    }
  }
}

// Utilitaires spécifiques
.shadow {
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);
}
.loader {
  width: 80px;
  height: 80px;
  margin: 0 auto;
  background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' style=' margin: auto; display: block; --darkreader-inline-bgcolor: %23fff; --darkreader-inline-bgimage: none; ' width='80px' height='80px' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid' data-darkreader-inline-bgcolor='' data-darkreader-inline-bgimage='' %3E%3Ccircle cx='50' cy='50' r='30' stroke='%23fff' stroke-width='10' fill='none' style=' --darkreader-inline-fill: none; --darkreader-inline-stroke: %23fff; ' data-darkreader-inline-fill='' data-darkreader-inline-stroke='' %3E%3C/circle%3E%3Ccircle cx='50' cy='50' r='30' stroke='%23f27360' stroke-width='8' stroke-linecap='round' fill='none' style=' --darkreader-inline-fill: none; --darkreader-inline-stroke: %23ff6d52; ' data-darkreader-inline-fill='' data-darkreader-inline-stroke='' %3E%3CanimateTransform attributeName='transform' type='rotate' repeatCount='indefinite' dur='1s' values='0 50 50;180 50 50;720 50 50' keyTimes='0;0.5;1' %3E%3C/animateTransform%3E%3Canimate attributeName='stroke-dasharray' repeatCount='indefinite' dur='1s' values='18.84955592153876 169.64600329384882;94.2477796076938 94.24777960769377;18.84955592153876 169.64600329384882' keyTimes='0;0.5;1' %3E%3C/animate%3E%3C/circle%3E%3C/svg %3E");
}
.white-bg {
  background: $white;
}
.grey-bg {
  background: $color-gray-1;
}
.overflow-hidden {
  overflow: hidden;
}
.border-grey {
  border: 1px solid $color-gray-3;
}
.no-pointer-events {
  pointer-events: none;
}
.text-underline {
  text-decoration: underline;
}
.iconed-list {
  padding-left: 0;
  li[class^="icon-"] {
    position: relative;
    list-style-type: none;
    padding: $spacer-small 0 $spacer-small $spacer-large;
    &::before {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translate(0, -50%);
      font-size: 2.6rem;
      color: $orange;
    }
  }
}
.accent-box {
  display: block;
  background: rgba(242, 115, 96, 0.15);
  padding: $spacer-tiny-plus $spacer-small;
  border-radius: $radius-small;
}