.dice-roll {
  .flexrow();
  justify-content: space-around;

  .dice-result,
  .dice-tooltip {
    flex: 0 0 100%;
  }

  .dice-tooltip {
    order: 1;
  }

  .dice-result {
    order: 2;
  }

  .dice-formula,
  .dice-total {
    flex: 0 0 100%;
    position: relative;
    margin: 0;
    line-height: 24px;
    text-align: center;
    background: rgba(0, 0, 0, 0.10);
    border: 1px solid var(--color-border-light-2);
    border-radius: 3px;
    box-shadow: 0 0 2px #FFF inset;
    word-break: break-all;
  }

  .dice-formula {
    margin-bottom: 5px;
  }

  .dice-total {
    flex: 0;
    font-size: var(--font-size-20);
    font-weight: bold;
    &.success { color: green; }
    &.failure { color: red; }
  }

  .dice-tooltip {
    display: none;
  }
}


/** Inline Roll Tooltip */
.inline-roll .dice-tooltip {
  width: 280px;
  position: fixed;
  background: url(../ui/parchment.jpg) repeat;
  border: 1px solid @borderColorBlack;
  border-radius: 5px;
  padding: 5px 5px 0;
  box-shadow: 0 0 10px @shadowColorBlack;
}
.inline-roll:hover .dice-tooltip {
  text-shadow: none;
}

/**
 * Legacy Tooltip Code
 */
.dice-roll {

  .dice-part {
    &:hover > .dice-tooltip {
      display: block;
    }
  }

  .dice-part.die {
    font-weight: 700;
    cursor: pointer;
  }

  .dice-part .dice-tooltip {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    line-height: 26px;
    padding: 0 2px;
    background: #444;
    font-size: var(--font-size-14);
    color: var(--color-text-light-4);
  }

  .dice-tooltip {
    .reroll {
      color: var(--color-text-dark-6);
      text-decoration: line-through;
    }
    .fail { color: red; }
    .crit { color: lightgreen; }
  }

  .dice-flavor {
    text-align: right;
    font-size: var(--font-size-12);
  }
}

.message.ic .dice-roll {
  font-style: normal;
}



/* ----------------------------------------- */
/*  Dice Tooltip
/* ----------------------------------------- */

.dice-tooltip {
  .part-header {
    margin: 0;
    line-height: 24px;
    border-bottom: 1px solid var(--color-text-light-6);

    .part-formula {
      font-weight: bold;
      flex: 1;
    }

    .part-flavor {
      flex: none;
      margin-right: 5px;
      font-size: var(--font-size-12);
      color: @colorOlive;
    }

   .part-total {
     flex: none;
     font-size: var(--font-size-16);
     font-weight: bold;
     padding: 0 5px;
     background: rgba(0, 0, 0, 0.10);
     border: 1px solid var(--color-text-light-6);
     border-bottom: none;
     border-radius: 3px 3px 0 0;
   }
  }

  .dice-rolls {
    list-style: none;
    margin: 5px 0;
    padding: 0;
    overflow: hidden;

    .roll {
      position: relative;
      width: 24px;
      line-height: 24px;
      float: left;
      margin-right: 1px;
      background-image: url("../icons/svg/d6-grey.svg");
      background-repeat: no-repeat;
      background-size: 24px 24px;
      font-size: var(--font-size-16);
      color: #000;
      font-weight: bold;
      text-align: center;
    }
    .roll.d4 { background-image: url("../icons/svg/d4-grey.svg"); }
    .roll.d6 { background-image: url("../icons/svg/d6-grey.svg"); }
    .roll.d8 { background-image: url("../icons/svg/d8-grey.svg"); }
    .roll.d10 { background-image: url("../icons/svg/d10-grey.svg"); }
    .roll.d12 { background-image: url("../icons/svg/d12-grey.svg"); }
    .roll.d20 { background-image: url("../icons/svg/d20-grey.svg"); }

    .roll.min {
      color: #aa0200;
      filter: sepia(0.5) hue-rotate(-60deg);
    }
    .roll.max {
      color: #18520b;
      filter: sepia(0.5) hue-rotate(60deg);
    }
    .roll.discarded, .roll.rerolled {
      filter: sepia(0.5) contrast(0.75) opacity(0.4);
    }
    .roll.exploded:before {
      font-size: .5rem; // 8px
      font-family: "Font Awesome 5 Free";
      content: "\f666";
      position: absolute;
      top: -8px;
      right: 0px;
    }
    .roll.success {
      color: #18520b;
      filter: sepia(0.5) hue-rotate(60deg);
    }
    .roll.failure {
      color: #aa0200;
      filter: sepia(0.5) hue-rotate(-60deg);
    }
  }
}