@transferwise/components 0.0.0-experimental-c1f5b0b → 0.0.0-experimental-fe160ab

package/src/styles/less/sequences.css

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