Edit button style

assets/styles/main.scss

@@ -40,7 +40,7 @@
     --regular-icon-size: 2rem;
     --regular-icon-wrapper-size: calc(var(--regular-icon-size) + 1rem);
     --small-icon-size: calc(var(--text-font-size) * var(--line-height));
-    --button-gap: 0.5rem;
+    --button-with-icon-gap: 0.5rem;
 
 
     // Colors
@@ -192,22 +192,21 @@ button {
     display: flex;
     justify-content: center;
     align-items: center;
+    gap: var(--button-with-icon-gap);
 
     &__text,
     &-text {
-        transform: translateX(calc((var(--button-gap) + var(--small-icon-size)) / 2));
+        transform: translateX(calc((var(--button-with-icon-gap) + var(--small-icon-size)) / 2));
         transition: transform 200ms ease-in-out;
     }
 
     &__icon,
     &-icon {
-        display: inherit;
         flex-shrink: 0;
         opacity: 0;
         width: var(--small-icon-size);
         height: var(--small-icon-size);
-        margin: 0 0 0 var(--button-gap);
-        transform: translateX(calc((var(--button-gap) + var(--small-icon-size)) / 2));
+        transform: translateX(calc((var(--button-with-icon-gap) + var(--small-icon-size)) / 2));
         transition:
             opacity 200ms ease-in-out,
             transform 200ms ease-in-out; 

components/AppError.vue

@@ -99,19 +99,9 @@
         }
 
         &__button {
+            @include button-with-icon;
             grid-area: button;
             margin: 0 2rem;
-
-            &-icon {
-                display: none;
-            }
-        }
-        
-        @media screen and (min-width: $tablet-media-query) {
-
-            &__button {
-                @include button-with-icon;
-            }
         }
     }
     

components/ContactFormValidation.vue

@@ -80,8 +80,8 @@
         row-gap: 0.5rem;
 
         &__button {
-            grid-area: button;
             @include button-with-icon;
+            grid-area: button;
         }
 
         &__loader {