//
// Mixins: Backgrounds
//

// Background Variant
@mixin background-variant($name, $color) {
  .bg-#{$name} {
    background-color: #{$color} !important;

    &,
    > a {
      color: color-contrast($color) !important;
    }

    &.btn {
      &:hover {
        border-color: shade-color($color, 10%);
        color: shade-color(color-contrast($color), 7.5%);
      }

      &:not(:disabled):not(.disabled):active,
      &:not(:disabled):not(.disabled).active,
      &:active,
      &.active {
        background-color: shade-color($color, 10%) !important;
        border-color: shade-color($color, 12.5%);
        color: color-contrast(shade-color($color, 10%));
      }
    }
  }
}
