Avatar

/* variables specific to current element */

$avatar-pro-label-top-padding: 0.16em;
$avatar-pro-label-bottom-padding: 0.25em;

.#{$namespace}avatar {

	/* Save root element context for easy access if nesting is needed */

	$self: &;

	/* properties of current element  + media queries */

	display: inline-flex;
	align-items: center;
	justify-content: center;
	@include custom-prop-fallback("width", "comp-avatar-width");
	@include custom-prop-fallback("height", "comp-avatar-height");
	@include custom-prop-fallback("border-radius", "comp-avatar-border-radius");
	position: relative;
	z-index: z("zero");
	overflow: hidden;
	flex-shrink: 0;

	/* Pseudo Elements */

	&::before {
	}

	&::after {
	}

	/*
	Include elements that are linked to the current element but have to reside at the root level of the stylesheet
	(e.g: keyframes)
	*/
	@at-root {
	}


	/* children - write selector in full in comments in order to facilitate search */

	// avatar__childElement

	> IMG {

		position: absolute;
		z-index: ("low");
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center center;
		border-radius: inherit;

	}

	.#{$namespace}icon {

		&::before {

			@include custom-prop-fallback("font-size", "comp-avatar-icon-size");

		}

	}

	&__text {

		@extend %textHelper;
		@extend %textSemiBold;
		text-transform: uppercase;
		@include custom-prop-fallback("color", "comp-avatar-text-color");


	}

	&__circle {

		position: absolute;
		right: 0;
		bottom: 0;
		width: map-deep-get($token-sizes-unit-map, "16");
		height: map-deep-get($token-sizes-unit-map, "16");
		@include custom-prop-fallback("background-color", "sys-color-background-status-info-100");
		@include custom-prop-fallback("color", "sys-color-text-primary-vivid",true,true);
		border-radius: map-deep-get($token-radius-map, "circle");
		display: flex;
		align-items: center;
		justify-content: center;

		[class*="icon"] {

			line-height: 0;
			position: relative;
			top: -1px;
			color: inherit;

			&::before {
				font-size: 12px !important;
			}

		}

		IMG {

			width: 100%;
			height: 100%;
			object-fit: cover;

		}

	}

	/* modifiers */

	// avatar -square
	&.-avatarSquare {

		@include custom-prop-fallback("border-radius", "comp-avatar-square-border-radius");

	}

	// avatar -xtraSmall
	&.-avatarXs,
	&.-xtraSmall {

		// follows same logic as base element

		@include custom-prop-fallback("width", "comp-avatar-extra-small-width");
		@include custom-prop-fallback("height", "comp-avatar-extra-small-height");

		#{$self}__text {

			@extend %textHelperSmall;

		}

		.#{$namespace}icon {

			&::before {

				@include custom-prop-fallback("font-size", "comp-avatar-extra-small-icon-size");

			}

		}

		&.-avatarSquare {

			@include custom-prop-fallback("border-radius", "comp-avatar-extra-small-square-border-radius");

		}

	}

	// avatar -small
	&.-avatarSm,
	&.-small {

		// follows same logic as base element

		@include custom-prop-fallback("width", "comp-avatar-small-width");
		@include custom-prop-fallback("height", "comp-avatar-small-height");

		#{$self}__circle {

			bottom: -(map-deep-get($token-spacer-unit-map, "2"));
			right: -(map-deep-get($token-spacer-unit-map, "2"));

		}

		*::before {
			font-size: inherit;
		}

		.#{$namespace}icon {

			&::before {

				@include custom-prop-fallback("font-size", "comp-avatar-small-icon-size","true","true",false);

			}

		}

		&.-avatarSquare {

			@include custom-prop-fallback("border-radius", "comp-avatar-small-square-border-radius");

		}

	}

	// avatar -medium
	&.-avatarMd,
	&.-medium {

		// follows same logic as base element

	}

	// avatar -large
	&.-avatarLg,
	&.-large {

		// follows same logic as base element

		@include custom-prop-fallback("width", "comp-avatar-large-width");
		@include custom-prop-fallback("height", "comp-avatar-large-height");

		#{$self}__text {
			@extend %textBodyLg;
		}

		#{$self}__circle {

			bottom: map-deep-get($token-spacer-unit-map, "2");
			right: map-deep-get($token-spacer-unit-map, "2");

		}

		.#{$namespace}icon {

			&::before {

				@include custom-prop-fallback("font-size", "comp-avatar-large-icon-size");

			}

		}

		&.-avatarSquare {

			@include custom-prop-fallback("border-radius", "comp-avatar-large-square-border-radius");

		}

	}

	// avatar -extraLarge
	&.-avatarXl,
	&.-extraLarge {

		// follows same logic as base element

		@include custom-prop-fallback("width", "comp-avatar-extra-large-width");
		@include custom-prop-fallback("height", "comp-avatar-extra-large-height");

		#{$self}__text {

			@extend %textBodyXl;
			@extend %textBold;


		}

		#{$self}__circle {

			bottom: map-deep-get($token-spacer-unit-map, "2");
			right: map-deep-get($token-spacer-unit-map, "2");

		}

		.#{$namespace}icon {

			&::before {

				@include custom-prop-fallback("font-size", "comp-avatar-extra-large-icon-size");

			}

		}

		&.-avatarSquare {

			@include custom-prop-fallback("border-radius", "comp-avatar-extra-large-square-border-radius");

		}

	}

	&.-disabled {

		filter: grayscale(100%);

	}

	&.-badgeVisible,
	&.-userBank {

		overflow: visible;

	}

	&.-avatarBank,
	&.-bank {

		display: flex;
		align-items: center;
		justify-content: center;
		@include custom-prop-fallback("background-color", "sys-color-background-primary-15");
		@include custom-prop-fallback("color", "sys-color-text-primary-vivid");

	}

	&.-avatarNoBg,
	&.-noBackground {

		background-color: transparent;

	}

	&.-avatarBase {

		@include custom-prop-fallback("background-color", "comp-avatar-background-color");
		@include custom-prop-fallback("color", "comp-avatar-text-color");

	}

	/* random parent element */
	/* 
	*
	*   Syntax : .randomParentElt & {}
	*
	*/

	/* Pseudo Classes */

	&:hover {
		@media (hover: hover) {

		}
	}

	&:focus {
	}

	&:active {
	}

	&:focus,
	&:active {
	}

}