/*
************************************************************************************************************************************
************************************************************************************************************************************

   ###    ##     ##    ###    ########    ###    ########
  ## ##   ##     ##   ## ##      ##      ## ##   ##     ##
 ##   ##  ##     ##  ##   ##     ##     ##   ##  ##     ##
##     ## ##     ## ##     ##    ##    ##     ## ########
#########  ##   ##  #########    ##    ######### ##   ##
##     ##   ## ##   ##     ##    ##    ##     ## ##    ##
##     ##    ###    ##     ##    ##    ##     ## ##     ##

************************************************************************************************************************************
************************************************************************************************************************************
************************************************************************************************************************************
************************************************************************************************************************************
*/

.avatar{
	display: block;
	margin: initial;
	padding: initial;
	position: relative;
}

/**********************************************************************************************************************************/
/** NO FRAMESET *******************************************************************************************************************/
/**********************************************************************************************************************************/

.avatar:not([data-frameset]) .avatar__figcaption{
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	bottom: 0;
	display: block;
	font-size: 0;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

/**********************************************************************************************************************************/
/** HAS FRAMESET or TEMPLATE V5 or MOBILE VERSION *********************************************************************************/
/**********************************************************************************************************************************/

body#equideo .avatar .avatar__figcaption,
body.template-v5 .avatar .avatar__figcaption,
#header-hud .avatar .avatar__figcaption,
.avatar[data-frameset] .avatar__figcaption{
	background-color: #f2efcf;
	background-position: center;
	background-size: cover;
	clip-path: circle(50% at 50% 50%);
	display: block;
	font-size: 0;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
	position: relative;
	width: 100%;
	z-index: 1;
}
#header-hud .avatar::before,
.avatar[data-frameset]::before{
	/*background-image: url(/media/equideo/image/components/placeholder.png);*/
	background-size: cover;
	content: "";
	display: block;
	height: 100%;
	pointer-events: none;
	position: absolute;
	transform: scale(1.25);
	width: 100%;
	z-index: 2;
}

/** extra large *******************************************************************************************************************/
.avatar--xl{
	width: 192px;
	height: 192px;
}
/** large *************************************************************************************************************************/
.avatar--l{
	width: 128px;
	height: 128px;
}
/** large *************************************************************************************************************************/
.avatar--120{
	width: 120px;
	height: 120px;
}
/** medium ************************************************************************************************************************/
.avatar--m{
	width: 96px;
	height: 96px;
}
/** small *************************************************************************************************************************/
.avatar--s{
	width: 64px;
	height: 64px;
}
/** extra small *******************************************************************************************************************/
.avatar--xs{
	width: 48px;
	height: 48px;
}
/** extra extra small *************************************************************************************************************/
.avatar--2xs{
	width: 32px;
	height: 32px;
}
/** extra extra extra small *******************************************************************************************************/
.avatar--3xs{
	width: 24px;
	height: 24px;
}
/** extra extra extra extra extra small ************************************************************************************/
.avatar--4xs {
	width: 18px;
	height: 18px;
}

/*
************************************************************************************************************************************
************************************************************************************************************************************

######## ########     ###    ##     ## ########  ######  ######## ########  ######
##       ##     ##   ## ##   ###   ### ##       ##    ## ##          ##    ##    ##
##       ##     ##  ##   ##  #### #### ##       ##       ##          ##    ##
######   ########  ##     ## ## ### ## ######    ######  ######      ##     ######
##       ##   ##   ######### ##     ## ##             ## ##          ##          ##
##       ##    ##  ##     ## ##     ## ##       ##    ## ##          ##    ##    ##
##       ##     ## ##     ## ##     ## ########  ######  ########    ##     ######

************************************************************************************************************************************
************************************************************************************************************************************
************************************************************************************************************************************
************************************************************************************************************************************
*/

/** placeholder *******************************************************************************************************************/
.avatar[data-frameset=test-frameset]::before{
	background-image: url(/media/equideo/image/components/placeholder.png);
}
/** 15.11.0 : 15 Years *************************************************************************************************************/
.avatar[data-frameset=frameset-15-years]::before{
	background-image: url(/media/equideo/image/interface/frameset/frameset-15-years.png);
}
/** 15.15.0 : christmas *************************************************************************************************************/
.avatar[data-frameset=frameset-christmas]::before{
	background-image: url(/media/equideo/image/interface/frameset/frameset-christmas.png);
}
/** 16.15.0 : christmas-2021 ********************************************************************************************************/
.avatar[data-frameset=frameset-christmas-2021]::before{
	background-image: url(/media/equideo/image/interface/frameset/frameset-christmas-2021.png);
}
/** 19.13.0 : ambassador-2024 ********************************************************************************************************/
.avatar[data-frameset=frameset-ambassadors-2024]::before{
	background-image: url(/media/equideo/image/interface/frameset/frameset-ambassadors-2024.png);
}
/** 19.16.0 : moderators-2024 ********************************************************************************************************/
.avatar[data-frameset=frameset-moderators-2024]::before{
	background-image: url(/media/equideo/image/interface/frameset/frameset-moderators-2024.png);
}
/** 20.X.0 : frameset-temporary-breed-season-1 ********************************************************************************************************/
.avatar[data-frameset=frameset-temporary-breed-season-1]::before{
	background-image: url(/media/equideo/image/interface/frameset/frameset-temporary-breed-season-1.png);
}