.bg-gd {
  @include gradient-vertical(rgba(40, 50, 60, 0), rgba(40, 50, 60, 0.075), 0, 100%);
  filter: none;
}

.bg-gd-dk {
  @include gradient-vertical(rgba(40, 50, 60, 0), rgba(40, 50, 60, 0.5), 10%, 100%);
  filter: none;
}

.bg-light {
  background-color: $light;
  color: $text-color;
}

.bg-dark {
  background-color: $dark;
  @include font-variant($dark);
}

.bg-black {
  background-color: $black;
  @include font-variant($black);
}

.bg-primary {
  background-color: $primary;
  @include font-variant($primary);
}

.bg-success {
  background-color: $success;
  @include font-variant($success);
}

.bg-info {
  background-color: $info;
  @include font-variant($info);
}

.bg-warning {
  background-color: $warning;
  @include font-variant($warning);
}

.bg-danger {
  background-color: $danger;
  @include font-variant($danger);
}

.bg-white {
  background-color: #fff;
  color: $text-color;
  a {
    color: $link-color;
    &:hover {
      color: darken($link-color, 10%)!important;
    }
  }
  .text-muted {
    color: $text-muted !important;
  }
  .lt,
  .lter,
  .dk,
  .dker {
    background-color: #fff;
  }
}

.bg-white-only {
  background-color: #fff;
}

.bg-white-opacity {
  background-color: rgba(255, 255, 255, 0.5);
}

.bg-black-opacity {
  background-color: rgba(32, 43, 54, 0.5);
}

a.bg-light {
  &:hover {
    color: $link-color;
  }
}

@include text-wariant($primary, primary);
@include text-wariant($info, info);
@include text-wariant($success, success);
@include text-wariant($warning, warning);
@include text-wariant($danger, danger);
@include text-wariant($dark, dark);
@include text-wariant($black, black);

.text-white {
  color: #fff;
}

.text-black {
  color: #000;
}

.text-muted {
  color: $text-muted!important;
}
