From 616e3e7f3950512123144f4669ac762f5b94d404 Mon Sep 17 00:00:00 2001
From: The0x539 <the0x539@gmail.com>
Date: Mon, 14 Oct 2024 13:48:33 -0500
Subject: [PATCH 01/14] Work around inner corner rounding errors

---
 themes/lcars.yaml | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/themes/lcars.yaml b/themes/lcars.yaml
index ec641b6..2e7beff 100755
--- a/themes/lcars.yaml
+++ b/themes/lcars.yaml
@@ -583,12 +583,18 @@
       ha-card::after,
       ha-card.type-thermostat > hui-card-features::before,
       ha-card.type-thermostat > hui-card-features::after {
+        /* The thickness of the rectangulaar portion that overlaps with the main border to hide rounding errors */
+        --extra-thickness: calc(0.1 * var(--lcars-inner-radius));
+
         position: absolute;
         width: var(--lcars-inner-radius);
         height: var(--lcars-inner-radius);
-        mask-size: var(--lcars-inner-radius);
-        mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none"> <path d="m 0,0 v 10 A 10,10 0 0 1 10,0" fill="black" /> </svg>');
-        scale: var(--corner-scale-x, 1) var(--corner-scale-y, 1);
+
+        margin: calc(-1 * var(--extra-thickness));
+        padding: var(--extra-thickness) 0 0 var(--extra-thickness);
+
+        mask-size: calc(var(--lcars-inner-radius) + var(--extra-thickness));
+        mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 11"><path d="M0,0 v11 h1 A10,10 0,0,1 11,1 V0" fill="red"/></svg>');
         z-index: 1;
       }
 
@@ -600,7 +606,7 @@
       /* top right & bottom right */
       ha-card::after {
         right: 0;
-        --corner-scale-x: -1;
+        scale: -1 1;
       }
 
       /* top left & top right */
@@ -619,7 +625,8 @@
         content: '';
         background: var(--lcars-card-bottom-color);
         bottom: 0;
-        --corner-scale-y: -1;
+        /* need to use different transform properties so they work together on the bottom right */
+        rotate: x 180deg;
       }
 
       /* thermostat-specific fixes */

From 492f6f71a5eb82e195f8d6771733ce76fcb19c00 Mon Sep 17 00:00:00 2001
From: The0x539 <the0x539@gmail.com>
Date: Mon, 14 Oct 2024 15:10:08 -0500
Subject: [PATCH 02/14] Clean up HTML cards and fix headings

---
 themes/lcars.yaml | 56 ++++++++++++++++++++---------------------------
 1 file changed, 24 insertions(+), 32 deletions(-)

diff --git a/themes/lcars.yaml b/themes/lcars.yaml
index 2e7beff..622dd85 100755
--- a/themes/lcars.yaml
+++ b/themes/lcars.yaml
@@ -340,16 +340,6 @@
         &.type-thermostat > .container {
           width: 100%;
         }
-
-        &.type-custom-html-card > div {
-          line-height: initial;
-          border-top: var(--lcars-horizontal-border);
-          padding: 0px 16px;
-
-          & > h1 {
-            margin: 0px;
-          }
-        }
       }
 
       /* ----------------------------------------------- */
@@ -394,14 +384,6 @@
       }
 
       ha-card:is(.middle-left, .middle-right, .middle-contained) {
-        &.type-custom-html-card > div {
-          line-height: initial;
-          padding: 0px 16px;
-
-          & > h1 {
-            margin: 0px;
-          }
-        }
       }
 
       /* ----------------------------------------------- */
@@ -530,16 +512,6 @@
         &.type-entity > .info {
           border-radius: 0px;
         }
-
-        &.type-custom-html-card > div {
-          line-height: initial;
-          border-top: var(--lcars-horizontal-border);
-          padding: 0px 16px;
-
-          & > h1 {
-            margin: 0px;
-          }
-        }
       }
 
       /* ----------------------------------------------- */
@@ -557,10 +529,6 @@
           padding-left: 6px;
           border-bottom-left-radius: var(--lcars-inner-radius);
         }
-
-        & .type-custom-html-card > div {
-          border-bottom-left-radius: var(--lcars-inner-radius);
-        }
       }
 
       /* ----------------Border on right---------------- */
@@ -1034,6 +1002,7 @@
       ha-card > .name {
         color: black;
       }
+      ha-card.type-heading p, /* temporary, see home-assistant/frontend #22322 */
       ha-card > * {
         font-family: var(--lcars-font) !important;
         --md-sys-color-primary: var(--lcars-ui-quaternary);
@@ -1101,6 +1070,29 @@
         background: var(--lcars-card-top-color);
       }
 
+      ha-card.type-heading .content {
+        font-size: 2em;
+        line-height: initial;
+        --mdc-icon-size: 1em;
+        font-weight: bold;
+
+        &.subtitle {
+          font-size: 1.5em;
+          font-weight: normal;
+        }
+      }
+
+      ha-card.type-custom-html-card > div,
+      ha-card.type-heading > .container {
+        line-height: initial;
+        padding: 0px 16px;
+
+        & > h1,
+        & > p {
+          margin: 0px;
+        }
+      }
+
       /* ----------------------------------------------- */
       /*                    MSD Styles                   */
       /* ----------------------------------------------- */

From 8a8e671356b648ae13494703457e05e0d13fe6c6 Mon Sep 17 00:00:00 2001
From: The0x539 <the0x539@gmail.com>
Date: Mon, 14 Oct 2024 16:29:31 -0500
Subject: [PATCH 03/14] Condense button styles

---
 themes/lcars.yaml | 291 +++++++++++++++++++---------------------------
 1 file changed, 121 insertions(+), 170 deletions(-)

diff --git a/themes/lcars.yaml b/themes/lcars.yaml
index 622dd85..6910c56 100755
--- a/themes/lcars.yaml
+++ b/themes/lcars.yaml
@@ -643,41 +643,46 @@
         flex-direction: column;
         flex-wrap: nowrap;
         justify-content: center;
-      }
-      ha-card.button-small > .more-info {
-        display: none;
-      }
-      ha-card.button-small > .content > #controls {
-        display: flex;
-        place-content: flex-start center;
-        position: relative;
-        padding: 0px;
-      }
-      ha-card.button-small > .content > #info {
-        text-align: right;
-        box-sizing: border-box;
-        width: 100%;
-        padding: 0px 6px 6px 0px;
-        margin-top: -24px;
-        position: relative;
-      }
-      ha-card.button-small > span {
-        box-sizing: border-box;
-        text-align: right;
-        width: 100%;
-        padding: 6px;
-        margin: unset;
-        position: absolute;
-        bottom: 0;
-      }
-      ha-card.button-small > span.state {
-        text-align: right;
-        width: 100%;
-        padding: 6px;
-        padding-bottom: 22px;
-        margin: unset;
-        position: absolute;
-        bottom: 0;
+
+        & > .more-info {
+          display: none;
+        }
+
+        & > .content > #controls {
+          display: flex;
+          place-content: flex-start center;
+          position: relative;
+          padding: 0px;
+        }
+
+        & > .content > #info {
+          text-align: right;
+          box-sizing: border-box;
+          width: 100%;
+          padding: 0px 6px 6px 0px;
+          margin-top: -24px;
+          position: relative;
+        }
+
+        & > span {
+          box-sizing: border-box;
+          text-align: right;
+          width: 100%;
+          padding: 6px;
+          margin: unset;
+          position: absolute;
+          bottom: 0;
+        }
+
+        & > span.state {
+          text-align: right;
+          width: 100%;
+          padding: 6px;
+          padding-bottom: 22px;
+          margin: unset;
+          position: absolute;
+          bottom: 0;
+        }
       }
 
       /* ----------------------------------------------- */
@@ -688,173 +693,119 @@
         --primary-text-color: black !important;
         --secondary-text-color: black !important;
       }
-      
+
       /* =============================================== */
-      /*                LEFT-SIDED BUTTONS               */
+      /*       BULLET/LOZENGE/CAPPED/BARREL BUTTONS      */
       /* =============================================== */
 
-      /* ----------------------------------------------- */
-      /*            Common Left Button Styles            */
-      /* ----------------------------------------------- */
       ha-card.button-lozenge-left,
       ha-card.button-bullet-left,
       ha-card.button-capped-left,
-      ha-card.button-barrel-left {
+      ha-card.button-barrel-left,
+      ha-card.button-lozenge-right,
+      ha-card.button-bullet-right,
+      ha-card.button-capped-right,
+      ha-card.button-barrel-right {
         text-transform: uppercase;
-        --primary-text-color: black !important;
-        --secondary-text-color: black !important;
+        --primary-text-color: black;
+        --secondary-text-color: black;
         min-height: 60px;
         display: flex;
-        align-items: flex-end;
         flex-direction: column-reverse;
+
+        & > ha-state-icon {
+          --mdc-icon-size: unset;
+          display: flex;
+          align-items: center;
+          width: var(--lcars-vertical-border);
+          height: 100% !important;
+          max-height: 100% !important;
+          border: 0px solid black;
+          position: absolute;
+          justify-content: center;
+          background: var(--lcars-card-top-color);
+        }
+
+        & > span {
+          width: 100%;
+          height: 100%;
+          display: flex;
+          align-items: flex-end;
+          margin-top: unset;
+          padding-bottom: 6px;
+          padding-inline: 6px;
+          position: absolute;
+
+          &.state {
+            padding-bottom: 45px;
+          }
+        }
       }
-      /* ----------------------------------------------- */
-      /*           Specific Left Button Styles           */
-      /* ----------------------------------------------- */
-      ha-card.button-lozenge-left {
-        /* Specific styles for lozenge-left */
-      }
-      ha-card.button-bullet-left {
-        border-radius: 0px var(--ha-card-border-radius) var(--ha-card-border-radius) 0px !important;
-      }
-      ha-card.button-capped-left {
-        border-radius: var(--ha-card-border-radius) 0px 0px var(--ha-card-border-radius) !important;
-      }
+
+      ha-card.button-lozenge-left,
+      ha-card.button-bullet-left,
+      ha-card.button-capped-left,
       ha-card.button-barrel-left {
-        border-radius: 0px 0px 0px 0px !important;
-      }
-      ha-card.button-lozenge-left > ha-state-icon,
-      ha-card.button-bullet-left > ha-state-icon,
-      ha-card.button-capped-left > ha-state-icon,
-      ha-card.button-barrel-left > ha-state-icon {
-        --mdc-icon-size: unset;
-        display: flex;
-        align-items: center;
-        left: 0;
-        width: var(--lcars-vertical-border);
-        height: 100% !important;
-        max-height: 100% !important;
-        border-right: black solid 6px;
-        position: absolute;
-        justify-content: center;
-        background: var(--lcars-card-top-color);
-      }
-      ha-card.button-lozenge-left > span,
-      ha-card.button-bullet-left > span {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        align-items: flex-end;
-        justify-content: flex-end;
-        margin-top: unset;
-        padding-right: 26px;
-        padding-bottom: 6px;
-        position: absolute;
-      }
-      ha-card.button-capped-left > span,
-      ha-card.button-barrel-left > span {
-        width: 100%;
-        height: 100%;
-        display: flex;
         align-items: flex-end;
-        justify-content: flex-end;
-        margin-top: unset;
-        padding-right: 6px;
-        padding-bottom: 6px;
-        position: absolute;
-      }
-      ha-card.button-lozenge-left > span.state, 
-      ha-card.button-bullet-left > span.state,
-      ha-card.button-capped-left > span.state,
-      ha-card.button-barrel-left > span.state {
-        padding-bottom: 45px;
-        color: black;
+    
+        /* Text against right end */
+        & > span {
+          justify-content: flex-end;
+        }
+
+        /* Icon against left end */
+        & > ha-state-icon {
+          left: 0;
+          border-right-width: 6px;
+        }
       }
-      
-      /* =============================================== */
-      /*               RIGHT-SIDED BUTTONS               */
-      /* =============================================== */
 
-      /* ----------------------------------------------- */
-      /*            Common Right Button Styles           */
-      /* ----------------------------------------------- */
       ha-card.button-lozenge-right,
       ha-card.button-bullet-right,
       ha-card.button-capped-right,
       ha-card.button-barrel-right {
-        text-transform: uppercase;
-        --primary-text-color: black !important;
-        --secondary-text-color: black !important;
-        min-height: 60px;
-        display: flex;
         align-items: flex-start;
-        flex-direction: column-reverse;
-      }
 
-      /* ----------------------------------------------- */
-      /*           Specific Right Button Styles          */
-      /* ----------------------------------------------- */
-      ha-card.button-lozenge-right {
-        /* Specific styles for lozenge-right */
-      }
+        /* Text against left end */
+        & > span {
+          justify-content: flex-start;
+        }
 
-      ha-card.button-bullet-right {
-        border-radius: var(--ha-card-border-radius) 0px 0px var(--ha-card-border-radius) !important;
+        /* Icon against right end */
+        & > ha-state-icon {
+          right: 0;
+          border-left-width: 6px;
+        }
       }
 
-      ha-card.button-capped-right {
-        border-radius: 0px var(--ha-card-border-radius) var(--ha-card-border-radius) 0px !important;
+      /* Square left corners */
+      ha-card.button-bullet-left,
+      ha-card.button-capped-right,
+      ha-card.button-barrel-left,
+      ha-card.button-barrel-right {
+        border-top-left-radius: 0px;
+        border-bottom-left-radius: 0px;
       }
 
+      /* Square right corners */
+      ha-card.button-bullet-right,
+      ha-card.button-capped-left,
+      ha-card.button-barrel-left,
       ha-card.button-barrel-right {
-        border-radius: 0px 0px 0px 0px !important;
+        border-top-right-radius: 0px;
+        border-bottom-right-radius: 0px;
       }
-      ha-card.button-lozenge-right > ha-state-icon,
-      ha-card.button-bullet-right > ha-state-icon,
-      ha-card.button-capped-right > ha-state-icon,
-      ha-card.button-barrel-right > ha-state-icon {
-        --mdc-icon-size: unset;
-        display: flex;
-        align-items: center;
-        right: 0;
-        width: var(--lcars-vertical-border);
-        height: 100% !important;
-        max-height: 100% !important;
-        border-left: black solid 6px;
-        position: absolute;
-        justify-content: center;
-        background: var(--lcars-card-top-color);
+
+      /* Text against rounded right end */
+      ha-card.button-lozenge-left > span,
+      ha-card.button-bullet-left > span {
+        padding-right: 26px;
       }
+
+      /* Text against rounded left end */
       ha-card.button-lozenge-right > span,
       ha-card.button-bullet-right > span {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        align-items: flex-end;
-        justify-content: flex-start;
-        margin-top: unset;
         padding-left: 26px;
-        padding-bottom: 6px;
-        position: absolute;
-      }
-      ha-card.button-capped-right > span,
-      ha-card.button-barrel-right > span {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        align-items: flex-end;
-        justify-content: flex-start;
-        margin-top: unset;
-        padding-left: 6px;
-        padding-bottom: 6px;
-        position: absolute;
-      }
-      ha-card.button-lozenge-right > span.state,
-      ha-card.button-bullet-right > span.state,
-      ha-card.button-capped-right > span.state,
-      ha-card.button-barrel-right > span.state {
-        padding-bottom: 45px;
-        color: black;
       }
 
       /* =============================================== */

From e3af04b811c19729aad838cc332cd9dc22ac6b1f Mon Sep 17 00:00:00 2001
From: The0x539 <the0x539@gmail.com>
Date: Mon, 14 Oct 2024 16:53:13 -0500
Subject: [PATCH 04/14] Further simplify button styles

---
 themes/lcars.yaml | 34 ++++++++++++----------------------
 1 file changed, 12 insertions(+), 22 deletions(-)

diff --git a/themes/lcars.yaml b/themes/lcars.yaml
index 6910c56..c40dcc0 100755
--- a/themes/lcars.yaml
+++ b/themes/lcars.yaml
@@ -706,12 +706,11 @@
       ha-card.button-bullet-right,
       ha-card.button-capped-right,
       ha-card.button-barrel-right {
+        border-radius: var(--lcars-outer-radius) !important;
         text-transform: uppercase;
         --primary-text-color: black;
         --secondary-text-color: black;
         min-height: 60px;
-        display: flex;
-        flex-direction: column-reverse;
 
         & > ha-state-icon {
           --mdc-icon-size: unset;
@@ -727,17 +726,12 @@
         }
 
         & > span {
-          width: 100%;
-          height: 100%;
-          display: flex;
-          align-items: flex-end;
-          margin-top: unset;
-          padding-bottom: 6px;
-          padding-inline: 6px;
+          margin-block: 0px;
           position: absolute;
+          bottom: 4px;
 
           &.state {
-            padding-bottom: 45px;
+            bottom: 24px;
           }
         }
       }
@@ -746,11 +740,9 @@
       ha-card.button-bullet-left,
       ha-card.button-capped-left,
       ha-card.button-barrel-left {
-        align-items: flex-end;
-    
         /* Text against right end */
         & > span {
-          justify-content: flex-end;
+          right: 6px;
         }
 
         /* Icon against left end */
@@ -764,11 +756,9 @@
       ha-card.button-bullet-right,
       ha-card.button-capped-right,
       ha-card.button-barrel-right {
-        align-items: flex-start;
-
         /* Text against left end */
         & > span {
-          justify-content: flex-start;
+          left: 6px;
         }
 
         /* Icon against right end */
@@ -783,8 +773,8 @@
       ha-card.button-capped-right,
       ha-card.button-barrel-left,
       ha-card.button-barrel-right {
-        border-top-left-radius: 0px;
-        border-bottom-left-radius: 0px;
+        border-top-left-radius: 0px !important;
+        border-bottom-left-radius: 0px !important;
       }
 
       /* Square right corners */
@@ -792,20 +782,20 @@
       ha-card.button-capped-left,
       ha-card.button-barrel-left,
       ha-card.button-barrel-right {
-        border-top-right-radius: 0px;
-        border-bottom-right-radius: 0px;
+        border-top-right-radius: 0px !important;
+        border-bottom-right-radius: 0px !important;
       }
 
       /* Text against rounded right end */
       ha-card.button-lozenge-left > span,
       ha-card.button-bullet-left > span {
-        padding-right: 26px;
+        right: 26px;
       }
 
       /* Text against rounded left end */
       ha-card.button-lozenge-right > span,
       ha-card.button-bullet-right > span {
-        padding-left: 26px;
+        left: 26px;
       }
 
       /* =============================================== */

From 4c9d580ccfd52db75c2eb3ebacb945f0bfc8e9fd Mon Sep 17 00:00:00 2001
From: The0x539 <the0x539@gmail.com>
Date: Tue, 15 Oct 2024 08:38:29 -0500
Subject: [PATCH 05/14] Implement button-bullet-left mushroom light card

---
 themes/lcars.yaml | 83 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 83 insertions(+)

diff --git a/themes/lcars.yaml b/themes/lcars.yaml
index c40dcc0..55db5b1 100755
--- a/themes/lcars.yaml
+++ b/themes/lcars.yaml
@@ -711,6 +711,10 @@
         --primary-text-color: black;
         --secondary-text-color: black;
         min-height: 60px;
+        align-content: center;
+
+        display: flex;
+
 
         & > ha-state-icon {
           --mdc-icon-size: unset;
@@ -734,6 +738,71 @@
             bottom: 24px;
           }
         }
+
+        & mushroom-card {
+          display: contents;      
+        }
+        & mushroom-state-item {
+          display: contents;
+          --spacing: 0;
+          --icon-size: 100% !important;
+          --icon-border-radius: 0;
+        }
+        & mushroom-state-info {
+          position: absolute;
+          z-index: 1;
+          align-content: center;
+          left: calc(var(--lcars-vertical-border) + 12px);
+          height: 100%;
+          top: 0;
+          --card-primary-color: black;
+          --card-secondary-color: black;
+        }
+
+        & .actions {
+          justify-content: flex-end;
+          & mushroom-button {
+            z-index: 1;
+          }
+        }
+
+        & mushroom-light-color-control,
+        & mushroom-light-color-temp-control,
+        & mushroom-light-brightness-control {
+          --control-height: 60px !important;
+          --control-border-radius: var(--lcars-outer-radius);
+          --rgb-disabled: none !important;
+          position: absolute;
+          width: calc(100% - var(--lcars-vertical-border) - 6px);
+          left: calc(var(--lcars-vertical-border) + 6px);
+        }
+
+        & mushroom-light-brightness-control {
+          --slider-color: var(--lcars-card-top-color) !important;
+          --slider-bg-color: var(--lcars-card-button) !important;
+        }
+
+        & ha-state-icon {
+          --mdc-icon-size: unset !important;
+        }
+
+        & mushroom-shape-icon {
+          height: 60px;
+          background: var(--lcars-card-top-color);
+          width: var(--lcars-vertical-border);
+          display: inline-flex;
+          align-content: center;
+          border: 0px solid black;
+          --shape-color: none !important;
+          --shape-color-disabled: none !important;
+
+          & > ha-state-icon {
+            vertical-align: middle;
+            align-items: center;
+            align-content: center;
+            align-self: center;
+          }
+        }
       }
 
       ha-card.button-lozenge-left,
@@ -746,6 +815,7 @@
         }
 
         /* Icon against left end */
+        & mushroom-shape-icon,
         & > ha-state-icon {
           left: 0;
           border-right-width: 6px;
@@ -762,6 +832,7 @@
         }
 
         /* Icon against right end */
+        & mushroom-shape-icon,
         & > ha-state-icon {
           right: 0;
           border-left-width: 6px;
@@ -775,6 +846,12 @@
       ha-card.button-barrel-right {
         border-top-left-radius: 0px !important;
         border-bottom-left-radius: 0px !important;
+
+        & mushroom-light-color-control,
+        & mushroom-light-color-temp-control,
+        & mushroom-light-brightness-control {
+          --control-border-radius: 0 var(--lcars-outer-radius) var(--lcars-outer-radius) 0;
+        }
       }
 
       /* Square right corners */
@@ -784,6 +861,12 @@
       ha-card.button-barrel-right {
         border-top-right-radius: 0px !important;
         border-bottom-right-radius: 0px !important;
+
+        & mushroom-light-color-control,
+        & mushroom-light-color-temp-control,
+        & mushroom-light-brightness-control {
+          --control-border-radius: var(--lcars-outer-radius) 0 0 var(--lcars-outer-radius);
+        }
       }
 
       /* Text against rounded right end */

From d52c98ae511eb2c4294c6a6719d76b5f8044b659 Mon Sep 17 00:00:00 2001
From: The0x539 <the0x539@gmail.com>
Date: Tue, 15 Oct 2024 11:51:02 -0500
Subject: [PATCH 06/14] Fix button-bullet-right light cards

---
 themes/lcars.yaml | 117 +++++++++++++++++++++++++++++++++++-----------
 1 file changed, 91 insertions(+), 26 deletions(-)

diff --git a/themes/lcars.yaml b/themes/lcars.yaml
index 55db5b1..0778446 100755
--- a/themes/lcars.yaml
+++ b/themes/lcars.yaml
@@ -711,10 +711,19 @@
         --primary-text-color: black;
         --secondary-text-color: black;
         min-height: 60px;
-        align-content: center;
 
         display: flex;
+        flex-direction: row;
+        flex-wrap: wrap-reverse;
+        justify-content: space-between;
+        align-content: space-before;
 
+        gap: 6px;
+
+        &:has(mushroom-card) {
+          /* sorry bud, mushrooms don't stretch */
+          max-height: 60px;
+        }
 
         & > ha-state-icon {
           --mdc-icon-size: unset;
@@ -724,45 +733,47 @@
           height: 100% !important;
           max-height: 100% !important;
           border: 0px solid black;
-          position: absolute;
           justify-content: center;
           background: var(--lcars-card-top-color);
         }
 
         & > span {
-          margin-block: 0px;
-          position: absolute;
-          bottom: 4px;
+          margin-inline: 6px;
+          margin-block: 6px;
+          display: block;
+          align-self: end;
 
           &.state {
-            bottom: 24px;
+            position: absolute;
+            bottom: 20px;
           }
         }
 
         & mushroom-card {
-          display: contents;      
+          display: contents;
         }
         & mushroom-state-item {
-          display: contents;
-          --spacing: 0;
           --icon-size: 100% !important;
           --icon-border-radius: 0;
+          z-index: 1;
+          flex: 0 0 var(--lcars-vertical-border);
         }
         & mushroom-state-info {
-          position: absolute;
-          z-index: 1;
+          padding-inline: 6px;
+          margin-inline: 6px;
           align-content: center;
-          left: calc(var(--lcars-vertical-border) + 12px);
           height: 100%;
-          top: 0;
+          z-index: 1;
           --card-primary-color: black;
           --card-secondary-color: black;
+          position: absolute;
         }
 
         & .actions {
-          justify-content: flex-end;
+          padding-inline: 10px !important;
           & mushroom-button {
             z-index: 1;
+            --bg-color: rgba(var(--rgb-primary-text-color), 0.125) !important;
           }
         }
 
@@ -774,7 +785,6 @@
           --rgb-disabled: none !important;
           position: absolute;
           width: calc(100% - var(--lcars-vertical-border) - 6px);
-          left: calc(var(--lcars-vertical-border) + 6px);
         }
 
         & mushroom-light-brightness-control {
@@ -811,32 +821,73 @@
       ha-card.button-barrel-left {
         /* Text against right end */
         & > span {
-          right: 6px;
+          text-align: right;
+          right: 0;
+        }
+
+        & .actions {
+          justify-content: end;
+        }
+
+        & mushroom-state-info {
+          text-align: left;
+          left: var(--lcars-vertical-border);
         }
 
         /* Icon against left end */
         & mushroom-shape-icon,
         & > ha-state-icon {
-          left: 0;
           border-right-width: 6px;
         }
+
+        & mushroom-light-color-control,
+        & mushroom-light-color-temp-control,
+        & mushroom-light-brightness-control {
+          left: calc(var(--lcars-vertical-border) + 6px);
+        }
       }
 
       ha-card.button-lozenge-right,
       ha-card.button-bullet-right,
       ha-card.button-capped-right,
       ha-card.button-barrel-right {
+        flex-direction: row-reverse;
+
         /* Text against left end */
         & > span {
-          left: 6px;
+          text-align: left;
+        }
+
+        & .actions {
+          justify-content: start;
+        }
+
+        & .actions::before {
+          /* We can't override the 0px padding-left, so just add an element to get a gap */
+          content: '';
+          display: inline;
+        }
+
+        & mushroom-state-info {
+          text-align: right;
+          right: var(--lcars-vertical-border);
         }
 
         /* Icon against right end */
         & mushroom-shape-icon,
         & > ha-state-icon {
-          right: 0;
           border-left-width: 6px;
         }
+
+        & mushroom-state-item {
+          flex-direction: row-reverse;
+        }
+
+        & mushroom-light-color-control,
+        & mushroom-light-color-temp-control,
+        & mushroom-light-brightness-control {
+          right: calc(var(--lcars-vertical-border) + 6px);
+        }
       }
 
       /* Square left corners */
@@ -869,16 +920,12 @@
         }
       }
 
-      /* Text against rounded right end */
+      /* Text against rounded end */
       ha-card.button-lozenge-left > span,
-      ha-card.button-bullet-left > span {
-        right: 26px;
-      }
-
-      /* Text against rounded left end */
+      ha-card.button-bullet-left > span,
       ha-card.button-lozenge-right > span,
       ha-card.button-bullet-right > span {
-        left: 26px;
+        margin-inline: 26px;
       }
 
       /* =============================================== */
@@ -1165,6 +1212,24 @@
         --control-border-radius: 0px !important;
       }
 
+    # extra special shadow-DOM hacks/fixes
+    # let flexbox be handed by elements that can be selected from the outer ha-card
+
+    mushroom-card$: |
+      .container {
+        display: contents !important;
+      }
+
+    mushroom-state-item$: |
+      /* extra special shadow DOM fix: let the host do the flexbox, so we can actually style it */
+      /* ideally this would only be applied to elements with certain classes but I can't get that to work */
+      .container {
+        display: contents !important;
+      }
+      :host {
+        display: flex !important;
+      }
+
   # ===================================================== #
   #          TOOLBAR AND DASHBOARD MODIFICATIONS          #
   # ===================================================== #

From cb76f0b9ce103918e960508d897a7a9b35be73f9 Mon Sep 17 00:00:00 2001
From: The0x539 <the0x539@gmail.com>
Date: Tue, 15 Oct 2024 12:39:19 -0500
Subject: [PATCH 07/14] Fix rounded corners for all mushroom light cards

---
 themes/lcars.yaml | 64 +++++++++++++++++++++--------------------------
 1 file changed, 29 insertions(+), 35 deletions(-)

diff --git a/themes/lcars.yaml b/themes/lcars.yaml
index 0778446..67af022 100755
--- a/themes/lcars.yaml
+++ b/themes/lcars.yaml
@@ -706,7 +706,10 @@
       ha-card.button-bullet-right,
       ha-card.button-capped-right,
       ha-card.button-barrel-right {
-        border-radius: var(--lcars-outer-radius) !important;
+        --border-left-radius: 0;
+        --border-right-radius: 0;
+        border-radius: var(--border-left-radius) var(--border-right-radius) var(--border-right-radius) var(--border-left-radius) !important;
+
         text-transform: uppercase;
         --primary-text-color: black;
         --secondary-text-color: black;
@@ -781,7 +784,6 @@
         & mushroom-light-color-temp-control,
         & mushroom-light-brightness-control {
           --control-height: 60px !important;
-          --control-border-radius: var(--lcars-outer-radius);
           --rgb-disabled: none !important;
           position: absolute;
           width: calc(100% - var(--lcars-vertical-border) - 6px);
@@ -815,6 +817,22 @@
         }
       }
 
+      /* Rounded left corners */
+      ha-card.button-lozenge-left,
+      ha-card.button-lozenge-right,
+      ha-card.button-bullet-right,
+      ha-card.button-capped-left {
+        --border-left-radius: var(--lcars-outer-radius);
+      }
+
+      /* Rounded right corners */
+      ha-card.button-lozenge-left,
+      ha-card.button-lozenge-right,
+      ha-card.button-bullet-left,
+      ha-card.button-capped-right {
+        --border-right-radius: var(--lcars-outer-radius);
+      }
+
       ha-card.button-lozenge-left,
       ha-card.button-bullet-left,
       ha-card.button-capped-left,
@@ -838,12 +856,14 @@
         & mushroom-shape-icon,
         & > ha-state-icon {
           border-right-width: 6px;
+          border-radius: var(--border-left-radius) 0 0 var(--border-left-radius);
         }
 
         & mushroom-light-color-control,
         & mushroom-light-color-temp-control,
         & mushroom-light-brightness-control {
           left: calc(var(--lcars-vertical-border) + 6px);
+          --control-border-radius: 0 var(--border-right-radius) var(--border-right-radius) 0;
         }
       }
 
@@ -873,12 +893,15 @@
           right: var(--lcars-vertical-border);
         }
 
-        /* Icon against right end */
-        & mushroom-shape-icon,
         & > ha-state-icon {
           border-left-width: 6px;
         }
 
+        & mushroom-shape-icon {
+          border-left-width: 6px;
+          border-radius: 0 var(--border-right-radius) var(--border-right-radius) 0;
+        }
+
         & mushroom-state-item {
           flex-direction: row-reverse;
         }
@@ -887,36 +910,7 @@
         & mushroom-light-color-temp-control,
         & mushroom-light-brightness-control {
           right: calc(var(--lcars-vertical-border) + 6px);
-        }
-      }
-
-      /* Square left corners */
-      ha-card.button-bullet-left,
-      ha-card.button-capped-right,
-      ha-card.button-barrel-left,
-      ha-card.button-barrel-right {
-        border-top-left-radius: 0px !important;
-        border-bottom-left-radius: 0px !important;
-
-        & mushroom-light-color-control,
-        & mushroom-light-color-temp-control,
-        & mushroom-light-brightness-control {
-          --control-border-radius: 0 var(--lcars-outer-radius) var(--lcars-outer-radius) 0;
-        }
-      }
-
-      /* Square right corners */
-      ha-card.button-bullet-right,
-      ha-card.button-capped-left,
-      ha-card.button-barrel-left,
-      ha-card.button-barrel-right {
-        border-top-right-radius: 0px !important;
-        border-bottom-right-radius: 0px !important;
-
-        & mushroom-light-color-control,
-        & mushroom-light-color-temp-control,
-        & mushroom-light-brightness-control {
-          --control-border-radius: var(--lcars-outer-radius) 0 0 var(--lcars-outer-radius);
+          --control-border-radius: var(--border-left-radius) 0 0 var(--border-left-radius);
         }
       }
 
@@ -925,7 +919,7 @@
       ha-card.button-bullet-left > span,
       ha-card.button-lozenge-right > span,
       ha-card.button-bullet-right > span {
-        margin-inline: 26px;
+        margin-inline: 20px;
       }
 
       /* =============================================== */

From 50579beb6704405db9157fc4060dcc976d6a1922 Mon Sep 17 00:00:00 2001
From: The0x539 <the0x539@gmail.com>
Date: Tue, 15 Oct 2024 17:25:44 -0500
Subject: [PATCH 08/14] Convert mushroom buttons to CSS Grid

---
 themes/lcars.yaml | 210 ++++++++++++++++++++++++----------------------
 1 file changed, 108 insertions(+), 102 deletions(-)

diff --git a/themes/lcars.yaml b/themes/lcars.yaml
index 67af022..215bd2c 100755
--- a/themes/lcars.yaml
+++ b/themes/lcars.yaml
@@ -547,8 +547,8 @@
       /*                  INNER CORNERS                  */
       /* ================================================*/
 
-      ha-card::before,
-      ha-card::after,
+      ha-card:is(.header-left, .header-contained, .footer-left, .footer-contained):before,
+      ha-card:is(.header-right, .header-contained, .footer-right, .footer-contained):after,
       ha-card.type-thermostat > hui-card-features::before,
       ha-card.type-thermostat > hui-card-features::after {
         /* The thickness of the rectangulaar portion that overlaps with the main border to hide rounding errors */
@@ -708,47 +708,75 @@
       ha-card.button-barrel-right {
         --border-left-radius: 0;
         --border-right-radius: 0;
-        border-radius: var(--border-left-radius) var(--border-right-radius) var(--border-right-radius) var(--border-left-radius) !important;
+        border-radius: 0;
 
         text-transform: uppercase;
         --primary-text-color: black;
         --secondary-text-color: black;
-        min-height: 60px;
 
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap-reverse;
-        justify-content: space-between;
-        align-content: space-before;
+        background: none;
 
-        gap: 6px;
+        display: grid;
+        grid-template-columns: var(--lcars-vertical-border) 1fr;
+        column-gap: 6px;
+        min-height: 60px;
 
-        &:has(mushroom-card) {
-          /* sorry bud, mushrooms don't stretch */
-          max-height: 60px;
+        &::before {
+          content: '';
+          background: var(--lcars-card-button);
+          grid-row: 1 / -1;
+          grid-column: 2;
+          width: 100%;
+          height: 100%;
         }
 
+        &::before,
+        & mushroom-shape-icon,
         & > ha-state-icon {
-          --mdc-icon-size: unset;
-          display: flex;
-          align-items: center;
+          border-radius: var(--border-left-radius) var(--border-right-radius) var(--border-right-radius) var(--border-left-radius);
+        }
+
+        & > ha-state-icon,
+        & mushroom-shape-icon {
+          grid-row: 1 / -1;
+          grid-column: 1;
+          background: var(--lcars-card-top-color);
           width: var(--lcars-vertical-border);
-          height: 100% !important;
-          max-height: 100% !important;
-          border: 0px solid black;
+          align-items: center;
           justify-content: center;
-          background: var(--lcars-card-top-color);
+          align-content: center;
+          height: max(60px, 100%);
+          max-height: max(60px, 100%);
+          --mdc-icon-size: unset !important;
+          display: flex;
+        }
+
+        & mushroom-shape-icon {
+          --shape-color: none !important;
+          --shape-color-disabled: none !important;
+
+          & > ha-state-icon {
+            vertical-align: middle;
+            align-items: center;
+            align-content: center;
+            align-self: center;
+            --mdc-icon-size: unset;
+          }
+        }
+
+        &:has(> span) {
+          grid-template-rows: auto min-content;
         }
 
         & > span {
           margin-inline: 6px;
-          margin-block: 6px;
-          display: block;
+          margin-block: 0 6px;
           align-self: end;
+          grid-area: 2 / 2;
 
           &.state {
-            position: absolute;
-            bottom: 20px;
+            margin-block: 0;
+            grid-row: 1;
           }
         }
 
@@ -759,23 +787,30 @@
           --icon-size: 100% !important;
           --icon-border-radius: 0;
           z-index: 1;
-          flex: 0 0 var(--lcars-vertical-border);
+          display: contents !important;
         }
         & mushroom-state-info {
-          padding-inline: 6px;
-          margin-inline: 6px;
-          align-content: center;
-          height: 100%;
+          grid-area: 1 / 2;
+          margin: 6px;
           z-index: 1;
+          flex-direction: column-reverse;
+          justify-items: end;
+          pointer-events: none;
           --card-primary-color: black;
           --card-secondary-color: black;
-          position: absolute;
+          --card-primary-font-size: 16.8px;
+          --card-secondary-font-size: 0.9rem;
         }
 
         & .actions {
-          padding-inline: 10px !important;
-          & mushroom-button {
-            z-index: 1;
+          grid-row: 1;
+          grid-column: 2;
+        }
+
+        & mushroom-button {
+          z-index: 1;
+          --bg-color: none;
+          &:hover {
             --bg-color: rgba(var(--rgb-primary-text-color), 0.125) !important;
           }
         }
@@ -783,53 +818,29 @@
         & mushroom-light-color-control,
         & mushroom-light-color-temp-control,
         & mushroom-light-brightness-control {
-          --control-height: 60px !important;
-          --rgb-disabled: none !important;
+          height: 100%;
+          --control-height: 100%;
+          --rgb-disabled: none;
           position: absolute;
           width: calc(100% - var(--lcars-vertical-border) - 6px);
+          --control-border-radius: var(--border-left-radius) var(--border-right-radius) var(--border-right-radius) var(--border-left-radius);
         }
 
         & mushroom-light-brightness-control {
           --slider-color: var(--lcars-card-top-color) !important;
           --slider-bg-color: var(--lcars-card-button) !important;
         }
-
-        & ha-state-icon {
-          --mdc-icon-size: unset !important;
-        }
-
-        & mushroom-shape-icon {
-          height: 60px;
-          background: var(--lcars-card-top-color);
-          width: var(--lcars-vertical-border);
-          display: inline-flex;
-          align-content: center;
-          border: 0px solid black;
-          --shape-color: none !important;
-          --shape-color-disabled: none !important;
-
-          & > ha-state-icon {
-            vertical-align: middle;
-            align-items: center;
-            align-content: center;
-            align-self: center;
-          }
-        }
       }
 
-      /* Rounded left corners */
-      ha-card.button-lozenge-left,
-      ha-card.button-lozenge-right,
-      ha-card.button-bullet-right,
-      ha-card.button-capped-left {
+      ha-card:is(.button-lozenge-right, .button-bullet-right)::before,
+      ha-card:is(.button-lozenge-right, .button-bullet-right) :is(mushroom-light-brightness-control, mushroom-light-color-temp-control, mushroom-light-color-control),
+      ha-card:is(.button-lozenge-left, .button-capped-left) :is(mushroom-shape-icon, ha-state-icon) {
         --border-left-radius: var(--lcars-outer-radius);
       }
 
-      /* Rounded right corners */
-      ha-card.button-lozenge-left,
-      ha-card.button-lozenge-right,
-      ha-card.button-bullet-left,
-      ha-card.button-capped-right {
+      ha-card:is(.button-lozenge-left, .button-bullet-left)::before,
+      ha-card:is(.button-lozenge-left, .button-bullet-left) :is(mushroom-light-brightness-control, mushroom-light-color-temp-control, mushroom-light-color-control),
+      ha-card:is(.button-lozenge-right, .button-capped-right) :is(mushroom-shape-icon, ha-state-icon) {
         --border-right-radius: var(--lcars-outer-radius);
       }
 
@@ -837,10 +848,8 @@
       ha-card.button-bullet-left,
       ha-card.button-capped-left,
       ha-card.button-barrel-left {
-        /* Text against right end */
         & > span {
           text-align: right;
-          right: 0;
         }
 
         & .actions {
@@ -852,18 +861,10 @@
           left: var(--lcars-vertical-border);
         }
 
-        /* Icon against left end */
-        & mushroom-shape-icon,
-        & > ha-state-icon {
-          border-right-width: 6px;
-          border-radius: var(--border-left-radius) 0 0 var(--border-left-radius);
-        }
-
         & mushroom-light-color-control,
         & mushroom-light-color-temp-control,
         & mushroom-light-brightness-control {
-          left: calc(var(--lcars-vertical-border) + 6px);
-          --control-border-radius: 0 var(--border-right-radius) var(--border-right-radius) 0;
+          right: 0;
         }
       }
 
@@ -873,13 +874,21 @@
       ha-card.button-barrel-right {
         flex-direction: row-reverse;
 
-        /* Text against left end */
+        grid-template-columns: 1fr var(--lcars-vertical-border);
+
+        &::before,
+        & .actions,
+        & > span,
+        & mushroom-state-info {
+          grid-column: 1;
+        }
+
         & > span {
           text-align: left;
         }
 
-        & .actions {
-          justify-content: start;
+        & mushroom-state-info {
+          text-align: right;
         }
 
         & .actions::before {
@@ -888,38 +897,28 @@
           display: inline;
         }
 
-        & mushroom-state-info {
-          text-align: right;
-          right: var(--lcars-vertical-border);
-        }
-
+        & mushroom-shape-icon,
         & > ha-state-icon {
-          border-left-width: 6px;
-        }
-
-        & mushroom-shape-icon {
-          border-left-width: 6px;
-          border-radius: 0 var(--border-right-radius) var(--border-right-radius) 0;
-        }
-
-        & mushroom-state-item {
-          flex-direction: row-reverse;
+          grid-column: 2;
         }
 
         & mushroom-light-color-control,
         & mushroom-light-color-temp-control,
         & mushroom-light-brightness-control {
-          right: calc(var(--lcars-vertical-border) + 6px);
-          --control-border-radius: var(--border-left-radius) 0 0 var(--border-left-radius);
+          left: 0;
         }
       }
 
       /* Text against rounded end */
+
       ha-card.button-lozenge-left > span,
-      ha-card.button-bullet-left > span,
+      ha-card.button-bullet-left > span {
+        margin-right: 20px;
+      }
+
       ha-card.button-lozenge-right > span,
       ha-card.button-bullet-right > span {
-        margin-inline: 20px;
+        margin-left: 20px;
       }
 
       /* =============================================== */
@@ -1208,6 +1207,7 @@
 
     # extra special shadow-DOM hacks/fixes
     # let flexbox be handed by elements that can be selected from the outer ha-card
+    # ideally this would only be applied to cards with the button classes but I can't get that to work
 
     mushroom-card$: |
       .container {
@@ -1215,8 +1215,14 @@
       }
 
     mushroom-state-item$: |
-      /* extra special shadow DOM fix: let the host do the flexbox, so we can actually style it */
-      /* ideally this would only be applied to elements with certain classes but I can't get that to work */
+      .container, .container > div {
+        display: contents !important;
+      }
+      :host {
+        display: flex;
+      }
+
+    mushroom-state-info$: |
       .container {
         display: contents !important;
       }

From b8c444d7714f1494dc4ee3f44c46ffea038cb1fb Mon Sep 17 00:00:00 2001
From: The0x539 <the0x539@gmail.com>
Date: Tue, 15 Oct 2024 17:46:53 -0500
Subject: [PATCH 09/14] Fix unclassed Mushroom cards

---
 themes/lcars.yaml | 20 +++++++++-----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/themes/lcars.yaml b/themes/lcars.yaml
index 215bd2c..ceb14cf 100755
--- a/themes/lcars.yaml
+++ b/themes/lcars.yaml
@@ -782,17 +782,21 @@
 
         & mushroom-card {
           display: contents;
+          --display-override: contents;
         }
         & mushroom-state-item {
-          --icon-size: 100% !important;
+          --icon-size: 100%;
           --icon-border-radius: 0;
           z-index: 1;
-          display: contents !important;
+          display: contents;
+          --display-override: contents;
         }
         & mushroom-state-info {
           grid-area: 1 / 2;
           margin: 6px;
           z-index: 1;
+          display: flex;
+          --display-override: contents;
           flex-direction: column-reverse;
           justify-items: end;
           pointer-events: none;
@@ -1211,23 +1215,17 @@
 
     mushroom-card$: |
       .container {
-        display: contents !important;
+        display: var(--display-override, flex) !important;
       }
 
     mushroom-state-item$: |
       .container, .container > div {
-        display: contents !important;
-      }
-      :host {
-        display: flex;
+        display: var(--display-override, flex) !important;
       }
 
     mushroom-state-info$: |
       .container {
-        display: contents !important;
-      }
-      :host {
-        display: flex !important;
+        display: var(--display-override, flex) !important;
       }
 
   # ===================================================== #

From 9642b9c8e3531a4d062f702f82bd9ef37d970f89 Mon Sep 17 00:00:00 2001
From: The0x539 <the0x539@gmail.com>
Date: Tue, 15 Oct 2024 18:11:56 -0500
Subject: [PATCH 10/14] Make non-slider mushroom cards clickable

---
 themes/lcars.yaml | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/themes/lcars.yaml b/themes/lcars.yaml
index ceb14cf..b93dc5e 100755
--- a/themes/lcars.yaml
+++ b/themes/lcars.yaml
@@ -799,13 +799,20 @@
           --display-override: contents;
           flex-direction: column-reverse;
           justify-items: end;
-          pointer-events: none;
           --card-primary-color: black;
           --card-secondary-color: black;
           --card-primary-font-size: 16.8px;
           --card-secondary-font-size: 0.9rem;
         }
 
+        &:has(:is(
+          mushroom-light-brightness-control,
+          mushroom-light-color-temp-control,
+          mushroom-light-color-control
+        )) mushroom-state-info {
+          pointer-events: none;
+        }
+
         & .actions {
           grid-row: 1;
           grid-column: 2;

From 4278193af8bf909ef990c06d91bb8491ada2c697 Mon Sep 17 00:00:00 2001
From: The0x539 <the0x539@gmail.com>
Date: Tue, 15 Oct 2024 18:16:17 -0500
Subject: [PATCH 11/14] Remove outdated comment

---
 themes/lcars.yaml | 1 -
 1 file changed, 1 deletion(-)

diff --git a/themes/lcars.yaml b/themes/lcars.yaml
index b93dc5e..f2dff2c 100755
--- a/themes/lcars.yaml
+++ b/themes/lcars.yaml
@@ -1218,7 +1218,6 @@
 
     # extra special shadow-DOM hacks/fixes
     # let flexbox be handed by elements that can be selected from the outer ha-card
-    # ideally this would only be applied to cards with the button classes but I can't get that to work
 
     mushroom-card$: |
       .container {

From b504a2464b1aa5357c1dd323b2cb0801ba09f5d0 Mon Sep 17 00:00:00 2001
From: The0x539 <the0x539@gmail.com>
Date: Tue, 15 Oct 2024 21:18:31 -0500
Subject: [PATCH 12/14] Tweak light card controls

---
 themes/lcars.yaml | 39 +++++++++++++++++++++++----------------
 1 file changed, 23 insertions(+), 16 deletions(-)

diff --git a/themes/lcars.yaml b/themes/lcars.yaml
index f2dff2c..001fb66 100755
--- a/themes/lcars.yaml
+++ b/themes/lcars.yaml
@@ -740,7 +740,7 @@
         & mushroom-shape-icon {
           grid-row: 1 / -1;
           grid-column: 1;
-          background: var(--lcars-card-top-color);
+          background: var(--lcars-card-mid-left-color);
           width: var(--lcars-vertical-border);
           align-items: center;
           justify-content: center;
@@ -816,6 +816,12 @@
         & .actions {
           grid-row: 1;
           grid-column: 2;
+          padding-inline: 0;
+          --icon-size: 30px;
+          --control-icon-size: 18px;
+          flex-direction: column;
+          justify-content: space-around;
+          gap: 0;
         }
 
         & mushroom-button {
@@ -894,18 +900,13 @@
           grid-column: 1;
         }
 
-        & > span {
-          text-align: left;
+        & .actions {
+          justify-self: end;
         }
 
+        & > span,
         & mushroom-state-info {
-          text-align: right;
-        }
-
-        & .actions::before {
-          /* We can't override the 0px padding-left, so just add an element to get a gap */
-          content: '';
-          display: inline;
+          text-align: left;
         }
 
         & mushroom-shape-icon,
@@ -922,14 +923,20 @@
 
       /* Text against rounded end */
 
-      ha-card.button-lozenge-left > span,
-      ha-card.button-bullet-left > span {
-        margin-right: 20px;
+      ha-card.button-lozenge-left,
+      ha-card.button-bullet-left {
+        & > span,
+        & mushroom-state-info {
+          margin-right: 20px;
+        }
       }
 
-      ha-card.button-lozenge-right > span,
-      ha-card.button-bullet-right > span {
-        margin-left: 20px;
+      ha-card.button-lozenge-right,
+      ha-card.button-bullet-right {
+        & > span,
+        & mushroom-state-info {
+          margin-left: 20px;
+        }
       }
 
       /* =============================================== */

From 0e76f9ab357bc5fa8e0b288e7afc22a115f0d3c0 Mon Sep 17 00:00:00 2001
From: The0x539 <the0x539@gmail.com>
Date: Wed, 16 Oct 2024 00:14:55 -0500
Subject: [PATCH 13/14] Fix previous commit for left-handed buttons

---
 themes/lcars.yaml | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/themes/lcars.yaml b/themes/lcars.yaml
index 001fb66..479c922 100755
--- a/themes/lcars.yaml
+++ b/themes/lcars.yaml
@@ -865,17 +865,13 @@
       ha-card.button-bullet-left,
       ha-card.button-capped-left,
       ha-card.button-barrel-left {
+        & mushroom-state-info,
         & > span {
           text-align: right;
         }
 
         & .actions {
-          justify-content: end;
-        }
-
-        & mushroom-state-info {
-          text-align: left;
-          left: var(--lcars-vertical-border);
+          justify-self: start;
         }
 
         & mushroom-light-color-control,

From b47721029b01e5a52adb2eed45c64f0b4887102f Mon Sep 17 00:00:00 2001
From: The0x539 <the0x539@gmail.com>
Date: Tue, 29 Oct 2024 17:12:32 -0500
Subject: [PATCH 14/14] Remove obsolete font workaround

---
 themes/lcars.yaml | 1 -
 1 file changed, 1 deletion(-)

diff --git a/themes/lcars.yaml b/themes/lcars.yaml
index 479c922..cfa41e4 100755
--- a/themes/lcars.yaml
+++ b/themes/lcars.yaml
@@ -1080,7 +1080,6 @@
       ha-card > .name {
         color: black;
       }
-      ha-card.type-heading p, /* temporary, see home-assistant/frontend #22322 */
       ha-card > * {
         font-family: var(--lcars-font) !important;
         --md-sys-color-primary: var(--lcars-ui-quaternary);