Change the CSS (for example bgcolor) on angular material radio button

Question

I have the following radio button from angular material, and I want to apply some CSS when it has been selected, but the CSS is not working, and I do not know why however, the :hover works perfectly fine I have provided both HTML and CSS could you please help me with this?

.things {
  &:focus {
    background-color: red;
  }
  &:hover {
    .thing-name {
      color: #9c27b0;
    }
  }
}

<mat-radio-button class="things" *ngFor="let thing of things" [value]="thing.name">
  <span class="thing-details">
      <img class="thing-image" [src]="thing.logo" [alt]="thing.name" />
      <h4 class="thing-name text-center mt-3 pt-3">{{ thing.name }}</h4>
      </span>
</mat-radio-button>

Answer 1

I just figured it out. the following code will both hide the circle of the radio button and changes the color of another element on its selection

::ng-deep.mat-radio-button.mat-accent.mat-radio-checked {
  span .thing-name {
    border: 1px solid #ffffff !important;
    background-color: #28a745 !important;
  }
}

// the bellow are for deleting the circle from the radio buttons
::ng-deep .mat-radio-button .mat-radio-container {
  width: 0;
}
::ng-deep .mat-radio-container .mat-radio-outer-circle,
::ng-deep .mat-radio-container .mat-radio-inner-circle {
  border: none;
  width: 0;
}