Cypress test is not working for focus state for mat-checkbox in Angular

I am trying to test the opacity and color of mat-checkbox when it get focus but it is not working.

My code is as follow:

  it('focused opacity', () => {  
    cy.get('.mat-checkbox[data-cy=selected] .mat-checkbox-input').first()
      .focus()
      .find('.mat-checkbox-focus-overlay')
      .then((btn) => {
        cy.wrap(btn).should('have.css', 'opacity', '0.20');
        cy.wrap(btn).should('have.css', 'background-color')
        cy.wrap(btn).and('be.colored', '#00777');
      });
  });

The error is:

             Timed out retrying after 4000ms: Expected to find element: .mat-checkbox-focus-overlay, but never found it. Queried from element: <input#mat-checkbox-2-input.mat-checkbox-input.cdk-visually-hidden>