tab color separate

app/static/css/application.css

@@ -735,6 +735,7 @@ a:hover {
 	--active-background: #f7f8f9;
 	--bg-color: white;
 	--dropin-color: #f7f8f9;
+	--dropin-tab-color: white;
 }
 
 .card-visited .card__back {
@@ -775,6 +776,10 @@ a:hover {
 	font-family: var(--font-options) !important;
 	border-radius: var(--body-edges) !important;
 	border: var(--border-off) !important;
+	background: var(--dropin-tab-color) !important;
+}
+
+.adyen-checkout__payment-method--selected {
 	background: var(--dropin-color) !important;
 }
 

app/static/js/adyen-implementation.js

@@ -540,6 +540,11 @@ function dropinColor() {
 	r.style.setProperty('--dropin-color', dropinColor);
 }
 
+function dropinTabColor() {
+	let dropinTabColor = document.getElementById("dropinTabColorPick").value;
+	r.style.setProperty('--dropin-tab-color', dropinTabColor);
+}
+
 function buttonEdges () {
 	let edgeValue = document.getElementById('buttonEdges').value
 	let pixelVal = edgeValue + 'px'
@@ -569,6 +574,10 @@ function resetDynamicCSS () {
 	r.style.setProperty('--dropin-width', null);
 	r.style.setProperty('--body-edges', null);
 	r.style.setProperty('--button-edges', null);
+	r.style.setProperty('--bg-color', null);
+	r.style.setProperty('--dropin-color', null);
+	r.style.setProperty('--dropin-tab-color', null);
+	r.style.setProperty('--dropin-font', null)
 }
 
 function dropinWidth () {

app/templates/component.html

@@ -143,10 +143,18 @@
             <span>Dropin background colour: </span>
             <input type="color" name="" id="dropinColorPick" onchange="dropinColor()">
           </div>
+          <div>
+            <span>Dropin Tabs colour: </span>
+            <input type="color" name="" id="dropinTabColorPick" onchange="dropinTabColor()">
+          </div>
           <div>
           <button type="button" onclick="resetDynamicCSS()">reset</button>
         </div>
         </div>
+        <div class="custom-control custom-switch">
+          <input type="checkbox" class="custom-control-input" id="idealPM" data-toggle="toggle">
+          <label class="custom-control-label" for="noBorder">Ideal</label>
+        </div>
     </div>
 
       <div class="card-selector">