update details style

Author: colleenmcginnis

resources/web/style/base_styles.pcss

@@ -28,7 +28,35 @@
   }
 
   details {
+    background-color: #F1F4FA;
     margin-bottom: 1.15em;
+    border: 1px #D3DAE6 solid;
+    border-radius: 3px;
+    summary {
+      list-style-type: none;
+      display: inline-block;
+      width: 100%;
+      padding: 10px;
+      &:before {
+        content: url('data:image/svg+xml;utf8,<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.14898 5.10103C5.81704 4.76909 5.81704 4.2309 6.14898 3.89895C6.48093 3.56701 7.01912 3.56701 7.35107 3.89895L11.8511 8.39895C12.183 8.7309 12.183 9.26909 11.8511 9.60103L7.35107 14.101C7.01912 14.433 6.48093 14.433 6.14898 14.101C5.81704 13.7691 5.81704 13.2309 6.14898 12.899L10.0479 8.99999L6.14898 5.10103Z" fill="black"/></svg>');
+        display: inline-block;
+        transform: translate(0px, 3.5px) rotate(0deg);
+        transition: .1s ease-in-out;
+        margin-right: 8px;
+      }
+    }
+    .content {
+      padding: 5px 20px 0px 36px;
+    }
+  }
+
+  details[open] {
+    summary {
+      &:before {
+        transform: translate(-3.5px, 0px) rotate(90deg);
+        transition: .1s ease-in-out;
+      }
+    }
   }
 
   .container-fluid {