From fca79a85f5c79e0b87326d1f38c8d878d76067f4 Mon Sep 17 00:00:00 2001
From: dhinrichs-scottlogic
 <125262707+dhinrichs-scottlogic@users.noreply.github.com>
Date: Thu, 29 Feb 2024 09:28:05 +0000
Subject: [PATCH] 686 added transition

---
 frontend/src/components/ChatBox/ChatBox.css | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/ChatBox/ChatBox.css b/frontend/src/components/ChatBox/ChatBox.css
index afa9f91cb..b41191541 100644
--- a/frontend/src/components/ChatBox/ChatBox.css
+++ b/frontend/src/components/ChatBox/ChatBox.css
@@ -68,10 +68,9 @@
 	outline-offset: 0.1rem;
 }
 
-.skip-link {
+.chat-box .skip-link {
 	position: absolute;
 	left: 0;
-	clip: auto;
 	width: 100%;
 	height: auto;
 	padding: 0.5rem 0;
@@ -81,23 +80,32 @@
 	font-weight: 600;
 	text-align: center;
 	text-decoration: none;
+	opacity: 1;
+	transition: opacity 0.3s ease-in-out;
 	clip-path: none;
 }
 
-.skip-to-top {
+@media (prefers-reduced-motion: reduce) {
+	.chat-box .skip-link {
+		transition: none;
+	}
+}
+
+.chat-box .skip-link.skip-to-top {
 	top: -1.5rem;
 }
 
-.skip-to-bottom {
+.chat-box .skip-link.skip-to-bottom {
 	top: 0.125rem;
 }
 
-.skip-link:not(:focus, :active) {
+.chat-box .skip-link:not(:focus, :active) {
 	position: absolute;
 	overflow: hidden;
 	width: 1px;
 	height: 1px;
 	white-space: nowrap;
+	opacity: 0;
 	clip-path: inset(50%);
 }