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

.PickerComboRoot {
  flow-children: down;
  width: 100%;
  padding: 10px;
  margin-top: 10px;
  border-radius: 4px;
}

.PickerComboRoot:hover {
  background-color: #111f;
}

.PickerComboRoot.PickerComboFinished {
  background-color: #7771;
}

.PickerComboRoot.PickerComboFinished:hover {
  background-color: #111f;
}

.PickerComboRoot .PanelTitleContainer {
  height: fit-children;
  padding: 0;
  background-color: none;
  border: 0;
}

.PickerComboRoot .PanelTitle {
  font-size: 14px;
  text-align: left;
  vertical-align: center;
}

.PickerComboRoot.PickerComboFinished .PanelTitle {
  margin-left: 12px;
}

.PickerComboRoot .FinishedIcon {
  width: 24px;
  height: 24px;
  vertical-align: center;
  visibility: collapse;
  tooltip-body-position: 50% 10%;
  tooltip-position: right;
  background-image: controlsCheckShadowIcon;
  background-size: 100%;
  wash-color: dotaPlusLightGold;
}

.PickerComboRoot.PickerComboFinished .FinishedIcon {
  visibility: visible;
  wash-color: dotaPlusGold;
}

.PickerComboRoot .PickerComboInfoContainer {
  flow-children: right;
  margin-top: 8px;
}

.PickerComboRoot .PickerComboIcon {
  width: 28px;
  height: 28px;
  margin: 6px 8px;
  vertical-align: center;
  tooltip-body-position: 50% 10%;
  tooltip-position: right;
}

.PickerComboRoot .InfoIcon {
  margin-right: 0;
  margin-left: 0;
}

.PickerComboRoot .InfoIcon:hover {
  wash-color: #fff;
}

.PickerComboRoot .SpecialtyIcon {
  border-radius: 50%;
}

.PickerComboRoot.specialty_qw .SpecialtyIcon {
  background-color: specialtyQuasWexGradient;
}

.PickerComboRoot.specialty_qe .SpecialtyIcon {
  background-color: specialtyQuasExortGradient;
}

.PickerComboRoot .StanceIcon {
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  wash-color: #888;
  transition-timing-function: ease-in-out;
  transition-duration: 0.2s;
  transition-property: wash-color;
}

.PickerComboRoot.stance_offensive .StanceIcon {
  background-image: stanceOffensiveIcon;
}

.PickerComboRoot.stance_defensive .StanceIcon {
  background-image: stanceDefensiveIcon;
}

.PickerComboRoot .HeroLevelIcon {
  width: 32px;
  height: 32px;
  background-color: #121212;
  border-radius: 50%;
}

.PickerComboRoot:hover .HeroLevelIcon {
  background-color: #222;
}

.PickerComboRoot .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;
}

.PickerComboRoot .PickerComboRatings {
  flow-children: down;
  margin-left: 8px;
  vertical-align: center;
}

.PickerComboRoot .PickerComboRatings .AttackDamageIcon {
  width: 16px;
  height: 16px;
  background-image: damageRatingIcon;
  background-size: 100%;
}

.PickerComboRoot .PickerComboRatings .DifficultyIcon {
  width: 16px;
  height: 16px;
  background-image: difficultyRatingIcon;
  background-size: 100%;
}

.PickerComboRoot .PlayButton {
  width: 100%;
  height: 0;
  margin-top: 10px;
  transition-timing-function: ease-in-out;
  transition-duration: 0.2s;
  transition-property: height;
}

.PickerComboRoot:hover .PlayButton {
  height: 24px;
}

.PickerComboRoot .PlayButton .PlayLabel {
  horizontal-align: center;
}
