@mixin color-variant($bg, $color) {
  color: $color;
  background-color: $bg;
  .lt{
		background-color: lighten($bg, $color-percent);
	}
  .dk{
		background-color: darken($bg, $color-percent);
	}
  .bg{
    background-color: $bg;
  }
}

.lter{
  background-color: rgba(255,255,255,0.035);
}

.dker{
  background-color: rgba(0,0,0,0.035);
}

.light {
  background-color: $light;
}

.white {
  background-color: #fff;
}

.dark-white{
  color: $dark-black;
  background-color: #fff;
}

.black {
  @include color-variant($black, $black-color);
}

.dark {
  @include color-variant($dark, $dark-color);
}

.grey {
  @include color-variant($grey, $grey-color);
}

.primary {
	@include color-variant($primary, $primary-color);
}

.accent {
  @include color-variant($accent, $accent-color);
}

.warn {
  @include color-variant($warn, $warn-color);
}

.success {
	@include color-variant($success, $success-color);
}

.info {
  @include color-variant($info, $info-color);
}

.warning {
	@include color-variant($warning, $warning-color);
}

.danger {
	@include color-variant($danger, $danger-color);
}

.blue{
  @include color-variant($blue, $dark-white);
}

.white-overlay{
  background-color: rgba(255, 255, 255, 0.85);
}

.black-overlay{
  background-color: rgba(0, 0, 0, 0.85);
}

.gd-overlay{
  background-color: transparent !important;
  @include gradient-y(rgba(0,0,0,0), rgba(0,0,0,0.5));
}

.bg-auto{
  &:before{
    content: "";
    position: absolute;
    width: inherit;
    top: 0;
    bottom: 0;
    background-color: inherit;
    border: inherit;
  }
  &.b-l:before{
    margin-left: -1px;
  }
  &.b-r:before{
    margin-right: -1px;
  }
}

.bg-clip{
  background-clip: padding-box;
}

.no-bg{
  background-color: transparent !important; 
}

@media (max-width: 767px) {
  .no-bg-xs{
     background-color: transparent;
  }
}