Slider Border Radius + general Card stylings not working

[besosobe]

Hello, currently i styled my card exactly like i wanted it to be except for the border radius of the Slider. I cant get the code to work together, its either card styling or border radius.
For the radius i got this lines:

card_mod:
  style:
    mushroom-light-brightness-control$:
      mushroom-slider$: |
        .slider {
          border-radius: 20px !important;
        }

Which looks like this:

And for the general styling of the card i got this:

card_mod:
  style: |
    ha-card {
      font-family: "Helvetica";
      --card-primary-font-size: 12px;
      --card-secondary-font-size: 12px;
      --card-primary-font-weight: bold;
      --card-secondary-color: rgba(150,150,150,1);
      height: 57px !important;
      --ha-card-background: rgba(25,25,25,1);
      border-radius: 35px;
      --ha-card-border-width: 0px 
    }

looks like this:

But i cant get these codes to work together, there is just not enough knowledge on my side. Any help for this?