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

Nonstandard Background v1

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

class*=“u-ns-bg-v1”

{

position: relative;

&::before {
  content: "";
  position: absolute;
  z-index: 3;
  width: 0;
  height: 0;
  border: {
    style: solid;
    color: transparent;
  }
}

}

.u-ns-bg-v1 {

&-top,
&-bottom {
  &::before {
    left: 50%;
    margin-left: -25px;
  }
}

&-left,
&-right {
  &::before {
    top: 50%;
    margin-top: -25px;
  }
}

&-top {
  &::before {
    top: -25px;
    border-width: 0 20px 25px 20px;
  }

  &.g-bg-primary,
  .g-parent.g-bg-primary & {
    &::before {
      border-bottom-color: $g-color-primary;
    }
  }

  &.g-bg-white,
  .g-parent.g-bg-white & {
    &::before {
      border-bottom-color: $g-color-white;
    }
  }

  &.g-bg-gray-light-v2,
  .g-parent.g-bg-gray-light-v2 & {
    &::before {
      border-bottom-color: $g-color-gray-light-v2;
    }
  }

  &.g-bg-black,
  .g-parent.g-bg-black & {
    &::before {
      border-bottom-color: $g-color-black;
    }
  }
}

&-bottom {
  &::before {
    bottom: -25px;
    border-width: 25px 20px 0 20px;
  }

  &.g-bg-primary,
  .g-parent.g-bg-primary & {
    &::before {
      border-top-color: $g-color-primary;
    }
  }

  &.g-bg-white,
  .g-parent.g-bg-white & {
    &::before {
      border-top-color: $g-color-white;
    }
  }

  &.g-bg-gray-light-v2,
  .g-parent.g-bg-gray-light-v2 & {
    &::before {
      border-top-color: $g-color-gray-light-v2;
    }
  }

  &.g-bg-black,
  .g-parent.g-bg-black & {
    &::before {
      border-top-color: $g-color-black;
    }
  }
}

&-left {
  &::before {
    left: -25px;
    border-width: 20px 25px 20px 0;
  }

  &.g-bg-primary,
  .g-parent.g-bg-primary & {
    &::before {
      border-right-color: $g-color-primary;
    }
  }

  &.g-bg-white,
  .g-parent.g-bg-white & {
    &::before {
      border-right-color: $g-color-white;
    }
  }

  &.g-bg-gray-light-v2,
  .g-parent.g-bg-gray-light-v2 & {
    &::before {
      border-right-color: $g-color-gray-light-v2;
    }
  }

  &.g-bg-black,
  .g-parent.g-bg-black & {
    &::before {
      border-right-color: $g-color-black;
    }
  }
}

&-right {
  &::before {
    right: -25px;
    border-width: 20px 0 20px 25px;
  }

  &.g-bg-primary,
  .g-parent.g-bg-primary & {
    &::before {
      border-left-color: $g-color-primary;
    }
  }

  &.g-bg-white,
  .g-parent.g-bg-white & {
    &::before {
      border-left-color: $g-color-white;
    }
  }

  &.g-bg-gray-light-v2,
  .g-parent.g-bg-gray-light-v2 & {
    &::before {
      border-left-color: $g-color-gray-light-v2;
    }
  }

  &.g-bg-black,
  .g-parent.g-bg-black & {
    &::before {
      border-left-color: $g-color-black;
    }
  }
}

}

@media (min-width: $g-md) {

.u-ns-bg-v1 {
  &-top--md,
  &-bottom--md,
  &-left--md,
  &-right--md {
    &::before {
      top: auto;
      bottom: auto;
      left: auto;
      right: auto;
      margin: {
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
      }
    }

    &.g-bg-primary,
    &.g-bg-white,
    &.g-bg-gray-light-v2,
    &.g-bg-black {
      &::before {
        border-top-color: transparent;
        border-bottom-color: transparent;
        border-left-color: transparent;
        border-right-color: transparent;
      }
    }
  }

  &-top--md,
  &-bottom--md {
    &::before {
      left: 50%;
      margin-left: -25px;
    }
  }

  &-left--md,
  &-right--md {
    &::before {
      top: 50%;
      margin-top: -25px;
    }
  }

  &-top--md {
    &::before {
      top: -25px;
      border-width: 0 20px 25px 20px;
    }

    &.g-bg-primary {
      &::before {
        border-bottom-color: $g-color-primary;
      }
    }

    &.g-bg-white {
      &::before {
        border-bottom-color: $g-color-white;
      }
    }

    &.g-bg-gray-light-v2 {
      &::before {
        border-bottom-color: $g-color-gray-light-v2;
      }
    }

    &.g-bg-black {
      &::before {
        border-bottom-color: $g-color-black;
      }
    }
  }

  &-bottom--md {
    &::before {
      bottom: -25px;
      border-width: 25px 20px 0 20px;
    }

    &.g-bg-primary {
      &::before {
        border-top-color: $g-color-primary;
      }
    }

    &.g-bg-white {
      &::before {
        border-top-color: $g-color-white;
      }
    }

    &.g-bg-gray-light-v2 {
      &::before {
        border-top-color: $g-color-gray-light-v2;
      }
    }

    &.g-bg-black {
      &::before {
        border-top-color: $g-color-black;
      }
    }
  }

  &-left--md {
    &::before {
      left: -25px;
      border-width: 20px 25px 20px 0;
    }

    &.g-bg-primary {
      &::before {
        border-right-color: $g-color-primary;
      }
    }

    &.g-bg-white {
      &::before {
        border-right-color: $g-color-white;
      }
    }

    &.g-bg-gray-light-v2 {
      &::before {
        border-right-color: $g-color-gray-light-v2;
      }
    }

    &.g-bg-black {
      &::before {
        border-right-color: $g-color-black;
      }
    }
  }

  &-right--md {
    &::before {
      right: -25px;
      border-width: 20px 0 20px 25px;
    }

    &.g-bg-primary {
      &::before {
        border-left-color: $g-color-primary;
      }
    }

    &.g-bg-white {
      &::before {
        border-left-color: $g-color-white;
      }
    }

    &.g-bg-gray-light-v2 {
      &::before {
        border-left-color: $g-color-gray-light-v2;
      }
    }

    &.g-bg-black {
      &::before {
        border-left-color: $g-color-black;
      }
    }
  }
}

}