vjs-record-indicator div overlays the screen in Chromium based browsers and takes over the clicks

Description

vjs-record-indicator div overlays the screen in Chromium-based browsers and takes over the clicks. It means that when the videojs-record is used then user experience is heavily degraded as users sometimes need to click several times on an element to trigger its action.

Steps to reproduce

Open https://collab-project.github.io/videojs-record/demo/audio-video.html in a Chromium based browser like Chrome or Vivaldi
Add <button type="button" onclick="javascript:console.log('clicked')">Test button</button> to the page a) Open devtools b) When on the "Elements" tab select the body tag, right click it and select "Edit as HTML" c) Paste <button type="button" onclick="javascript:console.log('clicked')">Test button</button> just after the <body> tag.
Start clicking on the button and observe the console (either switch to Console in the devtools or open Console Drawer there). You should see increasing number of the "clicked" being logged there.

Results

Not every click on the button is registered so our "clicked" text is not displayed (counted) for every click.

Expected

Every click on the button is registered so "clicked" text is displayed (counted) for every click.

Actual

What happens here is that <div class="vjs-record-indicator vjs-control vjs-hidden" dir="ltr" data-label="REC"></div> element somehow intercepts click events.

You can add simple listener to find out that it's this element:

document.onclick = function(event) {
    console.log(event.target);
};

then just start clicking on the page and observe output in the console.

The fix seems to be as simple as removing display: block!important; from the vjs-hidden class in the record-indicator.scss. I'm not sure about possible side effects of such removal though.

.vjs-record.video-js .vjs-control.vjs-record-indicator.vjs-hidden {
    display: block!important;
    opacity: 0;
    transform: translateX(1em) rotateX(-90deg) scale(0.9);
    transition: all .5s, transform .5s .25s;
}

Additional Information

Please include any additional information necessary here. Including the following:

versions

videojs: 8.3.0
videojs-record: 4.6.0

browsers

what browser(s) are affected? Make sure to test with all third-party browser extensions disabled.

Chromium based browsers

OSes

what platforms (operating systems and devices) are affected?

I believe this happens on all platforms

collab-project / videojs-record