// ===
// Color
// ===
@each $color, $value in $colors-text-map {
  .bg-#{$color} {
    background: $value !important;
  }
  .color-#{$color} {
    color: $value
  }
  .hover\:color-#{$color} {
    &:hover {
      color: $value
    }
  }
}

.bg-primary {}
.bg-primary-dark {}
.bg-primary-light {}
.bg-secondary {}
.bg-secondary-dark {}
.bg-secondary-light {}
.bg-text {}
.bg-text-dark {}
.bg-white {}
.bg-success {}
.bg-warn {}
.bg-danger {}
.bg-info {}
.bg-transparent {}

.color-primary {}
.color-primary-dark {}
.color-primary-light {}
.color-secondary {}
.color-secondary-dark {}
.color-secondary-light {}
.color-text {}
.color-text-dark {}
.color-white {}
.color-success {}
.color-warn {}
.color-danger {}
.color-info {}
.color-transparent {}

.hover\:color-primary {}
.hover\:color-primary-dark {}
.hover\:color-primary-light {}
.hover\:color-secondary {}
.hover\:color-secondary-dark {}
.hover\:color-secondary-light {}
.hover\:color-text {}
.hover\:color-text-dark {}
.hover\:color-white {}
.hover\:color-success {}
.hover\:color-warn {}
.hover\:color-danger {}
.hover\:color-info {}
.hover\:color-transparent {}