From 4ddf8179eb1d42bb586be1e0e5dfda84cbbfdb21 Mon Sep 17 00:00:00 2001
From: PriJoh <Johanna.Prinz@payex.com>
Date: Fri, 22 Nov 2024 13:06:14 +0100
Subject: [PATCH] pfe-107 Changed styling on cards when default, hover and
 active

---
 src/less/components/payex/card.less | 48 ++++++++++-------------------
 1 file changed, 16 insertions(+), 32 deletions(-)

diff --git a/src/less/components/payex/card.less b/src/less/components/payex/card.less
index d6a99b3780..f5ecfaaec2 100644
--- a/src/less/components/payex/card.less
+++ b/src/less/components/payex/card.less
@@ -1,42 +1,26 @@
 @import "../card.less";
 
 .cards {
-	--cards-light-gray: var(--brand-bg-gray);
-	--cards-dark-gray: var(--brand-secondary);
+	background-color: var(--white) !important;
+	border: 1px solid var(--gray) !important;
+	color: var(--brand-secondary) !important;
 
-	&.cards-primary {
-		.cards-icon {
-			color: @white;
-		}
+	&:hover {
+		background-color: var(--light-gray) !important;
 	}
 
-	&.cards-secondary {
-		&:after {
-			border-bottom: 4px solid @payex-light-blue;
-		}
-
-		> i {
-			color: @payex-light-blue;
-		}
-
-		.cards-icon {
-			color: @white;
-			background-color: @payex-light-blue;
-		}
+	&:active,
+	&:focus {
+		outline: 3px solid var(--brand-secondary) !important; 
+		outline-offset: -2px; 
+		box-shadow: none !important; 
 	}
 
-	&.cards-tertiary {
-		&:after {
-			border-bottom: 4px solid @payex-dark-blue;
-		}
-
-		> i {
-			color: @payex-dark-blue;
-		}
-
-		.cards-icon {
-			color: @white;
-			background-color: @payex-dark-blue;
-		}
+	.cards-cta:hover .arrow:before {
+		background-color: var(--brand-secondary) !important;
 	}
 }
+
+.component-preview-content a.cards:hover .cards-cta span {
+	color: var(--brand-secondary);
+}