From 7ed308de272528ad9ab60af22adb8911ab568b45 Mon Sep 17 00:00:00 2001
From: Alexey Pyltsyn <lex61rus@gmail.com>
Date: Thu, 24 Jun 2021 12:23:51 +0300
Subject: [PATCH] fix(v2): add shadow to skip link on hover only

---
 .../src/theme/SkipToContent/index.tsx                       | 6 +-----
 .../src/theme/SkipToContent/styles.module.css               | 1 +
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/docusaurus-theme-classic/src/theme/SkipToContent/index.tsx b/packages/docusaurus-theme-classic/src/theme/SkipToContent/index.tsx
index 5f8fa92637f5..d13943c02ad9 100644
--- a/packages/docusaurus-theme-classic/src/theme/SkipToContent/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/SkipToContent/index.tsx
@@ -6,7 +6,6 @@
  */
 
 import React, {useRef} from 'react';
-import clsx from 'clsx';
 import Translate from '@docusaurus/Translate';
 import {useLocationChange} from '@docusaurus/theme-common';
 
@@ -40,10 +39,7 @@ function SkipToContent(): JSX.Element {
 
   return (
     <div ref={containerRef}>
-      <a
-        href="#main"
-        className={clsx(styles.skipToContent, 'shadow--md')}
-        onClick={handleSkip}>
+      <a href="#main" className={styles.skipToContent} onClick={handleSkip}>
         <Translate
           id="theme.common.skipToMainContent"
           description="The skip to content label used for accessibility, allowing to rapidly navigate to main content with keyboard tab/enter navigation">
diff --git a/packages/docusaurus-theme-classic/src/theme/SkipToContent/styles.module.css b/packages/docusaurus-theme-classic/src/theme/SkipToContent/styles.module.css
index d17508a7b79c..1ded61ed5c3a 100644
--- a/packages/docusaurus-theme-classic/src/theme/SkipToContent/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/SkipToContent/styles.module.css
@@ -10,4 +10,5 @@
 
 .skipToContent:focus {
   left: 1rem;
+  box-shadow: var(--ifm-global-shadow-md);
 }