How to change JQuery terminal cursor when it is not in focus?

Ive been trying to see how I can change the cursor of jquery terminal when the page is not in focus. By default, it seems that when you click off the page making it unfocused, the cursor will dissappear. How can I make it so that it can just turn into an "empty box" like in most terminals? I took a look at the documentation found here: Documentation and I think I have to use the onBlur and onFocus functions to change it but im not sure how to use it.

Would some css similar to this help me achive it?:

.cmd:not(:focus) {
/* change the css of the cursor */
}

I tried taking a look at a few online articles about changing a css element when its not in focus, but I havent been able to find something that does what im asking. Im also not exactly sure how to change the Jquery terminal's cursor specs like width, height, rotation, etc.

Example of cursor I want when not in focus:

@Invulner is correct here is a working example:

$('body').terminal();

.cmd:not(:focus-within) .cmd-cursor {
    outline: 1px solid var(--color, #ccc);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery.terminal/js/jquery.terminal.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/jquery.terminal/css/jquery.terminal.min.css" rel="stylesheet"/>

NOTE: I wanted to edit his answer, but it felt weird.