// Name:            Background color
//
// Component:       `background-color`
//
// Modifiers:       `bg-white`
//                  `bg-primary`
//                  `bg-success`
//                  `bg-info`
//                  `bg-warning`
//                  `bg-danger`
//                  `bg-dark`
//
// ========================================================================

// Variables
// ========================================================================

$bg-white-color:   $text-color !default;
$bg-white-bg:      $color-white !default;

$bg-primary-color: $inverse !default;
$bg-primary-bg:    $brand-primary !default;

$bg-success-color: $inverse !default;
$bg-success-bg:    $brand-success !default;

$bg-info-color:    $inverse !default;
$bg-info-bg:       $brand-info !default;

$bg-warning-color: $inverse !default;
$bg-warning-bg:    $brand-warning !default;

$bg-danger-color:  $inverse !default;
$bg-danger-bg:     $brand-danger !default;

$bg-dark-color:    $inverse !default;
$bg-dark-bg:       $brand-dark !default;

// Mixins
// ========================================================================

@mixin bg-variant($parent, $color, $bg){
  color: $color;
  background-color: $bg;

  &:hover {
    background-color: lighten($bg, 10%);
  }

  a,
  a#{$parent} {
    color: $color;

    &:hover {
      color: $color;
    }
  }
}

// Component: Background color
// ========================================================================

.bg-white {
  color: $bg-white-color;
  background-color: $bg-white-bg;
}

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

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

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

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

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

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