/*!markdown

---
title: Text Color
---

| Class       | Properties               |
| ----------- | ------------------------ |
| text-transparent | color: transparent |
| text-current | color: currentColor |
| text-black | color: #000 |
| text-white | color: #fff |
| text-primary | color: #007bff |
| text-secondary | color: #6c757d |
| text-success | color: #28a745 |
| text-info | color: #17a2b8 |
| text-warning | color: #fad733 |
| text-danger | color: #dc3545 |
| text-light | color: #f8f9fa |
| text-dark | color: #343a40 |
| text-gray-50 | color: #f9fafb |
| text-gray-100 | color: #f3f4f6 |
| text-gray-200 | color: #e5e7eb |
| text-gray-300 | color: #d1d5db |
| text-gray-400 | color: #9ca3af |
| text-gray-500 | color: #6b7280 |
| text-gray-600 | color: #4b5563 |
| text-gray-700 | color: #374151 |
| text-gray-800 | color: #1f2937 |
| text-gray-900 | color: #111827 |
| text-red-50 | color: #fef2f2 |
| text-red-100 | color: #fee2e2 |
| text-red-200 | color: #fecaca |
| text-red-300 | color: #fca5a5 |
| text-red-400 | color: #f87171 |
| text-red-500 | color: #ef4444 |
| text-red-600 | color: #dc2626 |
| text-red-700 | color: #b91c1c |
| text-red-800 | color: #991b1b |
| text-red-900 | color: #7f1d1d |
| text-yellow-50 | color: #fffbeb |
| text-yellow-100 | color: #fef3c7 |
| text-yellow-200 | color: #fde68a |
| text-yellow-300 | color: #fcd34d |
| text-yellow-400 | color: #fbbf24 |
| text-yellow-500 | color: #f59e0b |
| text-yellow-600 | color: #d97706 |
| text-yellow-700 | color: #b45309 |
| text-yellow-800 | color: #92400e |
| text-yellow-900 | color: #78350f |
| text-green-50 | color: #ecfdf5 |
| text-green-100 | color: #d1fae5 |
| text-green-200 | color: #a7f3d0 |
| text-green-300 | color: #6ee7b7 |
| text-green-400 | color: #34d399 |
| text-green-500 | color: #10b981 |
| text-green-600 | color: #059669 |
| text-green-700 | color: #047857 |
| text-green-800 | color: #065f46 |
| text-green-900 | color: #064e3b |
| text-blue-50 | color: #eff6ff |
| text-blue-100 | color: #dbeafe |
| text-blue-200 | color: #bfdbfe |
| text-blue-300 | color: #93c5fd |
| text-blue-400 | color: #60a5fa |
| text-blue-500 | color: #3b82f6 |
| text-blue-600 | color: #2563eb |
| text-blue-700 | color: #1d4ed8 |
| text-blue-800 | color: #1e40af |
| text-blue-900 | color: #1e3a8a |
| text-cyan-50 | color: #ecfeff |
| text-cyan-100 | color: #cffafe |
| text-cyan-200 | color: #a5f3fc |
| text-cyan-300 | color: #67e8f9 |
| text-cyan-400 | color: #22d3ee |
| text-cyan-500 | color: #06b6d4 |
| text-cyan-600 | color: #0891b2 |
| text-cyan-700 | color: #0e7490 |
| text-cyan-800 | color: #155e75 |
| text-cyan-900 | color: #164e63 |
| text-indigo-50 | color: #eef2ff |
| text-indigo-100 | color: #e0e7ff |
| text-indigo-200 | color: #c7d2fe |
| text-indigo-300 | color: #a5b4fc |
| text-indigo-400 | color: #818cf8 |
| text-indigo-500 | color: #6366f1 |
| text-indigo-600 | color: #4f46e5 |
| text-indigo-700 | color: #4338ca |
| text-indigo-800 | color: #3730a3 |
| text-indigo-900 | color: #312e81 |
| text-purple-50 | color: #f5f3ff |
| text-purple-100 | color: #ede9fe |
| text-purple-200 | color: #ddd6fe |
| text-purple-300 | color: #c4b5fd |
| text-purple-400 | color: #a78bfa |
| text-purple-500 | color: #8b5cf6 |
| text-purple-600 | color: #7c3aed |
| text-purple-700 | color: #6d28d9 |
| text-purple-800 | color: #5b21b6 |
| text-purple-900 | color: #4c1d95 |
| text-pink-50 | color: #fdf2f8 |
| text-pink-100 | color: #fce7f3 |
| text-pink-200 | color: #fbcfe8 |
| text-pink-300 | color: #f9a8d4 |
| text-pink-400 | color: #f472b6 |
| text-pink-500 | color: #ec4899 |
| text-pink-600 | color: #db2777 |
| text-pink-700 | color: #be185d |
| text-pink-800 | color: #9d174d |
| text-pink-900 | color: #831843 |

还有 hover、active、focus、disabled 扩展，比如 `hover:text-black`

*/
@mixin text-colors-map(
  $colors: $colors,
  $namePrefix: '',
  $prefix: '.',
  $suffix: ''
) {
  @each $name, $color in $colors {
    @if (is-map($color)) {
      @include text-colors-map($color, #{'-' + $name}, $prefix, $suffix);
    } @else if $suffix == '.is-active' {
      #{$prefix}text#{$namePrefix}-#{'' + $name}.is-active,
      #{$prefix}text#{$namePrefix}-#{'' + $name}:active {
        color: $color;
      }
    } @else if $suffix == '.is-disabled' {
      #{$prefix}text#{$namePrefix}-#{'' + $name}.is-disabled,
      #{$prefix}text#{$namePrefix}-#{'' + $name}:disabled {
        color: $color;
      }
    } @else {
      #{$prefix}text#{$namePrefix}-#{'' + $name}#{$suffix} {
        color: $color;
      }
    }
  }
}

@mixin text-colors($prefix: '.', $suffix: '') {
  #{$prefix}text-transparent#{$suffix} {
    color: transparent;
  }
  #{$prefix}text-current#{$suffix} {
    color: currentColor;
  }
  @include text-colors-map($colors, '', $prefix, $suffix);
}

@include text-colors();
@include text-colors('.' + selector-escape('hover:'), ':hover');
@include text-colors('.' + selector-escape('active:'), '.is-active');
@include text-colors('.' + selector-escape('focus:'), ':focus');
@include text-colors('.' + selector-escape('disabled:'), '.is-disabled');
@include text-colors('.group:hover .' + selector-escape('group-hover:'));

@each $deivce in map-keys($devices) {
  @include media-device($deivce) {
    @include text-colors('.' + selector-escape($deivce + ':'));

    @include text-colors(
      '.' + selector-escape($deivce + ':') + selector-escape('hover:'),
      ':hover'
    );
    @include text-colors(
      '.' + selector-escape($deivce + ':') + selector-escape('active:'),
      '.is-active'
    );
    @include text-colors(
      '.' + selector-escape($deivce + ':') + selector-escape('focus:'),
      ':focus'
    );
    @include text-colors(
      '.' + selector-escape($deivce + ':') + selector-escape('disabled:'),
      '.is-disabled'
    );
    @include text-colors(
      '.group:hover .' + selector-escape($deivce + ':') +
        selector-escape('group-hover:')
    );
  }
}