// DESCRIPTION:
// These are the theme colors that we have used in the demo color switcher controller.

//// Using method of the demo colors:
// Add any of the "theme-" class to the <body> element. example "theme-green"

// Remamber the core colors code are declared in the variables file. 
// You can delete theme If you don't want to use any of our given colors. And if you want to use your own color then just open the variable file and change the variable color of "$color-primary" !! SIMPLE!!! Isn't?!

/**! ----- bg colors for theme ---- **/
%bg-color-primary {
	.theme-green & {
		background: $theme-green;
	}

	.theme-violet & {
		background: $theme-violet;
	}

	.theme-firoza & {
		background: $theme-firoza;
	}

	.theme-red & {
		background: $theme-red;
	}

	.theme-orange & {
		background: $theme-orange;
	}


	/////////////////////// Gradient bg
	.gradient-1 & {
		background: $gradient-1;
	}

	.gradient-2 & {
		background: $gradient-2;
	}

	.gradient-3 & {
		background: $gradient-3;
	}

	.gradient-4 & {
		background: $gradient-4;
	}

	.gradient-5 & {
		background: $gradient-5;
	}

	.gradient-6 & {
		background: $gradient-6;
	}
}

/**! ----- colors for theme ---- **/
%color-primary {
	.theme-green & {
		color: $theme-green;
	}

	.theme-violet & {
		color: $theme-violet;
	}

	.theme-firoza & {
		color: $theme-firoza;
	}

	.theme-red & {
		color: $theme-red;
	}

	.theme-orange & {
		color: $theme-orange;
	}

	/////////////////////// Color mix up with Gradient bg
	.gradient-1 & {
		color: $color-primary;
	}

	.gradient-2 & {
		color: $color-primary;
	}

	.gradient-3 & {
		color: $color-primary;
	}

	.gradient-4 & {
		color: $theme-orange;
	}

	.gradient-5 & {
		color: $coral;
	}

	.gradient-6 & {
		color: $theme-green;
	}

}

/**! ----- Border Color for theme ---- **/
.border-primary {
	.theme-green & {
		border-color: $theme-green;
	}

	.theme-violet & {
		border-color: $theme-violet;
	}

	.theme-firoza & {
		border-color: $theme-firoza;
	}

	.theme-red & {
		border-color: $theme-red;
	}

	.theme-orange & {
		border-color: $theme-orange;
	}

}

/**! ----- Box shadow Color for theme  ---- **/
%box-shadow-primary {
	.theme-green & {
		box-shadow: 0px 2px 0px $theme-green;
	}

	.theme-violet & {
		box-shadow: 0px 2px 0px $theme-violet;

	}

	.theme-firoza & {
		box-shadow: 0px 2px 0px $theme-firoza;

	}

	.theme-red & {
		box-shadow: 0px 2px 0px $theme-red;
	}

	.theme-orange & {
		box-shadow: 0px 2px 0px $theme-orange;

	}
	/////////////////////// box shadow mix up with Gradient bg
	.gradient-1 & {
		box-shadow: 0px 2px 0px $color-primary;
	}

	.gradient-2 & {
		box-shadow: 0px 2px 0px $color-primary;
	}

	.gradient-3 & {
		box-shadow: 0px 2px 0px $color-primary;
	}

	.gradient-4 & {
		box-shadow: 0px 2px 0px $theme-orange;
	}

	.gradient-5 & {
		box-shadow: 0px 2px 0px $coral;
	}

	.gradient-6 & {
		box-shadow: 0px 2px 0px $theme-green;

	}

}

// additional theme adjustment styles

body[class*="gradient-"] {
	.card--focused {
		border: none;
	}

	.navbar,
	.card {
		.btn--outline {
			box-shadow: 0 0 1px 0 #aaa;
			border: none;
		}
	}
}