/* ----------------------------------------- */
/* Damage Log                                */
/* ----------------------------------------- */

nav.damage-log-nav.tabs {
  flex: 0;
  margin: 0px 2px;
  box-shadow: none;
  border: none;

  .item {
    @include quick-transition;
    margin: 2px;
    color: white;
    border-radius: 3px;
    margin: 2px;
    border: none;

    &:hover {
      box-shadow: var(--gold-and-glow);
      background-color: var(--secondary);
      text-shadow: 0px 0px 3px black;
      border: none;
      border-radius: 3px;
    }

    &.active {
      box-shadow: var(--gold-and-glow);
      background-color: var(--secondary-light);
      text-shadow: 0px 0px 3px black;
      border: none;
      border-radius: 3px;
    }
  }
}

#damage-log {
  margin-left: 4px;
}

.dorako-ui {
  /* Styling for damage messages */
  &.message.damage-log.damage {
    background-color: #ffd9d9;
    background-blend-mode: luminosity;
  }
  /* Styling for healing messages */
  &.message.damage-log.healing {
    background-color: #d9ffd9;
    background-blend-mode: luminosity;
  }
  /* Dim reverted damage */
  &.message.damage-log.reverted.damage {
    background-color: #ffeaea;
    background-blend-mode: luminosity;
  }
  /* Dim reverted healing */
  &.message.damage-log.reverted.healing {
    background-color: #eaffea;
    background-blend-mode: luminosity;
  }
}
