npm - @transferwise/components - Versions diffs - 46.100.0 → 46.100.2 - Mend

@transferwise/components 46.100.0 → 46.100.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (606) hide show

package/build/styles/avatar/Avatar.css CHANGED Viewed

@@ -1,13 +1,12 @@
-@media (min-width: 768px) {
-}@media (min-width: 768px) {
-}.tw-avatar {
+.tw-avatar {
   position: relative;
   border-radius: 50%;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
   box-sizing: border-box;
-}.tw-avatar .tw-avatar__content {
+}
+.tw-avatar .tw-avatar__content {
   align-items: center;
   background-color: rgba(134,167,189,0.10196);
   background-color: #86a7bd1a;
@@ -22,58 +21,73 @@
   max-width: 100%;
   overflow: hidden;
   width: 100%;
-}.tw-avatar--outlined {
+}
+.tw-avatar--outlined {
   border: 1px solid #00a2dd;
   border: 1px solid var(--color-interactive-accent);
   cursor: pointer;
-}.tw-avatar--outlined:not(.disabled):not(:disabled):hover {
+}
+.tw-avatar--outlined:not(.disabled):not(:disabled):hover {
   border-color: #008fc9;
   border-color: var(--color-interactive-accent-hover);
-}.tw-avatar--thumbnail * {
+}
+.tw-avatar--thumbnail * {
   width: 100%;
   height: 100%;
   -o-object-fit: cover;
      object-fit: cover;
-}.tw-avatar--icon * {
+}
+.tw-avatar--icon * {
   max-height: 100%;
   max-width: 100%;
-}.tw-avatar.tw-avatar--initials,
+}
+.tw-avatar.tw-avatar--initials,
 .tw-avatar.tw-avatar--emoji {
   font-family: Arial, sans-serif;
   font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
-}.tw-avatar.tw-avatar--initials,
+}
+.tw-avatar.tw-avatar--initials,
 .tw-avatar.tw-avatar--icon {
   color: #37517e;
   color: var(--color-content-primary);
-}.tw-avatar.tw-avatar--initials,
+}
+.tw-avatar.tw-avatar--initials,
 .tw-avatar.tw-avatar--emoji {
   font-family: Arial, sans-serif;
-}.tw-avatar.tw-avatar--branded .tw-avatar__content {
+}
+.tw-avatar.tw-avatar--branded .tw-avatar__content {
   font-family: 'Wise Sans', 'Inter', sans-serif;
   font-family: var(--font-family-display);
   font-feature-settings: "ss01";
   color: var(--color-dark-charcoal);
   line-height: 1;
-}.tw-avatar--24 {
+}
+.tw-avatar--24 {
   min-width: 24px;
   width: 24px;
   height: 24px;
-}.tw-avatar--24.tw-avatar--emoji,
+}
+.tw-avatar--24.tw-avatar--emoji,
 .tw-avatar--24.tw-avatar--icon {
   font-size: 12px;
-}.tw-avatar--24.tw-avatar--initials {
+}
+.tw-avatar--24.tw-avatar--initials {
   font-size: 8.4px;
-}.tw-avatar--24.tw-avatar--branded {
+}
+.tw-avatar--24.tw-avatar--branded {
   font-size: 10.8px;
-}.tw-avatar--24.tw-avatar--outlined {
+}
+.tw-avatar--24.tw-avatar--outlined {
   padding: 2px;
-}.tw-avatar--24.tw-avatar--outlined.tw-avatar--thumbnail::after {
+}
+.tw-avatar--24.tw-avatar--outlined.tw-avatar--thumbnail::after {
   top: 2px;
   left: 2px;
   right: 2px;
   bottom: 2px;
-}.tw-avatar--24.tw-avatar--thumbnail::after {
+}
+.tw-avatar--24.tw-avatar--thumbnail::after {
   position: absolute;
   top: 0;
   left: 0;
@@ -83,25 +97,32 @@
   border: 1px solid var(--color-border-overlay);
   content: "";
   border-radius: 50%;
-}.tw-avatar--40 {
+}
+.tw-avatar--40 {
   min-width: 40px;
   width: 40px;
   height: 40px;
-}.tw-avatar--40.tw-avatar--emoji,
+}
+.tw-avatar--40.tw-avatar--emoji,
 .tw-avatar--40.tw-avatar--icon {
   font-size: 20px;
-}.tw-avatar--40.tw-avatar--initials {
+}
+.tw-avatar--40.tw-avatar--initials {
   font-size: 14px;
-}.tw-avatar--40.tw-avatar--branded {
+}
+.tw-avatar--40.tw-avatar--branded {
   font-size: 18px;
-}.tw-avatar--40.tw-avatar--outlined {
+}
+.tw-avatar--40.tw-avatar--outlined {
   padding: 2px;
-}.tw-avatar--40.tw-avatar--outlined.tw-avatar--thumbnail::after {
+}
+.tw-avatar--40.tw-avatar--outlined.tw-avatar--thumbnail::after {
   top: 2px;
   left: 2px;
   right: 2px;
   bottom: 2px;
-}.tw-avatar--40.tw-avatar--thumbnail::after {
+}
+.tw-avatar--40.tw-avatar--thumbnail::after {
   position: absolute;
   top: 0;
   left: 0;
@@ -111,25 +132,32 @@
   border: 1px solid var(--color-border-overlay);
   content: "";
   border-radius: 50%;
-}.tw-avatar--48 {
+}
+.tw-avatar--48 {
   min-width: 48px;
   width: 48px;
   height: 48px;
-}.tw-avatar--48.tw-avatar--emoji,
+}
+.tw-avatar--48.tw-avatar--emoji,
 .tw-avatar--48.tw-avatar--icon {
   font-size: 24px;
-}.tw-avatar--48.tw-avatar--initials {
+}
+.tw-avatar--48.tw-avatar--initials {
   font-size: 16.8px;
-}.tw-avatar--48.tw-avatar--branded {
+}
+.tw-avatar--48.tw-avatar--branded {
   font-size: 21.6px;
-}.tw-avatar--48.tw-avatar--outlined {
+}
+.tw-avatar--48.tw-avatar--outlined {
   padding: 2px;
-}.tw-avatar--48.tw-avatar--outlined.tw-avatar--thumbnail::after {
+}
+.tw-avatar--48.tw-avatar--outlined.tw-avatar--thumbnail::after {
   top: 2px;
   left: 2px;
   right: 2px;
   bottom: 2px;
-}.tw-avatar--48.tw-avatar--thumbnail::after {
+}
+.tw-avatar--48.tw-avatar--thumbnail::after {
   position: absolute;
   top: 0;
   left: 0;
@@ -139,25 +167,32 @@
   border: 1px solid var(--color-border-overlay);
   content: "";
   border-radius: 50%;
-}.tw-avatar--56 {
+}
+.tw-avatar--56 {
   min-width: 56px;
   width: 56px;
   height: 56px;
-}.tw-avatar--56.tw-avatar--emoji,
+}
+.tw-avatar--56.tw-avatar--emoji,
 .tw-avatar--56.tw-avatar--icon {
   font-size: 28px;
-}.tw-avatar--56.tw-avatar--initials {
+}
+.tw-avatar--56.tw-avatar--initials {
   font-size: 19.6px;
-}.tw-avatar--56.tw-avatar--branded {
+}
+.tw-avatar--56.tw-avatar--branded {
   font-size: 25.2px;
-}.tw-avatar--56.tw-avatar--outlined {
+}
+.tw-avatar--56.tw-avatar--outlined {
   padding: 2px;
-}.tw-avatar--56.tw-avatar--outlined.tw-avatar--thumbnail::after {
+}
+.tw-avatar--56.tw-avatar--outlined.tw-avatar--thumbnail::after {
   top: 2px;
   left: 2px;
   right: 2px;
   bottom: 2px;
-}.tw-avatar--56.tw-avatar--thumbnail::after {
+}
+.tw-avatar--56.tw-avatar--thumbnail::after {
   position: absolute;
   top: 0;
   left: 0;
@@ -167,25 +202,32 @@
   border: 1px solid var(--color-border-overlay);
   content: "";
   border-radius: 50%;
-}.tw-avatar--72 {
+}
+.tw-avatar--72 {
   min-width: 72px;
   width: 72px;
   height: 72px;
-}.tw-avatar--72.tw-avatar--emoji,
+}
+.tw-avatar--72.tw-avatar--emoji,
 .tw-avatar--72.tw-avatar--icon {
   font-size: 36px;
-}.tw-avatar--72.tw-avatar--initials {
+}
+.tw-avatar--72.tw-avatar--initials {
   font-size: 25.2px;
-}.tw-avatar--72.tw-avatar--branded {
+}
+.tw-avatar--72.tw-avatar--branded {
   font-size: 32.4px;
-}.tw-avatar--72.tw-avatar--outlined {
+}
+.tw-avatar--72.tw-avatar--outlined {
   padding: 2px;
-}.tw-avatar--72.tw-avatar--outlined.tw-avatar--thumbnail::after {
+}
+.tw-avatar--72.tw-avatar--outlined.tw-avatar--thumbnail::after {
   top: 2px;
   left: 2px;
   right: 2px;
   bottom: 2px;
-}.tw-avatar--72.tw-avatar--thumbnail::after {
+}
+.tw-avatar--72.tw-avatar--thumbnail::after {
   position: absolute;
   top: 0;
   left: 0;
@@ -195,11 +237,14 @@
   border: 1px solid var(--color-border-overlay);
   content: "";
   border-radius: 50%;
-}.tw-avatar img {
+}
+.tw-avatar img {
   width: 100%;
   height: 100%;
-}.np-theme-personal .tw-avatar--outlined {
+}
+.np-theme-personal .tw-avatar--outlined {
   border-color: var(--color-interactive-primary);
-}.np-theme-personal .tw-avatar--outlined:not(.disabled):not(:disabled):hover {
+}
+.np-theme-personal .tw-avatar--outlined:not(.disabled):not(:disabled):hover {
   border-color: var(--color-interactive-primary-hover);
 }

package/build/styles/inputs/Input.css CHANGED Viewed

@@ -1,6 +1,4 @@
-@media (min-width: 768px) {
-}@media (min-width: 768px) {
-}.np-form-control {
+.np-form-control {
   --ring-width: 1px;
   --ring-color: var(--color-interactive-secondary);
   border: none;
@@ -19,18 +17,23 @@
   transition-timing-function: ease-in-out;
   transition-duration: 300ms;
   /* TODO: Remove these overrides once `.form-control` isn’t used anymore */
-}.np-form-control:focus-visible {
+}
+.np-form-control:focus-visible {
   outline: none;
-}.np-form-control[aria-invalid="true"] {
+}
+.np-form-control[aria-invalid="true"] {
   --ring-width: 2px;
   --ring-color: var(--color-sentiment-negative) !important;
-}.np-form-control:hover:enabled {
+}
+.np-form-control:hover:enabled {
   --ring-width: 2px;
   --ring-color: var(--color-interactive-secondary-hover);
-}.np-form-control:focus:enabled {
+}
+.np-form-control:focus:enabled {
   --ring-width: 3px;
   --ring-color: var(--color-interactive-primary);
-}.np-form-control--size-auto {
+}
+.np-form-control--size-auto {
   font-weight: 400;
   font-weight: var(--font-weight-regular);
   font-size: 1rem;
@@ -41,12 +44,14 @@
   padding-top: var(--size-12);
   padding-bottom: 12px;
   padding-bottom: var(--size-12);
-}.np-form-control--size-sm,
+}
+.np-form-control--size-sm,
 .np-form-control--size-md,
 .np-form-control--size-lg {
   padding-top: 0 !important;
   padding-bottom: 0 !important;
-}.np-form-control--size-sm {
+}
+.np-form-control--size-sm {
   font-size: 0.875rem;
   font-size: var(--font-size-14);
   line-height: 155%;
@@ -55,12 +60,14 @@
   font-weight: var(--font-weight-regular);
   height: 32px !important;
   height: var(--size-32) !important;
-}@media (max-width: 320px) {
+}
+@media (max-width: 320px) {
   .np-form-control--size-sm {
     height: 64px !important;
     height: var(--size-64) !important;
   }
-}.np-form-control--size-md {
+}
+.np-form-control--size-md {
   font-weight: 400;
   font-weight: var(--font-weight-regular);
   font-size: 1rem;
@@ -69,12 +76,14 @@
   letter-spacing: -0.011em;
   height: 48px !important;
   height: var(--size-48) !important;
-}@media (max-width: 320px) {
+}
+@media (max-width: 320px) {
   .np-form-control--size-md {
     height: 72px !important;
     height: var(--size-72) !important;
   }
-}.np-form-control--size-lg {
+}
+.np-form-control--size-lg {
   margin: 0;
   color: #37517e;
   color: var(--color-content-primary);
@@ -91,7 +100,8 @@
   line-height: 125%;
   height: 72px !important;
   height: var(--size-72) !important;
-}@supports (hyphenate-limit-chars: 1) {
+}
+@supports (hyphenate-limit-chars: 1) {
   .np-form-control--size-lg {
     -webkit-hyphens: auto;
             hyphens: auto;
@@ -107,7 +117,8 @@
       hyphenate-limit-chars: 10 4 3;
     }
   }
-}@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+}
+@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
   .np-form-control--size-lg {
     -webkit-hyphens: auto;
             hyphens: auto;
@@ -119,21 +130,26 @@
       -webkit-hyphenate-limit-before: 4;
     }
   }
-}.np-form-control--size-lg + p,
+}
+.np-form-control--size-lg + p,
 .np-form-control--size-lg + ul:not(.list-unstyled),
 .np-form-control--size-lg + ol:not(.list-unstyled) {
   margin-top: 8px;
   margin-top: var(--size-8);
-}.np-input::-moz-placeholder {
+}
+.np-input::-moz-placeholder {
   color: #768e9c;
   color: var(--color-content-tertiary);
-}.np-input::placeholder {
+}
+.np-input::placeholder {
   color: #768e9c;
   color: var(--color-content-tertiary);
-}.np-input--shape-rectangle {
+}
+.np-input--shape-rectangle {
   border-radius: 10px !important;
   border-radius: var(--radius-small) !important;
-}.np-input--shape-pill {
+}
+.np-input--shape-pill {
   border-radius: 9999px !important;
   border-radius: var(--radius-full) !important;
 }

package/build/styles/inputs/TextArea.css CHANGED Viewed

@@ -1,6 +1,4 @@
-@media (min-width: 768px) {
-}@media (min-width: 768px) {
-}.np-form-control {
+.np-form-control {
   --ring-width: 1px;
   --ring-color: var(--color-interactive-secondary);
   border: none;
@@ -19,18 +17,23 @@
   transition-timing-function: ease-in-out;
   transition-duration: 300ms;
   /* TODO: Remove these overrides once `.form-control` isn’t used anymore */
-}.np-form-control:focus-visible {
+}
+.np-form-control:focus-visible {
   outline: none;
-}.np-form-control[aria-invalid="true"] {
+}
+.np-form-control[aria-invalid="true"] {
   --ring-width: 2px;
   --ring-color: var(--color-sentiment-negative) !important;
-}.np-form-control:hover:enabled {
+}
+.np-form-control:hover:enabled {
   --ring-width: 2px;
   --ring-color: var(--color-interactive-secondary-hover);
-}.np-form-control:focus:enabled {
+}
+.np-form-control:focus:enabled {
   --ring-width: 3px;
   --ring-color: var(--color-interactive-primary);
-}.np-form-control--size-auto {
+}
+.np-form-control--size-auto {
   font-weight: 400;
   font-weight: var(--font-weight-regular);
   font-size: 1rem;
@@ -41,12 +44,14 @@
   padding-top: var(--size-12);
   padding-bottom: 12px;
   padding-bottom: var(--size-12);
-}.np-form-control--size-sm,
+}
+.np-form-control--size-sm,
 .np-form-control--size-md,
 .np-form-control--size-lg {
   padding-top: 0 !important;
   padding-bottom: 0 !important;
-}.np-form-control--size-sm {
+}
+.np-form-control--size-sm {
   font-size: 0.875rem;
   font-size: var(--font-size-14);
   line-height: 155%;
@@ -55,12 +60,14 @@
   font-weight: var(--font-weight-regular);
   height: 32px !important;
   height: var(--size-32) !important;
-}@media (max-width: 320px) {
+}
+@media (max-width: 320px) {
   .np-form-control--size-sm {
     height: 64px !important;
     height: var(--size-64) !important;
   }
-}.np-form-control--size-md {
+}
+.np-form-control--size-md {
   font-weight: 400;
   font-weight: var(--font-weight-regular);
   font-size: 1rem;
@@ -69,12 +76,14 @@
   letter-spacing: -0.011em;
   height: 48px !important;
   height: var(--size-48) !important;
-}@media (max-width: 320px) {
+}
+@media (max-width: 320px) {
   .np-form-control--size-md {
     height: 72px !important;
     height: var(--size-72) !important;
   }
-}.np-form-control--size-lg {
+}
+.np-form-control--size-lg {
   margin: 0;
   color: #37517e;
   color: var(--color-content-primary);
@@ -91,7 +100,8 @@
   line-height: 125%;
   height: 72px !important;
   height: var(--size-72) !important;
-}@supports (hyphenate-limit-chars: 1) {
+}
+@supports (hyphenate-limit-chars: 1) {
   .np-form-control--size-lg {
     -webkit-hyphens: auto;
             hyphens: auto;
@@ -107,7 +117,8 @@
       hyphenate-limit-chars: 10 4 3;
     }
   }
-}@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+}
+@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
   .np-form-control--size-lg {
     -webkit-hyphens: auto;
             hyphens: auto;
@@ -119,12 +130,14 @@
       -webkit-hyphenate-limit-before: 4;
     }
   }
-}.np-form-control--size-lg + p,
+}
+.np-form-control--size-lg + p,
 .np-form-control--size-lg + ul:not(.list-unstyled),
 .np-form-control--size-lg + ol:not(.list-unstyled) {
   margin-top: 8px;
   margin-top: var(--size-8);
-}.np-text-area {
+}
+.np-text-area {
   min-height: 72px;
   min-height: var(--size-72);
   scroll-padding-top: 8px;
@@ -134,10 +147,12 @@
   overscroll-behavior: none;
   border-radius: 10px !important;
   border-radius: var(--radius-small) !important;
-}.np-text-area::-moz-placeholder {
+}
+.np-text-area::-moz-placeholder {
   color: #768e9c;
   color: var(--color-content-tertiary);
-}.np-text-area::placeholder {
+}
+.np-text-area::placeholder {
   color: #768e9c;
   color: var(--color-content-tertiary);
 }

package/build/styles/loader/Loader.css CHANGED Viewed

@@ -49,101 +49,15 @@
   --coin-size: 3rem;
   --coin-edge-width-offset: translateX(0.275rem);
   --coin-edge-width-negative-offset: translateX(-0.275rem);
-  --box-shadow-forwards: 0.025rem 0 0 var(--coin-colour),
-      0.05rem 0 0 var(--coin-colour),
-      0.075rem 0 0 var(--coin-colour),
-      0.1rem 0 0 var(--coin-colour),
-      0.125rem 0 0 var(--coin-colour),
-      0.15rem 0 0 var(--coin-colour),
-      0.175rem 0 0 var(--coin-colour),
-      0.2rem 0 0 var(--coin-colour),
-      0.225rem 0 0 var(--coin-colour),
-      0.25rem 0 0 var(--coin-colour),
-      0.275rem 0 0 var(--coin-colour),
-      0.3rem 0 0 var(--coin-colour),
-      0.325rem 0 0 var(--coin-colour),
-      0.35rem 0 0 var(--coin-colour),
-      0.375rem 0 0 var(--coin-colour),
-      0.4rem 0 0 var(--coin-colour),
-      0.425rem 0 0 var(--coin-colour),
-      0.45rem 0 0 var(--coin-colour),
-      0.475rem 0 0 var(--coin-colour);
-  --box-shadow-backwards: -0.025rem 0 0 var(--coin-colour),
-      -0.05rem 0 0 var(--coin-colour),
-      -0.075rem 0 0 var(--coin-colour),
-      -0.1rem 0 0 var(--coin-colour),
-      -0.125rem 0 0 var(--coin-colour),
-      -0.15rem 0 0 var(--coin-colour),
-      -0.175rem 0 0 var(--coin-colour),
-      -0.2rem 0 0 var(--coin-colour),
-      -0.225rem 0 0 var(--coin-colour),
-      -0.25rem 0 0 var(--coin-colour),
-      -0.275rem 0 0 var(--coin-colour),
-      -0.3rem 0 0 var(--coin-colour),
-      -0.325rem 0 0 var(--coin-colour),
-      -0.35rem 0 0 var(--coin-colour),
-      -0.375rem 0 0 var(--coin-colour),
-      -0.4rem 0 0 var(--coin-colour),
-      -0.425rem 0 0 var(--coin-colour),
-      -0.45rem 0 0 var(--coin-colour),
-      -0.475rem 0 0 var(--coin-colour);
+  --box-shadow-forwards: 0.025rem 0 0 var(--coin-colour), 0.05rem 0 0 var(--coin-colour), 0.075rem 0 0 var(--coin-colour), 0.1rem 0 0 var(--coin-colour), 0.125rem 0 0 var(--coin-colour), 0.15rem 0 0 var(--coin-colour), 0.175rem 0 0 var(--coin-colour), 0.2rem 0 0 var(--coin-colour), 0.225rem 0 0 var(--coin-colour), 0.25rem 0 0 var(--coin-colour), 0.275rem 0 0 var(--coin-colour), 0.3rem 0 0 var(--coin-colour), 0.325rem 0 0 var(--coin-colour), 0.35rem 0 0 var(--coin-colour), 0.375rem 0 0 var(--coin-colour), 0.4rem 0 0 var(--coin-colour), 0.425rem 0 0 var(--coin-colour), 0.45rem 0 0 var(--coin-colour), 0.475rem 0 0 var(--coin-colour);
+  --box-shadow-backwards: -0.025rem 0 0 var(--coin-colour), -0.05rem 0 0 var(--coin-colour), -0.075rem 0 0 var(--coin-colour), -0.1rem 0 0 var(--coin-colour), -0.125rem 0 0 var(--coin-colour), -0.15rem 0 0 var(--coin-colour), -0.175rem 0 0 var(--coin-colour), -0.2rem 0 0 var(--coin-colour), -0.225rem 0 0 var(--coin-colour), -0.25rem 0 0 var(--coin-colour), -0.275rem 0 0 var(--coin-colour), -0.3rem 0 0 var(--coin-colour), -0.325rem 0 0 var(--coin-colour), -0.35rem 0 0 var(--coin-colour), -0.375rem 0 0 var(--coin-colour), -0.4rem 0 0 var(--coin-colour), -0.425rem 0 0 var(--coin-colour), -0.45rem 0 0 var(--coin-colour), -0.475rem 0 0 var(--coin-colour);
 }
 .tw-loader--md {
   --coin-size: 4.5rem;
   --coin-edge-width-offset: translateX(0.375rem);
   --coin-edge-width-negative-offset: translateX(-0.375rem);
-  --box-shadow-forwards: 0.025rem 0 0 var(--coin-colour),
-      0.05rem 0 0 var(--coin-colour),
-      0.075rem 0 0 var(--coin-colour),
-      0.1rem 0 0 var(--coin-colour),
-      0.125rem 0 0 var(--coin-colour),
-      0.15rem 0 0 var(--coin-colour),
-      0.175rem 0 0 var(--coin-colour),
-      0.2rem 0 0 var(--coin-colour),
-      0.225rem 0 0 var(--coin-colour),
-      0.25rem 0 0 var(--coin-colour),
-      0.275rem 0 0 var(--coin-colour),
-      0.3rem 0 0 var(--coin-colour),
-      0.325rem 0 0 var(--coin-colour),
-      0.35rem 0 0 var(--coin-colour),
-      0.375rem 0 0 var(--coin-colour),
-      0.4rem 0 0 var(--coin-colour),
-      0.425rem 0 0 var(--coin-colour),
-      0.45rem 0 0 var(--coin-colour),
-      0.475rem 0 0 var(--coin-colour),
-      0.5rem 0 0 var(--coin-colour),
-      0.525rem 0 0 var(--coin-colour),
-      0.55rem 0 0 var(--coin-colour),
-      0.575rem 0 0 var(--coin-colour),
-      0.6rem 0 0 var(--coin-colour),
-      0.625rem 0 0 var(--coin-colour),
-      0.65rem 0 0 var(--coin-colour);
-  --box-shadow-backwards: -0.025rem 0 0 var(--coin-colour),
-      -0.05rem 0 0 var(--coin-colour),
-      -0.075rem 0 0 var(--coin-colour),
-      -0.1rem 0 0 var(--coin-colour),
-      -0.125rem 0 0 var(--coin-colour),
-      -0.15rem 0 0 var(--coin-colour),
-      -0.175rem 0 0 var(--coin-colour),
-      -0.2rem 0 0 var(--coin-colour),
-      -0.225rem 0 0 var(--coin-colour),
-      -0.25rem 0 0 var(--coin-colour),
-      -0.275rem 0 0 var(--coin-colour),
-      -0.3rem 0 0 var(--coin-colour),
-      -0.325rem 0 0 var(--coin-colour),
-      -0.35rem 0 0 var(--coin-colour),
-      -0.375rem 0 0 var(--coin-colour),
-      -0.4rem 0 0 var(--coin-colour),
-      -0.425rem 0 0 var(--coin-colour),
-      -0.45rem 0 0 var(--coin-colour),
-      -0.475rem 0 0 var(--coin-colour),
-      -0.5rem 0 0 var(--coin-colour),
-      -0.525rem 0 0 var(--coin-colour),
-      -0.55rem 0 0 var(--coin-colour),
-      -0.575rem 0 0 var(--coin-colour),
-      -0.6rem 0 0 var(--coin-colour),
-      -0.625rem 0 0 var(--coin-colour),
-      -0.65rem 0 0 var(--coin-colour);
+  --box-shadow-forwards: 0.025rem 0 0 var(--coin-colour), 0.05rem 0 0 var(--coin-colour), 0.075rem 0 0 var(--coin-colour), 0.1rem 0 0 var(--coin-colour), 0.125rem 0 0 var(--coin-colour), 0.15rem 0 0 var(--coin-colour), 0.175rem 0 0 var(--coin-colour), 0.2rem 0 0 var(--coin-colour), 0.225rem 0 0 var(--coin-colour), 0.25rem 0 0 var(--coin-colour), 0.275rem 0 0 var(--coin-colour), 0.3rem 0 0 var(--coin-colour), 0.325rem 0 0 var(--coin-colour), 0.35rem 0 0 var(--coin-colour), 0.375rem 0 0 var(--coin-colour), 0.4rem 0 0 var(--coin-colour), 0.425rem 0 0 var(--coin-colour), 0.45rem 0 0 var(--coin-colour), 0.475rem 0 0 var(--coin-colour), 0.5rem 0 0 var(--coin-colour), 0.525rem 0 0 var(--coin-colour), 0.55rem 0 0 var(--coin-colour), 0.575rem 0 0 var(--coin-colour), 0.6rem 0 0 var(--coin-colour), 0.625rem 0 0 var(--coin-colour), 0.65rem 0 0 var(--coin-colour);
+  --box-shadow-backwards: -0.025rem 0 0 var(--coin-colour), -0.05rem 0 0 var(--coin-colour), -0.075rem 0 0 var(--coin-colour), -0.1rem 0 0 var(--coin-colour), -0.125rem 0 0 var(--coin-colour), -0.15rem 0 0 var(--coin-colour), -0.175rem 0 0 var(--coin-colour), -0.2rem 0 0 var(--coin-colour), -0.225rem 0 0 var(--coin-colour), -0.25rem 0 0 var(--coin-colour), -0.275rem 0 0 var(--coin-colour), -0.3rem 0 0 var(--coin-colour), -0.325rem 0 0 var(--coin-colour), -0.35rem 0 0 var(--coin-colour), -0.375rem 0 0 var(--coin-colour), -0.4rem 0 0 var(--coin-colour), -0.425rem 0 0 var(--coin-colour), -0.45rem 0 0 var(--coin-colour), -0.475rem 0 0 var(--coin-colour), -0.5rem 0 0 var(--coin-colour), -0.525rem 0 0 var(--coin-colour), -0.55rem 0 0 var(--coin-colour), -0.575rem 0 0 var(--coin-colour), -0.6rem 0 0 var(--coin-colour), -0.625rem 0 0 var(--coin-colour), -0.65rem 0 0 var(--coin-colour);
 }
 @media (prefers-reduced-motion) {
   .tw-loader::before {