//
// Zigzag
//

@mixin zigzag($zigzag-class-name, $zigzag-pseudo-el, $zigzag-bg-color, $zigzag-position, $zigzag-size) {
  .#{$zigzag-class-name} {
    position: relative;
    background: $zigzag-bg-color;
    z-index: 1;

    &::#{$zigzag-pseudo-el} {
      content: "";
      position: absolute;
      @if ($zigzag-position == top) {
        bottom: 100%;
      } @else {
        top: 100%;
      }
      left: 0;
      right: 0;
      display: block;
      height: $zigzag-size;
      @if ($zigzag-position == top) {
        background: -webkit-linear-gradient(-225deg, $zigzag-bg-color $zigzag-size/2, transparent 0) 0 $zigzag-size/2, -webkit-linear-gradient(-315deg, $zigzag-bg-color $zigzag-size/2, transparent 0) 0 $zigzag-size/2;
      } @else {
        background: -webkit-linear-gradient(225deg, $zigzag-bg-color $zigzag-size/2, transparent 0) 0 $zigzag-size/2, -webkit-linear-gradient(315deg, $zigzag-bg-color $zigzag-size/2, transparent 0) 0 $zigzag-size/2;
      }
      background: {
        position: top left;
        repear: repeat-x;
        size: $zigzag-size $zigzag-size;
      }
    }
  }
}