/**
 * Character
 *
 * @package    modules/character
 * @subpackage css
 * @since      1.0.0
 * @version    1.0.0
 * @author     Ehsan Zare <darksider.legend@gmail.com>
 * @link       https://code-path.com
 * @copyright  (c) 2024 Code-path web developing team
 */

/*-------------------------------------------------------------------------*/
/* Character
/*-------------------------------------------------------------------------*/
.character[__character__] {
	--character-gap: 2rem;
	--character-items-gap: 10px;
	--character-model-padding: 0;

	/* Character faction variant */
	--character-glow: rgba(255, 255, 255, 0.05);
	--character-crest: none;
	--character-background: none;
	--character-guild-color: inherit;

	width: 100%;
	height: auto;

	overflow: hidden;
}

.character[__character__].is-horde {
	--character-glow: rgba(255, 0, 0, 0.1);
	--character-crest: url('../images/crest_horde.png');
	--character-background: url('../images/map_orgrimmar.png');
	--character-guild-color: #b30000;
}

.character[__character__].is-alliance {
	--character-glow: rgba(0, 150, 255, 0.1);
	--character-crest: url('../images/crest_alliance.png');
	--character-background: url('../images/map_stormwind.png');
	--character-guild-color: #247FAA;
}

.character[__character__]::before {
	width: 10px;
	height: 10px;

	top: -10px;
	right: -10px;

	content: '';
	position: absolute;

	-webkit-box-shadow: 0 0 500px 250px var(--character-glow);
	box-shadow: 0 0 500px 250px var(--character-glow);
}

/* Character: Profile
/*---------------------------------------------------------------*/
.character[__character__] .character-profile {
	width: 100%;
	height: auto;

	padding: var(--character-gap);

	background-color: transparent;
	background-image: var(--character-crest);
	background-repeat: no-repeat;
	background-position: top left;
}

.character[__character__] .character-profile::before {
	width: 100%;
	height: 100%;

	top: 0;
	left: 0;

	content: '';
	opacity: 0.5;
	position: absolute;

	background-color: transparent;
	background-image: var(--character-background);
	background-repeat: no-repeat;
	background-position: top center;
}

/* Character: Profile: Info
/*-----------------------------------------------------*/
.character[__character__] .character-profile .profile-info {
	width: 100%;
	height: auto;
}

/* Info (common) */
.character[__character__] .character-profile .profile-info .info-common {
	width: 100%;
	height: auto;
}

.character[__character__] .character-profile .profile-info .info-common [common-name] {
	color: #fff;
	display: inline-block;
	font-size: 2.5rem;
	font-weight: 400;
	line-height: 100%;
	vertical-align: middle;
}

.character[__character__] .character-profile .profile-info .info-common [common-guild] {
	color: var(--character-guild-color);
	margin: 0 0 0 1rem;
	display: inline-block;
	font-size: 1.25rem;
}

/* Info (generic) */
.character[__character__] .character-profile .profile-info .info-generic {
	width: 100%;
	height: auto;

	font-size: 1rem;
}

.character[__character__] .character-profile .profile-info .info-generic [generic-lvl]   {font-weight: 700;}
.character[__character__] .character-profile .profile-info .info-generic [generic-race]  {}
.character[__character__] .character-profile .profile-info .info-generic [generic-class] {}
.character[__character__] .character-profile .profile-info .info-generic [generic-realm] {color: #9ea8b5; font-style: italic;}

/* Character: Profile: Model
/*-----------------------------------------------------*/
.character[__character__] .character-profile .profile-model {
	width: 100%;
	height: auto;

	margin: var(--character-gap) 0 0 0;
}

/* Model (items) */
.character[__character__] .character-profile .profile-model .model-items {
	width: auto;
	height: auto;

	gap: var(--character-items-gap);

	z-index: 9;

	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
}

.character[__character__] .character-profile .profile-model .model-items.type-left   {float: left;}
.character[__character__] .character-profile .profile-model .model-items.type-right  {float: right;}
.character[__character__] .character-profile .profile-model .model-items.type-bottom {
	margin: var(--character-items-gap) 0 0 0;

	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;

	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
}

/* Model (viewer) */
.character[__character__] .character-profile .profile-model .model-viewer {
	width: 100%;
	height: 100% !important;

	top: 0;
	left: 0;
	right: 0;

	margin: 0 auto;
	padding: var(--character-model-padding);

	display: block;
	position: absolute !important;

	max-width: 700px;

	overflow: hidden;

	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;

	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

/* Character: Attributes
/*---------------------------------------------------------------*/
.character[__character__] .character-attributes {
	--border-thickness: 2px;

	padding: -webkit-calc(var(--character-gap) + var(--border-thickness)) var(--character-gap) var(--character-gap) var(--character-gap);
	padding: -moz-calc(var(--character-gap) + var(--border-thickness)) var(--character-gap) var(--character-gap) var(--character-gap);
	padding: calc(var(--character-gap) + var(--border-thickness)) var(--character-gap) var(--character-gap) var(--character-gap);
}

.character[__character__] .character-attributes::before {
	width: 100%;
	height: 50%;

	top: var(--border-thickness);
	left: 0;

	content: '';
	opacity: 0.05;
	position: absolute;

	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(transparent));
	background: -o-linear-gradient(top, #fff 0%, transparent 100%);
	background: linear-gradient(to bottom, #fff 0%, transparent 100%);
}

.character[__character__] .character-attributes::after {
	width: 100%;
	height: var(--border-thickness);

	top: 0;
	left: 0;

	content: '';
	opacity: 0.15;
	position: absolute;

	background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(50%, #fff),to(transparent));
	background: -o-linear-gradient(left, transparent 0%, #fff 50%,transparent 100%);
	background: linear-gradient(to right, transparent 0%, #fff 50%,transparent 100%);
}

.character[__character__] .character-attributes .attribute {
	width: 100%;
	height: auto;
}

.character[__character__] .character-attributes .attribute table {
	width: 100%;
	height: auto;
}

.character[__character__] .character-attributes .attribute table [key] {text-align: left;}
.character[__character__] .character-attributes .attribute table [val] {text-align: right;}

/* Character: Attributes: Bar
/*-----------------------------------------------------*/
.character[__character__] .character-attributes .attribute.type-bar {
	gap: var(--bs-gutter-x);

	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
}

.character[__character__] .character-attributes .attribute.type-bar .bar {
	--bar-background: rgba(255, 255, 255, 0.1);

	width: 100%;
	height: auto;
}

.character[__character__] .character-attributes .attribute.type-bar .bar.is-fury   {--bar-background: #8400ff;}
.character[__character__] .character-attributes .attribute.type-bar .bar.is-mana   {--bar-background: #1c8aff;}
.character[__character__] .character-attributes .attribute.type-bar .bar.is-rage   {--bar-background: #ab0000;}
.character[__character__] .character-attributes .attribute.type-bar .bar.is-focus  {--bar-background: #d45719;}
.character[__character__] .character-attributes .attribute.type-bar .bar.is-runic  {--bar-background: #00bcde;}
.character[__character__] .character-attributes .attribute.type-bar .bar.is-energy {--bar-background: #cb9501;}
.character[__character__] .character-attributes .attribute.type-bar .bar.is-health {--bar-background: #27cc4e;}

.character[__character__] .character-attributes .attribute.type-bar .bar .bar-info {
	width: 100%;
	height: auto;

	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;

	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;

	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

.character[__character__] .character-attributes .attribute.type-bar .bar .bar-info .info-name  {color: #fff; font-weight: 800;}
.character[__character__] .character-attributes .attribute.type-bar .bar .bar-info .info-value {color: #9ea8b5; font-style: italic;}

.character[__character__] .character-attributes .attribute.type-bar .bar .bar-progress {
	width: 100%;
	height: 5px;

	-webkit-filter: contrast(0.5);
	filter: contrast(0.5);

	-webkit-box-shadow: 0 0 20px 2px var(--bar-background);
	box-shadow: 0 0 20px 2px var(--bar-background);

	background-color: var(--bar-background);
}

/* Character: Attributes: Stat
/*-----------------------------------------------------*/
.character[__character__] .character-attributes .attribute.type-stat {}

/* Character: Attributes: PvP
/*-----------------------------------------------------*/
.character[__character__] .character-attributes .attribute.type-pvp {}

/* Character: Responsive
/*---------------------------------------------------------------*/
@media screen and (min-width: 1200px) { /* XL */
	.character[__character__] {
		--character-gap: 3rem;
		--character-items-gap: 3px;
		--character-model-padding: 0 70px 50px 70px;
	}
}

/*-------------------------------------------------------------------------*/
/* Item
/*-------------------------------------------------------------------------*/
.item[__item__] {
	--item-width: auto;
	--item-height: auto;
	--item-padding: 0;
	--item-text-align: left;
	--item-background-s: rgba(0, 0, 0, 0.3);
	--item-background-e: transparent;

	--item-trans-left: -1px;
	--item-trans-right: auto;
	--item-trans-border-color: transparent transparent #e060df #e060df;

	--item-info-font-size: 0.776rem;
	--item-info-font-weight: 400;
	--item-info-text-shadow: 0.5px 0.9px 1px #110d0a;

	width: var(--item-width);
	height: var(--item-height);

	padding: var(--item-padding);

	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	text-align: var(--item-text-align);

	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;

	background: -webkit-gradient(linear, left top, right top, from(var(--item-background-s)), to(var(--item-background-e)));
	background: -o-linear-gradient(left, var(--item-background-s) 0%, var(--item-background-e) 100%);
	background: linear-gradient(to right, var(--item-background-s) 0%, var(--item-background-e) 100%);
}

/* Item: Variant
/*---------------------------------------------------------------*/
.type-right  .item[__item__],
.type-bottom .item[__item__].is-mainhand {
	--item-text-align: right;
	--item-background-s: transparent;
	--item-background-e: rgba(0, 0, 0, 0.3);

	--item-trans-left: auto;
	--item-trans-right: -1px;
	--item-trans-border-color: transparent #e060df #e060df transparent;

	-webkit-box-orient: horizontal;
	-webkit-box-direction: reverse;
	-ms-flex-direction: row-reverse;
	flex-direction: row-reverse;
}

/* Item: Icon
/*---------------------------------------------------------------*/
.item[__item__] .item-icon {
	width: 49px;
	height: 49px;

	border: 1px solid #777;

	display: block;

	-webkit-box-shadow: 0 0 8px 0 #000;
	box-shadow: 0 0 8px 0 #000;

	background-color: transparent;
	background-image: url('../images/item-empty-bg.png');
	background-repeat: no-repeat;
	background-position: top left;

	-webkit-box-flex: 0;
	-ms-flex: 0 0 49px;
	flex: 0 0 49px;
}

.item[__item__].is-head      .item-icon {background-position: 0 0 !important;}
.item[__item__].is-neck      .item-icon {background-position: 0 -47px !important;}
.item[__item__].is-shoulders .item-icon {background-position: 0 -94px !important;}
.item[__item__].is-back      .item-icon {background-position: 0 -141px !important;}
.item[__item__].is-chest     .item-icon {background-position: 0 -141px !important;}
.item[__item__].is-body      .item-icon {background-position: 0 -235px !important;}
.item[__item__].is-tabard    .item-icon {background-position: 0 -188px !important;}
.item[__item__].is-wrists    .item-icon {background-position: 0 -282px !important;}
.item[__item__].is-hands     .item-icon {background-position: 0 -329px !important;}
.item[__item__].is-waist     .item-icon {background-position: 0 -376px !important;}
.item[__item__].is-legs      .item-icon {background-position: 0 -423px !important;}
.item[__item__].is-feet      .item-icon {background-position: 0 -470px !important;}
.item[__item__].is-finger    .item-icon {background-position: 0 -517px !important;}
.item[__item__].is-trinket   .item-icon {background-position: 0 -564px !important;}
.item[__item__].is-mainhand  .item-icon {background-position: 0 -611px !important;}
.item[__item__].is-offhand   .item-icon {background-position: 0 -658px !important;}
.item[__item__].is-ranged    .item-icon {background-position: 0 -705px !important;}

/* Item: Icon: Main
/*-----------------------------------------------------*/
.item[__item__] .item-icon .icon-main {
	width: 100%;
	height: 100%;

	display: block;
	overflow: hidden;

	background-size: 100% 100%;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center center;
}

.item[__item__] .item-icon .icon-main::before {
	width: 10px;
	height: 10px;

	top: -10px;
	left: -10px;

	content: '';
	position: absolute;

	-webkit-box-shadow: 0 0 30px 10px #fff;
	box-shadow: 0 0 30px 10px #fff;
}

/* Item: Icon: Transmog
/*-----------------------------------------------------*/
.item[__item__] .item-icon .icon-transmog {
	width: 20px;
	height: 20px;

	left: var(--item-trans-left);
	right: var(--item-trans-right);
	bottom: -1px;

	position: absolute;

	border-width: 5px;
	border-style: solid;
	border-color: var(--item-trans-border-color);
}

.item[__item__] .item-icon .icon-transmog:hover,
.item[__item__] .item-icon .icon-transmog:active {
	-webkit-filter: brightness(1.2) hue-rotate(15deg);
	filter: brightness(1.2) hue-rotate(15deg);
}

/* Item: Info
/*---------------------------------------------------------------*/
.item[__item__] .item-info {
	display: none;

	padding: 0 var(--item-padding);

	-webkit-box-flex: 10;
	-ms-flex-positive: 10;
	flex-grow: 10;

	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;

	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

.item[__item__] .item-info * {
	line-height: 100%;
}

/* Item: Info: Name
/*-----------------------------------------------------*/
.item[__item__] .item-info .info-name {
	font-size: var(--item-info-font-size);
	font-weight: var(--item-info-font-weight);

	text-shadow: var(--item-info-text-shadow);
}

/* Item: Info: Level
/*-----------------------------------------------------*/
.item[__item__] .item-info .info-level {
	color: #717171;

	font-size: var(--item-info-font-size);
	font-weight: var(--item-info-font-weight);

	text-shadow: var(--item-info-text-shadow);
}

/* Item: Responsive
/*---------------------------------------------------------------*/
@media screen and (min-width: 1200px) { /* XL */
	.item[__item__] {
		--item-width: 300px;
		--item-height: 57px;
		--item-padding: 4px;
	}

	/* Item: Info
	/*---------------------------------------------------------------*/
	.item[__item__] .item-info {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
	}
}

/*-------------------------------------------------------------------------*/
/* Item quality colors
/*-------------------------------------------------------------------------*/
.q   {color: #ffd100 !important; border-color: #ffd100 !important;}
.q0  {color: #9d9d9d !important; border-color: #9d9d9d !important;}
.q1  {color: #ffffff !important; border-color: #ffffff !important;}
.q2  {color: #1eff00 !important; border-color: #1eff00 !important;}
.q3  {color: #0070dd !important; border-color: #0070dd !important;}
.q4  {color: #a335ee !important; border-color: #a335ee !important;}
.q5  {color: #ff8000 !important; border-color: #ff8000 !important;}
.q6  {color: #e5cc80 !important; border-color: #e5cc80 !important;}
.q7  {color: #e5cc80 !important; border-color: #e5cc80 !important;}
.q8  {color: #ffff98 !important; border-color: #ffff98 !important;}
.q9  {color: #71D5FF !important; border-color: #71D5FF !important;}
.q10 {color: #ffd100 !important; border-color: #ffd100 !important;}