.avatar {
	background-color: $__transparent;
	color: $__white;
	display: $__inline__block;
	font-weight: $__medium;
	height: 34px;
	line-height: 34px;
	text-align: $__center;
	text-decoration: $__none;
	text-transform: $__uppercase;
	vertical-align: $__middle;
	width: 34px;
	position: $__relative;
	white-space: $__nowrap;
	@include margin-padding( 0 10px 0 0, null);
	@include rounded(50%);
	&.avatar-xs {
		width: 24px;
		height: 24px;
		line-height: 24px;
		display: inline-flex;
	}
	& > img {
		width: $__full__width;
		height: $__full__width;
		-o-object-fit: $__cover;
		object-fit: $__cover;
		@include rounded(50%);
	}
	.avatar-title {
		width: $__full__width;
		height: $__full__width;
		background-color: $__sky__blue;
		color: $__white;
		@extend %display-flex;
		@extend %align-items-center;
		@extend %justify-content-center;
	}
	&.avatar-online {
		&::before {
			width: 25%;
		  	height: 25%;
		 	@include rounded(50%);
		  	content: '';
		  	border: 2px solid $__white;
		  	@include position($__absolute, null, 0, 0, null);
			background-color: $__successcolor;
		}
	}
	&.avatar-offline {
		&::before {
			width: 25%;
		  	height: 25%;
		 	@include rounded(50%);
		  	content: '';
		  	border: 2px solid $__white;
		  	@include position($__absolute, null, 0, 0, null);
			background-color: $__dangercolor;
		}
	}
	&.avatar-away {
		&::before {
			width: 25%;
		  	height: 25%;
		 	@include rounded(50%);
		  	content: '';
		  	border: 2px solid $__white;
		  	@include position($__absolute, null, 0, 0, null);
			background-color: $__warningcolor;
		}
	}
	.border {
		border-width: 3px !important;
	}
	.rounded {
		@include rounded(6px !important);
	}
	.avatar-title {
		font-size: $__font__size__18;
	}
	.avatar-xs {
		width: 1.65rem;
		height: 1.65rem;
		.border {
			border-width: 2px !important;
		}
		.rounded {
			@include rounded(4px !important);
		}
		.avatar-title {
			font-size: $__font__size__12;
		}
		&.avatar-away, &.avatar-offline, &.avatar-online {
			&::before {
				border-width: 1px;
			}
		}
	}
}
.avatar-sm {
	width: 2.5rem;
	height: 2.5rem;
	.border {
		border-width: 3px !important;
	}
	.rounded {
		@include rounded(4px !important);
	}
	.avatar-title {
		font-size: $__font__size__15;
	}
	&.avatar-away, &.avatar-offline, &.avatar-online {
		&::before {
			border-width: 2px;
		}
	}
}
.avatar-lg {
	width: 3.75rem;
	height: 3.75rem;
	.border {
		border-width: 3px !important;
	}
	.rounded {
		@include rounded(8px !important);
	}
	.avatar-title {
		font-size: $__font__size__24;
	}
	&.avatar-away, &.avatar-offline, &.avatar-online {
		&::before {
			border-width: 3px;
		}
	}
}
.avatar-xl {
	width: 5rem;
	height: 5rem;
	.border {
		border-width: 4px !important;
	}
	.rounded {
		@include rounded(8px !important);
	}
	.avatar-title {
		font-size: $__font__size__28;
	}
	&.avatar-away, &.avatar-offline, &.avatar-online {
		&::before {
			border-width: 4px;
		}
	}
}
.avatar-xxl {
	width: 5.125rem;
	height: 5.125rem;
	@include respond-above(custom768) {
		width: 8rem;
    	height: 8rem;
	}
	.border {
		border-width: 6px !important;
		@include respond-above(custom768) {
			border-width: 4px !important;
		}
	}
	.rounded {
		@include rounded(8px !important);
		@include respond-above(md) {
			@include rounded(12px !important);
		}
	}
	.avatar-title {
		font-size: $__font__size__30;
		@include respond-above(md) {
			font-size: $__font__size__42;
		}
	}
	&.avatar-away, &.avatar-offline, &.avatar-online {
		&::before {
			border-width: 4px;
			@include respond-above(md) {
				border-width: 4px;
			}
		}
	}
}
.avatar-group {
	@extend %inline-flex;
	.avatar {
		& + .avatar {
			margin-left: -.75rem;
		}
		&:hover {
			z-index: 1;
		}
	}
	.avatar-xs {
		& + .avatar-xs {
			margin-left: -.40625rem;
		}
	}
	.avatar-sm {
		& + .avatar-sm {
			margin-left: -.625rem;
		}
	}
	.avatar-lg {
		& + .avatar-lg {
			margin-left: -1rem;
		}
	}
	.avatar-xl {
		& + .avatar-xl {
			margin-left: -1.28125rem;
		}
	}
}
.avatar-xs {
    width: 1.65rem;
    height: 1.65rem;
}
.leave-employee-table {
	.avatar {
		line-height: $__normal;
	}
	.avatar-xs {
		line-height: $__normal;
	}
}