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

@define scoreWidth: 275px;
@define scoreHeight: 120px;
@define scoreMarginBottom: 230px;
@define controlsMarginLeft: 80px;

.FreestyleRoot {
  width: 100%;
  height: 100%;
}

.FreestyleControls {
  flow-children: right;
  align: left bottom;
  margin-top: 13px;
  margin-left: controlsMarginLeft;
  opacity: 1;
  transition-duration: 0.75s;
  transition-property: opacity;
}

.FreestyleRoot.Hide .FreestyleControls {
  opacity: 0;
}

.FreestyleControls .FreestyleControlIcon {
  width: 64px;
  height: 64px;
  tooltip-position: top;
  transition-duration: 0.2s;
  transition-property: background-color;
}

.FreestyleControls .FreestyleControlIcon:hover {
  background-color: panelTranslucentHoverGradient;
  border-right: 1px solid #444b;
  border-left: 1px solid #444b;
}

.FreestyleControls .FreestyleIconButton {
  width: 100%;
  height: 100%;
  margin: 0;
  vertical-align: center;
  tooltip-position: top;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.FreestyleControls .FreestyleIconButton.Activated {
  sound: "ui_quit_menu_fadeout";
}

.FreestyleControls .FullRefreshIcon {
  background-image: statusLoadingThrobberRoundIcon;
  background-size: 28px 28px;
}

.FreestyleControls .FullRefreshIcon.Activated {
  animation-name: SpinnerRotate;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}

.FreestyleControls .CloseButton {
  background-size: 34px 34px;
}

.FreestyleControls .LevelUpButton {
  background-image: controlsArrowDropdownUpIcon;
  background-size: 48px 48px;
}

.FreestyleControls .LevelMaxButton {
  background-image: controlsDoubleArrowRightIcon;
  background-size: 30px 30px;
  transform: rotateZ(-90deg);
}

.FreestyleControls .FreestyleControlIcon .Grey {
  wash-color: #aaa;
}

.FreestyleControls .FreestyleControlIcon .Grey:hover {
  wash-color: #fff;
}

.FreestyleControls .FreestyleControlIcon .Blue {
  wash-color: #65a9db;
}

.FreestyleControls .FreestyleControlIcon .Blue:hover {
  wash-color: #acc6d8;
}

.FreestyleControls .FreestyleControlIcon .Bronze {
  wash-color: #dca157;
}

.FreestyleControls .FreestyleControlIcon .Bronze:hover {
  wash-color: #dca157;
}

.FreestyleControls .FreestyleControlIcon .Red {
  wash-color: #db6565;
}

.FreestyleControls .FreestyleControlIcon .Red:hover {
  wash-color: #db6565;
}

#FreestyleScore {
  align: center bottom;
  width: scoreWidth;
  height: scoreHeight;
  margin-bottom: scoreMarginBottom;
}
