From d477b3d5a14923fcac7346c15f088f3986ca6ecb Mon Sep 17 00:00:00 2001
From: Nerixyz <nerixdev@outlook.de>
Date: Mon, 5 Sep 2022 18:40:35 +0200
Subject: [PATCH] fix: add focus-visible rule to buttons

---
 .../modal/SelectEmoteSet/SelectEmoteSet.vue          | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/components/modal/SelectEmoteSet/SelectEmoteSet.vue b/src/components/modal/SelectEmoteSet/SelectEmoteSet.vue
index 443b8d30..82777be6 100644
--- a/src/components/modal/SelectEmoteSet/SelectEmoteSet.vue
+++ b/src/components/modal/SelectEmoteSet/SelectEmoteSet.vue
@@ -364,6 +364,8 @@ const onRename = (set: EmoteSet | null) => {
 			@include themify() {
 				> button[selector="card-details"] {
 					background-color: darken(themed("backgroundColor"), 4);
+					transition: outline-color 100ms;
+					outline-color: transparent;
 
 					&[selected="true"] {
 						background-color: mix(themed("backgroundColor"), themed("primary"), 85%);
@@ -375,6 +377,10 @@ const onRename = (set: EmoteSet | null) => {
 						background-color: darken(themed("backgroundColor"), 8);
 					}
 
+					&:focus-visible {
+						outline: themed("primary") 2px solid;
+					}
+
 					> div > div[selector="set-name"] > div[selector="label-list"] {
 						> span[label] {
 							background-color: themed("backgroundColor");
@@ -398,6 +404,12 @@ const onRename = (set: EmoteSet | null) => {
 					align-items: center;
 					justify-content: center;
 					background-color: darken(themed("backgroundColor"), 4);
+					transition: outline-color 100ms;
+					outline-color: transparent;
+
+					&:focus-visible {
+						outline: themed("primary") 2px solid;
+					}
 				}
 			}