/*------------------------------------
  Nonstandard Background v3
------------------------------------*/

[class*="u-ns-bg-v3"] {
  position: relative;

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

.u-ns-bg-v3 {
  &-top,
  &-bottom {
    &::before {
      left: 80px;
    }
  }

  &-left,
  &-right {
    &::before {
      top: 23px;
    }
  }

  &-top,
  &-left {
    &.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;
      }
    }

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

  &-bottom,
  &-right {
    &.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;
      }
    }

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

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

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

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

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

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

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

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

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

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

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

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