// ========================================================
// Background Classes
// ========================================================

// Grayscale Background Variants
@include bg-variant('.bg-white', $white);
@include bg-variant('.bg-black', $black);
@include bg-variant('.bg-gray-100', map-get($grays, "100"));
@include bg-variant('.bg-gray-200', map-get($grays, "200"));
@include bg-variant('.bg-gray-300', map-get($grays, "300"));
@include bg-variant('.bg-gray-400', map-get($grays, "400"));
@include bg-variant('.bg-gray-500', map-get($grays, "500"));
@include bg-variant('.bg-gray-600', map-get($grays, "600"));
@include bg-variant('.bg-gray-700', map-get($grays, "700"));
@include bg-variant('.bg-gray-800', map-get($grays, "800"));
@include bg-variant('.bg-gray-900', map-get($grays, "900"));

/**
 * Hover Backgrounds
 */
// Colors
.bg-primary-hover:hover { background: map-get($theme-colors, primary) !important; }
.bg-secondary-hover:hover { background: map-get($theme-colors, secondary) !important; }
.bg-success-hover:hover { background: map-get($theme-colors, success) !important; }
.bg-warning-hover:hover { background: map-get($theme-colors, warning) !important; }
.bg-danger-hover:hover { background: map-get($theme-colors, danger) !important; }
// Grays
.bg-black-hover:hover { background: $black !important; }
.bg-gray-darker-hover:hover { background: $gray-800 !important; }
.bg-gray-dark-hover:hover { background: $gray-600 !important; }
.bg-gray-hover:hover { background: $gray-500 !important; }
.bg-gray-light-hover:hover { background: $gray-400 !important; }
.bg-gray-lighter-hover:hover { background: $gray-300 !important; }
.bg-gray-lightest-hover:hover { background: $gray-200 !important; }
.bg-white-hover:hover { background: $white !important; }