Improves button group styles

resources/css/etc/layout.css

@@ -114,7 +114,7 @@ main {
 
     /* main content wrapper */
     article {
-        @apply grid grid-cols-1 w-full;
+        @apply grid grid-cols-1 w-full pr-6 2xl:pr-8;
         grid-template-rows: 5rem auto;
 
         /* main content title and actions */
@@ -136,7 +136,7 @@ main {
             }
 
             menu {
-                @apply flex flex-row items-center justify-end gap-2;
+                @apply flex flex-row items-center justify-end gap-4;
             }
         }
     }

resources/css/lib/button.css

@@ -44,21 +44,20 @@ button,
         transition: background-color 100ms ease-in-out;
 
         &:hover {
-            @apply bg-cyan-300;
+            @apply bg-cyan-200;
         }
 
         &:has(input:checked),
         &:active {
-            @apply bg-cyan-300;
+            @apply bg-cyan-300 border-r-transparent;
             box-shadow:
                 inset 2.5px 0 0 0 var(--color-primary),
                 inset 0 0.25rem 0 0 var(--color-cyan-400);
-            left: 0;
             top: 2.5px;
 
-            + label {
+            + label,
-                box-shadow:
+            + button {
-                    inset 1.5px 0 0 0 var(--color-primary);
+                box-shadow: inset 1.5px 0 0 0 var(--color-primary);
             }
         }
 
@@ -73,6 +72,11 @@ button,
 
         &:last-child {
             @apply border-r-md rounded-r-md;
+
+            &:has(input:checked),
+            &:active {
+                @apply border-r-primary;
+            }
         }
     }
 

resources/css/lib/calendar.css

@@ -1,5 +1,5 @@
 .calendar {
-    @apply grid col-span-3 pr-6 2xl:pr-8 pb-6 2xl:pb-8 pt-2;
+    @apply grid col-span-3 pb-6 2xl:pb-8 pt-2;
     grid-template-rows: 2rem 1fr;
 
     hgroup {