@transferwise/neptune-css 14.6.1 → 14.6.2

package/dist/css/process.css

@@ -1 +1 @@
-.process{display:block;margin:auto;position:relative}.process svg{height:100%;width:100%}.process-circle{stroke:#0097c7;stroke:var(--color-content-accent);stroke-opacity:1;stroke-linecap:round;animation-duration:1.5s;animation-iteration-count:infinite;animation-timing-function:ease-out;transform-origin:center center;transition:stroke 1s linear .2s}.np-theme-personal .process-circle{stroke:#37517e;stroke:var(--color-content-primary)}.np-theme-personal--bright-green .process-circle,.np-theme-personal--dark .process-circle,.np-theme-personal--forest-green .process-circle{stroke:var(--color-interactive-primary)}.process-inverse .process-circle{stroke:#fff;stroke:var(--color-background-screen)}.process-icon-container{display:inline-block;height:50%;left:25%;position:absolute;top:25%;transform:rotate(45deg);width:50%}.process-icon-horizontal,.process-icon-vertical{display:block;height:0;position:absolute;width:0}.process-success .process-icon-horizontal{background-color:#008026;background-color:var(--color-content-positive);bottom:0;left:0}.np-theme-personal .process-success .process-icon-horizontal{background-color:var(--color-sentiment-positive)}.process-success .process-icon-vertical{background-color:#008026;background-color:var(--color-content-positive);right:0;top:100%}.np-theme-personal .process-success .process-icon-vertical{background-color:var(--color-sentiment-positive)}.process-success .process-circle{stroke:#008026;stroke:var(--color-content-positive)}.np-theme-personal .process-success .process-circle{stroke:var(--color-sentiment-positive)}.process-danger .process-icon-horizontal{background-color:#cf2929;background-color:var(--color-content-negative);left:0}.np-theme-personal .process-danger .process-icon-horizontal{background-color:var(--color-sentiment-negative)}.process-danger .process-icon-vertical{background-color:#cf2929;background-color:var(--color-content-negative);top:0}.np-theme-personal .process-danger .process-icon-vertical{background-color:var(--color-sentiment-negative)}.process-danger .process-circle{stroke:#cf2929;stroke:var(--color-content-negative)}.np-theme-personal .process-danger .process-circle{stroke:var(--color-sentiment-negative)}.process-danger .process-circle,.process-success .process-circle{animation-delay:1ms;animation-duration:1.5s;animation-fill-mode:forwards;animation-iteration-count:1;animation-timing-function:ease-out}.process-danger .process-icon-horizontal,.process-success .process-icon-horizontal{animation:process-width .3s ease 1.2s forwards}.process-danger .process-icon-vertical,.process-success .process-icon-vertical{animation:process-height .3s ease 1.5s forwards}.process-stopped .process-circle{animation:none}.process-stopped .process-icon-container{display:none}.process-xs{height:24px;width:24px}.process-xs .process-circle{stroke-dashoffset:69.11503838px;stroke-dasharray:69.11503838px;stroke-width:2px}.process-xs.process-danger .process-icon-horizontal{height:2px;top:5px}.process-xs.process-danger .process-icon-vertical{left:5px;width:2px}.process-xs .process-icon-horizontal,.process-xs .process-icon-vertical{border-radius:1px}.process-xs.process-success .process-icon-container{height:10px;left:9px;width:5px}.process-xs.process-success .process-icon-horizontal{height:2px}.process-xs.process-success .process-icon-vertical{width:2px}.process-sm{height:48px;width:48px}.process-sm .process-circle{stroke-dashoffset:144.51326207px;stroke-dasharray:144.51326207px;stroke-width:2.4px}.process-sm.process-danger .process-icon-horizontal{height:3px;top:10.5px}.process-sm.process-danger .process-icon-vertical{left:10.5px;width:3px}.process-sm .process-icon-horizontal,.process-sm .process-icon-vertical{border-radius:1.5px}.process-sm.process-success .process-icon-container{height:21px;left:18px;width:10.5px}.process-sm.process-success .process-icon-horizontal{height:3px}.process-sm.process-success .process-icon-vertical{width:3px}.process-xl{height:128px;width:128px}.process-xl .process-circle{stroke-dashoffset:395.84067435px;stroke-dasharray:395.84067435px;stroke-width:3px}.process-xl.process-danger .process-icon-horizontal{height:8px;top:28px}.process-xl.process-danger .process-icon-vertical{left:28px;width:8px}.process-xl .process-icon-horizontal,.process-xl .process-icon-vertical{border-radius:4px}.process-xl.process-success .process-icon-container{height:56px;left:48px;width:28px}.process-xl.process-success .process-icon-horizontal{height:8px}.process-xl.process-success .process-icon-vertical{width:8px}.process-xs .process-circle{animation-name:process-chase-circle-xs}.process-xs.process-danger .process-circle,.process-xs.process-success .process-circle{animation-name:process-success-circle-xs}.process-sm .process-circle{animation-name:process-chase-circle-sm}.process-sm.process-danger .process-circle,.process-sm.process-success .process-circle{animation-name:process-success-circle-sm}.process-xl .process-circle{animation-name:process-chase-circle-xl}.process-xl.process-danger .process-circle,.process-xl.process-success .process-circle{animation-name:process-success-circle-xl}@keyframes process-chase-circle-xs{0%{stroke-dashoffset:206.34511514px;stroke-dasharray:69.11503838px;transform:rotate(0deg)}25%{stroke-dashoffset:68.11503838px;stroke-dasharray:34.55751919px}75%{stroke-dashoffset:68.11503838px;stroke-dasharray:51.83627878px}to{stroke-dashoffset:68.11503838px;stroke-dasharray:69.11503838px;transform:rotate(1turn)}}@keyframes process-success-circle-xs{0%{stroke-dashoffset:68.11503838px;stroke-dasharray:69.11503838px;transform:rotate(0deg)}to{stroke-dashoffset:0;stroke-dasharray:69.11503838px;transform:rotate(1turn)}}@keyframes process-chase-circle-sm{0%{stroke-dashoffset:432.5397862px;stroke-dasharray:144.51326207px;transform:rotate(0deg)}25%{stroke-dashoffset:143.51326207px;stroke-dasharray:72.25663103px}75%{stroke-dashoffset:143.51326207px;stroke-dasharray:108.38494655px}to{stroke-dashoffset:143.51326207px;stroke-dasharray:144.51326207px;transform:rotate(1turn)}}@keyframes process-success-circle-sm{0%{stroke-dashoffset:143.51326207px;stroke-dasharray:144.51326207px;transform:rotate(0deg)}to{stroke-dashoffset:0;stroke-dasharray:144.51326207px;transform:rotate(1turn)}}@keyframes process-chase-circle-xl{0%{stroke-dashoffset:1186.52202306px;stroke-dasharray:395.84067435px;transform:rotate(0deg)}25%{stroke-dashoffset:394.84067435px;stroke-dasharray:197.92033718px}75%{stroke-dashoffset:394.84067435px;stroke-dasharray:296.88050576px}to{stroke-dashoffset:394.84067435px;stroke-dasharray:395.84067435px;transform:rotate(1turn)}}@keyframes process-success-circle-xl{0%{stroke-dashoffset:394.84067435px;stroke-dasharray:395.84067435px;transform:rotate(0deg)}to{stroke-dashoffset:0;stroke-dasharray:395.84067435px;transform:rotate(1turn)}}@keyframes process-width{to{width:100%}}@keyframes process-height{to{height:100%;top:0}}.btn .process:first-child{float:left;margin-left:-12px;margin-right:12px}[dir=rtl] .btn .process:first-child{float:right;margin-left:0;margin-left:12px;margin-right:-12px;margin-right:0}.btn-block .process:first-child{position:absolute}.btn .process-circle{transition:stroke .5s linear 0s}.btn-primary .process-circle,.btn-success .process-circle{stroke:#fff}.btn-primary .process-icon-horizontal,.btn-primary .process-icon-vertical,.btn-success .process-icon-horizontal,.btn-success .process-icon-vertical{background-color:#fff}.btn:focus .process-circle,.btn:hover .process-circle{stroke:#fff}.btn:focus .process-icon-horizontal,.btn:focus .process-icon-vertical,.btn:hover .process-icon-horizontal,.btn:hover .process-icon-vertical,.btn[disabled] .process-icon-horizontal,.btn[disabled] .process-icon-vertical{background-color:#fff}
+.process{display:block;margin:auto;position:relative}.process svg{height:100%;width:100%}.process-circle{stroke:#0097c7;stroke:var(--color-content-accent);stroke-opacity:1;stroke-linecap:round;animation-duration:1.5s;animation-iteration-count:infinite;animation-timing-function:ease-out;transform-origin:center center;transition:stroke 1s linear .2s}.np-theme-personal .process-circle{stroke:#37517e;stroke:var(--color-content-primary)}.np-theme-personal--bright-green .process-circle,.np-theme-personal--dark .process-circle,.np-theme-personal--forest-green .process-circle{stroke:var(--color-interactive-primary)}.process-inverse .process-circle{stroke:#fff;stroke:var(--color-background-screen)}.process-icon-container{display:inline-block;height:50%;left:25%;position:absolute;top:25%;transform:rotate(45deg);width:50%}.process-icon-horizontal,.process-icon-vertical{display:block;height:0;position:absolute;width:0}.process-success .process-icon-horizontal{background-color:#008026;background-color:var(--color-content-positive);bottom:0;left:0}.np-theme-personal .process-success .process-icon-horizontal{background-color:var(--color-sentiment-positive)}.process-success .process-icon-vertical{background-color:#008026;background-color:var(--color-content-positive);right:0;top:100%}.np-theme-personal .process-success .process-icon-vertical{background-color:var(--color-sentiment-positive)}.process-success .process-circle{stroke:#008026;stroke:var(--color-content-positive)}.np-theme-personal .process-success .process-circle{stroke:var(--color-sentiment-positive)}.process-danger .process-icon-horizontal{background-color:#cf2929;background-color:var(--color-content-negative);left:0}.np-theme-personal .process-danger .process-icon-horizontal{background-color:var(--color-sentiment-negative)}.process-danger .process-icon-vertical{background-color:#cf2929;background-color:var(--color-content-negative);top:0}.np-theme-personal .process-danger .process-icon-vertical{background-color:var(--color-sentiment-negative)}.process-danger .process-circle{stroke:#cf2929;stroke:var(--color-content-negative)}.np-theme-personal .process-danger .process-circle{stroke:var(--color-sentiment-negative)}.process-danger .process-circle,.process-success .process-circle{animation-delay:1ms;animation-duration:1.5s;animation-fill-mode:forwards;animation-iteration-count:1;animation-timing-function:ease-out}.process-danger .process-icon-horizontal,.process-success .process-icon-horizontal{animation:process-width .3s ease 1.2s forwards}.process-danger .process-icon-vertical,.process-success .process-icon-vertical{animation:process-height .3s ease 1.5s forwards}.process-stopped .process-circle{animation:none}.process-stopped .process-icon-container{display:none}.process-xs{height:12px;width:12px}.process-xs .process-circle{stroke-dashoffset:31.41592654px;stroke-dasharray:31.41592654px;stroke-width:1.5px}.process-xs.process-danger .process-icon-horizontal{height:1px;top:2.5px}.process-xs.process-danger .process-icon-vertical{left:2.5px;width:1px}.process-xs .process-icon-horizontal,.process-xs .process-icon-vertical{border-radius:.5px}.process-xs.process-success .process-icon-container{height:5px;left:4.5px;width:2.5px}.process-xs.process-success .process-icon-horizontal{height:1px}.process-xs.process-success .process-icon-vertical{width:1px}.process-xs{height:24px;width:24px}.process-xs .process-circle{stroke-dashoffset:69.11503838px;stroke-dasharray:69.11503838px;stroke-width:2px}.process-xs.process-danger .process-icon-horizontal{height:2px;top:5px}.process-xs.process-danger .process-icon-vertical{left:5px;width:2px}.process-xs .process-icon-horizontal,.process-xs .process-icon-vertical{border-radius:1px}.process-xs.process-success .process-icon-container{height:10px;left:9px;width:5px}.process-xs.process-success .process-icon-horizontal{height:2px}.process-xs.process-success .process-icon-vertical{width:2px}.process-sm{height:48px;width:48px}.process-sm .process-circle{stroke-dashoffset:144.51326207px;stroke-dasharray:144.51326207px;stroke-width:2.4px}.process-sm.process-danger .process-icon-horizontal{height:3px;top:10.5px}.process-sm.process-danger .process-icon-vertical{left:10.5px;width:3px}.process-sm .process-icon-horizontal,.process-sm .process-icon-vertical{border-radius:1.5px}.process-sm.process-success .process-icon-container{height:21px;left:18px;width:10.5px}.process-sm.process-success .process-icon-horizontal{height:3px}.process-sm.process-success .process-icon-vertical{width:3px}.process-xl{height:128px;width:128px}.process-xl .process-circle{stroke-dashoffset:395.84067435px;stroke-dasharray:395.84067435px;stroke-width:3px}.process-xl.process-danger .process-icon-horizontal{height:8px;top:28px}.process-xl.process-danger .process-icon-vertical{left:28px;width:8px}.process-xl .process-icon-horizontal,.process-xl .process-icon-vertical{border-radius:4px}.process-xl.process-success .process-icon-container{height:56px;left:48px;width:28px}.process-xl.process-success .process-icon-horizontal{height:8px}.process-xl.process-success .process-icon-vertical{width:8px}.process-xxs .process-circle{animation-name:process-chase-circle-xxs}.process-xxs.process-danger .process-circle,.process-xxs.process-success .process-circle{animation-name:process-success-circle-xxs}.process-xs .process-circle{animation-name:process-chase-circle-xs}.process-xs.process-danger .process-circle,.process-xs.process-success .process-circle{animation-name:process-success-circle-xs}.process-sm .process-circle{animation-name:process-chase-circle-sm}.process-sm.process-danger .process-circle,.process-sm.process-success .process-circle{animation-name:process-success-circle-sm}.process-xl .process-circle{animation-name:process-chase-circle-xl}.process-xl.process-danger .process-circle,.process-xl.process-success .process-circle{animation-name:process-success-circle-xl}@keyframes process-chase-circle-xxs{0%{stroke-dashoffset:93.24777961px;stroke-dasharray:31.41592654px;transform:rotate(0deg)}25%{stroke-dashoffset:30.41592654px;stroke-dasharray:15.70796327px}75%{stroke-dashoffset:30.41592654px;stroke-dasharray:23.5619449px}to{stroke-dashoffset:30.41592654px;stroke-dasharray:31.41592654px;transform:rotate(1turn)}}@keyframes process-success-circle-xxs{0%{stroke-dashoffset:30.41592654px;stroke-dasharray:31.41592654px;transform:rotate(0deg)}to{stroke-dashoffset:0;stroke-dasharray:31.41592654px;transform:rotate(1turn)}}@keyframes process-chase-circle-xs{0%{stroke-dashoffset:206.34511514px;stroke-dasharray:69.11503838px;transform:rotate(0deg)}25%{stroke-dashoffset:68.11503838px;stroke-dasharray:34.55751919px}75%{stroke-dashoffset:68.11503838px;stroke-dasharray:51.83627878px}to{stroke-dashoffset:68.11503838px;stroke-dasharray:69.11503838px;transform:rotate(1turn)}}@keyframes process-success-circle-xs{0%{stroke-dashoffset:68.11503838px;stroke-dasharray:69.11503838px;transform:rotate(0deg)}to{stroke-dashoffset:0;stroke-dasharray:69.11503838px;transform:rotate(1turn)}}@keyframes process-chase-circle-sm{0%{stroke-dashoffset:432.5397862px;stroke-dasharray:144.51326207px;transform:rotate(0deg)}25%{stroke-dashoffset:143.51326207px;stroke-dasharray:72.25663103px}75%{stroke-dashoffset:143.51326207px;stroke-dasharray:108.38494655px}to{stroke-dashoffset:143.51326207px;stroke-dasharray:144.51326207px;transform:rotate(1turn)}}@keyframes process-success-circle-sm{0%{stroke-dashoffset:143.51326207px;stroke-dasharray:144.51326207px;transform:rotate(0deg)}to{stroke-dashoffset:0;stroke-dasharray:144.51326207px;transform:rotate(1turn)}}@keyframes process-chase-circle-xl{0%{stroke-dashoffset:1186.52202306px;stroke-dasharray:395.84067435px;transform:rotate(0deg)}25%{stroke-dashoffset:394.84067435px;stroke-dasharray:197.92033718px}75%{stroke-dashoffset:394.84067435px;stroke-dasharray:296.88050576px}to{stroke-dashoffset:394.84067435px;stroke-dasharray:395.84067435px;transform:rotate(1turn)}}@keyframes process-success-circle-xl{0%{stroke-dashoffset:394.84067435px;stroke-dasharray:395.84067435px;transform:rotate(0deg)}to{stroke-dashoffset:0;stroke-dasharray:395.84067435px;transform:rotate(1turn)}}@keyframes process-width{to{width:100%}}@keyframes process-height{to{height:100%;top:0}}.btn .process:first-child{float:left;margin-left:-12px;margin-right:12px}[dir=rtl] .btn .process:first-child{float:right;margin-left:0;margin-left:12px;margin-right:-12px;margin-right:0}.btn-block .process:first-child{position:absolute}.btn .process-circle{transition:stroke .5s linear 0s}.btn-primary .process-circle,.btn-success .process-circle{stroke:#fff}.btn-primary .process-icon-horizontal,.btn-primary .process-icon-vertical,.btn-success .process-icon-horizontal,.btn-success .process-icon-vertical{background-color:#fff}.btn:focus .process-circle,.btn:hover .process-circle{stroke:#fff}.btn:focus .process-icon-horizontal,.btn:focus .process-icon-vertical,.btn:hover .process-icon-horizontal,.btn:hover .process-icon-vertical,.btn[disabled] .process-icon-horizontal,.btn[disabled] .process-icon-vertical{background-color:#fff}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@transferwise/neptune-css",
   "description": "Neptune CSS library",
-  "version": "14.6.1",
+  "version": "14.6.2",
   "license": "MIT",
   "repository": {
     "type": "git",

package/src/less/buttons.less

@@ -79,6 +79,7 @@
   fieldset[disabled] & {
     outline: none;
     box-shadow: none;
+    pointer-events: none;
   }
 
   a& {
@@ -639,27 +640,41 @@ input[type="button"] {
   margin-bottom: -8px;
   background-repeat: no-repeat;
   background-position: center;
-  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPiAgICAgICAgPHRpdGxlPlNwaW5uZXI8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+ICAgICAgICA8bGluZWFyR3JhZGllbnQgeDE9IjUwJSIgeTE9IjkuMjA1NjQzNzklIiB4Mj0iMTAwJSIgeTI9IjIwLjc0NzEwMDclIiBpZD0ibGluZWFyR3JhZGllbnQtMSI+ICAgICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI0E4QUFBQyIgb2Zmc2V0PSIwJSI+PC9zdG9wPiAgICAgICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNBOEFBQUMiIHN0b3Atb3BhY2l0eT0iMCIgb2Zmc2V0PSIxMDAlIj48L3N0b3A+ICAgICAgICA8L2xpbmVhckdyYWRpZW50PiAgICA8L2RlZnM+ICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHNrZXRjaDp0eXBlPSJNU1BhZ2UiPiAgICAgICAgPGcgaWQ9IlNwaW5uZXIiIHNrZXRjaDp0eXBlPSJNU0FydGJvYXJkR3JvdXAiIGZpbGw9InVybCgjbGluZWFyR3JhZGllbnQtMSkiPiAgICAgICAgICAgIDxwYXRoIGQ9Ik0xMiwyNCBDNS4zNzI1ODMsMjQgMCwxOC42Mjc0MTcgMCwxMiBDMCw1LjM3MjU4MyA1LjM3MjU4MywwIDEyLDAgTDEyLDIgQzYuNDc3MTUyNSwyIDIsNi40NzcxNTI1IDIsMTIgQzIsMTcuNTIyODQ3NSA2LjQ3NzE1MjUsMjIgMTIsMjIgQzE3LjUyMjg0NzUsMjIgMjIsMTcuNTIyODQ3NSAyMiwxMiBMMjQsMTIgQzI0LDE4LjYyNzQxNyAxOC42Mjc0MTcsMjQgMTIsMjQgWiIgaWQ9InNwaW4iIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiPjwvcGF0aD4gICAgICAgIDwvZz4gICAgPC9nPjwvc3ZnPg==");
-  animation: rotating 0.4s linear infinite;
+
+  .process-circle {
+    .np-theme-personal--dark &,
+    .np-theme-personal--bright-green &,
+    .np-theme-personal--forest-green & {
+      stroke: var(--color-interactive-negative);
+    }
+  }
 }
 
-.np-theme-personal {
-  .btn-loading {
-    &:not(.btn-block) {
-      display: inline-flex;
-      align-items: center;
+.btn-loading {
+  &:not(.btn-block) {
+    display: inline-flex;
+    align-items: center;
+
+    .btn-loader {
+      margin-bottom: 0;
 
-      .btn-loader {
-        margin-bottom: 0;
+      :not([dir="rtl"]) & {
+        margin-left: 16px;
+        margin-right: 0;
+      }
+  
+      [dir="rtl"] & {
+        margin-left: 0 !important;
+        margin-right: 16px !important;
       }
     }
+  }
 
-    &.btn-block .btn-loader {
-      top: 0;
-      bottom: 0;
-      margin-top: auto;
-      margin-bottom: auto;
-    }
+  &.btn-block .btn-loader {
+    top: 0;
+    bottom: 0;
+    margin-top: auto;
+    margin-bottom: auto;
   }
 }
 

package/src/less/process.less

@@ -33,6 +33,12 @@
 @process-xs-icon-size: 12px;
 @process-xs-icon-stroke: 2px;
 
+@process-xxs-radius: 6px;
+@process-xxs-circumference: (pi() * (2 * (@process-xxs-radius - 1)));
+@process-xxs-stroke: 1.5px;
+@process-xxs-icon-size: 6px;
+@process-xxs-icon-stroke: 1px;
+
 .process {
   position: relative;
   margin: auto;
@@ -223,6 +229,9 @@
     }
   }
 }
+.process-size(
+  xs, @process-xxs-radius, @process-xxs-circumference, @process-xxs-stroke, @process-xxs-icon-size, @process-xxs-icon-stroke
+);
 .process-size(
   xs, @process-xs-radius, @process-xs-circumference, @process-xs-stroke, @process-xs-icon-size, @process-xs-icon-stroke
 );
@@ -233,6 +242,19 @@
   xl, @process-xl-radius, @process-xl-circumference, @process-xl-stroke, @process-xl-icon-size, @process-xl-icon-stroke
 );
 
+.process-xxs {
+  .process-circle {
+    animation-name: process-chase-circle-xxs;
+  }
+
+  &.process-success,
+  &.process-danger {
+    .process-circle {
+      animation-name: process-success-circle-xxs;
+    }
+  }
+}
+
 .process-xs {
   .process-circle {
     animation-name: process-chase-circle-xs;
@@ -310,6 +332,14 @@
   }
 }
 
+@keyframes process-chase-circle-xxs {
+  .chase-circle(@process-xxs-circumference);
+}
+
+@keyframes process-success-circle-xxs {
+  .complete-circle(@process-xxs-circumference);
+}
+
 @keyframes process-chase-circle-xs {
   .chase-circle(@process-xs-circumference);
 }