//
// Copyright (c) 2018-present, Vonage. All rights reserved.
//

$colors: (
	'white': $white,
	orange-lighter: $orange-lighter,
	orange-light: $orange-light,
	'orange': $orange,
	orange-dark: $orange-dark,
	orange-darker: $orange-darker,
	blue-lighter: $blue-lighter,
	blue-light: $blue-light,
	'blue': $blue,
	blue-dark: $blue-dark,
	blue-darker: $blue-darker,
	blue-text: $blue-text,
	green-lighter: $green-lighter,
	green-light: $green-light,
	'green': $green,
	green-dark: $green-dark,
	green-darker: $green-darker,
	green-text: $green-text,
	purple-lighter: $purple-lighter,
	purple-light: $purple-light,
	'purple': $purple,
	purple-dark: $purple-dark,
	purple-darker: $purple-darker,
	purple-text: $purple-text,
	teal-lighter: $teal-lighter,
	teal-light: $teal-light,
	'teal': $teal,
	teal-dark: $teal-dark,
	teal-darker: $teal-darker,
	teal-text: $teal-text,
	yellow-lighter: $yellow-lighter,
	yellow-light: $yellow-light,
	'yellow': $yellow,
	yellow-dark: $yellow-dark,
	yellow-darker: $yellow-darker,
	yellow-text: $yellow-text,
	indigo-lighter: $indigo-lighter,
	indigo-light: $indigo-light,
	'indigo': $indigo,
	indigo-dark: $indigo-dark,
	indigo-darker: $indigo-darker,
	indigo-text: $indigo-text,
	grey-lighter: $grey-lighter,
	grey-light: $grey-light,
	'grey': $grey,
	grey-dark: $grey-dark,
	grey-darker: $grey-darker,
	'black': $black,
	red-lighter: $red-lighter,
	red-light: $red-light,
	'red': $red,
	red-dark: $red-dark,
	red-darker: $red-darker,
	red-text: $red-text,
	aqua-lighter: $aqua-lighter,
	aqua-light: $aqua-light,
	'aqua': $aqua,
	aqua-dark: $aqua-dark,
	aqua-darker: $aqua-darker,
	aqua-text: $aqua-text
);

@each $color, $color-variable in $colors {
	.Vlt-#{$color} {
		color: $color-variable !important;
		fill: $color-variable !important;
	}

	.Vlt-bg-#{$color} {
		background-color: $color-variable !important;
	}

	.Vlt-bdr-#{$color} {
		border-color: $color-variable !important;
	}
}

.Vlt-gradient {
	&--blue {
		background: linear-gradient(to right, lighten($blue-dark, 5), darken($blue-dark, 10)) !important;
	}

	&--blue-light {
		background: linear-gradient(to right, lighten($blue, 5), darken($blue, 10)) !important;
	}

	&--red {
		background: linear-gradient(to right, lighten($red, 5), darken($red, 10)) !important;
	}

	&--orange {
		background: linear-gradient(to right, lighten($orange, 10), darken($orange, 5)) !important;
	}

	&--indigo {
		background: linear-gradient(to right, lighten($indigo, 5), darken($indigo, 10)) !important;
	}

	&--green {
		background: linear-gradient(to right, lighten($green, 5), darken($green, 10)) !important;
	}

	&--purple {
		background: linear-gradient(to right, lighten($purple, 5), darken($purple, 10)) !important;
	}

	&--teal {
		background: linear-gradient(to right, lighten($teal, 5), darken($teal, 10)) !important;
	}

	&--blue-to-pink {
		background: linear-gradient(to right, $gradient-blue, $gradient-pink) !important;
	}

	&--blue-to-purple {
		background: linear-gradient(to right, $gradient-blue, $gradient-purple) !important;
	}

	&--pink-to-blue {
		background: linear-gradient(to right, $gradient-pink, $gradient-blue) !important;
	}

	&--pink-to-peach {
		background: linear-gradient(to right, $gradient-pink, $gradient-peach) !important;
	}

	&--purple-to-peach {
		background: linear-gradient(to right, $gradient-purple, $gradient-peach) !important;
	}

	&--gumdrops1 {
		background: $gumdrops1 !important;
	}

	&--gumdrops2 {
		background: $gumdrops2 !important;
	}

	&--gumdrops3 {
		background: $gumdrops3 !important;
	}

	&--lovehearts1 {
		background: $lovehearts1 !important;
	}

	&--lovehearts2 {
		background: $lovehearts2 !important;
	}

	&--lovehearts3 {
		background: $lovehearts3 !important;
	}

	&--skittles1 {
		background: $skittles1 !important;
	}

	&--skittles2 {
		background: $skittles2 !important;
	}

	&--skittles3 {
		background: $skittles3 !important;
	}

	&--twizzlers1 {
		background: $twizzlers1 !important;
	}

	&--twizzlers2 {
		background: $twizzlers2 !important;
	}

	&--twizzlers3 {
		background: $twizzlers3 !important;
	}
}