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

/* clWidth = ((clCellSize + (2 * clCellMargin)) * clColumns) + (2 * clPadding) + clScrollWidth */

@define clColumns: 20;
@define clWidth: 740px;
@define clHeight: 200px;
@define clPadding: 5px;
@define clCellSize: 32px;
@define clCellMargin: 2px;
@define clScrollWidth: 10px;
@define clTranslateY: -150px;
@define clBarHeight: 50px;
@define clThumbWidth: 19px;
@define clThumbHeight: 19px;

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

.CombatLog {
  flow-children: down;
  align: center top;
  width: clWidth;
  height: clHeight;
  transition: transform 0.25s ease-in-out 0s;
  transform: translateY(0);
}

.CombatLogRoot.Closed .CombatLog {
  transform: translateY(clTranslateY);
}

#CombatLogContents {
  flow-children: down;
  width: 100%;
  height: fill-parent-flow(1);
  padding-top: clPadding;
  padding-right: clPadding;
  padding-left: clPadding;
  overflow: clip scroll;
}

.CombatLogRow {
  flow-children: right;
}

.CombatLogIcon {
  width: clCellSize;
  height: clCellSize;
  margin: clCellMargin;
  background-color: #000d;
  box-shadow: #222 -2px -2px 4px 4px;
}

.CombatLogIcon .CombatLogIconImage {
  width: 100%;
  vertical-align: center;
}

.CombatLogBar {
  flow-children: right;
  width: 100%;
  height: clBarHeight;
  padding: 0 8px;
  background-color: #0003;
  border-top: 1px solid #222;
}

.CombatLogThumb {
  horizontal-align: left;
  vertical-align: center;
}

.CombatLogThumb .TickBox {
  width: clThumbWidth;
  height: clThumbHeight;
  wash-color: #d8d8d8;
  transform: rotateZ(0deg) translateY(3px);
}

.CombatLogThumb:selected .TickBox {
  width: clThumbWidth;
  height: clThumbHeight;
  wash-color: #d8d8d8;
  transform: rotateZ(180deg) translateY(0);
}

.CombatLogThumb:selected:hover {
  wash-color: #f43;
}

.CombatLogTitle {
  horizontal-align: left;
  font-family: defaultFont;
  font-size: 16px;
  font-weight: bold;
  color: white;
  text-overflow: shrink;
  text-shadow: 1px 1px 0 3 #0006;
  text-transform: uppercase;
  letter-spacing: 2px;
  vertical-align: center;
}

.CombatLogBarActions {
  flow-children: right;
  horizontal-align: right;
  height: 100%;
}

.CombatLogRoot.Closed .CombatLogBarActions {
  visibility: collapse;
}

.CombatLogBarActions .CombatLogBarItem {
  margin-right: 8px;
  vertical-align: center;
}

.CombatLogBarActions .ClearButton {
  margin: 0;
}
