From 67ed0e7b98da3cb81c3d90ced1b43f95ee5488c6 Mon Sep 17 00:00:00 2001
From: Andrew Noblet <andrewbnoblet@gmail.com>
Date: Wed, 17 Apr 2024 11:22:00 +0000
Subject: [PATCH] feat(cxl-lumo-styles): add spinner to checkout submit button

https://app.clickup.com/t/86b040y1c
---
 packages/cxl-lumo-styles/scss/global.scss | 46 +++++++++++------------
 1 file changed, 22 insertions(+), 24 deletions(-)

diff --git a/packages/cxl-lumo-styles/scss/global.scss b/packages/cxl-lumo-styles/scss/global.scss
index 6daa180a1..9d6bd810a 100644
--- a/packages/cxl-lumo-styles/scss/global.scss
+++ b/packages/cxl-lumo-styles/scss/global.scss
@@ -327,36 +327,34 @@ ul.courses-list {
   * @see https://app.clickup.com/t/86azbhexr
   * @since 2024.02.20
   */
-vaadin-button {
+form.processing button, vaadin-button[pending] {
   cursor: pointer;
 
-  &[pending] {
-    &::before{
-      background-color: var(--lumo-base-color);
-      opacity: initial;
-    }
+  &::before{
+    background-color: var(--lumo-base-color) !important;
+    opacity: unset !important;
+  }
 
-    &[theme~="primary"] {
-      color: var(--lumo-primary-color);
-      background-color: var(--lumo-primary-color);
+  &[theme~="primary"] {
+    color: var(--lumo-primary-color);
+    background-color: var(--lumo-primary-color);
 
-      &::before {
-        mask: var(--cxl-loading-spinner-url);
-        mask-size: 24px;
-        mask-repeat: no-repeat;
-        mask-position: center;
-      }
+    &::before {
+      mask: var(--cxl-loading-spinner-url);
+      mask-size: 24px;
+      mask-repeat: no-repeat;
+      mask-position: center;
     }
+  }
 
-    &[theme~="secondary"] {
-      &::before {
-        background-color: var(--lumo-base-color);
-        background-image: var(--cxl-loading-spinner-url);
-        background-repeat: no-repeat;
-        background-position: center;
-        background-size: 24px;
-        border: 1px solid var(--lumo-primary-color);
-      }
+  &[theme~="secondary"] {
+    &::before {
+      background-color: var(--lumo-base-color);
+      background-image: var(--cxl-loading-spinner-url);
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: 24px;
+      border: 1px solid var(--lumo-primary-color);
     }
   }
 }