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

Nonstandard Background v5

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

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

{

position: relative;

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

&.g-bg-primary {
  svg {
    polygon,
    path {
      fill: $g-color-primary;
    }
  }
}

&.g-bg-white {
  svg {
    polygon,
    path {
      fill: $g-color-white;
    }
  }
}

&.g-bg-gray-light-v2 {
  svg {
    polygon,
    path {
      fill: $g-color-gray-light-v2;
    }
  }
}

&.g-bg-black {
  svg {
    polygon,
    path {
      fill: $g-color-black;
    }
  }
}

}

.u-ns-bg-v5 {

&-top,
&-bottom {
  .u-ns-bg-before {
    width: 100%;
  }

  svg {
    width: 100%;
  }
}

&-left,
&-right {
  .u-ns-bg-before {
    height: 100%;
  }

  svg {
    height: 100%;
    vertical-align: middle;
  }
}

&-top {
  .u-ns-bg-before {
    bottom: 100%;
  }

  svg {
    vertical-align: bottom;
  }
}

&-bottom {
  .u-ns-bg-before {
    top: 100%;
  }

  svg {
    vertical-align: top;
  }
}

&-left {
  .u-ns-bg-before {
    left: 100%;
  }
}

&-right {
  .u-ns-bg-before {
    right: 100%;
  }
}

}

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

.u-ns-bg-v5 {
  &-top--md,
  &-bottom--md,
  &-left--md,
  &-right--md {
    .u-ns-bg-before {
      top: auto;
      bottom: auto;
      left: auto;
      right: auto;
      width: auto;
      height: auto;
    }

    svg {
      width: auto;
      height: auto;
    }
  }

  &-top--md,
  &-bottom--md {
    .u-ns-bg-before {
      width: 100%;
    }

    svg {
      width: 100%;
    }
  }

  &-left--md,
  &-right--md {
    .u-ns-bg-before {
      height: 100%;
    }

    svg {
      height: 100%;
      vertical-align: middle;
    }
  }

  &-top--md {
    .u-ns-bg-before {
      bottom: 100%;
    }

    svg {
      vertical-align: bottom;
    }
  }

  &-bottom--md {
    .u-ns-bg-before {
      top: 100%;
    }

    svg {
      vertical-align: top;
    }
  }

  &-left--md {
    .u-ns-bg-before {
      left: 100%;
    }
  }

  &-right--md {
    .u-ns-bg-before {
      right: 100%;
    }
  }
}

}