#chat-log {
  .message {
    background: $c-white;
    font-family: $font-stack-base;

    .message-sender {
      font-family: $font-stack-base;
    }

    .chat-title {
      align-items: center;
      border: 1px solid $ct-gray;
      border-left: 0;
      border-right: 0;
      padding: 4px 0;
    }

    .item-icon {
      flex: 0 0 40px;
      width: 40px;
      height: 40px;
      margin-right: 8px;
    }

    .cell__title {
      font-size: 20px;
      text-transform: capitalize;
      line-height: 1;
      margin: 0;
      border: 0;
    }

    &.whisper {
      background: #e0ecff;
    }

    .result {
      padding: 0;
      margin: 25px 0;
      border: 2px solid;
      border-left: 0;
      border-right: 0;
    }

    .result-label {
      text-align: center;
      font-size: 18px;
      font-weight: bold;
      border-bottom: 1px solid #ccc;
      margin: 0;
      padding: 10px;
      background: #efefef;
    }

    .result-details {
      padding: 10px 10px 0;
      margin-bottom: 10px;
    }

    .result-choices {
      margin: 10px 0;
    }

    .failure {
      color: $c-failure;
    }

    .partial {
      color: $c-partial;
    }

    .success {
      color: $c-success;
    }

    .critical {
      color: $c-critical;
    }
  }

  .message-sender {
    font-size: 12px;
  }

  .cell__title {
    font-family: $font-stack-secondary;
    font-weight: bold;
    font-size: 16px;
    border-bottom: 2px solid $c-black;
    margin-bottom: 15px;
  }

  h1,
  h2,
  h3,
  h4,
  h5 {
    font-family: $font-stack-secondary;
    font-weight: bold;
  }

  .row {
    font-size: 13px;
  }

  .dice-roll {
    .dice-formula {
      cursor: pointer;

      &:hover,
      &:focus {
        box-shadow: 0 0 5px rgba($c-navy-up, 0.25);
        background-color: $c-navy-top;
      }
    }
  }

  .message-content {
    .button {
      display: block;
      position: relative;
      margin: 5px 0;
      line-height: 24px;
      text-align: center;
      background: rgba(0, 0, 0, 0.1);
      border: 1px solid #999;
      border-radius: 3px;
      box-shadow: 0 0 2px #FFF inset;
      word-break: break-all;
      font-family: $font-stack-base;
    }

    .chat-damage-buttons {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 5px;
      margin: 5px 0;
    }

    .xp-button,
    .chat-damage-buttons .button {
      background: $c-navy;
      box-shadow: 0 0 2px $c-navy-hover inset;
      border-color: $c-black;
      color: $c-white;
      font-weight: bold;
      cursor: pointer;

      &:hover {
        background: $c-navy-up;
        box-shadow: 0 0 2px $c-navy-top inset;
      }

      &.button-disabled:hover {
        background: $c-navy;
        box-shadow: 0 0 2px $c-navy-hover inset;
      }

      &.damage {
        background: rgba(0, 0, 0, 0.1);
        box-shadow: inset 0 0 5px 1px rgba($c-failure, 0.4);
        border-color: #8a0505;
        color: $c-black;

        &:hover {
          background: #db4d4d;
          color: $c-white;
        }
      }

      &.heal {
        background: rgba(0, 0, 0, 0.1);
        box-shadow: inset 0 0 5px 1px rgba($c-critical, 0.4);
        border-color: #185c00;
        color: $c-black;

        &:hover {
          background: #15991a;
          color: $c-white;
        }
      }
    }

    .button-disabled {
      opacity: 0.5;
    }
  }
}

#chat-form {
  textarea {
    background: $c-white;
  }
}