Angular Material Add transparent color to Row on Hover

I have an Angular Material mat-mdc-table. I want a greyish background color when I hover on a row.

.mat-mdc-row:hover{
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.04) !important;
} 

This works, but it overlaps with the white from parent and creates a third color in the padding.

I want an uniform color for my hover row. I don't know why this transparency is applied twice. Just surrounding white and the row's greyish.

• I tried to use hex color background-color: #0000000A; but no success.
• In browser I identified this CSS affects it:

.mat-mdc-table tbody, 
.mat-mdc-table tfoot, 
.mat-mdc-table thead, 
.mat-mdc-cell, 
.mat-mdc-footer-cell, 
.mat-mdc-header-row, 
.mat-mdc-row, 
.mat-mdc-footer-row, 
.mat-mdc-table 
.mat-mdc-header-cell {
    background-color: inherit;
}

• My row has padding of 16px and it seems the padding has this color, but in theory should be the same with tags' content color.

You can try using the following css in your styles.scss file

.mat-mdc-row:hover {
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.04) !important;
  .mat-mdc-cell {
    background: transparent;
  }
}