From bd0a74554a84a3cc3e41ed504b0d8011fce47ddf Mon Sep 17 00:00:00 2001
From: Nich Galzin <nichgalzin@gmail.com>
Date: Tue, 12 Nov 2024 16:43:56 +0000
Subject: [PATCH] style: adds outline offset to make focus state more
 accessible and clear

Relates #119
---
 src/components/globals.css                              | 5 +++++
 src/components/popup-components/PopupInfo/PopupInfo.css | 5 +++++
 2 files changed, 10 insertions(+)

diff --git a/src/components/globals.css b/src/components/globals.css
index c6b458b..f6c171f 100644
--- a/src/components/globals.css
+++ b/src/components/globals.css
@@ -68,6 +68,11 @@ button:disabled {
   cursor: not-allowed;
 }
 
+button:focus {
+  outline-offset: 4px;
+  transition: none;
+}
+
 /*------------------------------------*\
   Components
 \*------------------------------------*/
diff --git a/src/components/popup-components/PopupInfo/PopupInfo.css b/src/components/popup-components/PopupInfo/PopupInfo.css
index 0c8ab91..a201907 100644
--- a/src/components/popup-components/PopupInfo/PopupInfo.css
+++ b/src/components/popup-components/PopupInfo/PopupInfo.css
@@ -12,6 +12,11 @@ button {
   font-size: inherit;
 }
 
+button:focus {
+  outline-offset: 4px;
+  transition: none;
+}
+
 .info-panel__inactive {
   display: none;
   transform: translateX(200%);