@use 'sass:string';
@import './../variables';

// Handle the repeated code for CSS backgrounds. By default, we assume the image is a background image,
// but if you pass in $is-mask: true, it will be a mask-image instead.
// If no 'http' is in the image path, we will prepend the image bucket URL, or the asset bucket URL for masks.
// The asset paths can be passed in directly as part of `$image` to avoid this.

@mixin image(
  $image,
  $is-mask: false,
  $size: 100% auto,
  $repeat: no-repeat,
  $position: 0 0
) {
  @if string.index($image, 'http') {
    $image: $image;
  } @else {
    $image: $assets-url + $image;
  }

  @if $is-mask {
    @include mask-image($image, $size, $repeat);
  } @else {
    @include background-image($image, $size, $repeat, $position);
  }
}

@mixin background-image($image, $size: 100% auto, $repeat: no-repeat, $position: 0 0) {
  background-image: url($image);
  background-repeat: $repeat;
  background-position: $position;
  background-size: $size;
  display: block;
}

@mixin mask-image($image, $size: 100% auto, $repeat: no-repeat, $position: 0 0) {
  mask-image: url($image);
  mask-repeat: $repeat;
  mask-position: $position;
  mask-size: $size;
  display: block;
}
