.white-text {
    color: $white-color !important;
}
.primary-text {
    color: $primary-color !important;
}
.gray-text {
    color: $gray-light !important;
}
.light-black-text {
    color: $light-black-color !important;
}
.light-white-text {
    color: $light-white-color !important;
}

/*--------------------------------------------------------------
# MIXIN TO CORRECT NAVBAR WITH OUR COLOR PALETTE
--------------------------------------------------------------*/
@mixin color-palette($bgcolor, $txtcolor: $white-color) {
    background-color: $bgcolor;
    border-color: $bgcolor;
    color: $txtcolor !important;
    h1, h2, h3, h4, h5, h6 {
        color: $txtcolor;
    }
    .nav .open>a, .nav .open>a:focus, .nav .open>a:hover {
        background-color: darken($bgcolor, 5%);
        color: $txtcolor !important;
    }
    .nav>li>a:focus, .nav>li>a:hover {
        background-color: darken($bgcolor, 5%);
        color: $txtcolor !important;
    }
    .navbar-nav>li>a {
        color: $txtcolor;
    }
    &.small-nav:hover {
        .child-nav {
            background-color: $bgcolor;
        }
        .side-nav > li:not(.has-children) > a > span {
            background-color: $bgcolor;
        }
    }
}

/*--------------------------------------------------------------
# BACKGROUND COLOR PALLETES
--------------------------------------------------------------*/
.bg {
    &-primary {
        @include color-palette($primary-color);
        &-300 {
            @include color-palette(lighten($primary-color, 7.5%));
        }
        &-100 {
            @include color-palette(lighten($primary-color, 15%));
        }
        &-500 {
            @include color-palette(darken($primary-color, 5%));
        }
        &-600 {
            @include color-palette(darken($primary-color, 10%));
        }
        &-700 {
            @include color-palette(darken($primary-color, 15%));
        }
    }
}

.bg {
    &-danger {
        @include color-palette($danger-color);
        &-300 {
            @include color-palette(lighten($danger-color, 7.5%));
        }
        &-100 {
            @include color-palette(lighten($danger-color, 15%));
        }
        &-500 {
            @include color-palette(darken($danger-color, 5%));
        }
        &-600 {
            @include color-palette(darken($danger-color, 10%));
        }
        &-700 {
            @include color-palette(darken($danger-color, 15%));
        }
    }
}

.bg {
    &-success {
        @include color-palette($success-color);
        &-300 {
            @include color-palette(lighten($success-color, 7.5%));
        }
        &-100 {
            @include color-palette(lighten($success-color, 15%));
        }
        &-500 {
            @include color-palette(darken($success-color, 5%));
        }
        &-600 {
            @include color-palette(darken($success-color, 10%));
        }
        &-700 {
            @include color-palette(darken($success-color, 15%));
        }
    }
}

.bg {
    &-warning {
        @include color-palette($warning-color);
        &-300 {
            @include color-palette(lighten($warning-color, 7.5%));
        }
        &-100 {
            @include color-palette(lighten($warning-color, 15%));
        }
        &-500 {
            @include color-palette(darken($warning-color, 5%));
        }
        &-600 {
            @include color-palette(darken($warning-color, 10%));
        }
        &-700 {
            @include color-palette(darken($warning-color, 15%));
        }
    }
}

.bg {
    &-info {
        @include color-palette($info-color);
        &-300 {
            @include color-palette(lighten($info-color, 7.5%));
        }
        &-100 {
            @include color-palette(lighten($info-color, 15%));
        }
        &-500 {
            @include color-palette(darken($info-color, 5%));
        }
        &-600 {
            @include color-palette(darken($info-color, 10%));
        }
        &-700 {
            @include color-palette(darken($info-color, 15%));
        }
    }
}

.bg {
    &-black {
        @include color-palette($black-color);
        &-300 {
            @include color-palette(lighten($black-color, 7.5%));
        }
        &-100 {
            @include color-palette(lighten($black-color, 15%));
        }
        &-500 {
            @include color-palette(darken($black-color, 5%));
        }
        &-600 {
            @include color-palette(darken($black-color, 10%));
        }
        &-700 {
            @include color-palette(darken($black-color, 15%));
        }
    }
}

.bg {
    &-light-black {
        @include color-palette($light-black-color);
        &-300 {
            @include color-palette(lighten($light-black-color, 7.5%));
        }
        &-100 {
            @include color-palette(lighten($light-black-color, 15%));
        }
        &-500 {
            @include color-palette(darken($light-black-color, 5%));
        }
        &-600 {
            @include color-palette(darken($light-black-color, 10%));
        }
        &-700 {
            @include color-palette(darken($light-black-color, 15%));
        }
    }
}

.bg {
    &-gray {
        @include color-palette($gray-color, $light-black-color);
        &-300 {
            @include color-palette(lighten($gray-color, 7.5%), $light-black-color);
        }
        &-100 {
            @include color-palette(lighten($gray-color, 15%), $light-black-color);
        }
        &-500 {
            @include color-palette(darken($gray-color, 5%), $light-black-color);
        }
        &-600 {
            @include color-palette(darken($gray-color, 10%), $light-black-color);
        }
        &-700 {
            @include color-palette(darken($gray-color, 15%), $light-black-color);
        }
    }
}

.bg {
    &-white {
        @include color-palette($white-color, $light-black-color);
        &-300 {
            @include color-palette(lighten($white-color, 7.5%), $light-black-color);
        }
        &-100 {
            @include color-palette(lighten($white-color, 15%), $light-black-color);
        }
        &-500 {
            @include color-palette(darken($white-color, 5%), $light-black-color);
        }
        &-600 {
            @include color-palette(darken($white-color, 10%), $light-black-color);
        }
        &-700 {
            @include color-palette(darken($white-color, 15%), $light-black-color);
        }
    }
}


/*--------------------------------------------------------------
# COLOR CLASSES
--------------------------------------------------------------*/
.color {
    &-primary {
        color: $primary-color !important;
    }
    &-danger {
        color: $danger-color !important;
    }
    &-success {
        color: $success-color !important;
    }
    &-warning {
        color: $warning-color !important;
    }
    &-info {
        color: $info-color !important;
    }
    &-black {
        color: $black-color !important;
    }
    &-light-black {
        color: $light-black-color !important;
    }
    &-gray {
        color: $gray-color !important;
    }
    &-white {
        color: $white-color !important;
    }
}


/*--------------------------------------------------------------
# BORDER COLORS
--------------------------------------------------------------*/
.border {
    &-primary {
        border-color: $primary-color;
        &-300 {
            border-color: lighten($primary-color, 7.5%);
        }
        &-100 {
            border-color: lighten($primary-color, 15%);
        }
        &-500 {
            border-color: darken($primary-color, 5%);
        }
        &-600 {
            border-color: darken($primary-color, 10%);
        }
        &-700 {
            border-color: darken($primary-color, 15%);
        }
    }
}

.border {
    &-danger {
        border-color: $danger-color;
        &-300 {
            border-color: lighten($danger-color, 7.5%);
        }
        &-100 {
            border-color: lighten($danger-color, 15%);
        }
        &-500 {
            border-color: darken($danger-color, 5%);
        }
        &-600 {
            border-color: darken($danger-color, 10%);
        }
        &-700 {
            border-color: darken($danger-color, 15%);
        }
    }
}

.border {
    &-success {
        border-color: $success-color;
        &-300 {
            border-color: lighten($success-color, 7.5%);
        }
        &-100 {
            border-color: lighten($success-color, 15%);
        }
        &-500 {
            border-color: darken($success-color, 5%);
        }
        &-600 {
            border-color: darken($success-color, 10%);
        }
        &-700 {
            border-color: darken($success-color, 15%);
        }
    }
}

.border {
    &-warning {
        border-color: $warning-color;
        &-300 {
            border-color: lighten($warning-color, 7.5%);
        }
        &-100 {
            border-color: lighten($warning-color, 15%);
        }
        &-500 {
            border-color: darken($warning-color, 5%);
        }
        &-600 {
            border-color: darken($warning-color, 10%);
        }
        &-700 {
            border-color: darken($warning-color, 15%);
        }
    }
}

.border {
    &-info {
        border-color: $info-color;
        &-300 {
            border-color: lighten($info-color, 7.5%);
        }
        &-100 {
            border-color: lighten($info-color, 15%);
        }
        &-500 {
            border-color: darken($info-color, 5%);
        }
        &-600 {
            border-color: darken($info-color, 10%);
        }
        &-700 {
            border-color: darken($info-color, 15%);
        }
    }
}

.border {
    &-black {
        border-color: $black-color;
        &-300 {
            border-color: lighten($black-color, 7.5%);
        }
        &-100 {
            border-color: lighten($black-color, 15%);
        }
        &-500 {
            border-color: darken($black-color, 5%);
        }
        &-600 {
            border-color: darken($black-color, 10%);
        }
        &-700 {
            border-color: darken($black-color, 15%);
        }
    }
}

.border {
    &-gray {
        border-color: $gray-color;
        &-300 {
            border-color: lighten($gray-color, 7.5%);
        }
        &-100 {
            border-color: lighten($gray-color, 15%);
        }
        &-500 {
            border-color: darken($gray-color, 5%);
        }
        &-600 {
            border-color: darken($gray-color, 10%);
        }
        &-700 {
            border-color: darken($gray-color, 15%);
        }
    }
}