From 33e844885940614471e25d2ae082060c26a29ed1 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Fri, 23 Feb 2024 10:01:28 -0800
Subject: [PATCH] [EuiFacetButton] Remove `euiLinkFocusCSS` usage

- just write out the style manually :shrug: honestly, it might need a redesign at some point anyway

+ clean up styles and how they're written
---
 src/components/facet/facet_button.styles.ts | 27 +++++++++------------
 1 file changed, 12 insertions(+), 15 deletions(-)

diff --git a/src/components/facet/facet_button.styles.ts b/src/components/facet/facet_button.styles.ts
index d057a31fd64..b35e67dd78c 100644
--- a/src/components/facet/facet_button.styles.ts
+++ b/src/components/facet/facet_button.styles.ts
@@ -14,33 +14,30 @@ import {
   logicalTextAlignCSS,
 } from '../../global_styling';
 
-import { euiLinkFocusCSS } from '../link/link.styles';
-
 export const euiFacetButtonStyles = ({ euiTheme }: UseEuiTheme) => ({
   // Base
   euiFacetButton: css`
     ${logicalTextAlignCSS('left')}
 
-    &:hover,
-    &:focus {
-      /* Make sure the quantity doesn't get an underline on hover */
-      &:not(:disabled) [class*='euiFacetButton__text'] {
-        text-decoration: underline;
+    &:not(:disabled) {
+      &:hover,
+      &:focus {
+        /* Make sure the quantity doesn't get an underline on hover */
+        text-decoration: none;
+
+        .euiFacetButton__text {
+          text-decoration: underline;
+        }
       }
-    }
 
-    &:focus:not(:disabled) [class*='euiFacetButton__text'] {
-      ${euiLinkFocusCSS(euiTheme)}
+      &:focus .euiFacetButton__text {
+        text-decoration-thickness: ${euiTheme.border.width.thick};
+      }
     }
 
     &:disabled {
       color: ${euiTheme.colors.disabledText};
       pointer-events: none;
-
-      &:hover,
-      &:focus {
-        text-decoration: none;
-      }
     }
   `,
 });