Negative chip spacing not working

[GTunney]

My Home Assistant version: 2024.11.2

My lovelace configuration method (GUI or yaml): yaml

What I am doing: Trying to move chip closer together

What I expected to happen: When using negative spacing chip card move closer to other chip card

What happened instead: chip card does not move.

Minimal steps to reproduce: change --chip-spacing: -10px; on line 104

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Bathroom
    secondary: >-
      {{ states('sensor.bathroom_temperature') | round (1) }}°C - {{
      states('sensor.bathroom_humidity') }}%
    icon: none
    entity: light.bathroom_niche_lights
    hold_action:
      action: toggle
    tap_action:
      action: navigate
      navigation_path: /lovelace/bathroom
    icon_color: none
    fill_container: true
    layout: horizontal
    multiline_secondary: false
    card_mod:
      style:
        mushroom-state-info$: |
          .primary {
            text-shadow: 0px 0px 5px black;
            --card-primary-font-weight: 350;
           --card-primary-color: white;
            --card-primary-font-size: 20px;
            align-items: end;
            margin-top: 175px;
            margin-left: -35px;
            inline-size: 180px;
            height: 25px;
          }
          .secondary {
            --card-secondary-font-size: 13px;
              text-shadow: 0px 0px 5px black;
           --card-secondary-color: white;
            --card-secondary-font-weight: 350;
              margin-top: -2px;
              margin-left: -35px;
          } 
        .: |
          ha-card {
            background: url('/local/images/areas/bathroom2.jpg') center !important;
            background-size: cover !important;
            background-blend-mode: overlay !important;
            background-position-y: 20px  !important;
            height: 220px !important;
            margin-left: -15px !important;
            margin-top: -70px !important;
          }
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        entity: fan.bathroom_fan
        icon: mdi:fan
        icon_color: "{{ 'grey' if states(config.entity) == 'off' else 'blue'}}"
        content: ""
        tap_action:
          action: toggle
        card_mod:
          style: |
            ha-card {
              border: none;}
      - type: template
        entity: light.bathroom_niche_lights
        icon: >-
          {{ 'mdi:lightbulb' if expand(area_entities('bathroom')) |
          selectattr('domain','eq','light') | selectattr('state','eq','on') |
          list | count > 0 else 'mdi:lightbulb-outline' }}
        icon_color: >
          {% set lights_in_bathroom = expand(area_entities('bathroom')) |
          selectattr('domain', 'eq', 'light') | list %} {{ 'orange' if
          lights_in_bathroom | selectattr('state', 'eq', 'on') | list | count >
          0 else 'grey' }}
        content: >-
          {{ expand(area_entities('bathroom')) |
          selectattr('domain','eq','light') | selectattr('state','eq','on') |
          list | count }}
        tap_action:
          action: call-service
          service: light.toggle
          target:
            area_id: bathroom
        hold_action:
          action: more-info
        card_mod:
          style: |
            ha-card {
              border: none;}  
    alignment: end
    card_mod:
      style:
        mushroom-template-chip:nth-child(1)$: |
          ha-state-icon {
           {{ 'animation: spin 1s linear infinite;' if is_state('fan.bathroom_fan', 'on') else 'animation: none;' }}
                   }
           @keyframes spin {
           100% { transform: rotate(360deg); }
           }  
        .: |
          ha-card {
           --chip-box-shadow: none;
           --chip-background: none;
           --chip-spacing: -10px;
            margin-top: -10px;
           
           } 
card_mod:
  style: |
    ha-card {
      height: 180px;
      width: 180px;
      margin-left: auto;
      margin-right: auto;
      {% if is_state('light.bathroom_niche_lights', 'on') %}
          #box-shadow: 0 0 20px rgba(245, 173, 66, 0.5);
          #border-radius: 10px;
          #background: rgba(245, 173, 66, 0.3);      {% endif %}
    }

Error messages from the browser console: None

---

By putting an X in the boxes ([]) below, I indicate that I:

• Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).

• Have made sure I am using the latest version of the plugin.

• Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.

• Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.