/* 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;
	width: map-deep-get($token-sizes-unit-map,"40");
	height: map-deep-get($token-sizes-unit-map,"40");
	border-radius: map-deep-get($token-radius-map,"circle");
	position: relative;
	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

	&__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;
			}

		}

		IMG {

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

		}

	}


	/* modifiers */



	// avatar -small

	&.-xtraSmall {

		// follows same logic as base element

		width: map-deep-get($token-sizes-unit-map,"24");
		height: map-deep-get($token-sizes-unit-map,"24");

	}

	&.-small {

		// follows same logic as base element

		width: $avatar-small-dimensions-global;
		height: $avatar-small-dimensions-global;

		#{$self}__text {font-size: 6px;}

		#{$self}__circle {

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

		}

		font-size: $font-size-base;

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

	}

	// avatar -medium
	&.-medium {

		// follows same logic as base element

		#{$self}__text {font-size: 8px;}

	}

	// avatar -large
	&.-large {

		// follows same logic as base element

		width: $avatar-large-dimensions-global;
		height: $avatar-large-dimensions-global;

		#{$self}__text {
			font-size: 10px;
		}

		#{$self}__circle {

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

		}

	}

	// avatar -extraLarge
	&.-extraLarge {

		// follows same logic as base element

		width: map-deep-get($token-sizes-unit-map,"120");
		height: map-deep-get($token-sizes-unit-map,"120");

		#{$self}__circle {

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

		}

	}

	&.-disabled {

		filter: grayscale(100%);

		#{$self}__text {
			background-color: map-deep-get($token-color-grayscale-map,"1000");
		}

	}

	&.-badgeVisible,
	&.-userBank {

		overflow: visible;

	}

	&.-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");

	}

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

	/* Pseudo Classes */

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

		}
	}

	&:focus {
	}

	&:active {
	}

	&:focus,
	&:active {
	}

}