@transferwise/components 0.0.0-experimental-8cc553f → 0.0.0-experimental-769973c

package/build/styles/styles/less/sequences.css

@@ -1,130 +1,122 @@
 .sequence {
-  padding-left: 24px;
+  padding-inline-start: 24px;
   position: relative;
-  margin-left: 25px;
-  margin-top: 0;
-  margin-bottom: 0;
+  margin-inline-start: 25px;
+  margin-block-start: 0;
+  margin-block-end: 0;
   font-size: 0.875rem;
   font-size: var(--font-size-14);
   border-color: rgba(0,0,0,0.10196);
   border-color: var(--color-border-neutral);
 }
 .sequence > li {
-  padding-top: 2px;
-  padding-bottom: 2px;
+  padding-block-start: 2px;
+  padding-block-end: 2px;
 }
 .sequence > li:first-child {
-  margin-top: 16px;
+  margin-block-start: 16px;
 }
 .sequence > li:last-child {
-  margin-bottom: 16px;
+  margin-block-end: 16px;
 }
 @media (min-width: 768px) {
   .sequence > li {
-    padding-top: 4px;
-    padding-bottom: 4px;
+    padding-block-start: 4px;
+    padding-block-end: 4px;
   }
 }
 .sequence > li::before {
-  margin-top: 8px;
+  margin-block-start: 8px;
 }
 .sequence > li::after {
-  top: 16px;
+  inset-block-start: 16px;
 }
 .sequence > li:first-child::after {
-  height: 100%;
+  block-size: 100%;
 }
 .sequence > li:last-child::after {
-  height: 0;
+  block-size: 0;
 }
 .sequence.sequence-top > li:first-child {
-  padding-top: 20px;
-  margin-top: 0;
+  padding-block-start: 20px;
+  margin-block-start: 0;
 }
 .sequence.sequence-top > li:first-child::after {
-  height: calc(100% + 16px);
+  block-size: calc(100% + 16px);
 }
 .sequence.sequence-bottom > li:last-child {
-  padding-bottom: 20px;
-  margin-bottom: 0;
+  padding-block-end: 20px;
+  margin-block-end: 0;
 }
 .sequence.sequence-bottom > li:last-child::after {
-  height: calc(100% - 16px);
+  block-size: calc(100% - 16px);
 }
 .sequence.sequence-top.sequence-bottom > li:first-child:last-child::after {
-  height: 100%;
+  block-size: 100%;
 }
 .sequence .sequence-icon {
-  top: 2px;
+  inset-block-start: 2px;
 }
 @media (min-width: 768px) {
   .sequence .sequence-icon {
-    top: 4px;
+    inset-block-start: 4px;
   }
 }
 .sequence.sequence-top > li:first-child .sequence-icon {
-  top: 20px;
+  inset-block-start: 20px;
 }
 [dir="rtl"] .sequence {
-  padding-right: 24px;
-  padding-left: 0;
-  padding-left: initial;
+  padding-inline-end: 24px;
+  padding-inline-start: initial;
 }
 .sequence > li::before {
-  margin-left: -27px;
+  margin-inline-start: -27px;
 }
 [dir="rtl"] .sequence > li::before {
-  margin-right: -27px;
-  margin-left: 0;
-  margin-left: initial;
+  margin-inline-end: -27px;
+  margin-inline-start: initial;
 }
 .sequence > li::after {
-  left: -24px;
+  inset-inline-start: -24px;
 }
 [dir="rtl"] .sequence > li::after {
-  right: -24px;
-  left: auto;
-  left: initial;
+  inset-inline-end: -24px;
+  inset-inline-start: initial;
 }
 .sequence .sequence-icon {
-  margin-left: -35px;
+  margin-inline-start: -35px;
 }
 [dir="rtl"] .sequence .sequence-icon {
-  margin-right: -35px;
-  margin-left: 0;
-  margin-left: initial;
+  margin-inline-end: -35px;
+  margin-inline-start: initial;
 }
 .sequence .sequence-icon-md {
-  margin-left: -39px;
+  margin-inline-start: -39px;
 }
 [dir="rtl"] .sequence .sequence-icon-md {
-  margin-right: -39px;
-  margin-left: 0;
-  margin-left: initial;
+  margin-inline-end: -39px;
+  margin-inline-start: initial;
 }
 .sequence .sequence-icon-lg {
-  margin-left: -43px;
+  margin-inline-start: -43px;
 }
 [dir="rtl"] .sequence .sequence-icon-lg {
-  margin-right: -43px;
-  margin-left: 0;
-  margin-left: initial;
+  margin-inline-end: -43px;
+  margin-inline-start: initial;
 }
 [dir="rtl"] .sequence {
-  margin-right: 25px;
-  margin-left: 0;
-  margin-left: initial;
+  margin-inline-end: 25px;
+  margin-inline-start: initial;
 }
 @media (min-width: 768px) {
   .sequence {
-    padding-right: 24px;
+    padding-inline-end: 24px;
     font-size: 1rem;
     font-size: var(--font-size-16);
   }
   [dir="rtl"] .sequence {
-    padding-left: 24px;
-    padding-right: 0;
-    padding-right: initial;
+    padding-inline-start: 24px;
+    padding-inline-end: initial;
   }
 }
 .sequence > li {
@@ -156,12 +148,12 @@
   color: var(--color-content-accent-active);
 }
 .sequence > li p {
-  margin-bottom: 0;
-  padding-bottom: 8px;
-  max-width: 600px;
+  margin-block-end: 0;
+  padding-block-end: 8px;
+  max-inline-size: 600px;
 }
 .sequence > li p:last-child {
-  padding-bottom: 0;
+  padding-block-end: 0;
 }
 .sequence > li h1,
 .sequence > li h2,
@@ -172,14 +164,14 @@
 .sequence > li .h3,
 .sequence > li .h4,
 .sequence > li .btn-toolbar {
-  margin-bottom: 16px;
+  margin-block-end: 16px;
 }
 .sequence > li::before {
   content: "";
   display: block;
   position: absolute;
-  width: 8px;
-  height: 8px;
+  inline-size: 8px;
+  block-size: 8px;
   border-radius: 50%;
   z-index: 2;
   border-width: 4px;
@@ -190,8 +182,8 @@
 .sequence > li::after {
   content: "";
   position: absolute;
-  width: 2px;
-  height: 100%;
+  inline-size: 2px;
+  block-size: 100%;
   border-style: solid;
   border-color: inherit;
   outline: 0;
@@ -244,7 +236,7 @@
   font-weight: var(--font-weight-regular);
 }
 .sequence-top > li:first-child::after {
-  top: 0;
+  inset-block-start: 0;
 }
 .sequence-inverse > li {
   border-color: rgba(0,0,0,0.10196);
@@ -421,12 +413,12 @@
 .sequence-icon {
   position: absolute;
   display: block;
-  margin-left: -35px;
+  margin-inline-start: -35px;
   background-color: #ffffff;
   background-color: var(--color-background-screen);
   border-radius: 50%;
-  width: 24px;
-  height: 24px;
+  inline-size: 24px;
+  block-size: 24px;
   z-index: 2;
   text-align: center;
   -webkit-text-decoration: none !important;
@@ -435,14 +427,13 @@
   border-style: solid;
   border-color: rgba(0,0,0,0.10196);
   border-color: var(--color-border-neutral);
-  top: 4px;
+  inset-block-start: 4px;
   font-size: 0.75rem;
   font-size: var(--font-size-12);
 }
 [dir="rtl"] .sequence-icon {
-  margin-right: -35px;
-  margin-left: 0;
-  margin-left: initial;
+  margin-inline-end: -35px;
+  margin-inline-start: initial;
 }
 .sequence-icon .icon {
   font-size: 1rem;
@@ -478,25 +469,25 @@
 .sequence-table > li > .sequence-table-td,
 .sequence-table > li > .sequence-table-th {
   display: table-cell;
-  padding: 4px 12px;
-  padding: var(--size-4) var(--size-12);
-  padding-left: 0;
+  padding-block: 4px;
+  padding-block: var(--size-4);
+  padding-inline: 12px;
+  padding-inline: var(--size-12);
+  padding-inline-start: 0;
 }
 [dir="rtl"] .sequence-table > li > .sequence-table-td,
 [dir="rtl"] .sequence-table > li > .sequence-table-th {
-  padding-right: 0;
-  padding-left: 0;
-  padding-left: initial;
+  padding-inline-end: 0;
+  padding-inline-start: initial;
 }
 .sequence-table > li > .sequence-table-td:last-child,
 .sequence-table > li > .sequence-table-th:last-child {
-  padding-right: 0;
+  padding-inline-end: 0;
 }
 [dir="rtl"] .sequence-table > li > .sequence-table-td:last-child,
 [dir="rtl"] .sequence-table > li > .sequence-table-th:last-child {
-  padding-left: 0;
-  padding-right: 0;
-  padding-right: initial;
+  padding-inline-start: 0;
+  padding-inline-end: initial;
 }
 .sequence-table > li > .sequence-table-th {
   color: #37517e;
@@ -513,42 +504,41 @@
 .sequence-table > li .sequence-icon {
   position: static;
   position: initial;
-  margin-top: -17px;
+  margin-block-start: -17px;
 }
 .sequence-table > li:first-child .sequence-table-td,
 .sequence-table > li:first-child .sequence-table-th {
-  padding-top: 17px;
+  padding-block-start: 17px;
 }
 .sequence-table > li:last-child .sequence-table-td,
 .sequence-table > li:last-child .sequence-table-th {
-  padding-bottom: 15px;
+  padding-block-end: 15px;
 }
 .sequence-table::before {
   content: " ";
-  width: 2px;
-  left: 0;
+  inline-size: 2px;
+  inset-inline-start: 0;
   position: absolute;
   border-width: 1px;
   border-style: solid;
   border-color: inherit;
-  height: calc(100% - 56px);
-  margin-top: 28px;
+  block-size: calc(100% - 56px);
+  margin-block-start: 28px;
   display: block;
 }
 [dir="rtl"] .sequence-table::before {
-  right: 0;
-  left: auto;
-  left: initial;
+  inset-inline-end: 0;
+  inset-inline-start: initial;
 }
 .sequence-table.sequence-top::before {
-  height: calc(100% - 28px);
-  margin-top: 0;
+  block-size: calc(100% - 28px);
+  margin-block-start: 0;
 }
 .sequence-table.sequence-bottom::before {
-  height: calc(100% - 28px);
+  block-size: calc(100% - 28px);
 }
 .sequence-table.sequence-top.sequence-bottom::before {
-  height: 100%;
+  block-size: 100%;
 }
 .sequence-inverse > li > .sequence-table-th,
 .sequence-inverse > li > .sequence-table-td {
@@ -556,18 +546,18 @@
   color: var(--color-content-secondary);
 }
 .sequence-icon-md {
-  width: 32px;
-  height: 32px;
+  inline-size: 32px;
+  block-size: 32px;
   line-height: 30px;
-  margin-top: -6px;
+  margin-block-start: -6px;
   font-size: 0.875rem;
   font-size: var(--font-size-14);
 }
 .sequence-icon-lg {
-  width: 40px;
-  height: 40px;
+  inline-size: 40px;
+  block-size: 40px;
   line-height: 38px;
-  margin-top: -6px;
+  margin-block-start: -6px;
   font-size: 1rem;
   font-size: var(--font-size-16);
 }
@@ -576,157 +566,145 @@
   line-height: 35px;
 }
 .sequence-lg {
-  padding-left: 40px;
+  padding-inline-start: 40px;
 }
 .sequence-lg > li {
-  padding-top: 8px;
-  padding-bottom: 8px;
+  padding-block-start: 8px;
+  padding-block-end: 8px;
 }
 .sequence-lg > li:first-child {
-  margin-top: 24px;
+  margin-block-start: 24px;
 }
 .sequence-lg > li:last-child {
-  margin-bottom: 24px;
+  margin-block-end: 24px;
 }
 @media (min-width: 768px) {
   .sequence-lg > li {
-    padding-top: 8px;
-    padding-bottom: 8px;
+    padding-block-start: 8px;
+    padding-block-end: 8px;
   }
 }
 .sequence-lg > li::before {
-  margin-top: 8px;
+  margin-block-start: 8px;
 }
 .sequence-lg > li::after {
-  top: 20px;
+  inset-block-start: 20px;
 }
 .sequence-lg > li:first-child::after {
-  height: 100%;
+  block-size: 100%;
 }
 .sequence-lg > li:last-child::after {
-  height: 0;
+  block-size: 0;
 }
 .sequence-lg.sequence-top > li:first-child {
-  padding-top: 32px;
-  margin-top: 0;
+  padding-block-start: 32px;
+  margin-block-start: 0;
 }
 .sequence-lg.sequence-top > li:first-child::after {
-  height: calc(100% + 20px);
+  block-size: calc(100% + 20px);
 }
 .sequence-lg.sequence-bottom > li:last-child {
-  padding-bottom: 32px;
-  margin-bottom: 0;
+  padding-block-end: 32px;
+  margin-block-end: 0;
 }
 .sequence-lg.sequence-bottom > li:last-child::after {
-  height: calc(100% - 20px);
+  block-size: calc(100% - 20px);
 }
 .sequence-lg.sequence-top.sequence-bottom > li:first-child:last-child::after {
-  height: 100%;
+  block-size: 100%;
 }
 .sequence-lg .sequence-icon {
-  top: 8px;
+  inset-block-start: 8px;
 }
 @media (min-width: 768px) {
   .sequence-lg .sequence-icon {
-    top: 8px;
+    inset-block-start: 8px;
   }
 }
 .sequence-lg.sequence-top > li:first-child .sequence-icon {
-  top: 32px;
+  inset-block-start: 32px;
 }
 [dir="rtl"] .sequence-lg {
-  padding-right: 40px;
-  padding-left: 0;
-  padding-left: initial;
+  padding-inline-end: 40px;
+  padding-inline-start: initial;
 }
 .sequence-lg > li::before {
-  margin-left: -43px;
+  margin-inline-start: -43px;
 }
 [dir="rtl"] .sequence-lg > li::before {
-  margin-right: -43px;
-  margin-left: 0;
-  margin-left: initial;
+  margin-inline-end: -43px;
+  margin-inline-start: initial;
 }
 .sequence-lg > li::after {
-  left: -40px;
+  inset-inline-start: -40px;
 }
 [dir="rtl"] .sequence-lg > li::after {
-  right: -40px;
-  left: auto;
-  left: initial;
+  inset-inline-end: -40px;
+  inset-inline-start: initial;
 }
 .sequence-lg .sequence-icon {
-  margin-left: -51px;
+  margin-inline-start: -51px;
 }
 [dir="rtl"] .sequence-lg .sequence-icon {
-  margin-right: -51px;
-  margin-left: 0;
-  margin-left: initial;
+  margin-inline-end: -51px;
+  margin-inline-start: initial;
 }
 .sequence-lg .sequence-icon-md {
-  margin-left: -55px;
+  margin-inline-start: -55px;
 }
 [dir="rtl"] .sequence-lg .sequence-icon-md {
-  margin-right: -55px;
-  margin-left: 0;
-  margin-left: initial;
+  margin-inline-end: -55px;
+  margin-inline-start: initial;
 }
 .sequence-lg .sequence-icon-lg {
-  margin-left: -59px;
+  margin-inline-start: -59px;
 }
 [dir="rtl"] .sequence-lg .sequence-icon-lg {
-  margin-right: -59px;
-  margin-left: 0;
-  margin-left: initial;
+  margin-inline-end: -59px;
+  margin-inline-start: initial;
 }
 @media (min-width: 768px) {
   .sequence-lg {
-    padding-left: 48px;
+    padding-inline-start: 48px;
   }
   [dir="rtl"] .sequence-lg {
-    padding-right: 48px;
-    padding-left: 0;
-    padding-left: initial;
+    padding-inline-end: 48px;
+    padding-inline-start: initial;
   }
   .sequence-lg > li::before {
-    margin-left: -51px;
+    margin-inline-start: -51px;
   }
   [dir="rtl"] .sequence-lg > li::before {
-    margin-right: -51px;
-    margin-left: 0;
-    margin-left: initial;
+    margin-inline-end: -51px;
+    margin-inline-start: initial;
   }
   .sequence-lg > li::after {
-    left: -48px;
+    inset-inline-start: -48px;
   }
   [dir="rtl"] .sequence-lg > li::after {
-    right: -48px;
-    left: auto;
-    left: initial;
+    inset-inline-end: -48px;
+    inset-inline-start: initial;
   }
   .sequence-lg .sequence-icon {
-    margin-left: -59px;
+    margin-inline-start: -59px;
   }
   [dir="rtl"] .sequence-lg .sequence-icon {
-    margin-right: -59px;
-    margin-left: 0;
-    margin-left: initial;
+    margin-inline-end: -59px;
+    margin-inline-start: initial;
   }
   .sequence-lg .sequence-icon-md {
-    margin-left: -63px;
+    margin-inline-start: -63px;
   }
   [dir="rtl"] .sequence-lg .sequence-icon-md {
-    margin-right: -63px;
-    margin-left: 0;
-    margin-left: initial;
+    margin-inline-end: -63px;
+    margin-inline-start: initial;
   }
   .sequence-lg .sequence-icon-lg {
-    margin-left: -67px;
+    margin-inline-start: -67px;
   }
   [dir="rtl"] .sequence-lg .sequence-icon-lg {
-    margin-right: -67px;
-    margin-left: 0;
-    margin-left: initial;
+    margin-inline-end: -67px;
+    margin-inline-start: initial;
   }
 }
 .sequence-animate > li::after {