Increasing height and padding of horizontal-buttons-stack - Decreasing button spacing

[fcassata]

Hi, need a little help if anyone has time, trying to give the bottom bar a little more breathing room and tried various methods via styles, but can't get the gradient background to fill out the increased height, so I'm not hitting the right selector or method for this. I've been able to make it look right though, by choosing to hide the gradient, and repeat a whole lot of CSS, that makes me think I'm doing it wrong, is there a way to simplify?

Also looking for a way to change the button spacing :)

type: custom:bubble-card
card_type: horizontal-buttons-stack
1_link: /home
1_icon: mdi:home-assistant
2_link: '#lists'
2_icon: mdi:list-status
3_link: '#ctrl'
3_icon: mdi:cog-outline
highlight_current_view: true
hide_gradient: true
styles: |
  ha-card {
    border-radius: 0px !important;
    padding-top: 20px !important;
    padding-bottom: 80px !important;
    bottom: 0 !important;
    width: calc( 100% + 36px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: rgba(0,0,0, .7) !important;
  }
  div.bubble-background-color {
    background-color: #055 !important;
  }
  .home>* {
    border-radius: 10px 0px 0px 10px !important;  
  } 
  .lists>* {
    border-radius: 0px !important;
  }  
  .ctrl>* {
    border-radius: 0px 10px 10px 0px !important;  
  }   

[fcassata]

Regarding the button spacing, I can see that the x offset is calculated behind the scenes, I can decrease the spacing between the first two with a negative margin, but then for the next it would have to be double, and so on, so not a great way. I've not been able to find anything in the styles.ts that I can use either, but I may be missing it!