@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;
  }
}

@mixin color-variant-ribbon($bg, $color) {
  background-color: $bg;
  color: $color;
  &:hover, &:focus, &:active{
    background-color: darken($bg,8%);
    color: lighten($bg,60%);
  }
  &:after {
    border-right-color: darken($bg,8%);
  }
  &[class*="right ribbon"]:after {
    border-color: transparent;
    border-top-color: darken($bg,8%);
  }
}

@mixin color-variant-shadow($bg, $color) {
  i{
    box-shadow: 0 0 0 1px darken($bg, 5%);
  }
  &:hover,&:focus,&:active,&.active{
    color: $bg;
    i{
      &:before{
        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);
}



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

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

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

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

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

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

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

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






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

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

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

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

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

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

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

.ribbon-blue{
  @include color-variant-ribbon($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-vertical(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;
  }
}

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

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