Refactored.

src/client/styles/scss/_mixins.scss

@@ -222,13 +222,51 @@
 }
 
 @mixin three-stranded-button($textColor, $borderColor, $bgColorHoverAndActive, $bgColor: white) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 70px;
+  padding-right: 0;
+  padding-left: 0;
   color: $textColor;
   background-color: $bgColor;
   border-color: $borderColor;
+  &:not(:first-child) {
+    margin-left: 0;
+    border-left: none;
+    &::before {
+      position: absolute;
+      z-index: 2;
+      width: 100%;
+      height: 80%;
+      margin-left: -1px;
+      content: '';
+      border-left: 1px solid $borderColor;
+    }
+    &::after {
+      position: absolute;
+      z-index: 1;
+      width: 100%;
+      height: 100%;
+      margin-left: -1px;
+      content: '';
+      border-left: 1px solid transparent;
+      transition: border-color 0.15s ease-in-out;
+    }
+  }
   &:hover,
   &:active {
     color: $textColor;
     background-color: $bgColorHoverAndActive;
     border-color: $borderColor;
+    &::after {
+      border-color: $bgColorHoverAndActive;
+    }
+  }
+  &:not(:last-child) {
+    border-right: none;
+  }
+  &:focus {
+    box-shadow: none;
   }
 }

src/client/styles/scss/style-app.scss

@@ -72,37 +72,6 @@
 .btn-group.grw-three-stranded-button {
   white-space: nowrap;
 
-  .btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 70px;
-    padding-right: 0;
-    padding-left: 0;
-
-    &:not(:first-child) {
-      &::before {
-        position: absolute;
-        z-index: 2;
-        width: 100%;
-        height: 80%;
-        margin-left: -1px;
-        content: '';
-        border-left: 1px solid;
-      }
-      &::after {
-        position: absolute;
-        z-index: 1;
-        width: 100%;
-        height: 100%;
-        margin-left: -1px;
-        content: '';
-        border-left: 1px solid transparent;
-        transition: border-color 0.15s ease-in-out;
-      }
-    }
-  }
-
   .view-button,
   .edit-button {
     .grw-three-stranded-button-icon {

src/client/styles/scss/theme/antarctic.scss

@@ -116,14 +116,6 @@ html[dark] {
   .btn-group.grw-three-stranded-button {
     .btn.btn-outline-primary {
       @include three-stranded-button(darken($primary, 10%), lighten($primary, 55%), lighten($primary, 60%));
-      &::before {
-        border-color: lighten($primary, 55%);
-      }
-      &:hover {
-        &::after {
-          border-color: lighten($primary, 60%);
-        }
-      }
     }
   }
 

src/client/styles/scss/theme/christmas.scss

@@ -187,14 +187,6 @@ html[dark] {
   .grw-three-stranded-button {
     .btn.btn-outline-primary {
       @include three-stranded-button(darken($subthemecolor, 15%), lighten($subthemecolor, 35%), lighten($subthemecolor, 45%));
-      &::before {
-        border-color: lighten($subthemecolor, 35%);
-      }
-      &:hover {
-        &::after {
-          border-color: lighten($subthemecolor, 45%);
-        }
-      }
     }
   }
 }

src/client/styles/scss/theme/default.scss

@@ -108,24 +108,6 @@ html[light] {
   .btn-group.grw-three-stranded-button {
     .btn.btn-outline-primary {
       @include three-stranded-button($primary, lighten($primary, 65%), lighten($primary, 70%));
-      &::before {
-        border-color: lighten($primary, 65%);
-      }
-      &:hover {
-        &::after {
-          border-color: lighten($primary, 70%);
-        }
-      }
-      &:not(:first-child) {
-        margin-left: 0;
-        border-left: none;
-      }
-      &:not(:last-child) {
-        border-right: none;
-      }
-      &:focus {
-        box-shadow: none;
-      }
     }
   }
 }
@@ -226,14 +208,6 @@ html[dark] {
   .btn-group.grw-three-stranded-button {
     .btn.btn-outline-primary {
       @include three-stranded-button(lighten($primary, 30%), lighten($primary, 20%), $primary, darken($primary, 20%));
-      &::before {
-        border-color: $primary;
-      }
-      &:hover {
-        &::after {
-          border-color: darken($primary, 20%);
-        }
-      }
     }
   }
 }

src/client/styles/scss/theme/future.scss

@@ -93,14 +93,6 @@ html[dark] {
   .btn-group.grw-three-stranded-button {
     .btn.btn-outline-primary {
       @include three-stranded-button(lighten($primary, 10%), $primary, darken($primary, 10%), darken($primary, 20%));
-      &::before {
-        border-color: darken($primary, 10%);
-      }
-      &:hover {
-        &::after {
-          border-color: darken($primary, 20%);
-        }
-      }
     }
   }
 

src/client/styles/scss/theme/halloween.scss

@@ -111,14 +111,6 @@ html[dark] {
   .btn-group.grw-three-stranded-button {
     .btn.btn-outline-primary {
       @include three-stranded-button(lighten($primary, 35%), $primary, lighten($primary, 5%), darken($primary, 20%));
-      &::before {
-        border-color: lighten($primary, 5%);
-      }
-      &:hover {
-        &::after {
-          border-color: darken($primary, 20%);
-        }
-      }
     }
   }
 

src/client/styles/scss/theme/island.scss

@@ -113,14 +113,6 @@ html[dark] {
   .btn-group.grw-three-stranded-button {
     .btn.btn-outline-primary {
       @include three-stranded-button(darken($primary, 50%), lighten($primary, 5%), darken($primary, 5%));
-      &::before {
-        border-color: lighten($primary, 5%);
-      }
-      &:hover {
-        &::after {
-          border-color: darken($primary, 5%);
-        }
-      }
     }
   }
 }

src/client/styles/scss/theme/mono-blue.scss

@@ -92,14 +92,6 @@ html[light] {
   .btn-group.grw-three-stranded-button {
     .btn.btn-outline-primary {
       @include three-stranded-button($primary, lighten($primary, 65%), lighten($primary, 70%));
-      &::before {
-        border-color: lighten($primary, 65%);
-      }
-      &:hover {
-        &::after {
-          border-color: lighten($primary, 70%);
-        }
-      }
     }
   }
 }
@@ -208,14 +200,6 @@ html[dark] {
   .btn-group.grw-three-stranded-button {
     .btn.btn-outline-primary {
       @include three-stranded-button(lighten($primary, 30%), $primary, darken($primary, 10%), darken($primary, 20%));
-      &::before {
-        border-color: darken($primary, 10%);
-      }
-      &:hover {
-        &::after {
-          border-color: darken($primary, 20%);
-        }
-      }
     }
   }
 }

src/client/styles/scss/theme/nature.scss

@@ -115,14 +115,6 @@ html[dark] {
   .btn-group.grw-three-stranded-button {
     .btn.btn-outline-primary {
       @include three-stranded-button($bgcolor-navbar, lighten($bgcolor-navbar, 65%), lighten($bgcolor-navbar, 70%));
-      &::before {
-        border-color: lighten($bgcolor-navbar, 65%);
-      }
-      &:hover {
-        &::after {
-          border-color: lighten($bgcolor-navbar, 70%);
-        }
-      }
     }
   }
 }

src/client/styles/scss/theme/spring.scss

@@ -97,14 +97,6 @@ html[dark] {
   .btn-group.grw-three-stranded-button {
     .btn.btn-outline-primary {
       @include three-stranded-button(darken($primary, 50%), lighten($primary, 5%), lighten($primary, 10%));
-      &::before {
-        border-color: lighten($primary, 5%);
-      }
-      &:hover {
-        &::after {
-          border-color: lighten($primary, 10%);
-        }
-      }
     }
   }
 

src/client/styles/scss/theme/wood.scss

@@ -165,14 +165,6 @@ html[dark] {
   .btn-group.grw-three-stranded-button {
     .btn.btn-outline-primary {
       @include three-stranded-button(darken($primary, 30%), lighten($primary, 15%), lighten($primary, 25%));
-      &::before {
-        border-color: lighten($primary, 15%);
-      }
-      &:hover {
-        &::after {
-          border-color: lighten($primary, 25%);
-        }
-      }
     }
   }
 }