/*!
* Components/XAvatar
*/

.x-avatar {
	align-items: center;
	border-radius: var(--x-comp-avatar-border-radius, 50%);
	display: inline-flex;
	flex: none;
	justify-content: center;
	line-height: var(--x-comp-avatar-line-height, normal);
	overflow: hidden;
	position: relative;
	text-align: center;
	transition: var(--x-sys-motion-duration-short-4) var(--x-sys-motion-easing-standard);
	transition-property: width, height;
	vertical-align: var(--x-comp-avatar-vertical-align, middle);
}

.x-avatar.x-avatar--size-x-small {
	--x-avatar-height: var(--x-comp-avatar-size-x-small-height, 1.5rem);
}

.x-avatar.x-avatar--size-small {
	--x-avatar-height: var(--x-comp-avatar-size-small-height, 2rem);
}

.x-avatar.x-avatar--size-default {
	--x-avatar-height: var(--x-comp-avatar-size-default-height, 2.5rem);
}

.x-avatar.x-avatar--size-large {
	--x-avatar-height: var(--x-comp-avatar-size-large-height, 3rem);
}

.x-avatar.x-avatar--size-x-large {
	--x-avatar-height: var(--x-comp-avatar-size-x-large-height, 3.5rem);
}

.x-avatar.x-avatar--density-default {
	height: calc(
		var(--x-avatar-height) +
			var(--x-comp-avatar-density-default-reducer, 0rem)
	);
	width: calc(
		var(--x-avatar-height) +
			var(--x-comp-avatar-density-default-reducer, 0rem)
	);
}

.x-avatar.x-avatar--density-comfortable {
	height: calc(
		var(--x-avatar-height) +
			var(--x-comp-avatar-density-comfortable-reducer, -0.25rem)
	);
	width: calc(
		var(--x-avatar-height) +
			var(--x-comp-avatar-density-comfortable-reducer, -0.25rem)
	);
}

.x-avatar.x-avatar--density-compact {
	height: calc(
		var(--x-avatar-height) +
			var(--x-comp-avatar-density-compact-reducer, -0.5rem)
	);
	width: calc(
		var(--x-avatar-height) +
			var(--x-comp-avatar-density-compact-reducer, -0.5rem)
	);
}

.x-avatar--variant-elevated,
.x-avatar--variant-filled {
	background: var(--x-comp-avatar-filled-background, var(--x-sys-color-surface));
	color: var(
		--x-comp-avatar-filled-color,
		rgba(
			var(--x-sys-color-on-surface),
			var(--x-sys-opacity-medium-emphasis)
		)
	);
}

.x-avatar--variant-elevated {
	box-shadow: var(
		--x-comp-avatar-elevated-elevation,
		var(--x-sys-elevation-1)
	);
}

.x-avatar--variant-filled {
	box-shadow: var(
		--x-comp-avatar-filled-elevation,
		var(--x-sys-elevation-0)
	);
}

.x-avatar--variant-outlined,
.x-avatar--variant-plain,
.x-avatar--variant-text,
.x-avatar--variant-tonal {
	background: transparent;
	color: inherit;
}

.x-avatar--variant-outlined {
	border: var(--x-comp-avatar-outlined-border-width, 0.0625rem) solid currentColor;
}

.x-avatar--variant-plain {
	opacity: var(--x-comp-avatar-plain-opacity, 0.62);
}

.x-avatar--variant-plain:focus,
.x-avatar--variant-plain:hover {
	opacity: 1;
}

.x-avatar--variant-plain > .x-avatar__overlay {
	display: none;
}

.x-avatar--variant-text > .x-avatar__overlay {
	background: currentColor;
}

.x-avatar--variant-tonal > .x-avatar__underlay {
	background: currentColor;
	opacity: var(--x-sys-opacity-activated);
	border-radius: inherit;
	pointer-events: none;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

@media (prefers-reduced-motion: reduce) {
	.x-avatar--variant-tonal > .x-avatar__underlay {
		transition-property: none;
	}
}

.x-avatar--rounded {
	border-radius: var(--x-comp-avatar-rounded-border-radius, 0.25rem);
}

.x-avatar .x-img {
	height: 100%;
	width: 100%;
}