// ============================================================================================
//   File Name: pallette.scss
//   Description: Custom color system styles, includes background, border and text colors etc..
// ============================================================================================

@import "../mixins/colors";

// Usage: color("name_of_color", "type_of_color")
@function color-function($color, $type) {
	@if map-has-key($colors, $color) {
		$curr_color: map-get($colors, $color);
		@if map-has-key($curr_color, $type) {
			@return map-get($curr_color, $type);
		}
	}
	@return null;
}

/** **************
	Color palettes
	***************/
@import "app-colors";

@each $gcolor_name, $gcolor in $gradient-colors {
	$start-color : map-get($gcolor, start-color);
	$end-color : map-get($gcolor, end-color);
	.#{$gcolor_name} {
		@include gradient-directional($start-color, $end-color);
	}
	.btn.#{$gcolor_name} {
		&:active,
		&.active{
			@include gradient-directional($start-color, $end-color);
		}
	}
}

@each $color_name, $color in $colors {
	@each $color_type, $color_value in $color {
		@if $color_type == "base" {
			.#{$color_name} {
				color: $color_value !important;
			}
			.bg-#{$color_name} {
				background-color: $color_value !important;
				.card-header, .card-footer {
					background-color: transparent;
				}
			}
			.toast-#{$color_name}{
				background-color: $color_value;
			}
			.alert-#{$color_name} {
				border-color: $color_value !important;
				background-color: lighter($color_value, 7%) !important;
				color: darker($color_value, 35%) !important;
				.alert-link {
					color: darker($color_value, 43%) !important;
				}
			}
			.border-#{$color_name} {
				border-color: $color_value;
			}
			.border-top-#{$color_name} {
				border-top-color: $color_value;
			}
			.border-bottom-#{$color_name} {
				border-bottom-color: $color_value;
			}
			.border-left-#{$color_name} {
				border-left-color: $color_value;
			}
			.border-right-#{$color_name} {
				border-right-color: $color_value;
			}

			.badge-#{$color_name} {
				background-color: $color_value;
			}
			.panel-#{$color_name} {
				border-color: $color_value;
				.panel-heading {
					color: #FFF;
					border-color: $color_value;
					background-color: lighter($color_value,5%);
				}
			}
			.bg-#{$color_name}, .border-#{$color_name} {
				&.tag-glow{
					box-shadow: 0px 0px 10px $color_value;
				}
			}
			.overlay-#{$color_name} {
				@include bg-opacity($color_value, 0.8);
			}
			.card.card-outline-#{$color_name} {
				border-width: 1px;
				border-style: solid;
				border-color: $color_value;
				background-color: transparent;
				.card-header, .card-footer {
					background-color: transparent;
				}
			}
			.btn-#{$color_name} {
				&.btn-flat {
					background-color: transparent !important;
					color: $color_value;
					border: none;
				}
				&.btn-raised, &.btn-fab{
					background-color: $color_value !important;
					color: #fff !important;
					border-color: $color_value;
					&.active{
						background-color: darker($color_value,7%) !important;
						border-color: darker($color_value,7%) !important;
					}
				}
				color: $color_value !important;
			}
			.btn-group-raised {
				.btn-#{$color_name} {
					background-color: $color_value !important;
					color: #fff !important;
				}
			}
			.btn-outline-#{$color_name} {
				border: 1px solid;
				border-color: $color_value;
				background-color: transparent;
				color: $color_value;
				box-shadow: none !important;
				&:focus{
					background-color: transparent !important;
					color: $color_value !important;
					box-shadow: transparent !important;
				}
				&.active{
					background-color: $color_value !important;
					color: #FFF !important;
				}
				&:hover{
					background-color: darker($color_value, 3%) !important;
					color: #FFF !important;
				}
			}
			.btn-outline-#{$color_name} {
				&.btn-raised, &.btn-fab {
					border: 1px solid;
					border-color: $color_value;
					background-color: transparent;
					color: $color_value;
					box-shadow: none !important;
					&:focus{
						background-color: transparent;
					}
					&.active{
						background-color: $color_value !important;
						color: #FFF !important;
					}
					&:hover{
						background-color: darker($color_value, 3%) !important;
						color: #FFF !important;
					}
				}
			}
			.progress {
				.progress-bar{
					&.progress-bar-#{$color_name} {
						@include progress-variant($color_value);
					}
				}
			}

			input:focus ~ .bg-#{$color_name} {
				box-shadow: 0 0 0 .075rem #fff, 0 0 0 .21rem $color_value !important;
			}
		}
		@else {
			.#{$color_name}.#{$color_type} {
				color: $color_value !important;
			}
			.bg-#{$color_name}.bg-#{$color_type} {
				background-color: $color_value !important;
			}
			.btn-#{$color_name}.btn-#{$color_type} {
				border-color: color-function($color_name, "darker-2") !important;
				background-color: $color_value !important;
				&:hover {
					border-color: color-function($color_name, "darker-2") !important;
					background-color: color-function($color_name, "darker-3") !important;
				}
				&:focus,&:active {
					border-color: color-function($color_name, "darker-3") !important;
					background-color: color-function($color_name, "darker-4") !important;
				}
			}
			.btn-outline-#{$color_name}.btn-outline-#{$color_type} {
				border-color: $color_value !important;
				color: $color_value !important;
				&:hover {
					background-color: $color_value !important;
				}
			}
			.progress-#{$color_name}.progress-#{$color_type} {
				@include progress-variant($color_value);
			}
			input:focus ~ .bg-#{$color_name} {
				box-shadow: 0 0 0 .075rem #fff, 0 0 0 .21rem $color_value !important;
			}
			.border-#{$color_name}.border-#{$color_type} {
				border: 1px solid $color_value !important;
			}
			.border-top-#{$color_name}.border-top-#{$color_type} {
				border-top: 1px solid $color_value !important;
			}
			.border-bottom-#{$color_name}.border-bottom-#{$color_type} {
				border-bottom: 1px solid $color_value !important;
			}
			.border-left-#{$color_name}.border-left-#{$color_type} {
				border-left: 1px solid $color_value !important;
			}
			.border-right-#{$color_name}.border-right-#{$color_type} {
				border-right: 1px solid $color_value !important;
			}
			.overlay-#{$color_name}.overlay-#{$color_type} {
				@include bg-opacity($color_value, 0.8);
			}
		}
	}
}

/** **************
	Shade classes
	***************/
@each $color, $color_value in $shades {
	.#{$color} {
		color: $color_value;
	}
	.bg-#{$color} {
		background-color: $color_value;
	}
	input:focus ~ .bg-#{$color}	{
		box-shadow: 0 0 0 .075rem #fff, 0 0 0 .21rem $color_value; 
	}
	.border-#{$color} {
		border: 1px solid $color_value;
	}
	.border-top-#{$color} {
		border-top: 1px solid $color_value;
	}
	.border-bottom-#{$color} {
		border-bottom: 1px solid $color_value;
	}
	.border-left-#{$color} {
		border-left: 1px solid $color_value;
	}
	.border-right-#{$color} {
		border-right: 1px solid $color_value;
	}
}