@use 'sass:math';

@mixin svg-bg($image) {
  background-image: img-url('#{$image}.png');
  background-image: none, img-url('#{$image}.svg');
}

@mixin triangle($height, $base: 2 * $height, $direction: left, $color) {
  width: 0;
  height: 0;
  @if ($direction == top) {
    border-left: math.div($base, 2) solid transparent;
    border-bottom: $height solid $color;
    border-right: math.div($base, 2) solid transparent;
  }
  @if ($direction == bottom) {
    border-left: math.div($base, 2) solid transparent;
    border-top: $height solid $color;
    border-right: math.div($base, 2) solid transparent;
  }
  @if ($direction == left) {
    border-top: math.div($base, 2) solid transparent;
    border-right: $height solid $color;
    border-bottom: math.div($base, 2) solid transparent;
  }
  @if ($direction == right) {
    border-top: math.div($base, 2) solid transparent;
    border-left: $height solid $color;
    border-bottom: math.div($base, 2) solid transparent;
  }
}

@mixin right-angle-triangle($size, $color, $direction) {
  width: 0;
  height: 0;
  border: inset $size;
  @if ($direction == top) {
    border-color: $color transparent transparent transparent;
    border-top-style: solid;
  }
  @if ($direction == bottom) {
    border-color: transparent transparent $color transparent;
    border-bottom-style: solid;
  }
  @if ($direction == right) {
    border-color: transparent transparent transparent $color;
    border-left-style: solid;
  }
  @if ($direction == left) {
    border-color: transparent $color transparent transparent;
    border-right-style: solid;
  }
}