From 5207f38b365ac4c0ea374e053579280f80d12d54 Mon Sep 17 00:00:00 2001
From: Antoine M <antoine.martinon@deligraph.com>
Date: Tue, 13 Feb 2024 19:29:02 +0100
Subject: [PATCH] refining score component

---
 src/assets/css/components/Score.scss | 45 ++++++++++++++++++++++++++++
 1 file changed, 45 insertions(+)
 create mode 100644 src/assets/css/components/Score.scss

diff --git a/src/assets/css/components/Score.scss b/src/assets/css/components/Score.scss
new file mode 100644
index 0000000..700fbbd
--- /dev/null
+++ b/src/assets/css/components/Score.scss
@@ -0,0 +1,45 @@
+.score {
+	@apply absolute bottom-4 left-4 z-10;
+
+	.answers-visualiser {
+		@apply flex gap-4 p-0 m-0;
+		.answer {
+			@apply bg-white shrink-0 h-16 w-16 list-none relative flex items-center justify-center;
+			aspect-ratio: 1;
+			width: auto;
+			z-index: -2;
+
+			&:nth-child(odd) {
+				transform: skew(-2deg) rotate(-2deg);
+			}
+			&:nth-child(even) {
+				transform: skew(2deg) rotate(2deg);
+			}
+			&:after {
+				@apply absolute block top-1/2 left-1/2  bg-neutral-100;
+				z-index: -1;
+				width: 80%;
+				height: 80%;
+				content: "";
+				transform: translate(-50%, -50%);
+			}
+
+	
+
+			&__behaviour-type-icon {
+				width: 70%;
+				height: 70%;
+			}
+			&__sucess-indicator {
+				@apply absolute right-0 top-0 w-3 h-3 p-1 rounded-full border-4 border-white border-solid;
+				transform: translate(40%, -40%);
+				&--success {
+					@apply bg-green-600;
+				}
+				&--error {
+					@apply bg-red-600;
+				}
+			}
+		}
+	}
+}