//
// Avatar
//


.avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    font-weight: $avatar-font-weight;
    @include font-size($avatar-font-size);
    height: $avatar-width;
    width: $avatar-width;
    @include border-radius($avatar-border-radius);

    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;

	img {
		width: 100%;
		@include border-radius(inherit);
	}

	+ .avatar {
		margin-left: .25rem;
	}

	+ .avatar-content {
		display: inline-block;
		margin-left: .75rem;
	}
}

.avatar-status {
    position: absolute;
    bottom: 0;
    right: 0;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    white-space: nowrap;
    text-align: center;
    vertical-align: baseline;
    border: .2rem solid;
    border-color: inherit;
    width: 1rem;
    height: 1rem;
    line-height: 1;
    font-size: .75rem;
    border-radius: 50%;
}
// Sizes

.avatar-2xl {
	width: $avatar-width-2xl;
	height: $avatar-width-2xl;
	@include font-size($avatar-font-size-2xl);
}

.avatar-xl {
	width: $avatar-width-xl;
	height: $avatar-width-xl;
	@include font-size($avatar-font-size-xl);
}

.avatar-lg {
	width: $avatar-width-lg;
	height: $avatar-width-lg;
	@include font-size($avatar-font-size-lg);
}

.avatar-sm {
	width: $avatar-width-sm;
	height: $avatar-width-sm;
	@include font-size($avatar-font-size-sm);
	@include border-radius($avatar-border-radius-sm);
}

.avatar-xs {
	width: $avatar-width-xs;
	height: $avatar-width-xs;
	@include font-size($avatar-font-size-xs);
	@include border-radius($avatar-border-radius-xs);
}
//
// Avatar group
//

.avatar-group {
	display: inline-block;
	line-height: 1;

	.avatar {
		z-index: 1;
		@include transition(margin .15s ease-in-out);
		border: solid 3px;
		border-color: inherit;
		&:hover {
			z-index: 2;
		}

	}

	.avatar + .avatar {
		margin-left: -1.25rem;
		@include border-start-radius(0);
	}

	.avatar-sm + .avatar-sm,
	.avatar-xs + .avatar-xs, {
		margin-left: -1rem;
	}

	&:hover {
		.avatar {
			@include border-start-radius($avatar-border-radius);
		}

		.avatar-sm {
			@include border-start-radius($avatar-border-radius-sm);
		}
	}
}

.avatar-ungroup-hover:hover {
	.avatar:not(:first-child) {
		margin-left: 0;
	}
}



// Background
@mixin background-cover($hs-size: cover, $hs-repeat: no-repeat, $hs-positionX: center, $hs-positionY: center) {
    background-size: $hs-size;
    background-repeat: $hs-repeat;
    background-position: $hs-positionX $hs-positionY;
}
.ratio-select {
    @include background-cover(contain, no-repeat, center, center);
}

.bg-img-cover {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center
}