/*------------------------------------
  BG Angles
------------------------------------*/

@mixin angle-bg($angle-type, $angle-position, $angle-bg) {
  content: "";
  position: absolute;

  @if $angle-position == top-left {
    top: -10px;
    left: -100px;
    transform: rotate(-55deg);
  } @else if $angle-position == top-right {
    top: -10px;
    right: -100px;
    transform: rotate(55deg);
  } @else if $angle-position == bottom-left {
    bottom: -10px;
    left: -100px;
    transform: rotate(55deg);
  } @else if $angle-position == bottom-right {
    bottom: -10px;
    right: -100px;
    transform: rotate(-55deg);
  }

  width: 250px;
  height: 120px;

  @if $angle-bg == light {
    background-color: rgba(255,255,255,.1);
  } @else if $angle-bg == dark {
    background-color: rgba(0,0,0,.1);
  }

  @if $angle-type == v2 {
    border-radius: 50%;
  }
}

.u-angle-v1--top-left--bg-light,
.u-angle-v1--top-right--bg-light,
.u-angle-v1--bottom-left--bg-light,
.u-angle-v1--bottom-right--bg-light,
.u-angle-v1--top-left--bg-dark,
.u-angle-v1--top-right--bg-dark,
.u-angle-v1--bottom-left--bg-dark,
.u-angle-v1--bottom-right--bg-dark,
.u-angle-v2--top-left--bg-light,
.u-angle-v2--top-right--bg-light,
.u-angle-v2--bottom-left--bg-light,
.u-angle-v2--bottom-right--bg-light,
.u-angle-v2--top-left--bg-dark,
.u-angle-v2--top-right--bg-dark,
.u-angle-v2--bottom-left--bg-dark,
.u-angle-v2--bottom-right--bg-dark {
  position: relative;
  overflow: hidden;
}

/* V-1
------------------------------------*/
/* Light */
.u-angle-v1--top-left--bg-light::after {
  @include angle-bg(v1, top-left, light);
}
.u-angle-v1--top-right--bg-light::after {
  @include angle-bg(v1, top-right, light);
}
.u-angle-v1--bottom-left--bg-light::after {
  @include angle-bg(v1, bottom-left, light);
}
.u-angle-v1--bottom-right--bg-light::after {
  @include angle-bg(v1, bottom-right, light);
}

/* Dark */
.u-angle-v1--top-left--bg-dark::after {
  @include angle-bg(v1, top-left, dark);
}
.u-angle-v1--top-right--bg-dark::after {
  @include angle-bg(v1, top-right, dark);
}
.u-angle-v1--bottom-left--bg-dark::after {
  @include angle-bg(v1, bottom-left, dark);
}
.u-angle-v1--bottom-right--bg-dark::after {
  @include angle-bg(v1, bottom-right, dark);
}

/* V-2
------------------------------------*/
/* Light */
.u-angle-v2--top-left--bg-light::after {
  @include angle-bg(v2, top-left, light);
}
.u-angle-v2--top-right--bg-light::after {
  @include angle-bg(v2, top-right, light);
}
.u-angle-v2--bottom-left--bg-light::after {
  @include angle-bg(v2, bottom-left, light);
}
.u-angle-v2--bottom-right--bg-light::after {
  @include angle-bg(v2, bottom-right, light);
}

/* Dark */
.u-angle-v2--top-left--bg-dark::after {
  @include angle-bg(v2, top-left, dark);
}
.u-angle-v2--top-right--bg-dark::after {
  @include angle-bg(v2, top-right, dark);
}
.u-angle-v2--bottom-left--bg-dark::after {
  @include angle-bg(v2, bottom-left, dark);
}
.u-angle-v2--bottom-right--bg-dark::after {
  @include angle-bg(v2, bottom-right, dark);
}