Unable to remove on hover background colour from mat-chip - html

Question

i need to remove the on hover background colour to transparent on hovering.
Price chip without hover
Price chip with hover
HTML :-
<div>
<mat-chip-list>
<mat-chip class="price-filter">Price <svg width="24"
height="24" viewBox="0 0 24 24" focusable="false" class="
NMm5M"><path d="M7 10l5 5 5-5H7z"></path></svg>
</mat-chip>
</mat-chip-list>
</div>
CSS :-
.price-filter{
border: solid;
border-color: #dad5d5;
border-width: thin;
background-color: transparent;
cursor:pointer;
color: var(--primary) !important;
}
.price-filter > mat-icon {
background-color: transparent;
opacity: 1;
}
.NMm5M {
fill: var(--primary) !important;
position: relative;
left: 11px;
}
.price-filter:hover{
background-color: transparent !important;
}
i want to remove the grey colour on hover as shown in the screenshot in second link.

Answer 1

Why simple don't change in the class price-filter the hover rule?
like:
.price-filter:hover{background-color:inherit!important;} // or want you want.
EDIT after see live version:
The problem is that code:
.mat-chip.mat-standard-chip::after {
background: #0000;
}
if you change that to trasparent all work how you want.

Answer 2

This solved my problem
.mat-chip.mat-standard-chip::after {
background: none !important; // color that you want on hover
}