From 5239b259d0b114e8f7b27aa00155774402d1f4ee Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Tue, 9 Mar 2021 17:22:07 +0100
Subject: [PATCH] Transform question mark to cross when tooltip is open

 - Behavior consistent w/ price_breakdown feature.
---
 .../stylesheets/darkswarm/question-mark-icon.scss | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/darkswarm/question-mark-icon.scss b/app/assets/stylesheets/darkswarm/question-mark-icon.scss
index 7bee5f2c04..ff9322326c 100644
--- a/app/assets/stylesheets/darkswarm/question-mark-icon.scss
+++ b/app/assets/stylesheets/darkswarm/question-mark-icon.scss
@@ -9,6 +9,7 @@
   background-image: image-url("question-mark-icon.svg");
   background-size: cover;
   background-repeat: no-repeat;
+  border-radius: 50%;
 
   // Reset button element css attributes
   padding: 0;
@@ -22,6 +23,17 @@
   &:focus {
     background-color: transparent;
   }
+
+  &.open {
+    background-image: none;
+    background-color: $teal-500;
+
+    &::before {
+      @include icon-font;
+      content: "";
+      color: $white;
+    }
+  }
 }
 
 .joyride-tip-guide.question-mark-tooltip {
@@ -29,7 +41,7 @@
   max-width: 65%;
   // JS needs to be tweaked to adjust for left alignment - this is dynamic can't rewrite in CSS
   margin-left: -7.4rem;
-  margin-top: 0.1rem;
+  margin-top: -0.1rem;
   background-color: transparent;
 
   .background {
@@ -39,6 +51,7 @@
     width: 100%;
     height: 100%;
     z-index: -1;
+    cursor: pointer;
   }
 
   .joyride-content-wrapper {