Estilização do menu hamburguer quando ativo

Pessoal, eu fiquei com vontade de fazer a estilização do botão de menu quando ativo, conforme o figma. Quebrei a cabeça para fazer (acredito que num projeto da vida real teríamos duas imagens, e só substituiríamos, mas eu quis fazer mesmo assim).

O desafio era trocar o background do botão, e muda a cor das listras para branco.

No HTML eu dobrei o span:

         <label for="menu"> 
            <div class="menu--wrapper">
               <span class="menu container--img"></span>
               <span class="menu-invertido container--img"></span>
            </div>             
         </label>

No CSS eu 1) Isolei o container:

.container{
   display: flex;
   align-items: center;   
   isolation: isolate;
}

2) Escondi o segundo span usando display none; 3) Usei brightness 0 e invert 1 para deixar as linhas do menu brancas 4) Usei z-index - 1 para colocar o segundo span com a cor de fundo por trás do menu.

.menu{   
   display: inline-block; 
   height: var(--tamanho-menu);
   width: var(--tamanho-menu);
   margin-right: 1rem;
   background-image: url("../img/Menu.svg");
   background-repeat: no-repeat;
   background-position: center;
}

.menu-invertido{
   background-image: var(--azul-degrade);
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: calc(var(--tamanho-menu)*1.7);
   z-index: -1;
   display: none;
}

.menu-botao:checked ~ label > .menu--wrapper > .menu{
   filter:brightness(0) invert(1);
}

.menu-botao:checked ~ label > .menu--wrapper > .menu-invertido{
   display: inline-block;
}

Espero que gostem do resultado, e me avisems e conseguiram fazer isso de outra maneira.

Abraços e bons estudos!