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

Nonstandard Background v6

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

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

{

position: relative;

.u-ns-bg-before {
  position: absolute;
  z-index: 2;
}

}

.u-ns-bg-v6 {

&-top,
&-bottom,
&-left,
&-right {
  .u-ns-bg-before {
    &::before,
    &::after {
      content: "";
      display: block;
      width: 0;
      height: 0;
      border: {
        style: solid;
        color: transparent;
      }
    }

    &::after {
      position: absolute;
    }
  }
}

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

&-left,
&-right {
  .u-ns-bg-before {
    top: 30px;
  }
}

&-top {
  .u-ns-bg-before {
    top: -15px;

    &::before {
      border-width: 0 15px 15px 15px;
    }

    &::after {
      bottom: 0;
      left: 1px;
      border-width: 0 14px 14px 14px;
    }
  }

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

      &::after {
        border-bottom-color: $g-color-white;
      }
    }
  }

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

      &::after {
        border-bottom-color: $g-color-white;
      }
    }
  }

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

      &::after {
        border-bottom-color: $g-color-white;
      }
    }
  }
}

&-bottom {
  .u-ns-bg-before {
    bottom: -15px;

    &::before {
      border-width: 15px 15px 0 15px;
    }

    &::after {
      bottom: 1px;
      left: 1px;
      border-width: 14px 14px 0 14px;
    }
  }

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

      &::after {
        border-top-color: $g-color-white;
      }
    }
  }

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

      &::after {
        border-top-color: $g-color-white;
      }
    }
  }

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

      &::after {
        border-top-color: $g-color-white;
      }
    }
  }
}

&-left {
  .u-ns-bg-before {
    left: -15px;

    &::before {
      border-width: 15px 15px 15px 0;
    }

    &::after {
      top: 1px;
      right: 0;
      border-width: 14px 14px 14px 0;
    }
  }

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

      &::after {
        border-right-color: $g-color-white;
      }
    }
  }

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

      &::after {
        border-right-color: $g-color-white;
      }
    }
  }

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

      &::after {
        border-right-color: $g-color-white;
      }
    }
  }
}

&-right {
  .u-ns-bg-before {
    right: -15px;

    &::before {
      border-width: 15px 0 15px 15px;
    }

    &::after {
      top: 1px;
      left: 0;
      border-width: 14px 0 14px 14px;
    }
  }

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

      &::after {
        border-left-color: $g-color-white;
      }
    }
  }

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

      &::after {
        border-left-color: $g-color-white;
      }
    }
  }

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

      &::after {
        border-left-color: $g-color-white;
      }
    }
  }
}

}

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

.u-ns-bg-v6 {
  &-top--md,
  &-bottom--md,
  &-left--md,
  &-right--md {
    &.g-brd-primary,
    &.g-brd-gray-light-v2,
    &.g-brd-black {
      .u-ns-bg-before {
        &::before {
          border-top-color: transparent;
          border-bottom-color: transparent;
          border-left-color: transparent;
          border-right-color: transparent;
        }

        &::after {
          border-top-color: transparent;
          border-bottom-color: transparent;
          border-left-color: transparent;
          border-right-color: transparent;
        }
      }
    }
  }

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

  &-left--md,
  &-right--md {
    .u-ns-bg-before {
      top: 30px;
    }
  }

  &-top--md {
    .u-ns-bg-before {
      bottom: auto;
      top: -15px;

      &::before {
        border-width: 0 15px 15px 15px;
      }

      &::after {
        top: auto;
        bottom: 0;
        left: 1px;
        border-width: 0 14px 14px 14px;
      }
    }

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

        &::after {
          border-bottom-color: $g-color-white;
        }
      }
    }

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

        &::after {
          border-bottom-color: $g-color-white;
        }
      }
    }

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

        &::after {
          border-bottom-color: $g-color-white;
        }
      }
    }
  }

  &-bottom--md {
    .u-ns-bg-before {
      top: auto;
      bottom: -15px;

      &::before {
        border-width: 15px 15px 0 15px;
      }

      &::after {
        top: auto;
        bottom: 1px;
        left: 1px;
        border-width: 14px 14px 0 14px;
      }
    }

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

        &::after {
          border-top-color: $g-color-white;
        }
      }
    }

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

        &::after {
          border-top-color: $g-color-white;
        }
      }
    }

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

        &::after {
          border-top-color: $g-color-white;
        }
      }
    }
  }

  &-left--md {
    .u-ns-bg-before {
      left: -15px;
      right: auto;

      &::before {
        border-width: 15px 15px 15px 0;
      }

      &::after {
        top: 1px;
        bottom: auto;
        right: 0;
        border-width: 14px 14px 14px 0;
      }
    }

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

        &::after {
          border-right-color: $g-color-white;
        }
      }
    }

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

        &::after {
          border-right-color: $g-color-white;
        }
      }
    }

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

        &::after {
          border-right-color: $g-color-white;
        }
      }
    }
  }

  &-right--md {
    .u-ns-bg-before {
      left: auto;
      right: -15px;

      &::before {
        border-width: 15px 0 15px 15px;
      }

      &::after {
        top: 1px;
        bottom: auto;
        left: 0;
        border-width: 14px 0 14px 14px;
      }
    }

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

        &::after {
          border-left-color: $g-color-white;
        }
      }
    }

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

        &::after {
          border-left-color: $g-color-white;
        }
      }
    }

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

        &::after {
          border-left-color: $g-color-white;
        }
      }
    }
  }
}

}