fixes styling in merchant sheet

src/style/atoms/_buttons.scss

@@ -0,0 +1,27 @@
+@use "./colours";
+
+@mixin raised_button {
+  background: rgba(0, 0, 0, 0.05);
+  border: 1px solid #ccc;
+  box-shadow: 1px 1px 1px #ccc;
+  border-top-right-radius: 8px;
+  border-bottom-right-radius: 8px;
+}
+
+@mixin uncut_raised_button {
+  @include raised_button;
+  border-radius: 8px;
+
+  button {
+    background: unset;
+    border: unset;
+    box-shadow: unset;
+    color: black;
+
+    &:hover {
+      color: black;
+    }
+
+    @include colours.highlight;
+  }
+}

src/style/atoms/_colours.scss

@@ -83,4 +83,12 @@ $special-action: rgba(68, 34, 204, 0.8);
 
 $special-action-color: #000;
 
+@mixin highlight {
+  &:hover {
+    text-shadow: 0 0 10px red;
+  }
+}
 
+@mixin svg-highlight {
+  filter: drop-shadow(0px 0px 10px rgb(255 0 0));
+}

src/style/molecules/_equipment.scss

@@ -1,4 +1,5 @@
 @use "../atoms/assets";
+@use "../atoms/colours" as colour;
 
 @mixin equipment($darkmode: false) {
   position: relative;
@@ -44,7 +45,7 @@
 
   &:hover {
     .name {
-      text-shadow: 0 0 10px rgb(255 0 0);
+      @include colour.highlight;
     }
 
     border: 1px solid #ccc;

src/style/molecules/_liturgy-banner.scss

@@ -221,8 +221,8 @@ $deity_colours_tint: (
       }
     }
 
-    .clickable:hover {
+    .clickable {
-      text-shadow: 0 0 10px rgb(255 0 0);
+      @include colour.highlight;
     }
 
   }

src/style/molecules/_rollable.scss

@@ -2,6 +2,7 @@
 @use 'sass:map';
 @use "../atoms/colours" as colour;
 @use "../atoms/numbers" as numbers;
+@use "../atoms/buttons";
 
 $rollable_colours: (
         "nachteil": colour.$nachteil-color,
@@ -148,9 +149,7 @@ $rollable_colours_font: (
       bottom: 8px;
       z-index: 3;
 
-      &:hover {
+      @include colour.highlight;
-        text-shadow: 0 0 10px rgb(255 0 0);
-      }
     }
   }
 
@@ -159,7 +158,7 @@ $rollable_colours_font: (
     .die:hover {
 
       svg {
-        filter: drop-shadow(0px 0px 10px rgb(255 0 0));
+        @include colour.svg-highlight;
       }
 
 
@@ -195,11 +194,7 @@ $rollable_colours_font: (
 
     .container {
       // background-image: linear-gradient(to right, rgba($color, numbers.$start_gradient), rgba($color, numbers.$end_gradient));
-      background: rgba(0, 0, 0, 0.05);
+      @include buttons.raised_button;
-      border: 1px solid #ccc;
-      box-shadow: 1px 1px 1px #ccc;
-      border-top-right-radius: 8px;
-      border-bottom-right-radius: 8px;
     }
   }
 }

src/style/organisms/_group-sheet.scss

@@ -1,3 +1,5 @@
+@use "../atoms/colours" as colour;
+
 .application.sheet.dsa41.actor.group {
 
   .sheet-header {
@@ -30,8 +32,8 @@
       }
     }
 
-    .rollable:hover {
+    .rollable {
-      text-shadow: 0 0 10px rgb(255 0 0);
+      @include colour.highlight;
     }
 
     .character {
@@ -131,9 +133,7 @@
             display: inline-block;
             padding: 0 4px;
 
-            &:hover {
+            @include colour.highlight;
-              text-shadow: 0 0 10px rgb(255 0 0);
-            }
           }
         }
       }
@@ -168,7 +168,7 @@
 
     &:hover {
       .item-name {
-        text-shadow: 0 0 10px rgb(255 0 0);
+        @include colour.highlight;
       }
     }
   }

src/style/organisms/_merchant-sheet.scss

@@ -1,3 +1,6 @@
+@use "../atoms/buttons";
+
+
 .dsa41.actor.merchant {
 
   .tab.goods.active {
@@ -22,9 +25,12 @@
     overflow-y: auto;
 
     .merchant-good {
+      @include buttons.uncut_raised_button;
+
       width: 100%;
       display: grid;
       break-inside: avoid;
+
       grid-template-columns: 32px 1fr 32px;
       grid-template-rows: 16px 16px;
       grid-template-areas: "img title options" "img price options";
@@ -39,6 +45,7 @@
 
       button {
         grid-area: options;
+        height: 100%;
       }
 
       .price {
@@ -57,12 +64,7 @@
     overflow-y: auto;
 
     .service {
-
+      @include buttons.uncut_raised_button;
-      border: 1px inset rgba(0, 0, 0, 1);
-      background-color: rgba(0, 0, 0, 0.2);
-      border-radius: 4px;
-      padding: 4px;
-      margin: 4px 0;
 
       display: grid;
       grid-template-columns: 32px 1fr 32px;
@@ -105,6 +107,9 @@
         }
 
         &.infinite {
+          width: 32px;
+          bottom: -2px;
+
           &::before {
             content: '∞';
           }

src/templates/actor/merchant/tab-services.hbs

@@ -40,7 +40,8 @@
                     <span class="name">{{this.name}}</span>
                     <span class="price">{{currency this.price}}</span>
                     <span class="availability {{#if
-                            (lte this.availability 0)}}infinite{{/if}}">{{this.availability}}</span>
+                            (lte this.availability 0)}}infinite{{/if}}">{{#unless
+                            (lte this.availability 0)}}{{this.availability}}{{/unless}}</span>
                     <button class="actions"><i class="fa-solid fa-coins"></i></button>
                 </div>
             {{/if}}