@import url("s2r://panorama/styles/dotastyles.css");
@import url("file://{resources}/styles/shared/variables.css");
@import url("file://{resources}/styles/shared/rating.css");

@define fgColor: #3c1b18;

.ViewerPropertiesRoot {
  flow-children: down;
  width: 100%;
  height: 230px;
  padding: 15px;
}

.ViewerPropertiesRoot .ViewerPropertiesRow {
  flow-children: right;
  width: 100%;
  height: 40px;
}

.ViewerPropertiesRoot .ViewerPropertiesLabel {
  font-size: 18px;
  font-weight: semi-bold;
  color: fgColor;
  vertical-align: center;
}

.ViewerPropertiesRoot .ViewerPropertiesIcon {
  width: 28px;
  height: 28px;
  margin: 6px 8px;
  vertical-align: center;
  tooltip-body-position: 50% 10%;
  tooltip-position: left;
}

.ViewerPropertiesRoot .ViewerPropertiesValue {
  align: right center;
}

.ViewerPropertiesRoot .ViewerPropertiesIcon.HeroLevelIcon {
  background-image: controlsEscalationArrowIcon;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  wash-color: fgColor;
}

.ViewerPropertiesRoot .HeroLevelBadge {
  width: 30px;
  height: 32px;
  background-color: #121212;
  border-radius: 50%;
}

.ViewerPropertiesRoot .HeroLevelBadge .HeroLevelLabel {
  align: center center;
  width: 14px;
  margin-top: 3px;
  font-size: 14px;
  font-weight: normal;
  color: #e7d291;
  text-align: center;
  text-overflow: shrink;
  text-shadow: 0 0 3px 3.7 #ec780e24;
}

.ViewerPropertiesRoot .ViewerPropertiesIcon.SpecialtyIcon {
  background-image: controlsFilterSupportIcon;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  wash-color: fgColor;
}

.ViewerPropertiesRoot .ViewerPropertiesIcon.StanceIcon {
  background-image: controlsFilterCarryIcon;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  wash-color: fgColor;
}

.ViewerPropertiesRoot .ViewerPropertiesIcon.AttackDamageIcon {
  background-image: controlsFilterMeleeIcon;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  wash-color: fgColor;
}

.ViewerPropertiesRoot .ViewerPropertiesIcon.DifficultyIcon {
  background-image: controlsFilterComplexityIcon;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  wash-color: fgColor;
}

.ViewerPropertiesRoot .Rating .RatingActive {
  wash-color: fgColor&99;
}
