.avatar {
	background-color: $black-bg;
	border-radius: 50%;
	color: $black-text;
	display: block;
	height: ($line-height * 2);
	line-height: ($line-height * 2);
	text-align: center;
	width: ($line-height * 2);
	&:focus,
	&:hover {
		text-decoration: none;
	}
	&.avatar-inline {
		display: inline-block;
	}
	&.avatar-lg {
		height: ($line-height * 4);
		line-height: ($line-height * 4);
		width: ($line-height * 4);
	}
	&.avatar-sm {
		height: ($line-height * 1.5);
		line-height: ($line-height * 1.5);
		margin-top: ($line-height * -0.25);
		margin-bottom: ($line-height * -0.25);
		width: ($line-height * 1.5);
	}
	&.avatar-transparent {
		background-color: transparent;
	}
	&.pull-left {
		margin-right: $grid-gutter;
	}
	&.pull-right {
		margin-left: $grid-gutter;
	}
	img {
		border-radius: 50%;
		height: 100%;
		vertical-align: top;
		width: 100%;
	}
	.fa {
		display: block;
		height: 100%;
		line-height: inherit;
		text-align: center;
	}
	.fa-text {
		font-family: inherit;
	}
}

// colour
	@each $color in $palette-list {
		$i: index($palette-list, $color);
		
		.avatar-#{$color} {
			background-color: nth($palette-color, $i);
			color: $white;
		}
	}