cb mushroom-light-card

type: vertical-stack
cards:
  - type: markdown
    content: >-
      Making a custom:button-card look like a Mushroom Light Card
      (@fredrik_persson_)
    card_mod:
      style: |
        ha-markdown {
          padding: 0 0 0 0 !important;
        }
        ha-card {
         background-color: transparent;
         border: none;
        }
  - type: custom:mushroom-light-card
    entity: light.bedroom_lights
    show_brightness_control: true
  - type: custom:button-card
    entity: light.bedroom_lights
    show_state: true
    state_display: |
      [[[
          if (entity.state === 'on')
            return Math.round(entity.attributes.brightness / 255 * 100) + "%"
          else
            return "Off"
      ]]]
    styles:
      grid:
        - grid-template-areas: '"i n" "i s" "slider slider"'
        - grid-template-rows: 1fr 1fr
        - grid-template-columns: min-content 1fr
        - column-gap: 10px
        - row-gap: 4px
      card:
        - height: 100%
        - padding: 1rem
      name:
        - align-self: end
        - justify-self: start
        - font-weight: 500
        - font-size: 14px
      state:
        - align-self: start
        - justify-self: start
        - font-weight: 400
        - font-size: 12px
        - color: '#9b9b9b'
      img_cell:
        - background: '#2c2c2c'
        - height: 42px
        - width: 42px
        - border-radius: 25px
      icon:
        - color: '#6f6f6f'
        - height: 21px
        - width: 21px
      custom_fields:
        slider:
          - padding: 8px 0
    state:
      - value: 'on'
        styles:
          img_cell:
            - background: '#493416'
          icon:
            - color: '#ff9800'
    hold_action:
      action: more-info
    custom_fields:
      slider:
        card:
          type: custom:my-slider-v2
          entity: light.bedroom_lights
          showMin: true
          styles:
            card:
              - background: none
            container:
              - border-radius: 10px
              - color: yellow
              - overflow: hidden
              - height: 42px
            track:
              - background: |
                  [[[
                    if (entity.state == "on"){
                      return '#493416';
                    } else {
                      return '#2c2c2c';
                    }
                  ]]]
              - border-radius: 10px
            progress:
              - background: |
                  [[[
                    if (entity.state == "on"){
                      return '#ff9800';
                    } else {
                      return '#343537';
                    }
                  ]]]
              - border-radius: 0px
            thumb:
              - background: '#6f6f6f'
              - display: none
  - type: custom:button-card
    entity: null
    show_state: true
    name: This one is using some numbers but not all work right
    icon: |
      [[[
        var vol = parseFloat(states["number.volume"].state);
        if (vol == 0) return 'mdi:volume-mute';
        else if (vol < 33) return 'mdi:volume-low';
        else if (vol < 66) return 'mdi:volume-medium';
        else return 'mdi:volume-high';
      ]]]
    state_display: |
      [[[
          return Math.round(states["number.volume"].state) + "%"

      ]]]
    styles:
      grid:
        - grid-template-areas: '"i n" "i s" "slider slider"'
        - grid-template-rows: 1fr 1fr
        - grid-template-columns: min-content 1fr
        - column-gap: 12px
        - row-gap: 4px
      card:
        - height: 100%
        - padding: 1rem
      name:
        - align-self: end
        - justify-self: start
        - font-weight: bold
        - font-size: 14px
      state:
        - align-self: start
        - justify-self: start
        - font-weight: bolder
        - font-size: 12px
        - color: '#9b9b9b'
      img_cell:
        - background: '#493416'
        - height: 42px
        - width: 42px
        - border-radius: 25px
      icon:
        - color: '#ff9800'
        - height: 21px
        - width: 21px
      custom_fields:
        slider:
          - padding: 8px 0
    hold_action:
      action: none
    custom_fields:
      slider:
        card:
          type: custom:my-slider-v2
          entity: number.volume
          showMin: true
          styles:
            card:
              - background: none
            container:
              - border-radius: 10px
              - color: yellow
              - overflow: hidden
              - height: 42px
            track:
              - background: '#493416'
              - border-radius: 10px
            progress:
              - background: '#ff9800'
              - border-radius: 0px
            thumb:
              - background: '#6f6f6f'
              - display: none