From 11672bc4907d41706ad164f1ca3c485f034061c1 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Wed, 19 Jan 2022 21:18:02 -0500
Subject: Fix styling on Safari

---
 src/components/favorite_button/favorite_button.vue | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

(limited to 'src/components/favorite_button/favorite_button.vue')

diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue
index 01db63be..74a1dfbb 100644
--- a/src/components/favorite_button/favorite_button.vue
+++ b/src/components/favorite_button/favorite_button.vue
@@ -53,6 +53,7 @@
 
 <style lang="scss">
 @import '../../_variables.scss';
+@import '../../_mixins.scss';
 
 .FavoriteButton {
   display: flex;
@@ -78,19 +79,21 @@
       color: var(--cOrange, $fallback--cOrange);
     }
 
-    .focus-marker,
-    &:focus:not(:focus-visible):not(:hover) .focus-marker {
-      visibility: hidden;
-    }
+    @include unfocused-style {
+      .focus-marker {
+        visibility: hidden;
+      }
 
-    &:focus:not(:focus-visible):not(:hover) .active-marker {
-      visibility: visible;
+      .active-marker {
+        visibility: visible;
+      }
     }
 
-    &:hover, &:focus, &:focus-visible {
+    @include focused-style {
       .focus-marker {
         visibility: visible;
       }
+
       .active-marker {
         visibility: hidden;
       }
-- 
cgit v1.2.3-70-g09d2