Put border on answers in Result component

To avoid using the same as the background color on hover,
it's additionally put on a white background.
The border is implemented with a relative value of the neutral-light color.

Part of XI-6385

Author: christophblessing

src/components/Result.module.scss

@@ -25,7 +25,7 @@
     @include variables.font-s;
 
     &:hover {
-      background-color: hsl(0, 0%, 99%);
+      background-color: variables.$neutral-light;
     }
   }
 
@@ -54,6 +54,7 @@
   .chevronIcon {
     color: variables.$neutral-dark;
     @include variables.font-s;
+    cursor: pointer;
   }
 
   .correctIcon {

src/components/ResultViewer.module.scss

@@ -45,18 +45,26 @@
   margin: 5px 0;
   box-sizing: border-box;
   flex-wrap: nowrap;
-  background-color: variables.$neutral-light;
+  background-color: white;
+  border: 1px solid;
+  border-color: variables.$border-neutral;
 
   &.selected {
     font-weight: bold;
+
+    .icon {
+      color: variables.$neutral-dark;
+    }
   }
 
   &.correct {
     background-color: variables.$success-light;
+    border-color: variables.$success;
   }
 
   &.wrong {
     background-color: variables.$danger-light;
+    border-color: variables.$danger;
   }
 
   .icon {

src/variables.scss

@@ -5,6 +5,8 @@ $neutral: var(--qr-color-neutral, hsl(0, 0%, 45%));
 $neutral-light: var(--qr-color-neutral-light, hsl(0, 0%, 96%));
 $neutral-dark: var(--qr-color-neutral-dark, hsl(0, 0%, 32%));
 
+$border-neutral: hsl(from $neutral-light h s 80%);
+
 $success: var(--qr-color-success, hsl(142, 71%, 45%));
 $success-light: var(--qr-color-success-light, hsl(142, 77%, 73%));
 $success-dark: var(--qr-color-success-dark, hsl(142, 76%, 36%));