fix: update ftva & dlc button-link styles to remove the dot hover

Author: jendiamond

packages/vue-component-library/src/styles/dlc/_button-link.scss

@@ -1,8 +1,6 @@
 .dlc.button-link {
     --transition-duration: 0.3s;
-    .hover {
-        display: none;
-    }
+
     .arrow {
         display: none;
     }
@@ -21,8 +19,8 @@
     min-height: 38px;
 
     transition: background-color var(--transition-duration) ease-out,
-        color var(--transition-duration) ease-out,
-        border-color var(--transition-duration) ease-out;
+    color var(--transition-duration) ease-out,
+    border-color var(--transition-duration) ease-out;
 
     // Remove padding from first child
     *:not(:only-child):first-child {

packages/vue-component-library/src/styles/ftva/_button-link.scss

@@ -1,4 +1,4 @@
-.ftva.button-link {
+ftva.ftva.button-link {
     --button-background-color: #{$accent-blue};
     --button-text-color: #{$pure-white};
     --button-border-color: #{$accent-blue};
@@ -7,45 +7,13 @@
     --button-icon-accent-color: #{$pure-white};
     @include ftva-button;
 
-    /* This is a hover class beacause we need to over-ride the swipe animation */
-    &:hover,
-    .hover {
-        --button-background-color: #{$darker-blue};
-        --button-border-color: #{$darker-blue};
-
-        --button-icon-single-color: #{$pure-white};
-        --button-icon-withaccent-color: #{$pure-white};
-        --button-icon-accent-color: #{$pure-white};
-        @include ftva-button;
-    }
-
     &.is-secondary {
         --button-background-color: #{$pure-white};
         --button-text-color: #{$accent-blue};
         --button-border-color: #{$accent-blue};
         --button-icon-single-color: #{$accent-blue};
         --button-icon-withaccent-color: #{$accent-blue};
         --button-icon-accent-color: #{$accent-blue};
-
-        &:hover,
-        .hover {
-            --button-background-color: #{$accent-blue};
-            --button-text-color: #{$pure-white};
-            --button-icon-single-color: #{$pure-white};
-            --button-icon-withaccent-color: #{$pure-white};
-            --button-icon-accent-color: #{$pure-white};
-        }
-    }
-
-    // General Styling
-    &:hover,
-    .hover {
-        transition-duration: unset;
-        transition-timing-function: unset;
-    }
-
-    *:not(:only-child):first-child {
-        padding-left: 0px;
     }
 
     &.is-tertiary {
@@ -55,14 +23,38 @@
         --button-icon-single-color: #{$accent-blue};
         --button-icon-withaccent-color: #{$accent-blue};
         --button-icon-accent-color: #{$accent-blue};
+    }
 
-        &:hover,
-        .hover {
+    @media #{$has-hover} {
+        &:hover {
             --button-background-color: #{$darker-blue};
-            --button-text-color: #{$pure-white};
+            --button-border-color: #{$darker-blue};
             --button-icon-single-color: #{$pure-white};
             --button-icon-withaccent-color: #{$pure-white};
             --button-icon-accent-color: #{$pure-white};
+
+            &.is-secondary {
+                --button-background-color: #{$accent-blue};
+                --button-text-color: #{$pure-white};
+                --button-icon-single-color: #{$pure-white};
+                --button-icon-withaccent-color: #{$pure-white};
+                --button-icon-accent-color: #{$pure-white};
+            }
+
+            &.is-tertiary {
+                --button-background-color: #{$darker-blue};
+                --button-text-color: #{$pure-white};
+                --button-icon-single-color: #{$pure-white};
+                --button-icon-withaccent-color: #{$pure-white};
+                --button-icon-accent-color: #{$pure-white};
+            }
+
+            transition-duration: unset;
+            transition-timing-function: unset;
         }
     }
+
+    *:not(:only-child):first-child {
+        padding-left: 0px;
+    }
 }