//------------------------------------
//  COLORS
//------------------------------------

@if $use-bg-colors == true {
  // Background colors
  .bg-white { background-color: $bg-white !important; }

  .bg-black { background-color: $bg-black !important; }

  .bg-light-gray { background-color: $bg-light-gray !important; }

  .bg-gray { background-color: $bg-gray !important; }

  .bg-light-green { background-color: $bg-light-green !important; }

  .bg-green { background-color: $bg-green !important; }

  .bg-light-blue { background-color: $bg-light-blue !important; }

  .bg-blue { background-color: $bg-blue !important; }

  .bg-light-yellow { background-color: $bg-light-yellow !important; }

  .bg-yellow { background-color: $bg-yellow !important; }

  .bg-light-red { background-color: $bg-light-red !important; }

  .bg-red { background-color: $bg-red !important; }
}


@if $use-type-colors == true {
  // Type colors
  .color-white { color: $color-white; }

  .color-black { color: $color-black; }

  .color-gray { color: $color-gray; }

  .color-green { color: $color-green; }

  .color-blue { color: $color-blue; }

  .color-yellow { color: $color-yellow; }

  .color-red { color: $color-red; }
}

//------------------------------------
//  COLORS
//------------------------------------

@if $use-bg-colors == true {
  // Background colors
  .bg-white { background-color: $bg-white; }

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

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

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

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

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

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

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

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

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

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

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


@if $use-type-colors == true {
  // Type colors
  .color-white { color: $color-white; }

  .color-black { color: $color-black; }

  .color-gray { color: $color-gray; }

  .color-green { color: $color-green; }

  .color-blue { color: $color-blue; }

  .color-yellow { color: $color-yellow; }

  .color-red { color: $color-red; }
}

Remove `!important` from `.bg-*` classes
Remove `!important` from `.bg-*` classes
