@mixin generate-base-colors($attribute, $prefix, $important: null) {
	@each $colorName, $color in $color-list {
		.#{$prefix}-#{$colorName} {
			#{$attribute}: #{$color} $important;
            transition: color 0.15s ease-in-out, background 0.15s ease-in-out, border 0.15s ease-in-out;

            @if ($attribute == 'border-color') {
			    border-width: 1px;
			    border-style: solid;
			}

			@if $include-color-palette and $include-color-helpers and $include-color-helpers-extended {
				@if $colorName != black and $colorName != white {
					&.lighten-#{$prefix}-1 {
						#{$attribute}: lighten-1($color) $important;
					}

					&.lighten-#{$prefix}-2 {
						#{$attribute}: lighten-2($color) $important;
					}

					&.lighten-#{$prefix}-3 {
						#{$attribute}: lighten-3($color) $important;
					}

					&.darken-#{$prefix}-1 {
						#{$attribute}: darken-1($color) $important;
					}

					&.darken-#{$prefix}-2 {
						#{$attribute}: darken-2($color) $important;
					}

					&.darken-#{$prefix}-3 {
						#{$attribute}: darken-3($color) $important;
					}
				}
			}
		}

		@if $include-color-palette and $include-color-helpers and $include-color-helpers-extended {
	        .#{$prefix}-hover-#{$colorName} {
	            &:not(:active):hover, &:not(:active):focus {
	                #{$attribute}: #{$color} $important;
	                transition:color 0.15s ease-in-out, background 0.15s ease-in-out, border 0.15s ease-in-out;

	                @if ($attribute == 'border-color') {
					    border-width: 1px;
					    border-style: solid;
					}

					@if $colorName != black and $colorName != white {
		                &.lighten-#{$prefix}-hover-1 {
		                    #{$attribute}: lighten-1($color) $important;
		                }

		                &.lighten-#{$prefix}-hover-2 {
		                    #{$attribute}: lighten-2($color) $important;
		                }

		                &.lighten-#{$prefix}-hover-3 {
		                    #{$attribute}: lighten-3($color) $important;
		                }

		                &.darken-#{$prefix}-hover-1 {
		                    #{$attribute}: darken-1($color) $important;
		                }

		                &.darken-#{$prefix}-hover-2 {
		                    #{$attribute}: darken-2($color) $important;
		                }

		                &.darken-#{$prefix}-hover-3 {
		                    #{$attribute}: darken-3($color) $important;
		                }
		            }
	            }
            }
        }

        @if $include-color-palette and $include-color-helpers and $include-color-helpers-extended {
	        .#{$prefix}-active-#{$colorName} {
	            &:active {
	                #{$attribute}: #{$color} $important;
	                transition:color 0.15s ease-in-out, background 0.15s ease-in-out, border 0.15s ease-in-out;

	                @if ($attribute == 'border-color') {
					    border-width: 1px;
					    border-style: solid;
					}

					@if $colorName != black and $colorName != white {
		                &.lighten-#{$prefix}-active-1 {
		                    #{$attribute}: lighten-1($color) $important;
		                }

		                &.lighten-#{$prefix}-active-2 {
		                    #{$attribute}: lighten-2($color) $important;
		                }

		                &.lighten-#{$prefix}-active-3 {
		                    #{$attribute}: lighten-3($color) $important;
		                }

		                &.darken-#{$prefix}-active-1 {
		                    #{$attribute}: darken-1($color) $important;
		                }

		                &.darken-#{$prefix}-active-2 {
		                    #{$attribute}: darken-2($color) $important;
		                }

		                &.darken-#{$prefix}-active-3 {
		                    #{$attribute}: darken-3($color) $important;
		                }
	            	}
	            }
            }
        }
	}
}

@mixin generate-tint-colors ($attribute, $prefix, $important: null) {
	@each $colorName, $color in $color-list {
        @if $include-color-palette and $include-color-helpers {                             
            @if $colorName != black and $colorName != white {
                .#{$prefix}-tint-#{$colorName} {
                    #{$attribute}: tintBG($color) $important;
                }
            }
        }
    }
}

@if $include-color-palette and $include-color-helpers {
	@include generate-base-colors(background, bg, !important);
	@include generate-base-colors(color, text, !important);
	@include generate-base-colors(border-color, border, !important);
    @include generate-tint-colors(background, bg, !important);
}