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

@define counterWidth: 250px;
@define counterHeight: 120px;
@define counterMarginTop: 100px;
@define summaryWidth: 275px;
@define summaryHeight: 120px;
@define summaryMarginBottom: 230px;

/******************************************************************************
 * Combo Score (shamelessly rippped from ES arcana)
 *****************************************************************************/

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

.ComboScoreRoot .ComboScoreSplashBackground {
  z-index: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(95, 55, 3, 0.1);
  background-image: arcanaShakerSummaryBackground;
  background-size: 100%;
  opacity-mask: softEdgeBoxIrregularMask;
}

.ComboScoreRoot.Level2 .ComboScoreSplashBackground {
  background-image: arcanaShakerV2SummaryBackground;
}

.ComboScoreRoot .ComboScoreDigitContainer {
  flow-children: left;
  align: center center;
  width: 100%;
  margin-left: 20px;
}

.ComboScoreRoot .ComboScoreDigitContainer .ComboScoreDigitX {
  width: 22px;
  background-image: arcanaShakerCharX;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.ComboScoreRoot.Level2 .ComboScoreDigitContainer .ComboScoreDigitX {
  background-image: arcanaShakerV2CharX;
}

.ComboScoreRoot .ComboScoreDigitContainer .ComboScoreDigit {
  width: 38px;
  height: 59px;
  background-image: arcanaShakerChar1;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.ComboScoreRoot.Level2 .ComboScoreDigitContainer .ComboScoreDigit {
  background-image: arcanaShakerV2Char1;
}

.ComboScoreRoot .ComboScoreDigitContainer .ComboScoreDigitHidden {
  visibility: collapse;
}

.ComboScoreRoot .ComboScoreDigitContainer .ComboScoreDigit.digit_0 {
  width: 28px;
  background-image: arcanaShakerChar0;
}

.ComboScoreRoot .ComboScoreDigitContainer .ComboScoreDigit.digit_1 {
  width: 25px;
  background-image: arcanaShakerChar1;
}

.ComboScoreRoot .ComboScoreDigitContainer .ComboScoreDigit.digit_2 {
  width: 34px;
  background-image: arcanaShakerChar2;
}

.ComboScoreRoot .ComboScoreDigitContainer .ComboScoreDigit.digit_3 {
  width: 38px;
  background-image: arcanaShakerChar3;
}

.ComboScoreRoot .ComboScoreDigitContainer .ComboScoreDigit.digit_4 {
  width: 34px;
  background-image: arcanaShakerChar4;
}

.ComboScoreRoot .ComboScoreDigitContainer .ComboScoreDigit.digit_5 {
  width: 40px;
  margin-left: -2px;
  background-image: arcanaShakerChar5;
}

.ComboScoreRoot .ComboScoreDigitContainer .ComboScoreDigit.digit_6 {
  width: 33px;
  background-image: arcanaShakerChar6;
}

.ComboScoreRoot .ComboScoreDigitContainer .ComboScoreDigit.digit_7 {
  width: 35px;
  background-image: arcanaShakerChar7;
}

.ComboScoreRoot .ComboScoreDigitContainer .ComboScoreDigit.digit_8 {
  width: 30px;
  background-image: arcanaShakerChar8;
}

.ComboScoreRoot .ComboScoreDigitContainer .ComboScoreDigit.digit_9 {
  width: 30px;
  background-image: arcanaShakerChar9;
}

.ComboScoreRoot.Level2 .ComboScoreDigitContainer .ComboScoreDigit.digit_0 {
  background-image: arcanaShakerV2Char0;
}

.ComboScoreRoot.Level2 .ComboScoreDigitContainer .ComboScoreDigit.digit_1 {
  background-image: arcanaShakerV2Char1;
}

.ComboScoreRoot.Level2 .ComboScoreDigitContainer .ComboScoreDigit.digit_2 {
  background-image: arcanaShakerV2Char2;
}

.ComboScoreRoot.Level2 .ComboScoreDigitContainer .ComboScoreDigit.digit_3 {
  background-image: arcanaShakerV2Char3;
}

.ComboScoreRoot.Level2 .ComboScoreDigitContainer .ComboScoreDigit.digit_4 {
  background-image: arcanaShakerV2Char4;
}

.ComboScoreRoot.Level2 .ComboScoreDigitContainer .ComboScoreDigit.digit_5 {
  background-image: arcanaShakerV2Char5;
}

.ComboScoreRoot.Level2 .ComboScoreDigitContainer .ComboScoreDigit.digit_6 {
  background-image: arcanaShakerV2Char6;
}

.ComboScoreRoot.Level2 .ComboScoreDigitContainer .ComboScoreDigit.digit_7 {
  background-image: arcanaShakerV2Char7;
}

.ComboScoreRoot.Level2 .ComboScoreDigitContainer .ComboScoreDigit.digit_8 {
  background-image: arcanaShakerV2Char8;
}

.ComboScoreRoot.Level2 .ComboScoreDigitContainer .ComboScoreDigit.digit_9 {
  background-image: arcanaShakerV2Char9;
}

.ComboScoreRoot > .ComboScoreCounter {
  width: 100%;
  height: 100%;
  opacity: 0;
  transition-timing-function: ease-in-out;
  transition-duration: 0.3s;
  transition-property: opacity;
}

.ComboScoreRoot.ShowCounter > .ComboScoreCounter {
  opacity: 1;
}

.ComboScoreRoot.ShowCounter.ShowSummary > .ComboScoreCounter {
  opacity: 0;
}

#ComboScoreCounterFX {
  z-index: 100;
  width: 100%;
  height: 100%;
}

.ComboScoreRoot > .ComboScoreCounter > .ComboScoreContent {
  align: center bottom;
  width: 100%;
  height: 90px;
  margin-bottom: 10px;
  margin-left: 0;
}

#ComboScoreCounterTicker {
  height: 100%;
}

#ComboScoreCounterTicker.ComboScoreDigitContainer {
  horizontal-align: center;
  margin-right: 90px;
}

#ComboScoreCounterTicker .ComboScoreDigitX {
  width: 29px;
  height: 44.25px;
  margin-bottom: 0;
  margin-left: -2px;
  vertical-align: bottom;
}

#ComboScoreCounterTicker .ComboScoreDigitX,
#ComboScoreCounterTicker .ComboScoreDigit {
  align: left center;
}

#ComboScoreCounterTicker .ComboScoreDigit {
  transition-timing-function: ease-in-out;
  transition-duration: 0.1s;
  transition-property: pre-transform-scale2d, background-image;
  pre-transform-scale2d: 0.9;
}

#ComboScoreCounterTicker.CounterBump .ComboScoreDigit {
  pre-transform-scale2d: 1.2;
}

.ComboScoreRoot > .ComboScoreCounter > .ComboScoreContent > .ComboScoreLabel {
  z-index: 10;
  horizontal-align: center;
  margin-top: 65px;
  font-size: 13px;
  font-style: italic;
  font-weight: bold;
  line-height: 13px;
  color: #d5f9fe;
  text-align: center;
  text-shadow: 2px 2px 0 #1b4c44;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  vertical-align: bottom;
}

.ComboScoreRoot > .ComboScoreSummary {
  width: 100%;
  height: 100%;
  opacity: 0;
  transition-timing-function: ease-in-out;
  transition-duration: 0.3s;
  transition-property: opacity;
}

.ComboScoreRoot.ShowSummary > .ComboScoreSummary {
  opacity: 1;
}

.ComboScoreRoot > .ComboScoreSummary .ComboScoreSplashBackground {
  vertical-align: top;
}

#ComboScoreSummaryFX {
  z-index: 100;
  width: 100%;
  height: 100%;
}

.ComboScoreRoot > .ComboScoreSummary > .ComboScoreContent {
  flow-children: down;
  align: center center;
  width: 100%;
}

.ComboScoreRoot > .ComboScoreSummary > .ComboScoreContent > .ComboScoreCount {
  flow-children: right;
  horizontal-align: center;
  width: 100%;
}

#ComboScoreSummaryCountDisplay.ComboScoreDigitContainer {
  horizontal-align: center;
  width: 40%;
}

#ComboScoreSummaryCountDisplay .ComboScoreDigitX {
  width: 10px;
  height: 22.125px;
  margin-bottom: 0;
  margin-left: 0;
  vertical-align: bottom;
}

/* stylelint-disable-next-line no-descending-specificity */
#ComboScoreSummaryCountDisplay .ComboScoreDigit {
  height: 28px;
}

#ComboScoreSummaryCountDisplay .ComboScoreDigit.digit_0 {
  width: 13px;
}

#ComboScoreSummaryCountDisplay .ComboScoreDigit.digit_1 {
  width: 12px;
}

#ComboScoreSummaryCountDisplay .ComboScoreDigit.digit_2 {
  width: 16px;
}

#ComboScoreSummaryCountDisplay .ComboScoreDigit.digit_3 {
  width: 18px;
}

#ComboScoreSummaryCountDisplay .ComboScoreDigit.digit_4 {
  width: 18px;
}

#ComboScoreSummaryCountDisplay .ComboScoreDigit.digit_5 {
  width: 19px;
  margin-left: -2px;
}

#ComboScoreSummaryCountDisplay .ComboScoreDigit.digit_6 {
  width: 16px;
}

#ComboScoreSummaryCountDisplay .ComboScoreDigit.digit_7 {
  width: 17px;
}

#ComboScoreSummaryCountDisplay .ComboScoreDigit.digit_8 {
  width: 14px;
}

#ComboScoreSummaryCountDisplay .ComboScoreDigit.digit_9 {
  width: 14px;
}

.ComboScoreRoot > .ComboScoreSummary > .ComboScoreContent > .ComboScoreCount > .ComboScoreLabel {
  margin-left: 5px;
  font-size: 13px;
  font-weight: bolder;
  color: #fff;
  text-align: center;
  text-shadow: 2px 2px 0 #1b4c44;
  text-transform: uppercase;
  letter-spacing: 2px;
  vertical-align: center;
}

.ComboScoreRoot > .ComboScoreSummary > .ComboScoreContent > .ComboScoreDamage {
  flow-children: down;
  width: 100%;
}

#ComboScoreSummaryDamageTicker {
  horizontal-align: right;
  margin-right: 60px;
}

#ComboScoreSummaryDamageTicker.ComboScoreDigitContainer {
  horizontal-align: center;
  width: 70%;
}

/* stylelint-disable-next-line no-descending-specificity */
#ComboScoreSummaryDamageTicker .ComboScoreDigit {
  margin-top: -3px;
}

.ComboScoreRoot > .ComboScoreSummary > .ComboScoreContent > .ComboScoreDamage > .ComboScoreLabel {
  align: center center;
  margin-top: -5px;
  margin-left: 0;
  font-size: 13px;
  font-weight: bolder;
  color: #fff;
  text-align: center;
  text-shadow: 2px 2px 0 #1b4c44;
  text-transform: uppercase;
  letter-spacing: 2px;
}
