diff --git a/src/fmg-components/donation-block/donation-block.vue b/src/fmg-components/donation-block/donation-block.vue
index 17b4e2fa9..1a5548b70 100644
--- a/src/fmg-components/donation-block/donation-block.vue
+++ b/src/fmg-components/donation-block/donation-block.vue
@@ -1,52 +1,66 @@
 <template>
     <div class="donation-block">
-            <div class="row">
-                <div class="col">
-                    <p class="headline text-center" v-html="DonationHeadline"></p>
-                </div>
+        <div class="row">
+            <div class="col">
+                <p class="headline text-center" v-html="DonationHeadline"></p>
             </div>
-            <div class="row-align d-flex">
-                <div>
-                    <img class="w-100 mt-1 me-4" :src="LogoImage">
-                </div>
-                <div>
-                    <p class="small subheadline mb-2" v-html="DonationSubHeadline"></p>
-                    <p class="caption mb-0" v-html="DonationBodyText"></p>
-                    <textLink
-                        linkType="newWindowLink"
-                        text="Learn more"
-                        :href="DonationBodySubText"
-                        target="_blank" />
-                </div>
+        </div>
+        <div class="row-align d-flex">
+            <div>
+                <img class="w-100 mt-1 me-4" :src="LogoImage" />
             </div>
-            <div class="row">
-                <div class="col">
-                    <div class="donation-slider my-4">
-                        <input name="amount" id="one" type="radio" checked/>
-                        <label for="one" class="label">$1</label>
-                        <input name="amount" id="three" type="radio" />
-                        <label for="three" class="label" >$3</label>
-                        <input name="amount" id="five" type="radio" />
-                        <label for="five" class="label" >$5</label>
-                        <div class="indicator-bar" ></div>
-                    </div>
-                </div>
+            <div>
+                <p class="small subheadline mb-2" v-html="DonationSubHeadline"></p>
+                <p class="caption mb-0" v-html="DonationBodyText"></p>
+                <textLink
+                    linkType="newWindowLink"
+                    text="Learn more"
+                    :href="DonationBodySubText"
+                    target="_blank" />
             </div>
-            <div class="row">
-                <div class="col">
-                    <button class="btn btn-secondary w-100 mb-2">Add donation to order</button>
-                </div>
-            </div>
-            <div class="row">
-                <div class="col">
-                    <p class="m-0 text-center caption" v-html="DonationFooterText"></p>
+        </div>
+        <div class="row">
+            <div class="col">
+                <div class="donation-slider my-4">
+                    <input name="amount" id="one" type="radio" checked />
+                    <label for="one" class="label">$1</label>
+                    <input name="amount" id="three" type="radio" />
+                    <label for="three" class="label">$3</label>
+                    <input name="amount" id="five" type="radio" />
+                    <label for="five" class="label">$5</label>
+                    <div class="indicator-bar"></div>
                 </div>
             </div>
         </div>
+        <div class="row">
+            <div class="col">
+                <button class="btn btn-secondary w-100 mb-2" v-html="DonationAddButtonWidget"></button>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col">
+                <div v-if="donationSuccess" class="btn-success w-100 mb-2" v-html="DonationThanksAlertWidget"></div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col">
+                <alert
+                    v-if="donationError"
+                    cmsWidgetName="DonationErrorWidget"
+                    alertClass="alert-danger" />
+            </div>
+        </div>
+        <div class="row">
+            <div class="col">
+                <p class="my-4 mx-0 text-center caption" v-html="DonationFooterText"></p>
+            </div>
+        </div>
+    </div>
 </template>
 
 <script>
 import textLink from "@/ux-components/text-link/text-link";
+import alert from "@/ux-components/alert/alert";
 export default {
     name: "donationBlock",
     props: {
@@ -65,6 +79,12 @@ export default {
         DonationBodySubText() {
             return this.getCmsContent(this.cmsWidgetName, "BodyText2");
         },
+        DonationAddButtonWidget() {
+            return this.getCmsContent("DonationAddButtonWidget", "Text");
+        },
+        DonationThanksAlertWidget() {
+            return this.getCmsContent("DonationThanksAlertWidget", "Text");
+        },
         DonationFooterText() {
             return this.getCmsContent(this.cmsWidgetName, "FooterText");
         },
@@ -72,8 +92,15 @@ export default {
             return this.getCmsContent("DonationWidget", "Image");
         },
     },
+    data() {
+        return {
+            donationSuccess: true,
+            donationError: true,
+        };
+    },
     components: {
         textLink,
+        alert,
     },
 };
 </script>
@@ -100,14 +127,14 @@ export default {
     :deep(a) {
         &.new-window-link {
             color: $blue;
-            font-size: .75rem;
+            font-size: 0.75rem;
         }
     }
 
     img {
         width: 5rem;
     }
-    
+
     .donation-slider {
         position: relative;
         width: 100%;
@@ -118,7 +145,7 @@ export default {
         background: $blue-100;
         border-radius: 3rem;
         box-shadow: 0px 0px 4px 1px rgba(0, 112, 209, 1) inset;
-        font-size: .875rem;
+        font-size: 0.875rem;
         .label {
             position: relative;
             display: inline-flex;
@@ -130,7 +157,7 @@ export default {
             align-items: center;
             justify-content: center;
             color: $blue;
-            z-index: 2;
+            z-index: 1;
         }
         .indicator-bar {
             width: 33.3333%;
@@ -140,10 +167,11 @@ export default {
             left: -2rem;
             background: $blue;
             border-radius: 3rem;
-            box-shadow: 0px 0px 0px 1px rgba(0,112,209,1) inset;
-            transition: transform 600ms cubic-bezier(.02,.94,.09,.97),
-                        background 300ms cubic-bezier(.17,.67,.14,1.03);
-            transform: translate3d(2rem,0,0);
+            box-shadow: 0px 0px 0px 1px rgba(0, 112, 209, 1) inset;
+            transition:
+                transform 600ms cubic-bezier(0.02, 0.94, 0.09, 0.97),
+                background 300ms cubic-bezier(0.17, 0.67, 0.14, 1.03);
+            transform: translate3d(2rem, 0, 0);
         }
         .indicator-bar {
             background: $blue;
@@ -165,45 +193,42 @@ export default {
                 }
             }
         }
-        
+
         input:checked {
             + label {
-                color: #ffffff;
-            &:after {
-                content: "";
-                background-image: url("data:image/svg+xml,%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='0 0 870.67 816.32'%3E%3Cdefs%3E%3ClinearGradient id='linear-gradient' x1='662.76' y1='671.84' x2='260.67' y2='-24.61' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23600'/%3E%3Cstop offset='.38' stop-color='%23c00'/%3E%3Cstop offset='.62' stop-color='red'/%3E%3Cstop offset='.7' stop-color='%23fa0000'/%3E%3Cstop offset='.78' stop-color='%23e00'/%3E%3Cstop offset='.85' stop-color='%23d00'/%3E%3Cstop offset='1' stop-color='%238a0000'/%3E%3C/linearGradient%3E%3ClinearGradient id='linear-gradient1' x1='435.29' y1='486.21' x2='416.19' y2='-115.43' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ff3e3e'/%3E%3Cstop offset='.99' stop-color='%23fff'/%3E%3C/linearGradient%3E%3ClinearGradient id='linear-gradient2' x1='52.9' y1='694.61' x2='45.74' y2='415.28' gradientTransform='rotate(1.6 9670.576 4535.536)' xlink:href='%23linear-gradient1'/%3E%3ClinearGradient id='linear-gradient3' x1='46.8' y1='694.77' x2='39.64' y2='415.44' gradientTransform='rotate(1.6 9670.576 4535.536)' xlink:href='%23linear-gradient1'/%3E%3ClinearGradient id='linear-gradient4' x1='25.7' y1='695.32' x2='18.53' y2='415.98' gradientTransform='rotate(1.6 9670.576 4535.536)' xlink:href='%23linear-gradient1'/%3E%3ClinearGradient id='linear-gradient5' x1='-12.6' y1='696.3' x2='-19.76' y2='416.96' gradientTransform='rotate(1.6 9670.576 4535.536)' xlink:href='%23linear-gradient1'/%3E%3Cstyle%3E .st5%7Bfill:%23ffd8d8%7D %3C/style%3E%3C/defs%3E%3Cpath d='M850.73 157.29c-15.89-38.68-40.56-73.38-72.89-100.06-60.58-50.01-144.81-71.78-220.55-46.27-29.85 10.06-56.86 26.94-79.49 48.79-17.18 16.58-31.14 35.81-42.69 56.47-16.92-29.82-38.81-56.16-66.99-76.98C336.25 15.7 297.46 2.91 258.1.42c-80.59-5.1-157.87 36.47-206.16 99.43C-8.99 179.3-11 287.46 18.6 379.62c35.58 110.77 112.11 205.92 195.99 284.42 31.77 29.73 65.5 57.35 100.52 83.15 34.93 25.74 70.73 49.34 110.8 66.16.28.18.56.33.84.49.01 0 .02.02.04.02.2.11.4.23.6.34 3.75 2.11 8.15 2.87 12.24 1.23 54.83-22.08 102.82-57.24 148.96-93.64 45.1-35.59 87.47-74.76 125.92-117.46 76.48-84.93 140.93-187.72 154.03-303.36 5.46-48.14.68-98.65-17.82-143.67Z' style='fill:%23840000'/%3E%3Cpath d='M435.11 799c19.29-7.72 34.73-15.43 54.02-27.01 169.78-108.04 385.86-320.26 362.7-540.2-23.15-223.8-320.26-308.68-416.72-77.17l.1-.09C338.75-76.98 41.64 7.91 18.49 231.71c-23.15 219.94 192.93 432.16 362.7 540.2 19.29 11.58 34.73 19.29 54.02 27.01l-.1.09Z' style='fill:url(%23linear-gradient)'/%3E%3Cpath d='M300.26 415.14c29.1-9.41 57.48-21.36 83.9-36.84 31.75-18.59 60.86-41.88 90.42-63.69 66.44-49.04 134.87-100.05 213.64-127.48 37.03-12.89 76.56-20.34 115.88-17.76 6.31.41 12.56 1.08 18.77 1.94-12.88-32.82-33.06-62.11-59.36-85.5-39-34.68-89.71-54.57-139.14-54.57-77.87 0-142.09 46.89-176.21 128.64l-12.97 31.08-12.96-31.08C388.1 78.06 323.86 31.14 245.96 31.14c-49.44 0-100.16 19.89-139.15 54.57-41.97 37.33-68.37 89.69-74.35 147.47-5.25 49.85 2.23 102.2 22.22 155.6 4.21 11.26 9.01 22.58 14.33 33.94 12.11 4.24 24.69 7.51 37.54 9.82 64.26 11.53 132 2.55 193.7-17.4Z' style='fill:url(%23linear-gradient1)'/%3E%3Cpath d='m111.01 121.67 9.89 6.48c9.83-19.06 23.38-36.68 39.91-51.57 16.54-14.89 36.06-27.07 57.51-35.46-44.04 12.93-82.87 42.12-107.32 80.55Z' style='fill:url(%23linear-gradient2)'/%3E%3Cpath d='m98.84 113.71 9.87 6.46c25.6-38.5 65.34-67.02 109.62-79.06-22.64 4.17-44.93 12.56-65.32 24.83a201.356 201.356 0 0 0-54.18 47.77Z' style='fill:url(%23linear-gradient3)'/%3E%3Cpath d='m150.02 407.87 42.63-1c-25.71-31.97-74.8-110.78-84.77-150.14-4.95-19.66-7.16-40.01-5.82-60.43 1.34-20.4 6.21-40.82 14.9-60l-10.94-6.39c-11.15 19.55-18.58 41.12-22.18 63.23-3.62 22.15-3.4 44.81-.06 66.95 3.35 22.17 9.76 43.81 18.36 64.51 8.59 20.7 35.57 64.51 47.89 83.25Z' style='fill:url(%23linear-gradient4)'/%3E%3Cpath d='m96.55 407.85 46.92 1.99c-12.2-19.36-39.45-61.26-47.81-82.59-8.39-21.33-14.49-43.59-17.48-66.33-2.96-22.73-2.72-45.95 1.44-68.49 4.14-22.53 12.15-44.36 23.87-63.96l-10.92-6.37C78.38 142.06 67.8 165 61.4 189.27c-6.45 24.29-8.67 49.78-7.32 75.03 1.36 25.25 6.21 50.23 13.58 74.25 7.37 24.07 17.26 47.22 28.89 69.31Z' style='fill:url(%23linear-gradient5)'/%3E%3Cpath class='st5' d='M599.93 49.87c26.73-4.07 54.64.43 79.43 12.61l5.43-12.03c-28.69-9.28-58.72-9.08-84.86-.58Z'/%3E%3Cpath class='st5' d='M599.93 49.87c26.73-4.07 54.64.43 79.43 12.61l5.43-12.03c-28.69-9.28-58.72-9.08-84.86-.58Z'/%3E%3Cpath class='st5' d='M678.1 65.29c-23.87-12.86-51.33-18.44-78.17-15.42 27.42 1.43 52.79 11.66 72.74 27.44l5.43-12.02Z'/%3E%3Cpath class='st5' d='M678.1 65.29c-23.87-12.86-51.33-18.44-78.17-15.42 27.42 1.43 52.79 11.66 72.74 27.44l5.43-12.02ZM803.48 169.34c-9.09-23.33-21.64-44.67-36.95-62.74-21.11-25.04-47.51-43.85-75.7-54.09l-6.28 12.66c24.11 12.94 44.95 32.73 60.31 56.55 9.58 14.74 17.05 30.99 22.29 48.05 12.08-1 24.21-1.18 36.32-.42Z'/%3E%3Cpath class='st5' d='M803.48 169.34c-9.09-23.33-21.64-44.67-36.95-62.74-21.11-25.04-47.51-43.85-75.7-54.09l-6.28 12.66c24.11 12.94 44.95 32.73 60.31 56.55 9.58 14.74 17.05 30.99 22.29 48.05 12.08-1 24.21-1.18 36.32-.42Z'/%3E%3Cpath class='st5' d='m683.1 68.09-6.28 12.65c19.1 16.29 33.07 37.32 41.37 59.59 4.39 11.73 7.21 23.76 8.61 35.73 10.7-2.41 21.52-4.29 32.41-5.51-4.45-15.92-10.93-31.25-19.38-45.35-14.02-23.49-33.57-43.54-56.74-57.11Z'/%3E%3Cpath class='st5' d='m683.1 68.09-6.28 12.65c19.1 16.29 33.07 37.32 41.37 59.59 4.39 11.73 7.21 23.76 8.61 35.73 10.7-2.41 21.52-4.29 32.41-5.51-4.45-15.92-10.93-31.25-19.38-45.35-14.02-23.49-33.57-43.54-56.74-57.11Z'/%3E%3C/svg%3E");
-                background-repeat: no-repeat;
-                font-size: 1rem;
-                animation: pulsate 1s;
-                width: 1rem;
-                height: 0.95rem;
-                position: absolute;
-                opacity: 0;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-            }
+                color: $white;
             }
         }
         input[type="radio"] {
             &:not(:checked),
             &:checked {
-            position: absolute;
-            left: -999999px;
-            display: none;
+                position: absolute;
+                left: -999999px;
+                display: none;
             }
         }
-        @keyframes pulsate {
-            0% {
-                transform: scale(1);
-                opacity: 1;
-            }
-            100% {
-                transform: scale(10);
-                opacity: 0;
-            }   
-        }
     }
-
+    .alert {
+        border: 1px solid $red;
+    }
+    .btn-success {
+        display: flex;
+        background: $green-100;
+        border: 1px solid $green-400;
+        border-radius: .5rem;
+        height: 3rem;
+        padding: .5rem;
+        justify-content: center;
+        align-items: center;
+        font-weight: 600;
+        &:before {
+            content: "";
+                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 17 16'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%230C7E47' d='M8.5 0a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm3.7 6.171-4.449 4.45a.559.559 0 0 1-.8 0l-2.16-2.16a.563.563 0 0 1 .792-.8l1.76 1.76 4.066-4.042a.563.563 0 1 1 .792.8v-.008Z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M.5 0h16v16H.5z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
+                width: 1rem;
+                height: 0.95rem;
+                position: relative;
+                left: -0.25rem;
+            }
+    }
 }
 </style>
diff --git a/src/fmg-components/save-progress-modal-question/save-progress-modal-question.vue b/src/fmg-components/save-progress-modal-question/save-progress-modal-question.vue
index 5b885f27f..873e58709 100644
--- a/src/fmg-components/save-progress-modal-question/save-progress-modal-question.vue
+++ b/src/fmg-components/save-progress-modal-question/save-progress-modal-question.vue
@@ -205,7 +205,7 @@ export default {
             }
         }
     }
-    
+
     .alert {
         border-radius: $border-radius-lg;
         border: 1px solid $green;
diff --git a/src/fmg-components/save-progress-popup-question/save-progress-popup-question.vue b/src/fmg-components/save-progress-popup-question/save-progress-popup-question.vue
index 5d98d5c4b..34ef44e71 100644
--- a/src/fmg-components/save-progress-popup-question/save-progress-popup-question.vue
+++ b/src/fmg-components/save-progress-popup-question/save-progress-popup-question.vue
@@ -219,7 +219,7 @@ export default {
             .textbox-question {
                 padding: 0;
                 margin: 0 0 1.5rem 0;
-                
+
                 label {
                     text-align: left;
                     font-weight: 900;
@@ -258,7 +258,7 @@ export default {
 
     &.progress-saved {
         .modal-footer-button,
-        .modal-disclaimer  {
+        .modal-disclaimer {
             display: none;
         }
         .skip-button {
diff --git a/src/layouts/confirmation/confirmation.vue b/src/layouts/confirmation/confirmation.vue
index 59a8b1a8b..a239be8c5 100644
--- a/src/layouts/confirmation/confirmation.vue
+++ b/src/layouts/confirmation/confirmation.vue
@@ -64,10 +64,9 @@
                                 :isItac="isItac"
                                 :isNoComp="isNoComp" />
 
-                                <div class="mt-3">
-                                <donationBlock
-                                    cmsWidgetName="DonationWidget" />
-                                </div>
+                            <div class="mt-3">
+                                <donationBlock cmsWidgetName="DonationWidget" />
+                            </div>
 
                             <hr class="mb-5" />
 
@@ -113,7 +112,7 @@ import experimentMixin from "@/mixins/experiment-mixin.js";
 import { partTypeStrings } from "@/constants/part-type-strings";
 import { containsLineItemWithPartType } from "@/helpers/service-package-helper";
 import { containsRecalParts } from "@/helpers/recal-helper.js";
-import donationBlock from "../../fmg-components/donation-block/donation-block.vue";
+import donationBlock from "@/fmg-components/donation-block/donation-block.vue";
 
 export default {
     name: "confirmation",
@@ -122,13 +121,13 @@ export default {
 
         // send part question data to SPS API for logging
         const orderFromStore = await deepClone(store.getters.order);
-        const ctu = orderFromStore.serviceLocation?.zipCodeCtu
+        const ctu = orderFromStore.serviceLocation?.zipCodeCtu;
 
         const partsOrQuestions = orderFromStore.damage?.partQuestionAnswers;
 
-        partsOrQuestions.forEach(pqa => {
+        partsOrQuestions.forEach((pqa) => {
             const payloadPartQuestions = [];
-            pqa.answeredQuestions.forEach(answer => {
+            pqa.answeredQuestions.forEach((answer) => {
                 payloadPartQuestions.push({
                     questionSeq: answer?.questionNum,
                     questionText: answer?.questionText,
@@ -138,24 +137,18 @@ export default {
             });
 
             const payload = {
-            eon: orderFromStore.eon,
-            ctu: ctu,
-            workOrderId: orderFromStore.workOrderId,
-            workOrderNumber: orderFromStore.workOrderNumber,
-            carId: orderFromStore.vehicle.carId,
-            glassLocation: pqa?.glassLocation,
-            partQuestions: payloadPartQuestions,
-        };
-
-        baseMixin.methods.dispatchStoreAction(
-            storeActions.LOG_PART_QUESTIONS,
-            payload,
-            false
-        );
+                eon: orderFromStore.eon,
+                ctu: ctu,
+                workOrderId: orderFromStore.workOrderId,
+                workOrderNumber: orderFromStore.workOrderNumber,
+                carId: orderFromStore.vehicle.carId,
+                glassLocation: pqa?.glassLocation,
+                partQuestions: payloadPartQuestions,
+            };
 
+            baseMixin.methods.dispatchStoreAction(storeActions.LOG_PART_QUESTIONS, payload, false);
         });
 
-
         // Create order
         await baseMixin.methods.dispatchStoreAction(storeActions.CREATE_SUBMITTED_ORDER); // This nulls the Store order
 
@@ -503,7 +496,7 @@ export default {
         addToCalendar,
         cart,
         textBlock,
-        donationBlock
+        donationBlock,
     },
 };
 </script>
diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue
index 698c8bb09..add9339c1 100644
--- a/src/layouts/payment-method/payment-method.vue
+++ b/src/layouts/payment-method/payment-method.vue
@@ -37,7 +37,7 @@
                         :isItac="isItac"
                         :isNoComp="isNoComp"
                         :isExpandedOnLoad="false" />
-            
+
                     <hr />
 
                     <div>
diff --git a/src/store/index.js b/src/store/index.js
index 77a1f1e95..340db8a38 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1448,16 +1448,7 @@ export const actions = {
 
     logPartQuestions(
         context,
-        {
-            eon,
-            ctu,
-            workOrderId,
-            workOrderNumber,
-            carId,
-            glassLocation,
-            partQuestions,
-            userAgent,
-        }
+        { eon, ctu, workOrderId, workOrderNumber, carId, glassLocation, partQuestions, userAgent }
     ) {
         var payload = {
             applicationName: applicationConfig.APPLICATION_NAME,
@@ -1468,15 +1459,14 @@ export const actions = {
             carId: carId,
             glassLocation: glassLocation,
             partQuestions: partQuestions,
-            userAgent: navigator.userAgent
+            userAgent: navigator.userAgent,
         };
 
-        return globalMethods
-            .callHttpClient({
-                method: endpoints.LogPartQuestions.method,
-                endpoint: endpoints.LogPartQuestions.url,
-                payload: payload,
-            });
+        return globalMethods.callHttpClient({
+            method: endpoints.LogPartQuestions.method,
+            endpoint: endpoints.LogPartQuestions.url,
+            payload: payload,
+        });
     },
 
     // Misc Actions
diff --git a/src/ux-components/button-main/button-main.vue b/src/ux-components/button-main/button-main.vue
index 7980adf99..982e7bb1b 100644
--- a/src/ux-components/button-main/button-main.vue
+++ b/src/ux-components/button-main/button-main.vue
@@ -156,5 +156,48 @@ export default {
             transition: background 0s 0s ease-in-out;
         }
     }
+    &.btn-success {
+        position: relative;
+        background: $green-100;
+        border: 1px solid $green-400;
+        border-radius: $border-radius-lg;
+        color: $black;
+        font-weight: 500;
+        transition: all 150ms linear;
+        height: 3rem;
+        &:hover {
+            color: $black;
+            background: $green-200;
+        }
+        &:focus, // Mouse, touch, stylus focus
+        &:focus-visible {
+            // Keyboard focus for accessibility
+            outline: none;
+            box-shadow:
+                0 0 0 3px $white,
+                0 0 0 5.5px $green-400;
+            color: $black;
+            background: $green-100;
+        }
+        &:disabled {
+            background: transparent;
+            color: $gray-550 !important;
+            font-weight: 400;
+            height: 48px;
+            border: 1px solid $gray-550;
+            border-radius: $border-radius-lg;
+            cursor: pointer;
+            pointer-events: all;
+        }
+        &.has-loader {
+            color: $white;
+            @include blue-gradient;
+            pointer-events: none;
+        }
+        &.delay {
+            // fixes flicker while transitioning between states
+            transition: background 0s 0s ease-in-out;
+        }
+    }
 }
 </style>