From 053723473ce345f96943c8fab92c887abae6f21c Mon Sep 17 00:00:00 2001
From: Katie <katie.oh@safelite.com>
Date: Fri, 4 Nov 2022 09:44:56 -0400
Subject: [PATCH] CSR-918 Fix hover states

---
 .../base-input-button/base-input-button.vue   |  2 +-
 src/styles/common-error-styles.scss           | 16 ++++------
 src/styles/shared-input-button-styles.scss    | 30 ++++++++++++-------
 3 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/src/common-components/base-input-button/base-input-button.vue b/src/common-components/base-input-button/base-input-button.vue
index 006323a18..572be9ef5 100644
--- a/src/common-components/base-input-button/base-input-button.vue
+++ b/src/common-components/base-input-button/base-input-button.vue
@@ -1,6 +1,6 @@
 <template>
     <label
-        :class="[buttonWrapperClasses, { 'has-error': errors.length > 0 }]"
+        :class="[buttonWrapperClasses, { 'has-error': errors.length > 0, selected: isChecked }]"
         :for="buttonId"
         @focusin="handleFocus"
         @focusout="handleBlur"
diff --git a/src/styles/common-error-styles.scss b/src/styles/common-error-styles.scss
index 6413ff028..4b474ced1 100644
--- a/src/styles/common-error-styles.scss
+++ b/src/styles/common-error-styles.scss
@@ -1,24 +1,20 @@
 html {
     .has-error {
         // START HOVER
+        &.list-button-horizontal,
         &.list-button,
-        &.list-card,
-        &.list-button-horizontal {
+        &.list-card {
             border: 1px solid $red;
+            position: relative;
+            z-index: 4;
 
             .button-content {
                 border: none;
             }
 
             &:hover {
-                input[type="radio"],
-                input[type="checkbox"] {
-                    + .button-content {
-                        position: relative;
-                        z-index: 4;
-                        @include box-shadow-hover($red-200);
-                    }
-                }
+                @include box-shadow-hover($red-200);
+                z-index: 5;
             }
         }
 
diff --git a/src/styles/shared-input-button-styles.scss b/src/styles/shared-input-button-styles.scss
index b46d72858..2a9ebd42f 100644
--- a/src/styles/shared-input-button-styles.scss
+++ b/src/styles/shared-input-button-styles.scss
@@ -1,20 +1,30 @@
 .base-input-button {
-    &:hover {
+    &:not(.has-error):hover {
         cursor: pointer;
 
         &.list-button,
         &.list-button-horizontal,
         &.list-card {
-            input[type="radio"],
-            input[type="checkbox"] {
-                &:not(:checked) {
-                    + .button-content {
-                        position: relative;
-                        z-index: 4;
-                        @include box-shadow-hover($blue-300);
-                    }
-                }
+            &:not(.selected) {
+                position: relative;
+                z-index: 4;
+                @include box-shadow-hover($blue-300);
             }
         }
+
+        // &.list-button,
+        // &.list-button-horizontal,
+        // &.list-card {
+        //     input[type="radio"],
+        //     input[type="checkbox"] {
+        //         &:not(:checked) {
+        //             + .button-content {
+        //                 position: relative;
+        //                 z-index: 4;
+        //                 @include box-shadow-hover($blue-300);
+        //             }
+        //         }
+        //     }
+        // }
     }
 }