// Colors
@each $color, $value in $colors {
    .#{$color} {
        background: $value !important;
    }

    // Change Background Color on Hover
    .hover-to-#{$color} {
        &:hover {
            background: $value;
        }
    }

    .text-#{$color} {
        color: $value;
    }
}

// Theme Colors
@each $color, $value in $theme-colors {
    .#{$color} {
        background: $value !important;
    }

    // Change Background Color on Hover
    .hover-to-#{$color} {
        &:hover {
            background: $value;
        }
    }

    .text-#{$color} {
        color: $value;
    }

    // Light Theme Colors
    @for $i from 1 to 9 {
        .#{$color}-accent-#{$i} {
            background: mix($white, $value, $i * 10);
        }

        .hover-to-#{$color}-accent-#{$i} {
            &:hover {
                background: mix($white, $value, $i * 10);
            }
        }

        .text-#{$color}-accent-#{$i} {
            color: mix($white, $value, $i * 10);
        }
    }
}

.bg-transparent {
    background-color: transparent;
}

.bg-white {
    background: var(--#{$variable-prefix}secondary) !important;
}

// Gray Colors
@each $color, $value in $gray-colors {
    .bg-#{$color} {
        background: $value;
    }

    .text-#{$color} {
        color: $value;
    }
}