Mushroom Inspiration!

Share your Projects! Dashboards & Frontend
260

More button-card than Mushroom but still thought I’d share here: a minimalistic card for controlling Chromecast with Google TV (kind of like the remote that comes with it), using the Android TV Remote integration. On that page they show a dashboard example, but I thought it looked terrible. I prefer my iteration :slight_smile:

Light mode, off
Light mode, off672×587 47.9 KB

Dark mode, on, Spotify
Dark mode, on, Spotify681×600 50 KB

The logos in the bottom row are shortcuts to open apps, and will highlight when the app is currently active. To add your own shortcuts to open apps, have a look at this thread.

Code 
type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-entity-card
    name: Chromecast 4K • Remote
    icon: mdi:remote-tv
    entity: remote.chromecast_4k
    tap_action:
      action: more-info
    icon_color: red
  - type: custom:layout-card
    layout_type: custom:grid-layout
    cards:
      - type: custom:button-card
        icon: mdi:arrow-left-bottom
        tap_action:
          action: call-service
          service: remote.send_command
          service_data:
            entity_id: remote.chromecast_4k
            command: BACK
        show_icon: true
        show_name: false
        styles:
          card:
            - box-shadow: none
            - padding: 0px
            - background-color: rgba(var(--cstm-rgb-on-secondary),0.05)
            - border-radius: var(--mush-control-border-radius)
            - place-self: center
            - height: var(--mush-control-height)
          icon:
            - color: rgba(var(--cstm-rgb-on-secondary),0.9)
        size: 20px
        view_layout:
          grid-area: item1
      - type: custom:button-card
        icon: mdi:arrow-up
        tap_action:
          action: call-service
          service: remote.send_command
          service_data:
            entity_id: remote.chromecast_4k
            command: DPAD_UP
        hold_action:
          action: call-service
          service: remote.send_command
          service_data:
            entity_id: remote.chromecast_4k
            command: DPAD_UP
            num_repeats: 1
            delay_secs: 0.5
        show_icon: true
        show_name: false
        styles:
          card:
            - box-shadow: none
            - padding: 0px
            - background-color: rgba(var(--cstm-rgb-on-secondary),0.05)
            - border-radius: var(--mush-control-border-radius)
            - place-self: center
            - height: var(--mush-control-height)
          icon:
            - color: rgba(var(--cstm-rgb-on-secondary),0.9)
        size: 20px
        view_layout:
          grid-area: item2
      - type: custom:button-card
        icon: mdi:home
        tap_action:
          action: call-service
          service: remote.send_command
          service_data:
            entity_id: remote.chromecast_4k
            command: HOME
        show_icon: true
        show_name: false
        styles:
          card:
            - box-shadow: none
            - padding: 0px
            - background-color: rgba(var(--cstm-rgb-on-secondary),0.05)
            - border-radius: var(--mush-control-border-radius)
            - place-self: center
            - height: var(--mush-control-height)
          icon:
            - color: rgba(var(--cstm-rgb-on-secondary),0.9)
        size: 20px
        view_layout:
          grid-area: item3
      - type: custom:button-card
        icon: mdi:arrow-left
        tap_action:
          action: call-service
          service: remote.send_command
          service_data:
            entity_id: remote.chromecast_4k
            command: DPAD_LEFT
        hold_action:
          action: call-service
          service: remote.send_command
          service_data:
            entity_id: remote.chromecast_4k
            command: DPAD_LEFT
            num_repeats: 1
            delay_secs: 0.5
        show_icon: true
        show_name: false
        styles:
          card:
            - box-shadow: none
            - padding: 0px
            - background-color: rgba(var(--cstm-rgb-on-secondary),0.05)
            - border-radius: var(--mush-control-border-radius)
            - place-self: center
            - height: var(--mush-control-height)
          icon:
            - color: rgba(var(--cstm-rgb-on-secondary),0.9)
        size: 20px
        view_layout:
          grid-area: item4
      - type: custom:button-card
        icon: mdi:cursor-pointer
        tap_action:
          action: call-service
          service: remote.send_command
          service_data:
            entity_id: remote.chromecast_4k
            command: DPAD_CENTER
        hold_action:
          action: call-service
          service: remote.send_command
          service_data:
            entity_id: remote.chromecast_4k
            command: DPAD_CENTER
            num_repeats: 1
            delay_secs: 0.5
        show_icon: true
        show_name: false
        styles:
          card:
            - box-shadow: none
            - padding: 0px
            - background-color: rgba(var(--cstm-rgb-on-secondary),0.05)
            - border-radius: var(--mush-control-border-radius)
            - place-self: center
            - height: var(--mush-control-height)
          icon:
            - color: rgba(var(--cstm-rgb-on-secondary),0.9)
        size: 20px
        view_layout:
          grid-area: item5
      - type: custom:button-card
        icon: mdi:arrow-right
        tap_action:
          action: call-service
          service: remote.send_command
          service_data:
            entity_id: remote.chromecast_4k
            command: DPAD_RIGHT
        hold_action:
          action: call-service
          service: remote.send_command
          service_data:
            entity_id: remote.chromecast_4k
            command: DPAD_RIGHT
            num_repeats: 1
            delay_secs: 0.5
        show_icon: true
        show_name: false
        styles:
          card:
            - box-shadow: none
            - padding: 0px
            - background-color: rgba(var(--cstm-rgb-on-secondary),0.05)
            - border-radius: var(--mush-control-border-radius)
            - place-self: center
            - height: var(--mush-control-height)
          icon:
            - color: rgba(var(--cstm-rgb-on-secondary),0.9)
        size: 20px
        view_layout:
          grid-area: item6
      - type: custom:button-card
        entity: media_player.tv
        icon: |
          [[[ if (entity.attributes.is_volume_muted) {
                return 'mdi:volume-off'
              } else {
                return 'mdi:volume-high'
              }
          ]]]
        tap_action:
          action: call-service
          service: script.samsung_tv_volume_mute
        show_icon: true
        show_name: false
        styles:
          card:
            - box-shadow: none
            - padding: 0px
            - background-color: rgba(var(--cstm-rgb-on-secondary),0.05)
            - border-radius: var(--mush-control-border-radius)
            - place-self: center
            - height: var(--mush-control-height)
          icon:
            - color: rgba(var(--cstm-rgb-on-secondary),0.9)
        size: 20px
        view_layout:
          grid-area: item7
      - type: custom:button-card
        icon: mdi:arrow-down
        tap_action:
          action: call-service
          service: remote.send_command
          service_data:
            entity_id: remote.chromecast_4k
            command: DPAD_DOWN
        hold_action:
          action: call-service
          service: remote.send_command
          service_data:
            entity_id: remote.chromecast_4k
            command: DPAD_DOWN
            num_repeats: 1
            delay_secs: 0.5
        show_icon: true
        show_name: false
        styles:
          card:
            - box-shadow: none
            - padding: 0px
            - background-color: rgba(var(--cstm-rgb-on-secondary),0.05)
            - border-radius: var(--mush-control-border-radius)
            - place-self: center
            - height: var(--mush-control-height)
          icon:
            - color: rgba(var(--cstm-rgb-on-secondary),0.9)
        size: 20px
        view_layout:
          grid-area: item8
      - type: custom:button-card
        entity: remote.chromecast_4k
        icon: mdi:youtube
        tap_action:
          action: call-service
          service: remote.turn_on
          service_data:
            entity_id: remote.chromecast_4k
            activity: https://www.youtube.com
        show_icon: true
        show_name: false
        styles:
          card:
            - box-shadow: none
            - padding: 0px
            - background-color: |
                [[[ if (entity.attributes.current_activity == 'com.youtube') {
                  return 'rgba(var(--mush-rgb-red),0.3)'
                } else {
                  return 'rgba(var(--cstm-rgb-on-secondary),0.05)'
                } ]]]
            - border-radius: var(--mush-control-border-radius)
            - place-self: center
            - height: var(--mush-control-height)
          icon:
            - color: rgba(var(--mush-rgb-red),0.9)
        size: 20px
        view_layout:
          grid-area: item9
      - type: custom:button-card
        entity: remote.chromecast_4k
        icon: mdi:netflix
        tap_action:
          action: call-service
          service: remote.turn_on
          service_data:
            entity_id: remote.chromecast_4k
            activity: netflix://
        show_icon: true
        show_name: false
        styles:
          card:
            - box-shadow: none
            - padding: 0px
            - background-color: >
                [[[ if (entity.attributes.current_activity ==
                'com.netflix.ninja') {
                  return 'rgba(var(--mush-rgb-red),0.3)'
                } else {
                  return 'rgba(var(--cstm-rgb-on-secondary),0.05)'
                } ]]]
            - border-radius: var(--mush-control-border-radius)
            - place-self: center
            - height: var(--mush-control-height)
          icon:
            - color: rgba(var(--mush-rgb-red),0.9)
        size: 20px
        view_layout:
          grid-area: item10
      - type: custom:button-card
        entity: remote.chromecast_4k
        entity_picture: https://upload.wikimedia.org/wikipedia/commons/a/ad/AppleTVLogo.svg
        show_entity_picture: true
        tap_action:
          action: call-service
          service: remote.turn_on
          service_data:
            entity_id: remote.chromecast_4k
            activity: https://tv.apple.com
        show_icon: true
        show_name: false
        styles:
          card:
            - box-shadow: none
            - padding: 0px
            - background-color: >
                [[[ if (entity.attributes.current_activity ==
                'com.apple.atve.androidtv.appletv')  {
                  return 'rgba(var(--cstm-rgb-on-secondary),0.2)'
                } else {
                  return 'rgba(var(--cstm-rgb-on-secondary),0.05)'
                } ]]]
            - border-radius: var(--mush-control-border-radius)
            - place-self: center
            - height: var(--mush-control-height)
          icon:
            - color: rgba(var(--cstm-rgb-on-secondary),0.9)
        size: 22px
        view_layout:
          grid-area: item11
      - type: custom:button-card
        entity: remote.chromecast_4k
        icon: mdi:spotify
        tap_action:
          action: call-service
          service: remote.turn_on
          service_data:
            entity_id: remote.chromecast_4k
            activity: spotify://
        show_icon: true
        show_name: false
        styles:
          card:
            - box-shadow: none
            - padding: 0px
            - background-color: >
                [[[ if (entity.attributes.current_activity ==
                'com.spotify.tv.android')  {
                  return 'rgba(var(--mush-rgb-green),0.2)'
                } else {
                  return 'rgba(var(--cstm-rgb-on-secondary),0.05)'
                } ]]]
            - border-radius: var(--mush-control-border-radius)
            - place-self: center
            - height: var(--mush-control-height)
          icon:
            - color: rgba(var(--mush-rgb-green),0.9)
        size: 20px
        view_layout:
          grid-area: item12
    layout:
      grid-template-columns: 1fr 1fr 1fr 1fr
      grid-template-rows: min-content
      grid-template-areas: |
        ". item2 . item1"
        "item4 item5 item6 item3"
        ". item8 . item7"
        "item9 item10 item11 item12"
      gap: 0px
      margin: '-4px 8px 4px'

You’ll see I use a custom variable, var(--cstm-rgb-on-secondary). You can set it in your theme:

mode:
    light:
        cstm-rgb-on-secondary: 51, 51, 51
    dark:
        cstm-rgb-on-secondary: 221, 221, 221
15 Likes
261

That remote looks very good.
But it’s not working with me, this is what is get:
remote

Repaced all the remote.yourremote with my remote.

Thanks

262

Looks like the buttons are there but with 1px height or something. Please check your values for var(--mush-control-height) and the other mushroom theme variables, or replace them with e.g. 14 px in the button-cards.

263

You should check out the Firemote Card. Instead of having a card that’s “Kind of like the remote that comes with it”, you can have a card that actually IS the remote that comes with it. Also supports Shield, Fire TV and Apple TV. It’s great combined with a popup card to save space on the dashboard.

1 Like
264

This is what it looks like, copied it from your code.

  - type: custom:layout-card
    layout_type: custom:grid-layout
    cards:
      - type: custom:button-card
        icon: mdi:arrow-left-bottom
        tap_action:
          action: call-service
          service: remote.send_command
          service_data:
            entity_id: remote.mibox4
            command: BACK
        show_icon: true
        show_name: false
        styles:
          card:
            - box-shadow: none
            - padding: 0px
            - background-color: rgba(var(--cstm-rgb-on-secondary),0.05)
            - border-radius: var(--mush-control-border-radius)
            - place-self: center
            - height: var(--mush-control-height)
          icon:
            - color: rgba(var(--cstm-rgb-on-secondary),0.9)
        size: 20px
        view_layout:
          grid-area: item1

The problem above what fixed by changing the following:

        - border-radius: 14px
        - height: 42px

Solutions mentioned by ArenaCloser in a PB, thanks again! :slight_smile:

There is only one thing that is not working with me.
When i open Netflix and start watchting, the netflix logo on the remote does not get colored or something, any idea why is that?

1 Like
265

When Netflix is running, check the value of the current_activity attribute of your remote. For me it’s com.netflix.ninja, maybe for you it’s different. You can get the button to light up by editing the if-statement:

266

Continuing the fun with more cards. Some printer cards have already been shared here, but I’ll just add to the variety with another one. Largely inspired by this post, it uses the custom bar-card.

1
1674×533 67.4 KB

2
2689×542 68.9 KB

Version with vertical bars 
type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Epson WF2540
    entity: sensor.epson_wf_2540_series
    secondary: |-
      {% if is_state('sensor.epson_wf_2540_series', 'idle') %}  
        Aan • Inactief
      {% elif is_state('sensor.epson_wf_2540_series', 'printing') %}   
        Aan • Printen...
      {% elif is_state('sensor.epson_wf_2540_series', 'stopped') %}   
        Aan • Gestopt
      {% else %}
        Uit
      {% endif %}
    icon: mdi:printer
    icon_color: >-
      {{ "teal" if is_state(entity, "idle") or is_state(entity, "printing") else
      "disabled" }}
    tap_action:
      action: more-info
    hold_action:
      action: none
    card_mod:
      style: |
        ha-card {
         background: none;
          --ha-card-box-shadow: 0px;
        }
  - type: custom:bar-card
    direction: up
    entities:
      - color: MediumTurquoise
        entity: sensor.epson_wf_2540_series_cyan_ink
        name: C
      - color: Gold
        entity: sensor.epson_wf_2540_series_yellow_ink
        name: 'Y'
      - color: MediumOrchid
        entity: sensor.epson_wf_2540_series_magenta_ink
        name: M
      - color: rgb(var(--cstm-rgb-on))
        entity: sensor.epson_wf_2540_series_black_ink
        name: B
    height: 120px
    positions:
      icon: 'off'
      value: outside
      name: outside
    target: 0
    stack: horizontal 
    card_mod:
      style: |
        ha-card {
          --bar-card-border-radius: 14px;
          margin: -12px -2px -24px -2px;
          box-shadow: none;
        }
        bar-card-name {
          font-size: 12px;
        }
        bar-card-value {
          font-size: 12px
        }

I’m not such a big fan of the thick bars though. After playing around I came up with this compact version with thin horizontal lines, I love it.

3

Version with horizontal bars 
type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Epson WF2540
    entity: sensor.epson_wf_2540_series
    secondary: |-
      {% if is_state('sensor.epson_wf_2540_series', 'idle') %}  
        Aan • Inactief
      {% elif is_state('sensor.epson_wf_2540_series', 'printing') %}   
        Aan • Printen...
      {% elif is_state('sensor.epson_wf_2540_series', 'stopped') %}   
        Aan • Gestopt
      {% else %}
        Uit
      {% endif %}
    icon: mdi:printer
    icon_color: >-
      {{ "teal" if is_state(entity, "idle") or is_state(entity, "printing") else
      "disabled" }}
    tap_action:
      action: more-info
    hold_action:
      action: none
    card_mod:
      style: |
        ha-card {
         background: none;
          --ha-card-box-shadow: 0px;
        }
  - type: custom:bar-card
    direction: right
    entities:
      - color: MediumTurquoise
        entity: sensor.epson_wf_2540_series_cyan_ink
        name: C
      - color: Gold
        entity: sensor.epson_wf_2540_series_yellow_ink
        name: 'Y'
      - color: MediumOrchid
        entity: sensor.epson_wf_2540_series_magenta_ink
        name: M
      - color: rgb(var(--cstm-rgb-on))
        entity: sensor.epson_wf_2540_series_black_ink
        name: B
    height: 8px
    positions:
      icon: 'off'
      value: 'off'
      name: 'off'
    target: 0
    stack: vertical
    card_mod:
      style: |
        ha-card {
          --bar-card-border-radius: 30px;
          margin: -12px -2px -8px -2px;
          box-shadow: none;
        }

For the black ink, I’m using a custom theme variable again that returns white color in dark mode, var(--cstm-rgb-on):

mode:
    light:
        cstm-rgb-on: 30, 30, 30
    dark:
        cstm-rgb-on: 255, 255, 255
13 Likes
267

hi, which font did you use?

268

Would you like to share how this card ended upp in your setup. I guess your version might be better than mine hacked up thing ofacard.

And would you like to describe what values/sensors you are using.
It is easy to mix and choose the wrong sensor, since there are
Watt, watthours, daily, etc… for all enteties…

269

Below is how my homepage dash on mobile looks like. It just has the bare essentials. All rooms etc (except few exceptions) are on other views (0 for floor 0 etc)

What sensors to use is difficult to say an up to you. In some cases I just want to see current power consumption in watt and sometimes (for instance counting solar power for that day) I use KwH. Generally you will have current power consumption available but KwH not. You will have to create a custom sensor in that case

Screenshot_20231112-103700
Screenshot_20231112-1037001075×2393 99.1 KB

Screenshot_20231112-103846
Screenshot_20231112-1038461075×2393 98.9 KB

270

f1 https://imjustcreative.com/download-f1-fonts-formula-1-fonts/2021/09/16

1 Like
272

A thousand thanks! What did you use for the icons instead? I can’t find these here like for example “fapro:fork-knife-duotone”

273

For me it is also com.netflix.ninja.

Maybe we have to hard code something again?

Schermafbeelding 2023-11-13 191848
Schermafbeelding 2023-11-13 191848641×534 17.1 KB

274

Don’t you use the play/pause and volume buttons with this remote?

275

Make default Lovelace card to Mushroom design

Using card mod theme.

  1. Define default color variable in your theme
  mush-rgb-red: 244, 67, 54
  mush-rgb-pink: 233, 30, 99
  mush-rgb-purple: 156, 39, 176
  mush-rgb-deep-purple: 103, 58, 183
  mush-rgb-indigo: 63, 81, 181
  mush-rgb-blue: 33, 150, 243
  mush-rgb-light-blue: 3, 169, 244
  mush-rgb-cyan: 0, 188, 212
  mush-rgb-teal: 0, 150, 136
  mush-rgb-green: 76, 175, 80
  mush-rgb-light-green: 139, 195, 74
  mush-rgb-lime: 205, 220, 57
  mush-rgb-yellow: 255, 235, 59
  mush-rgb-amber: 255, 193, 7
  mush-rgb-orange: 255, 152, 0
  mush-rgb-deep-orange: 255, 87, 34
  mush-rgb-brown: 121, 85, 72
  mush-rgb-grey: 158, 158, 158
  mush-rgb-blue-grey: 96, 125, 139
  mush-rgb-black: 0, 0, 0
  mush-rgb-white: 255, 255, 255

Default lovelace glance card
image

    card-mod-glance-yaml: |
        state-badge:
          $:
            ha-state-icon:
              $: |
                ha-icon {
                  display: block;
                }
                ha-icon, ha-svg-icon {
                   height: 22px !important;
                   position: relative;
                   top: -1px;
                }
                 @media screen and (max-width: 800px) {
                    ha-icon, ha-svg-icon {
                      top: 2px !important;
                    }
                  }
            
        .: |
          
          .name {
              font-weight: bold;
            }
            
          state-badge {
            {% if is_state(config.entity, 'on') %}
            color: rgba(var(--mush-rgb-green), 1);
            background: rgba(var(--mush-rgb-green), .2);
            {% elif is_state(config.entity, 'off') %}
            color: rgba(var(--mush-rgb-red), 1);
            background: rgba(var(--mush-rgb-red), .2);
            {% else %}
            color: rgba(var(--mush-rgb-blue), 1);
            background: rgba(var(--mush-rgb-blue), .2);
            {% endif %}
            margin: 15px 0px;
            --mdc-icon-size: 22px;
          }
          
          state-badge + div {
            font-weight: bold;
            font-size: 12px;
            color: var(--secondary-text-color)
           }

Default lovelace entities card
image

    card-mod-row-yaml: |
        
        hui-generic-entity-row:
          $:
            state-badge:
              $:
                ha-state-icon:
                  $: |
                    ha-icon {
                      display: block;
                    }
                    ha-icon, ha-svg-icon {
                       height: 22px !important;
                       position: relative;
                       top: -1px;
                    }
                     @media screen and (max-width: 800px) {
                        ha-icon, ha-svg-icon {
                          top: 2px !important;
                        }
                      }
            .: |
              state-badge {
                {% if is_state(config.entity, 'on') %}
                color: rgba(var(--mush-rgb-green), 1);
                background: rgba(var(--mush-rgb-green), .2);
                {% elif is_state(config.entity, 'off') %}
                color: rgba(var(--mush-rgb-red), 1);
                background: rgba(var(--mush-rgb-red), .2);
                {% else %}
                color: rgba(var(--mush-rgb-blue), 1);
                background: rgba(var(--mush-rgb-blue), .2);
                {% endif %}
                background-size: cover;
                background-position: center;
                border-radius: 100% !important;
                margin: 0 15px 0 0;
                --mdc-icon-size: 22px;
              }
              
              .secondary {
                  overflow: unset !important;
                  white-space: normal !important;
                  font-weight:400 !important;
                  font-size: 12px !important;
                  font-weight: bold !important;
              }
        
              .info, .value {
                margin-left: 0px !important;
                font-weight: bold;
                padding: 16px 0;
                position: relative;
              }

Default HA more info dialog
image

    card-mod-more-info-yaml: |
        ha-more-info-info:
          $:
            state-card-display,state-card-button,state-card-input_button,state-card-input_number,state-card-media_player,state-card-input_select:
              $:
                .: |
                    .state {
                        font-weight: bold;
                        }
                state-info:
                  $: 
                    state-badge:
                      $:
                        ha-state-icon:
                         $: |
                            ha-icon {
                              display: block;
                            }
                            ha-icon, ha-svg-icon {
                               height: 22px !important;
                               position: relative;
                               top: -1px;
                                color: rgba(var(--mush-rgb-blue), 1) !important;
                            }
                             @media screen and (max-width: 800px) {
                                ha-icon, ha-svg-icon {
                                  top: 2px !important;
                                }
                              }
                    .: |
                        state-badge {
                            color: rgba(var(--mush-rgb-blue), 1) !important;
                            background: rgba(var(--mush-rgb-blue), .2);
                            margin: 0 15px 0 0;
                            background-size: contain;
                            border-radius: 100% !important;
                            --mdc-icon-size: 22px;
                          }
                          
                          .time-ago {
                              overflow: unset !important;
                              white-space: normal !important;
                              font-weight:400 !important;
                              font-size: 12px !important;
                              font-weight: bold !important;
                          }
                    
                          .info, .state {
                            margin-left: 0px !important;
                            font-weight: bold;
                            padding: 8px 0;
                            position: relative;
                          }
7 Likes
276

Those are paid Fontawesome icons.

277

Mushroom inspired Energy-Card (Electricity, Water, Gas)

Video of the Card in action

image
image836×675 55.2 KB

image
image839×725 62.5 KB

image
image839×620 28 KB

image
image836×654 26 KB

image
image836×632 26 KB

A compact card with tons of information about Electrical-Energy, Water and Gas-Consumption per Day, Month, Week and Year.

This card uses the following components:

  • Stack in a card
  • ApexChart-card
  • History-Explorer-Card
  • Mushroom-Cards
  • Button-card
  • Tabbed-card
  • Browser-Mod (for the Pop-Up-Card)

Can´t Paste the YAML-Code here - too long
YAML-Code for the Card
YAML-Code for the Pop-Up-Card

39 Likes
278

I like the use of the icons in the Sankey chart! Will add those to mine too.

1 Like
279

hi, this is a great solution! but I have some display problems with some lights.

  1. those that are simple buttons
  2. some are also the same but are displayed in a different way
    Schermata 2023-11-26 alle 20.55.12
    Schermata 2023-11-26 alle 20.55.121088×1122 55 KB
280

Remove the margin from the 1st button. For some reason it doesnt act nice in pop-up cards :slight_smile:

So this:

    mushroom-button:nth-child(2)$: |
      :host {
        z-index: 1;
        margin-right: 5px !important;

Instead just this:

    mushroom-button:nth-child(2)$: |
      :host {
        z-index: 1;