@use 'sass:color';
@use 'sass:math';
@import "../vars/colors";
@import "../vars/general";

@each $rep, $lighten in $colors-rep{
	.bg-gray-#{$rep}{
		background-color: #{rgba(lighten($gray,$lighten),1)}
	}
	.bg-red-#{$rep}{
		background-color: #{rgba(lighten($red,$lighten),1)}
	}
	.shadow-gray-#{$rep}{
		--gw-shadow-color: #{rgba(lighten($gray,$lighten),1)}
		-gw-shadow: var(--tw-shadow-colored);
	}
	.bg-emerald-#{$rep}{
		background-color: #{rgba(lighten($emerald,$lighten),1)}
	}
	.bg-indigo-#{$rep}{
		background-color: #{rgba(lighten($indigo,$lighten),1)}
	}
	.text-gray-#{$rep}{
		color: #{rgba(lighten($gray,$lighten),1)}
	}
	.text-emerald-#{$rep}{
		color: #{rgba(lighten($emerald,$lighten),1)}
	}
	.text-indigo-#{$rep}{
		color: #{rgba(lighten($indigo,$lighten),1)}
	}
	.text-red-#{$rep}{
		color: #{rgba(lighten($red,$lighten),1)}
	}
	$i:5;
	@while $i < 100{
		.bg-red-#{$rep}\.#{$i},.bg-red-#{$rep}\/#{$i}{
			background-color: #{rgba(lighten($red,$lighten),math.div($i,100))}
		}
		.bg-gray-#{$rep}\.#{$i},.bg-gray-#{$rep}\/#{$i}{
			background-color: #{rgba(lighten($gray,$lighten),math.div($i,100))}
		}
		.text-gray-#{$rep}\.#{$i},.text-gray-#{$rep}\/#{$i}{
			color: #{rgba(lighten($gray,$lighten),math.div($i,100))}
		}
		.bg-emerald-#{$rep}\.#{$i},.bg-emerald-#{$rep}\/#{$i}{
			background-color: #{rgba(lighten($emerald,$lighten),math.div($i,100))}
		}
		.text-emerald-#{$rep}\.#{$i},.text-emerald-#{$rep}\/#{$i}{
			color: #{rgba(lighten($emerald,$lighten),math.div($i,100))}
		}
		.text-red-#{$rep}\.#{$i},.text-red-#{$rep}\/#{$i}{
			color: #{rgba(lighten($red,$lighten),math.div($i,100))}
		}
		$i: ($i + 5);
	}
}
.shadow, .shadow-2xl {
    box-shadow: 0 0 transparent,0 0 transparent,var(--gw-shadow);
    box-shadow: var(--tw-ring-offset-shadow,0 0 transparent),var(--gw-ring-shadow,0 0 transparent),var(--gw-shadow);
}
.bg-gray{
	background-color:$gray;
}
.bg-white{
	background-color:$white;
}
@each $cname, $cval in $colors_backgrounds{
	.bg-#{$cname}{ background-color: #{$cval};}
}