Offcanvas Menu Icon and Color of Closing (x) - Documentation Issue

I was following the Customization Tips for the Offcanvas Menu color of closing (x). Documentation here: https://www.joomshaper.com/documentation/helix-framework/customization-tips

I'm using the Helix Ultimate Template, specifically the 'stratos' Template.

I was able to change the burger-icon color using:

.burger-icon > span {background-color: black !important;}

However this also changes the closing (x) color. Which is the same as the background of the offcanvas menu so you cannot see it.

I tried using the recommended:

.offcanvas-active .burger-icon > span,
#modal-menu-toggler.active .burger-icon > span 
{ background-color: red;}

Which doesn't work.

What ended up working was:

.burger-icon > span {
  background-color: black;
}

.offcanvas-active .burger-icon > span {
  background-color: red;
}

So is the documentation incorrect? Or is there something special/different about the 'stratos' Template that makes the closing (x) different?

If what I'm using looks fine to you I'm OK with it. If what you have in your documentation is correct and should work then perhaps something is wrong with the template, in which case I'd like to get corrected. Or if the 'stratos' template is just different somehow, is there alternative documentation for it I can reference for other changes I'd like to make?

Thank you!