// $angle: The angle in degrees: 1 - 45
// $angle-position-y: The Y position of the angle: top | bottom | both
// $angle-position-x: The X position of the angle: left | right
// $angle-position-bottom-x: The X position of the bottom angle if using 'both' for $angle-position-y: left | right
// $fallback: Create a fallback for older browsers: true | false
// $fallback-color: Fallback colour for older browsers: Hex color

@mixin angle-edge($angle, $angle-position-y, $angle-position-x, $angle-position-bottom-x: '', $fallback: true, $fallback-color: #fff) {

  position: relative;
  overflow: hidden;

  // Converts degrees to VW, 100vw = 45deg using this technique
  @if $angle > 45 {
    $angle: 0;
    @error 'Invalid angle, it must be between 1-45';
  }
  @if $angle < 46 {
    $angle: convertDegToVW($angle);
  }

  @if $angle-position-bottom-x == '' {
    $angle-position-bottom-x: $angle-position-x;
  }

  $angle-calc-top: calc(0% + #{$angle}vw);
  $angle-calc-bottom: calc(100% - #{$angle}vw);

  $clip-path-top: 0 0, 100% 0;
  $clip-path-bottom: 100% 100%, 0 100%;

  $border-width-top: '';
  $border-width-bottom: '';
  $border-color-top: '';
  $border-color-bottom: '';


  @if $angle-position-y == 'top' or $angle-position-y == 'both' {

    @if $angle-position-x == 'left' {
      $clip-path-top: 0 $angle-calc-top, 100% 0;

      $border-width-top: #{$angle + 1}vw 100vw 0 0;
    }

    @if $angle-position-x == 'right' {
      $clip-path-top: 0 0, 100% $angle-calc-top;

      $border-width-top: #{$angle + 1}vw 0 0 100vw;
    }

    $border-color-top: $fallback-color transparent transparent transparent;
  }


  @if $angle-position-y == 'bottom' or $angle-position-y == 'both' {

    @if $angle-position-y == 'both' and $angle-position-x != $angle-position-bottom-x {
      $angle-position-x: $angle-position-bottom-x;
    }

    @if $angle-position-x == 'left' {
      $clip-path-bottom: 100% 100%, 0 $angle-calc-bottom;

      $border-width-bottom: 0 100vw #{$angle + 1}vw 0;
    }

    @if $angle-position-x == 'right' {
      $clip-path-bottom: 100% $angle-calc-bottom, 0 100%;

      $border-width-bottom: 0 0 #{$angle + 1}vw 100vw;
    }

    $border-color-bottom: transparent transparent $fallback-color transparent;
  }

  $clip-path: polygon($clip-path-top, $clip-path-bottom);
  clip-path: $clip-path;


  // Fallback for clip-path with solid colours
  @if $fallback {

    @supports not (clip-path: $clip-path) {

      &::before, &::after {
        content: "";
        position: absolute;
        left: 0;
        z-index: 10;
        display: block;
        border-style: solid;
      }

      @if $angle-position-y == 'top' or $angle-position-y == 'both' {
        &::before {
          top: 0;
          border-width: $border-width-top;
          border-color: $border-color-top;
        }
      }

      @if $angle-position-y == 'bottom' or $angle-position-y == 'both' {
        &::after {
          bottom: 0;
          border-width: $border-width-bottom;
          border-color: $border-color-bottom;
        }
      }

    }

  }

}

// Converts degrees to VW, 100vw = 45deg using this technique
@function convertDegToVW($angle){
  @return round($angle*2.22);
}


// Classes
.angle--top-left {
  @include angle-edge($angle: 3, $angle-position-y: 'top', $angle-position-x: 'left');
}

.angle--top-right {
  @include angle-edge($angle: 3, $angle-position-y: 'top', $angle-position-x: 'right');
}

.angle--bottom-left {
  @include angle-edge($angle: 3, $angle-position-y: 'bottom', $angle-position-x: 'left');
}

.angle--bottom-right {
  @include angle-edge($angle: 3, $angle-position-y: 'bottom', $angle-position-x: 'right');
}

.angle--both-left-left {
  @include angle-edge($angle: 3, $angle-position-y: 'both', $angle-position-x: 'left');
}

.angle--both-right-right {
  @include angle-edge($angle: 3, $angle-position-y: 'both', $angle-position-x: 'right');
}

.angle--both-left-right {
  @include angle-edge($angle: 3, $angle-position-y: 'both', $angle-position-x: 'left', $angle-position-bottom-x: 'right');
}

.angle--both-right-left {
  @include angle-edge($angle: 3, $angle-position-y: 'both', $angle-position-x: 'right', $angle-position-bottom-x: 'left');
}


  .angle__content {
    display: block;
    width: 100%;
    height: auto;
  }

.angle--colour {
  color: #fff;
  background-color: #2196F3;
  text-align: center;
  padding: 10% 0;
}