/*————————————

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);

}