@use "sass:map";
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";

// Additional colors
$colors: map.merge(
    $colors,
    (
        "blue-muted":       rgb(13 110 253 / 50%),
    )
);

@each $color in map-keys($colors) {
    .text-#{"" + $color}, %text-#{"" + $color} {
        color: map.get($colors, $color) !important;
    }

    .hover-text-#{"" + $color}:hover, %hover-text-#{"" + $color}:hover {
        color: map.get($colors, $color) !important;
    }

    .bg-#{"" + $color}, %bg-#{"" + $color} {
        background-color: map.get($colors, $color) !important;
    }

    .hover-bg-#{"" + $color}:hover, %hover-bg-#{"" + $color}:hover {
        background-color: map.get($colors, $color) !important;
    }
}
