fixed battery display

waybar/style.css

@@ -12,7 +12,7 @@
 
 window#waybar {
   background-color: alpha(@base, 0.6);
-  margin: 10px;
+  padding: 10px;
   transition-property: background-color;
   transition-duration: 0.5s;
   color: @text;
@@ -78,51 +78,46 @@ window#waybar.hidden {
 
 #custom-tlp {
     padding: 0 10px;
-	padding-right: 10px;
-	margin-right: 0;
+	min-width: 10px;
 }
 
-#custom-tlp.ac {
-    color: @green; /* Catppuccin Green for AC power */
+#custom-tlp.charging {
+    color: @teal; 
+  	border-bottom: 3px solid @teal;
 }
 
 #custom-tlp.bat {
-    color: @yellow; /* Catppuccin Yellow for Battery power */
+	color: @sapphire;
+  	border-bottom: 3px solid @sapphire;
 }
 
-#battery {
-    color: @text;
-    padding: 0 10px;
-	padding-left: 0;
-	margin-left: 0;
+#custom-tlp.warning {
+    color: @yellow; 
+  	border-bottom: 3px solid @yellow;
 }
 
-#battery.charging, #battery.plugged {
-    color: @green;
-}
-
-#battery.warning {
-    color: @yellow;
-}
-
-#battery.critical {
-    color: @red;
-    animation-name: blink;
-    animation-duration: 0.8s;
-    animation-timing-function: linear;
-    animation-iteration-count: infinite;
-    animation-direction: alternate;
+#custom-tlp.critical {
+    color: @red; 
+  	border-bottom: 3px solid @red;
+	animation-name: blink;
+	animation-duration: 0.8s;
+	animation-timing-function: linear;
+	animation-iteration-count: infinite;
+	animation-direction: alternate;
 }
 
 @keyframes blink {
-    to {
-        color: @text;
-    }
+  to {
+    color: @yellow;
+  	border-bottom: 3px solid @yellow;
+    opacity: 0.6;
+  }
 }
 
 #memory,
 #cpu {
   color: @maroon;
+  border-bottom: 3px solid @maroon;
 }
 
 
@@ -133,6 +128,7 @@ window#waybar.hidden {
 #wireplumber {
   color: @mauve;
   padding-right: 15px;
+  border-bottom: 3px solid @mauve;
 }
 
 #network {