$preview-width: 240px;

.editor-with-preview {
  transition: padding-right 0.3s ease;

  &.show-preview {
    padding-right: $preview-width + 15px;
  }
}

.preview-container.show-preview {
  width: $preview-width;
}

.preview-container.hide-preview {
  width: 0;
}

.preview-container {
  transition: width 0.3s ease;
  position: fixed;
  top: 0;
  right: 0;
  padding-top: 22px;
  height: 100%;
  background-color: #080d22;
  overflow: auto;

  .perfect-scrollbar {
    max-height: 95vh;
  }
}

.toggle-preview-button {
  position: fixed;
  bottom: 10px;
  right: 10px;
}

.list-req span {
  display: inline-block;
}

/* Classes */
.c1 {
  color: #c69b6d;
} /* Warrior */
.c2 {
  color: #f48cba;
} /* Paladin */
.c3 {
  color: #aad372;
} /* Hunter */
.c4 {
  color: #fff468;
} /* Rogue */
.c5 {
  color: #fff;
} /* Priest */
.c6 {
  color: #c41d3b;
} /* Death Knight */
.c7 {
  color: #2359ff;
} /* Shaman */
.c8 {
  color: #68ccef;
} /* Mage */
.c9 {
  color: #9382c9;
} /* Warlock */
.c11 {
  color: #ff7c0a;
} /* Druid */

.moneygold,
.moneysilver,
.moneycopper {
  background: no-repeat right center;
  color: white;
  padding-right: 15px;
}

.moneygold {
  background-image: url(../../assets/img/money/gold.gif);
}
.moneysilver {
  background-image: url(../../assets/img/money/silver.gif);
}
.moneycopper {
  background-image: url(../../assets/img/money/copper.gif);
}
