@sc-360-v2/storefront-cms-library 0.4.34 → 0.4.35

package/dist/login.scss

@@ -1,5 +1,6 @@
 @use "sass:map";
 @use "sass:list";
+@use "./functions.scss" as *;
 
 [data-div-type="element"] {
   &[data-element-type="login"],
@@ -185,53 +186,358 @@
       // Login Box
       .loginBox {
         width: 100%;
-        background-color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-bd-cr)));
+        // background-color: var(
+        //   --_ctm-mob-dn-wt-bd-cr,
+        //   var(--_ctm-tab-dn-wt-bd-cr, var(--_ctm-dn-wt-bd-cr))
+        // );
+        gap: var(--_ctm-mob-dn-wt-im-gp, var(--_ctm-tab-dn-wt-im-gp, var(--_ctm-dn-wt-im-gp)));
+        display: flex;
+        flex-direction: column;
+        background-color: var(
+          --_ctm-mob-dn-wt-bd-cr,
+          var(--_ctm-tab-dn-wt-bd-cr, var(--_ctm-dn-wt-bd-cr))
+        );
+        padding: var(--_ctm-mob-dn-wt-pg, var(--_ctm-tab-dn-wt-pg, var(--_ctm-dn-wt-pg)));
       }
 
       // Title Styles
       .title {
-        font-weight: 600;
-        // text-align: center;
-        // color: var(--_gray-900);
-        // color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
-        font-size: 24px;
-        margin: 8px 0px 4px 0px;
+        font-family: var(
+          --_ctm-mob-dn-te-ft-fy,
+          var(--_ctm-tab-dn-te-ft-fy, var(--_ctm-dn-te-ft-fy))
+        );
+        color: var(--_ctm-mob-dn-te-cr, var(--_ctm-tab-dn-te-cr, var(--_ctm-dn-te-cr)));
+        font-weight: var(
+          --_ctm-mob-dn-te-ft-wt,
+          var(--_ctm-tab-dn-te-ft-wt, var(--_ctm-dn-te-ft-wt))
+        );
+        font-size: var(
+          --_ctm-mob-dn-te-ft-se,
+          var(--_ctm-tab-dn-te-ft-se, var(--_ctm-dn-te-ft-se))
+        );
+        text-decoration: var(--_ctm-mob-dn-te-ue, var(--_ctm-tab-dn-te-ue, var(--_ctm-dn-te-ue,)));
+        letter-spacing: var(
+          --_ctm-mob-dn-te-lr-sg,
+          var(--_ctm-tab-dn-te-lr-sg, var(--_ctm-dn-te-lr-sg))
+        );
+        line-height: var(
+          --_ctm-mob-dn-te-le-ht,
+          var(--_ctm-tab-dn-te-le-ht, var(--_ctm-dn-te-le-ht))
+        );
+        font-style: var(
+          --_ctm-mob-dn-te-ft-se-ic,
+          var(--_ctm-tab-dn-te-ft-se-ic, var(--_ctm-dn-te-ft-se-ic))
+        );
+        text-align: var(
+          --_ctm-mob-dn-te-tt-an,
+          var(--_ctm-tab-dn-te-tt-an, var(--_ctm-dn-te-tt-an))
+        );
       }
       .desc {
-        font-size: 14px;
-        // color: var(--_gray-500);
+        font-family: var(
+          --_ctm-mob-dn-dn-ft-fy,
+          var(--_ctm-tab-dn-dn-ft-fy, var(--_ctm-dn-dn-ft-fy))
+        );
+        color: var(--_ctm-mob-dn-dn-cr, var(--_ctm-tab-dn-dn-cr, var(--_ctm-dn-dn-cr)));
+        font-weight: var(
+          --_ctm-mob-dn-dn-ft-wt,
+          var(--_ctm-tab-dn-dn-ft-wt, var(--_ctm-dn-dn-ft-wt))
+        );
+        font-size: var(
+          --_ctm-mob-dn-dn-ft-se,
+          var(--_ctm-tab-dn-dn-ft-se, var(--_ctm-dn-dn-ft-se))
+        );
+        text-decoration: var(--_ctm-mob-dn-dn-ue, var(--_ctm-tab-dn-dn-ue, var(--_ctm-dn-dn-ue,)));
+        letter-spacing: var(
+          --_ctm-mob-dn-dn-lr-sg,
+          var(--_ctm-tab-dn-dn-lr-sg, var(--_ctm-dn-dn-lr-sg))
+        );
+        line-height: var(
+          --_ctm-mob-dn-dn-le-ht,
+          var(--_ctm-tab-dn-dn-le-ht, var(--_ctm-dn-dn-le-ht))
+        );
+        font-style: var(
+          --_ctm-mob-dn-dn-ft-se-ic,
+          var(--_ctm-tab-dn-dn-ft-se-ic, var(--_ctm-dn-dn-ft-se-ic))
+        );
+        text-align: var(
+          --_ctm-mob-dn-dn-tt-an,
+          var(--_ctm-tab-dn-dn-tt-an, var(--_ctm-dn-dn-tt-an))
+        );
       }
       .sso_verify {
         border: 1px solid red;
       }
 
       .form_fields {
-        margin-top: 36px;
+        // margin-top: 36px;
+        gap: var(
+          --_ctm-mob-dn-ln-wt-im-gp,
+          var(--_ctm-tab-dn-ln-wt-im-gp, var(--_ctm-dn-ln-wt-im-gp))
+        );
+        display: flex;
+        flex-direction: column;
+        .btn__with__text[data-btn-name="resetButton"] {
+          width: 100%;
+          &[data-show-shadow="false"] {
+            --_show-shadow: none;
+          }
+          &[data-icon-position="left"] {
+            --_sf-fd-bn: row;
+          }
+          &[data-icon-position="right"] {
+            --_sf-fd-bn: row-reverse;
+          }
+          &[data-icon-position="center"] {
+            --_sf-fd-bn: row;
+          }
+
+          &:hover {
+            --_sf-hr-bd-cr: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-bd-cr)};
+            --_sf-hr-br-cr: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-br-cr)};
+            --_sf-hr-br-se: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-br-se)};
+            --_sf-hr-br-wh: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-br-wh)};
+            --_sf-hr-br-rs: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-br-rs)};
+            --_sf-hr-at: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-at)};
+            --_sf-hr-gp: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-gp)};
+
+            // for shadow
+            --_sf-hr-sw-ae: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-sw-ae)};
+            --_sf-hr-sw-br: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-sw-br)};
+            --_sf-hr-sw-hr: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-sw-hr)};
+            --_sf-hr-sw-cr: #{prepareMediaVariable (--_ctm-dn-fm-as-rt-bn-hr-se-sw-cr)};
+            // for font
+
+            --_sf-hr-cr: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-cr)};
+            --_sf-hr-ft-fy: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-ft-fy)};
+            --_sf-hr-ft-se: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-ft-se)};
+            --_sf-hr-ft-wt: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-ft-wt)};
+            --_sf-hr-ft-se-ic: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-ft-se-ic)};
+            --_sf-hr-tt-an: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-tt-an)};
+            --_sf-hr-lr-sg: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-lr-sg)};
+            --_sf-hr-le-ht: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-le-ht)};
+
+            --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-in-se)};
+            --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-in-se)};
+            --_sf-hr-in-c1: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-in-c1)};
+            --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-ue)};
+
+            // for pading and width
+            --_sf-hr-pg: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-pg)};
+            --_sf-hr-wh: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-wh)};
+            &[data-hover-show-shadow="false"] {
+              --_hover-show-shadow: none;
+            }
+            &[data-hover-show-icon="false"] {
+              --_hover-show-icon: none;
+            }
+          }
+
+          background-color: var(
+            --_sf-hr-bd-cr,
+            prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-bd-cr)
+          );
+
+          padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-pg));
+          width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-wh));
+          display: flex;
+          flex-direction: var(--_sf-fd-bn);
+          align-items: center;
+
+          justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-at));
+          gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-gp));
+
+          border-radius: var(
+            --_sf-hr-br-rs,
+            prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-br-rs)
+          );
+
+          box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-sw-ae))
+            var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-sw-br))
+            var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-sw-sd))
+            var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-sw-cr));
+
+          &[data-show-border="true"] {
+            width: 100%;
+            border-color: var(
+              --_sf-hr-br-cr,
+              prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-br-cr)
+            );
+
+            border-style: var(
+              --_sf-hr-br-se,
+              prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-br-se)
+            );
+
+            border-width: var(
+              --_sf-hr-br-wh,
+              prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-br-wh)
+            );
+          }
+
+          .txt {
+            display: flex;
+
+            color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-cr));
+
+            font-family:
+              var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-ft-fy)),
+              sans-serif;
+
+            font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-ft-se));
+
+            font-weight: var(
+              --_sf-hr-ft-wt,
+              prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-ft-wt)
+            );
+
+            font-style: var(
+              --_sf-hr-ft-se-ic,
+              prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-ft-se-ic)
+            );
+
+            text-align: var(
+              --_sf-hr-tt-an,
+              prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-tt-an)
+            );
+
+            letter-spacing: var(
+              --_sf-hr-lr-sg,
+              prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-lr-sg)
+            );
+
+            line-height: var(
+              --_sf-hr-le-ht,
+              prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-le-ht)
+            );
+
+            text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
+          }
+
+          .icon {
+            display: var(--_hover-show-icon, var(--_show-icon, flex));
+            svg {
+              width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-in-se));
+              height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-in-se));
+
+              path {
+                stroke: var(
+                  --_sf-hr-in-c1,
+                  prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-in-c1)
+                );
+              }
+            }
+          }
+          [data-element-style="Text"] {
+            display: inline-block;
+            width: 100%;
+          }
+
+          .icon--hover {
+            // position: absolute;
+            // inset: 0;
+            // opacity: 0;
+            display: none;
+            transition: opacity 0.2s ease;
+          }
+
+          &:hover .icon--hover {
+            // opacity: 1;
+            display: flex;
+          }
+
+          &:hover .icon--default {
+            // opacity: 0;
+            display: none;
+          }
+        }
       }
 
       // Form Group (For Email and Password)
       .field__group {
         // margin-bottom: 16px;
         position: relative;
+        gap: var(
+          --_ctm-mob-dn-fm-fd-is-im-gp,
+          var(--_ctm-tab-dn-fm-fd-is-im-gp, var(--_ctm-dn-fm-fd-is-im-gp))
+        );
+        display: flex;
+        flex-direction: column;
         .input__label {
           display: flex;
           align-items: center;
-          gap: 4px;
-          margin-bottom: 4px;
-          font-size: 16px;
-          font-weight: 500;
+          font-family: var(
+            --_ctm-mob-dn-fm-ll-ft-fy,
+            var(--_ctm-tab-dn-fm-ll-ft-fy, var(--_ctm-dn-fm-ll-ft-fy))
+          );
+          color: var(--_ctm-mob-dn-fm-ll-cr, var(--_ctm-tab-dn-fm-ll-cr, var(--_ctm-dn-fm-ll-cr)));
+          font-weight: var(
+            --_ctm-mob-dn-fm-ll-ft-wt,
+            var(--_ctm-tab-dn-fm-ll-ft-wt, var(--_ctm-dn-fm-ll-ft-wt))
+          );
+          font-size: var(
+            --_ctm-mob-dn-fm-ll-ft-se,
+            var(--_ctm-tab-dn-fm-ll-ft-se, var(--_ctm-dn-fm-ll-ft-se))
+          );
+          text-decoration: var(
+            --_ctm-mob-dn-fm-ll-ue,
+            var(--_ctm-tab-dn-fm-ll-ue, var(--_ctm-dn-fm-ll-ue))
+          );
+          letter-spacing: var(
+            --_ctm-mob-dn-fm-ll-lr-sg,
+            var(--_ctm-tab-dn-fm-ll-lr-sg, var(--_ctm-dn-fm-ll-lr-sg))
+          );
+          line-height: var(
+            --_ctm-mob-dn-fm-ll-le-ht,
+            var(--_ctm-tab-dn-fm-ll-le-ht, var(--_ctm-dn-fm-ll-le-ht))
+          );
+          font-style: var(
+            --_ctm-mob-dn-fm-ll-ft-se-ic,
+            var(--_ctm-tab-dn-fm-ll-ft-se-ic, var(--_ctm-dn-fm-ll-ft-se-ic))
+          );
+          text-align: var(
+            --_ctm-mob-dn-fm-ll-tt-an,
+            var(--_ctm-tab-dn-fm-ll-tt-an, var(--_ctm-dn-fm-ll-tt-an))
+          );
+          // gap: 4px;
+          // margin-bottom: 4px;
+          // font-size: 16px;
+          // font-weight: 500;
         }
         .input__field {
           position: relative;
           svg {
-            width: 20px;
-            height: 20px;
+            width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-fm-is-in-se));
+            height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-fm-is-in-se));
+            path {
+              stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-fm-is-in-c1));
+            }
+          }
+          .placeholder_icon_start_login {
+            position: absolute;
+            z-index: 10;
+            top: 9px;
+            left: 10px;
+            svg {
+              width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-fm-is-in-se));
+              height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-fm-is-in-se));
+              path {
+                stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-fm-is-in-c1));
+              }
+            }
           }
           .placeholder_icon_start {
             position: absolute;
             z-index: 10;
             top: 9px;
             left: 10px;
+            svg {
+              width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-fm-is-fd-in-in-se));
+              height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-fm-is-fd-in-in-se));
+              path {
+                stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-fm-is-fd-in-in-c1));
+              }
+            }
           }
           .placeholder_icon_end {
             position: absolute;
@@ -243,6 +549,81 @@
 
           input {
             padding-left: 38px;
+
+            font-family: var(
+              --_ctm-mob-dn-fm-it-ft-fy,
+              var(--_ctm-tab-dn-fm-it-ft-fy, var(--_ctm-dn-fm-it-ft-fy))
+            );
+            color: var(
+              --_ctm-mob-dn-fm-it-cr,
+              var(--_ctm-tab-dn-fm-it-cr, var(--_ctm-dn-fm-it-cr))
+            );
+            font-weight: var(
+              --_ctm-mob-dn-fm-it-ft-wt,
+              var(--_ctm-tab-dn-fm-it-ft-wt, var(--_ctm-dn-fm-it-ft-wt))
+            );
+            font-size: var(
+              --_ctm-mob-dn-fm-it-ft-se,
+              var(--_ctm-tab-dn-fm-it-ft-se, var(--_ctm-dn-fm-it-ft-se))
+            );
+            text-decoration: var(
+              --_ctm-mob-dn-fm-it-ue,
+              var(--_ctm-tab-dn-fm-it-ue, var(--_ctm-dn-fm-it-ue))
+            );
+            letter-spacing: var(
+              --_ctm-mob-dn-fm-it-lr-sg,
+              var(--_ctm-tab-dn-fm-it-lr-sg, var(--_ctm-dn-fm-it-lr-sg))
+            );
+            line-height: var(
+              --_ctm-mob-dn-fm-it-le-ht,
+              var(--_ctm-tab-dn-fm-it-le-ht, var(--_ctm-dn-fm-it-le-ht))
+            );
+            font-style: var(
+              --_ctm-mob-dn-fm-it-ft-se-ic,
+              var(--_ctm-tab-dn-fm-it-ft-se-ic, var(--_ctm-dn-fm-it-ft-se-ic))
+            );
+            text-align: var(
+              --_ctm-mob-dn-fm-it-tt-an,
+              var(--_ctm-tab-dn-fm-it-tt-an, var(--_ctm-dn-fm-it-tt-an))
+            );
+            border-color: var(
+              --_ctm-mob-dn-fm-it-br-cr,
+              var(--_ctm-tab-dn-fm-it-br-cr, var(--_ctm-dn-fm-it-br-cr))
+            );
+            border-radius: var(
+              --_ctm-mob-dn-fm-it-br-rs,
+              var(--_ctm-tab-dn-fm-it-br-rs, var(--_ctm-dn-fm-it-br-rs))
+            );
+            border-style: var(
+              --_ctm-mob-dn-fm-it-br-se,
+              var(--_ctm-tab-dn-fm-it-br-se, var(--_ctm-dn-fm-it-br-se))
+            );
+            border-width: var(
+              --_ctm-mob-dn-fm-it-br-wh,
+              var(--_ctm-tab-dn-fm-it-br-wh, var(--_ctm-dn-fm-it-br-wh))
+            );
+            box-shadow: var(
+                --_ctm-mob-dn-fm-it-sw-ae,
+                var(--_ctm-tab-dn-fm-it-sw-ae, var(--_ctm-dn-fm-it-sw-ae))
+              )
+              var(
+                --_ctm-mob-dn-fm-it-sw-br,
+                var(--_ctm-tab-dn-fm-it-sw-br, var(--_ctm-dn-fm-it-sw-br))
+              )
+              var(
+                --_ctm-mob-dn-fm-it-sw-sd,
+                var(--_ctm-tab-dn-fm-it-sw-sd, var(--_ctm-dn-fm-it-sw-sd))
+              )
+              var(
+                --_ctm-mob-dn-fm-it-sw-cr,
+                var(--_ctm-tab-dn-fm-it-sw-cr, var(--_ctm-dn-fm-it-sw-cr))
+              );
+            &::placeholder {
+              background-color: var(
+                --_ctm-mob-dn-fm-it-bd-cr,
+                var(--_ctm-tab-dn-fm-it-bd-cr, var(--_ctm-dn-fm-it-bd-cr))
+              );
+            }
           }
         }
         .view__icon {
@@ -259,7 +640,8 @@
       // Input Field Styles
       .inputField {
         width: 100%;
-        padding: 10px;
+        padding: var(--_ctm-mob-dn-fm-it-pg, var(--_ctm-tab-dn-fm-it-pg, var(--_ctm-dn-fm-it-pg)));
+        // padding: 10px;
         border-radius: 6px;
         border: 1px solid var(--_gray-300) !important;
         font-size: 14px;
@@ -303,34 +685,330 @@
       }
 
       // Submit Button
-      .submitButton {
+      .btn__with__text[data-btn-name="Login"] {
         width: 100%;
-        padding: 12px;
-        // background-color: var(--_primary-500);
-        // color: #fff;
-        //  color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
-        border-radius: 6px;
-        border: none;
-        cursor: pointer;
-        // margin-top: 16px;
+        &[data-show-shadow="false"] {
+          --_show-shadow: none;
+        }
+        &[data-icon-position="left"] {
+          --_sf-fd-bn: row;
+        }
+        &[data-icon-position="right"] {
+          --_sf-fd-bn: row-reverse;
+        }
+        &[data-icon-position="center"] {
+          --_sf-fd-bn: row;
+        }
+
+        &:hover {
+          --_sf-hr-bd-cr: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-bd-cr)};
+          --_sf-hr-br-cr: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-br-cr)};
+          --_sf-hr-br-se: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-br-se)};
+          --_sf-hr-br-wh: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-br-wh)};
+          --_sf-hr-br-rs: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-br-rs)};
+          --_sf-hr-at: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-at)};
+          --_sf-hr-gp: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-gp)};
+
+          // for shadow
+          --_sf-hr-sw-ae: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-sw-ae)};
+          --_sf-hr-sw-br: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-sw-br)};
+          --_sf-hr-sw-hr: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-sw-hr)};
+          --_sf-hr-sw-cr: #{prepareMediaVariable (--_ctm-dn-fm-bn-hr-se-sw-cr)};
+          // for font
+
+          --_sf-hr-cr: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-cr)};
+          --_sf-hr-ft-fy: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-ft-fy)};
+          --_sf-hr-ft-se: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-ft-se)};
+          --_sf-hr-ft-wt: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-ft-wt)};
+          --_sf-hr-ft-se-ic: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-ft-se-ic)};
+          --_sf-hr-tt-an: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-tt-an)};
+          --_sf-hr-lr-sg: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-lr-sg)};
+          --_sf-hr-le-ht: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-le-ht)};
+
+          --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-in-se)};
+          --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-in-se)};
+          --_sf-hr-in-c1: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-in-c1)};
+          --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-ue)};
+
+          // for pading and width
+          --_sf-hr-pg: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-pg)};
+          --_sf-hr-wh: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-wh)};
+          &[data-hover-show-shadow="false"] {
+            --_hover-show-shadow: none;
+          }
+          &[data-hover-show-icon="false"] {
+            --_hover-show-icon: none;
+          }
+        }
+
+        background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-bd-cr));
+
+        padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-pg));
+        width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-wh));
         display: flex;
+        flex-direction: var(--_sf-fd-bn);
         align-items: center;
-        justify-content: center;
-        &:has(svg) {
-          gap: 8px;
+
+        justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-at));
+        gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-gp));
+
+        border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-br-rs));
+
+        box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-sw-ae))
+          var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-sw-br))
+          var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-sw-sd))
+          var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-sw-cr));
+
+        &[data-show-border="true"] {
+          width: 100%;
+          border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-br-cr));
+
+          border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-br-se));
+
+          border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-br-wh));
         }
-        svg {
+
+        .txt {
           display: flex;
-          path {
-            stroke: var(--_base-white);
+
+          color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-cr));
+
+          font-family:
+            var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-ft-fy)), sans-serif;
+
+          font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-ft-se));
+
+          font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-ft-wt));
+
+          font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-ft-se-ic));
+
+          text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-tt-an));
+
+          letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-lr-sg));
+
+          line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-le-ht));
+
+          text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
+        }
+
+        .icon {
+          display: var(--_hover-show-icon, var(--_show-icon, flex));
+          svg {
+            width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-in-se));
+            height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-in-se));
+
+            path {
+              stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-in-c1));
+            }
           }
         }
+        [data-element-style="Text"] {
+          display: inline-block;
+          width: 100%;
+        }
 
-        &:disabled {
-          background-color: var(--_primary-100);
-          cursor: not-allowed;
+        .icon--hover {
+          // position: absolute;
+          // inset: 0;
+          // opacity: 0;
+          display: none;
+          transition: opacity 0.2s ease;
+        }
+
+        &:hover .icon--hover {
+          // opacity: 1;
+          display: flex;
+        }
+
+        &:hover .icon--default {
+          // opacity: 0;
+          display: none;
         }
       }
+
+      // .submitButton {
+      //   width: 100%;
+      //   // padding: 12px;
+      //   // background-color: var(--_primary-500);
+      //   // color: #fff;
+      //   //  color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
+      //   // border-radius: 6px;
+      //   // border: none;
+      //   // margin-top: 16px;
+      //   cursor: pointer;
+      //   display: flex;
+      //   align-items: center;
+      //   justify-content: center;
+
+      //   background-color: var(
+      //     --_ctm-mob-dn-fm-bn-dt-se-bd-cr,
+      //     var(--_ctm-tab-dn-fm-bn-dt-se-bd-cr, var(--_ctm-dn-fm-bn-dt-se-bd-cr))
+      //   );
+      //   border-color: var(
+      //     --_ctm-mob-dn-fm-bn-dt-se-br-cr,
+      //     var(--_ctm-tab-dn-fm-bn-dt-se-br-cr, var(--_ctm-dn-fm-bn-dt-se-br-cr))
+      //   );
+      //   border-radius: var(
+      //     --_ctm-mob-dn-fm-bn-dt-se-br-rs,
+      //     var(--_ctm-tab-dn-fm-bn-dt-se-br-rs, var(--_ctm-dn-fm-bn-dt-se-br-rs))
+      //   );
+      //   border-style: var(
+      //     --_ctm-mob-dn-fm-bn-dt-se-br-se,
+      //     var(--_ctm-tab-dn-fm-bn-dt-se-br-se, var(--_ctm-dn-fm-bn-dt-se-br-se))
+      //   );
+      //   border-width: var(
+      //     --_ctm-mob-dn-fm-bn-dt-se-br-wh,
+      //     var(--_ctm-tab-dn-fm-bn-dt-se-br-wh, var(--_ctm-dn-fm-bn-dt-se-br-wh))
+      //   );
+      //   color: var(
+      //     --_ctm-mob-dn-fm-bn-dt-se-cr,
+      //     var(--_ctm-tab-dn-fm-bn-dt-se-cr, var(--_ctm-dn-fm-bn-dt-se-cr))
+      //   );
+      //   font-family: var(
+      //     --_ctm-mob-dn-fm-bn-dt-se-ft-fy,
+      //     var(--_ctm-tab-dn-fm-bn-dt-se-ft-fy, var(--_ctm-dn-fm-bn-dt-se-ft-fy))
+      //   );
+      //   font-size: var(
+      //     --_ctm-mob-dn-fm-bn-dt-se-ft-se,
+      //     var(--_ctm-tab-dn-fm-bn-dt-se-ft-se, var(--_ctm-dn-fm-bn-dt-se-ft-se))
+      //   );
+      //   font-style: var(
+      //     --_ctm-mob-dn-fm-bn-dt-se-ft-se-ic,
+      //     var(--_ctm-tab-dn-fm-bn-dt-se-ft-se-ic, var(--_ctm-dn-fm-bn-dt-se-ft-se-ic))
+      //   );
+      //   font-weight: var(
+      //     --_ctm-mob-dn-fm-bn-dt-se-ft-wt,
+      //     var(--_ctm-tab-dn-fm-bn-dt-se-ft-wt, var(--_ctm-dn-fm-bn-dt-se-ft-wt))
+      //   );
+      //   line-height: var(
+      //     --_ctm-mob-dn-fm-bn-dt-se-le-ht,
+      //     var(--_ctm-tab-dn-fm-bn-dt-se-le-ht, var(--_ctm-dn-fm-bn-dt-se-le-ht))
+      //   );
+      //   letter-spacing: var(
+      //     --_ctm-mob-dn-fm-bn-dt-se-lr-sg,
+      //     var(--_ctm-tab-dn-fm-bn-dt-se-lr-sg, var(--_ctm-dn-fm-bn-dt-se-lr-sg))
+      //   );
+      //   box-shadow: var(
+      //       --_ctm-mob-dn-fm-bn-dt-se-sw-ae,
+      //       var(--_ctm-tab-dn-fm-bn-dt-se-sw-ae, var(--_ctm-dn-fm-bn-dt-se-sw-ae))
+      //     )
+      //     var(
+      //       --_ctm-mob-dn-fm-bn-dt-se-sw-br,
+      //       var(--_ctm-tab-dn-fm-bn-dt-se-sw-br, var(--_ctm-dn-fm-bn-dt-se-sw-br))
+      //     )
+      //     var(
+      //       --_ctm-mob-dn-fm-bn-dt-se-sw-sd,
+      //       var(--_ctm-tab-dn-fm-bn-dt-se-sw-sd, var(--_ctm-dn-fm-bn-dt-se-sw-sd))
+      //     )
+      //     var(
+      //       --_ctm-mob-dn-fm-bn-dt-se-sw-cr,
+      //       var(--_ctm-tab-dn-fm-bn-dt-se-sw-cr, var(--_ctm-dn-fm-bn-dt-se-sw-cr))
+      //     );
+      //   text-decoration: var(
+      //     --_ctm-mob-dn-fm-bn-dt-se-ue,
+      //     var(--_ctm-tab-dn-fm-bn-dt-se-ue, var(--_ctm-dn-fm-bn-dt-se-ue))
+      //   );
+      //   padding: var(
+      //     --_ctm-mob-dn-fm-bn-dt-se-pg,
+      //     var(--_ctm-tab-dn-fm-bn-dt-se-pg, var(--_ctm-dn-fm-bn-dt-se-pg))
+      //   );
+      //   text-align: var(
+      //     --_ctm-mob-dn-fm-bn-dt-se-tt-an,
+      //     var(--_ctm-tab-dn-fm-bn-dt-se-tt-an, var(--_ctm-dn-fm-bn-dt-se-tt-an))
+      //   );
+      //   &:hover {
+      //     background-color: var(
+      //       --_ctm-mob-dn-fm-bn-hr-se-bd-cr,
+      //       var(--_ctm-tab-dn-fm-bn-hr-se-bd-cr, var(--_ctm-dn-fm-bn-hr-se-bd-cr))
+      //     );
+      //     border-color: var(
+      //       --_ctm-mob-dn-fm-bn-hr-se-br-cr,
+      //       var(--_ctm-tab-dn-fm-bn-hr-se-br-cr, var(--_ctm-dn-fm-bn-hr-se-br-cr))
+      //     );
+      //     border-radius: var(
+      //       --_ctm-mob-dn-fm-bn-hr-se-br-rs,
+      //       var(--_ctm-tab-dn-fm-bn-hr-se-br-rs, var(--_ctm-dn-fm-bn-hr-se-br-rs))
+      //     );
+      //     border-style: var(
+      //       --_ctm-mob-dn-fm-bn-hr-se-br-se,
+      //       var(--_ctm-tab-dn-fm-bn-hr-se-br-se, var(--_ctm-dn-fm-bn-hr-se-br-se))
+      //     );
+      //     border-width: var(
+      //       --_ctm-mob-dn-fm-bn-hr-se-br-wh,
+      //       var(--_ctm-tab-dn-fm-bn-hr-se-br-wh, var(--_ctm-dn-fm-bn-hr-se-br-wh))
+      //     );
+      //     color: var(
+      //       --_ctm-mob-dn-fm-bn-hr-se-cr,
+      //       var(--_ctm-tab-dn-fm-bn-hr-se-cr, var(--_ctm-dn-fm-bn-hr-se-cr))
+      //     );
+      //     font-family: var(
+      //       --_ctm-mob-dn-fm-bn-hr-se-ft-fy,
+      //       var(--_ctm-tab-dn-fm-bn-hr-se-ft-fy, var(--_ctm-dn-fm-bn-hr-se-ft-fy))
+      //     );
+      //     font-size: var(
+      //       --_ctm-mob-dn-fm-bn-hr-se-ft-se,
+      //       var(--_ctm-tab-dn-fm-bn-hr-se-ft-se, var(--_ctm-dn-fm-bn-hr-se-ft-se))
+      //     );
+      //     font-style: var(
+      //       --_ctm-mob-dn-fm-bn-hr-se-ft-se-ic,
+      //       var(--_ctm-tab-dn-fm-bn-hr-se-ft-se-ic, var(--_ctm-dn-fm-bn-hr-se-ft-se-ic))
+      //     );
+      //     font-weight: var(
+      //       --_ctm-mob-dn-fm-bn-hr-se-ft-wt,
+      //       var(--_ctm-tab-dn-fm-bn-hr-se-ft-wt, var(--_ctm-dn-fm-bn-hr-se-ft-wt))
+      //     );
+      //     line-height: var(
+      //       --_ctm-mob-dn-fm-bn-hr-se-le-ht,
+      //       var(--_ctm-tab-dn-fm-bn-hr-se-le-ht, var(--_ctm-dn-fm-bn-hr-se-le-ht))
+      //     );
+      //     letter-spacing: var(
+      //       --_ctm-mob-dn-fm-bn-hr-se-lr-sg,
+      //       var(--_ctm-tab-dn-fm-bn-hr-se-lr-sg, var(--_ctm-dn-fm-bn-hr-se-lr-sg))
+      //     );
+      //     box-shadow: var(
+      //         --_ctm-mob-dn-fm-bn-hr-se-sw-ae,
+      //         var(--_ctm-tab-dn-fm-bn-hr-se-sw-ae, var(--_ctm-dn-fm-bn-hr-se-sw-ae))
+      //       )
+      //       var(
+      //         --_ctm-mob-dn-fm-bn-hr-se-sw-br,
+      //         var(--_ctm-tab-dn-fm-bn-hr-se-sw-br, var(--_ctm-dn-fm-bn-hr-se-sw-br))
+      //       )
+      //       var(
+      //         --_ctm-mob-dn-fm-bn-hr-se-sw-sd,
+      //         var(--_ctm-tab-dn-fm-bn-hr-se-sw-sd, var(--_ctm-dn-fm-bn-hr-se-sw-sd))
+      //       )
+      //       var(
+      //         --_ctm-mob-dn-fm-bn-hr-se-sw-cr,
+      //         var(--_ctm-tab-dn-fm-bn-hr-se-sw-cr, var(--_ctm-dn-fm-bn-hr-se-sw-cr))
+      //       );
+      //     text-decoration: var(
+      //       --_ctm-mob-dn-fm-bn-hr-se-ue,
+      //       var(--_ctm-tab-dn-fm-bn-hr-se-ue, var(--_ctm-dn-fm-bn-hr-se-ue))
+      //     );
+      //     padding: var(
+      //       --_ctm-mob-dn-fm-bn-hr-se-pg,
+      //       var(--_ctm-tab-dn-fm-bn-hr-se-pg, var(--_ctm-dn-fm-bn-hr-se-pg))
+      //     );
+      //     text-align: var(
+      //       --_ctm-mob-dn-fm-bn-hr-se-tt-an,
+      //       var(--_ctm-tab-dn-fm-bn-hr-se-tt-an, var(--_ctm-dn-fm-bn-hr-se-tt-an))
+      //     );
+      //   }
+      //   &:has(svg) {
+      //     gap: 8px;
+      //   }
+      //   svg {
+      //     display: flex;
+      //     path {
+      //       stroke: var(--_base-white);
+      //     }
+      //   }
+
+      //   &:disabled {
+      //     background-color: var(--_primary-100);
+      //     cursor: not-allowed;
+      //   }
+      // }
       .mt__32 {
         margin-top: 32px !important;
       }
@@ -348,28 +1026,218 @@
         display: flex;
         align-items: center;
         justify-content: space-between;
-        margin-top: 20px;
+        // margin-top: 20px;
         .remember_block {
           display: flex;
           align-items: center;
           gap: 6px;
         }
       }
-      .flex_center {
+      // .flex_center {
+      //   display: flex;
+      //   justify-content: center;
+      //   align-items: center;
+      //   gap: 8px;
+      //   font-weight: 600;
+      //   margin-top: 20px;
+      //   width: 100%;
+      //   color: var(--_thm-cs-tt-ls-as);
+      //   svg {
+      //     display: flex;
+      //     path {
+      //       stroke: var(--_thm-cs-tt-ls-as);
+      //     }
+      //   }
+      // }
+
+      .btn__with__text[data-btn-name="goToBackLoginButton"] {
+        width: 100%;
+        &[data-show-shadow="false"] {
+          --_show-shadow: none;
+        }
+        &[data-icon-position="left"] {
+          --_sf-fd-bn: row;
+        }
+        &[data-icon-position="right"] {
+          --_sf-fd-bn: row-reverse;
+        }
+        &[data-icon-position="center"] {
+          --_sf-fd-bn: row;
+        }
+
+        &:hover {
+          --_sf-hr-bd-cr: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-bd-cr)};
+          --_sf-hr-br-cr: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-br-cr)};
+          --_sf-hr-br-se: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-br-se)};
+          --_sf-hr-br-wh: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-br-wh)};
+          --_sf-hr-br-rs: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-br-rs)};
+          --_sf-hr-at: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-at)};
+          --_sf-hr-gp: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-gp)};
+
+          // for shadow
+          --_sf-hr-sw-ae: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-sw-ae)};
+          --_sf-hr-sw-br: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-sw-br)};
+          --_sf-hr-sw-hr: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-sw-hr)};
+          --_sf-hr-sw-cr: #{prepareMediaVariable (--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-sw-cr)};
+          // for font
+
+          --_sf-hr-cr: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-cr)};
+          --_sf-hr-ft-fy: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-ft-fy)};
+          --_sf-hr-ft-se: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-ft-se)};
+          --_sf-hr-ft-wt: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-ft-wt)};
+          --_sf-hr-ft-se-ic: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-ft-se-ic)};
+          --_sf-hr-tt-an: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-tt-an)};
+          --_sf-hr-lr-sg: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-lr-sg)};
+          --_sf-hr-le-ht: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-le-ht)};
+
+          --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-in-se)};
+          --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-in-se)};
+          --_sf-hr-in-c1: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-in-c1)};
+          --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-ue)};
+
+          // for pading and width
+          --_sf-hr-pg: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-pg)};
+          --_sf-hr-wh: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-wh)};
+          &[data-hover-show-shadow="false"] {
+            --_hover-show-shadow: none;
+          }
+          &[data-hover-show-icon="false"] {
+            --_hover-show-icon: none;
+          }
+        }
+
+        background-color: var(
+          --_sf-hr-bd-cr,
+          prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-bd-cr)
+        );
+
+        padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-pg));
+        width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-wh));
         display: flex;
-        justify-content: center;
+        flex-direction: var(--_sf-fd-bn);
         align-items: center;
-        gap: 8px;
-        font-weight: 600;
-        margin-top: 20px;
-        width: 100%;
-        color: var(--_thm-cs-tt-ls-as);
-        svg {
+
+        justify-content: var(
+          --_sf-hr-at,
+          prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-at)
+        );
+        gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-gp));
+
+        border-radius: var(
+          --_sf-hr-br-rs,
+          prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-br-rs)
+        );
+
+        box-shadow: var(
+            --_sf-hr-sw-ae,
+            prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-sw-ae)
+          )
+          var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-sw-br))
+          var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-sw-sd))
+          var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-sw-cr));
+
+        &[data-show-border="true"] {
+          width: 100%;
+          border-color: var(
+            --_sf-hr-br-cr,
+            prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-br-cr)
+          );
+
+          border-style: var(
+            --_sf-hr-br-se,
+            prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-br-se)
+          );
+
+          border-width: var(
+            --_sf-hr-br-wh,
+            prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-br-wh)
+          );
+        }
+
+        .txt {
           display: flex;
-          path {
-            stroke: var(--_thm-cs-tt-ls-as);
+
+          color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-cr));
+
+          font-family:
+            var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-ft-fy)),
+            sans-serif;
+
+          font-size: var(
+            --_sf-hr-ft-se,
+            prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-ft-se)
+          );
+
+          font-weight: var(
+            --_sf-hr-ft-wt,
+            prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-ft-wt)
+          );
+
+          font-style: var(
+            --_sf-hr-ft-se-ic,
+            prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-ft-se-ic)
+          );
+
+          text-align: var(
+            --_sf-hr-tt-an,
+            prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-tt-an)
+          );
+
+          letter-spacing: var(
+            --_sf-hr-lr-sg,
+            prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-lr-sg)
+          );
+
+          line-height: var(
+            --_sf-hr-le-ht,
+            prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-le-ht)
+          );
+
+          text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
+        }
+
+        .icon {
+          display: var(--_hover-show-icon, var(--_show-icon, flex));
+          svg {
+            width: var(
+              --_sf-hr-in-se,
+              prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-in-se)
+            );
+            height: var(
+              --_sf-hr-in-se,
+              prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-in-se)
+            );
+
+            path {
+              stroke: var(
+                --_sf-hr-in-c1,
+                prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-in-c1)
+              );
+            }
           }
         }
+        [data-element-style="Text"] {
+          display: inline-block;
+          width: 100%;
+        }
+
+        .icon--hover {
+          // position: absolute;
+          // inset: 0;
+          // opacity: 0;
+          display: none;
+          transition: opacity 0.2s ease;
+        }
+
+        &:hover .icon--hover {
+          // opacity: 1;
+          display: flex;
+        }
+
+        &:hover .icon--default {
+          // opacity: 0;
+          display: none;
+        }
       }
 
       .psw__contain {
@@ -443,17 +1311,53 @@
       .forgotPasswordButton {
         background: none;
         border: none;
-        color: var(--_thm-cs-tt-ls-as);
-
-        font-weight: 600;
         cursor: pointer;
-        font-size: 14px;
-        padding: 8px 0px;
-        border-radius: 6px;
-        &:hover {
-          background-color: var(--_primary-25);
-          color: var(--_thm-cs-tt-ls-as);
-        }
+        font-family: var(
+          --_ctm-mob-dn-fm-ft-pd-ll-ft-fy,
+          var(--_ctm-tab-dn-fm-ft-pd-ll-ft-fy, var(--_ctm-dn-fm-ft-pd-ll-ft-fy))
+        );
+        color: var(
+          --_ctm-mob-dn-fm-ft-pd-ll-cr,
+          var(--_ctm-tab-dn-fm-ft-pd-ll-cr, var(--_ctm-dn-fm-ft-pd-ll-cr))
+        );
+        font-weight: var(
+          --_ctm-mob-dn-fm-ft-pd-ll-ft-wt,
+          var(--_ctm-tab-dn-fm-ft-pd-ll-ft-wt, var(--_ctm-dn-fm-ft-pd-ll-ft-wt))
+        );
+        font-size: var(
+          --_ctm-mob-dn-fm-ft-pd-ll-ft-se,
+          var(--_ctm-tab-dn-fm-ft-pd-ll-ft-se, var(--_ctm-dn-fm-ft-pd-ll-ft-se))
+        );
+        text-decoration: var(
+          --_ctm-mob-dn-fm-ft-pd-ll-ue,
+          var(--_ctm-tab-dn-fm-ft-pd-ll-ue, var(--_ctm-dn-fm-ft-pd-ll-ue))
+        );
+        letter-spacing: var(
+          --_ctm-mob-dn-fm-ft-pd-ll-lr-sg,
+          var(--_ctm-tab-dn-fm-ft-pd-ll-lr-sg, var(--_ctm-dn-fm-ft-pd-ll-lr-sg))
+        );
+        line-height: var(
+          --_ctm-mob-dn-fm-ft-pd-ll-le-ht,
+          var(--_ctm-tab-dn-fm-ft-pd-ll-le-ht, var(--_ctm-dn-fm-ft-pd-ll-le-ht))
+        );
+        font-style: var(
+          --_ctm-mob-dn-fm-ft-pd-ll-ft-se-ic,
+          var(--_ctm-tab-dn-fm-ft-pd-ll-ft-se-ic, var(--_ctm-dn-fm-ft-pd-ll-ft-se-ic))
+        );
+        text-align: var(
+          --_ctm-mob-dn-fm-ft-pd-ll-tt-an,
+          var(--_ctm-tab-dn-fm-ft-pd-ll-tt-an, var(--_ctm-dn-fm-ft-pd-ll-tt-an))
+        );
+        // color: var(--_thm-cs-tt-ls-as);
+
+        // font-weight: 600;
+        // font-size: 14px;
+        // padding: 8px 0px;
+        // border-radius: 6px;
+        // &:hover {
+        //   background-color: var(--_primary-25);
+        //   color: var(--_thm-cs-tt-ls-as);
+        // }
       }
 
       @keyframes shine {