@import 'mixins';

$indicator_size: 16px;
$indicator_color: $dark-grass;

.givingIndicator-wrapper{
	width: 18px;
}
.givingIndicator {
	height: $indicator_size;
	width: $indicator_size;
	@include border-radius(50%);
}
.givingIndicator[level='1'] {
	@include opacity(0.3);
	background: lighten($indicator_color, 50);
}
.givingIndicator[level='2'] {
	@include opacity(0.4);
	background: lighten($indicator_color, 40);
}
.givingIndicator[level='3'] {
	@include opacity(0.5);
	background: lighten($indicator_color, 30);
}
.givingIndicator[level='4'] {
	@include opacity(0.6);
	background: lighten($indicator_color, 20);
}
.givingIndicator[level='5'] {
	@include opacity(0.7);
	background: lighten($indicator_color, 10);
}
.givingIndicator[level='6'] {
	@include opacity(0.8);
	background: darken($indicator_color, 0);
}
.givingIndicator[level='7'] {
	@include opacity(0.9);
	background: darken($indicator_color, 10);
}
.givingIndicator[level='8'] {
	background: darken($indicator_color, 20);
}