Here is an explanation of how these symbols work.
$ is used when we want to access the shadow-root of an object. like this here:
the .shape is within the shadow-root of mushroom-shape-icon so to access it and modify it, we would write this:
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: red !important;
}
you cant just write this, as this wont access the element through the shadow root.
card_mod:
style: |
.shape {
background: red !important;
}
the | is just written to denote that you are done with going through elements and that you will now list your final element. so if i have stacked with multiple shadow-roots. it would look like this:
card_mod:
style:
mushroom-light-brightness-control$:
mushroom-slider$:
.container:
.slider: |
.slider-track-active {
background-color: red !important;
}
Notice how the last 2 in the stack dont have a $? thats because those elements dont have a shadow-root.
Ok. now that you hopefully understand how those symbols work we can look at your specific example.
card mod has a built in fuction to let you reset yourself back to style: | which is what you need for both ha-card { and mushroom-shape-avatar {
it is using .: if you use it at the right indentation (same line as anything you first place under style:
so like this:
card_mod:
style:
mushroom-shape-avatar$: |
.container:before {
content: "";
height: 100%;
width: 100%;
background: radial-gradient(rgb(var(--rgb-white)) 60%, transparent calc(60% + 1px)), conic-gradient(rgb(var(--rgb-green)) {{ states('sensor.sm_s991b_battery_level') }}% 0%, transparent 0% 100%);
border-radius: var(--icon-border-radius);
position: absolute;
-webkit-mask-image: radial-gradient(circle calc(var(--icon-size) / 2 - 2px) at 50% 50%, transparent 100%, black 0);
}
.: |
mushroom-shape-avatar {
{{ 'filter: grayscale(100%);' if is_state(config.entity, 'not_home') }}
}
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
note where the .: starts is the exact same place as where you initial mushroom-shape-avatar$: | starts. basically treat writing .: | as writting a whole new style: | again.
you can also use it like this (this gets more complex, so feel free to ignore if you dont fully understand it 
):
card_mod:
style:
mushroom-state-info$:
.container: |
.primary {
--primary-text-color: #001eff;
}
.secondary {
--secondary-text-color: #00ddff;
}
.: |
.container {
display: flex;
flex-direction: row !important;
align-items: baseline;
gap: 10px;
}
here my .: doesnt start at the same indentation as the first entry under style. it starts at the same entry as under when i declared .container: | reason being is if i wanted to access stuff under .container (like .primary and .secondary) then i cant also access .container (there are other ways to do it, but for illustration purposes this is true), so i put the .: | underneath the mushroom-state-info$: | as i still want to be in the shadow-root of the element as otherwise i cant access .container at all. then i just style the container the way i want.
