@charset "utf-8";
// Copyright 2019, Oath Inc.
// Licensed under the terms of the MIT license. See LICENSE file in project root for terms.

@import '../maps/color-maps.scss';

// Black
.has-bg-black {
    background-color: #000 !important;
    color: #fff !important;
}
.is-black {
    color: #000 !important;
}
.fill-black {
    fill: #000 !important;
}

// White
.has-bg-white {
    background-color: #fff !important;
    color: #000 !important;
}
.is-white {
    color: #fff !important;
}
.fill-white {
    fill: #fff !important;
}

// Brand
@each $name, $hex in $denali-brand-colors {
    .has-bg-brand-#{$name} {
        background-color: $hex !important;
        color: find-color-invert($hex) !important;
    }

    .is-brand-#{$name} {
        color: $hex !important;
    }

    .fill-brand-#{$name} {
        fill: $hex !important;
    }
}

@each $name, $hex in $denali-status-colors {
    .has-bg-status-#{$name} {
        background-color: $hex !important;
        color: find-color-invert($hex) !important;
    }

    .is-status-#{$name} {
        color: $hex !important;
    }

    .fill-status-#{$name} {
        fill: $hex !important;
    }
}

@each $name, $hex in $denali-grey-colors {
    .has-bg-grey-#{$name} {
        background-color: $hex !important;
        color: find-color-invert($hex) !important;
    }

    .is-grey-#{$name} {
        color: $hex !important;
    }

    .fill-grey-#{$name} {
        fill: $hex !important;
    }
}

@each $name, $hex in $denali-graph-colors {
    .has-bg-graph-#{$name} {
        background-color: $hex !important;
        color: find-color-invert($hex) !important;
    }

    .is-graph-#{$name} {
        color: $hex !important;
    }

    .fill-graph-#{$name} {
        fill: $hex !important;
    }
}

@each $name, $variants in $denali-colors {
    @each $color-variant, $hex in $variants {
        .has-bg-#{$name}-#{$color-variant} {
            background-color: $hex !important;
            color: find-color-invert($hex) !important;
        }

        .is-#{$name}-#{$color-variant} {
            color: $hex !important;
        }

        .fill-#{$name}-#{$color-variant} {
            fill: $hex !important;
        }
    }
}