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

package/src/styles/less/popovers.css

@@ -1,12 +1,12 @@
 .close {
-  float: right;
+  float: inline-end;
   color: #0097c7;
   color: var(--color-content-accent);
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 [dir="rtl"] .close {
-  float: left;
+  float: inline-start;
 }
 .np-theme-personal .close {
   color: var(--color-interactive-primary);
@@ -46,11 +46,12 @@ button.close {
   background: initial;
 }
 .popover {
-  top: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
   z-index: 1060;
-  width: 276px;
-  padding: 18px 24px;
+  inline-size: 276px;
+  padding-block: 18px;
+  padding-inline: 24px;
   font-family: 'Inter', Helvetica, Arial, sans-serif;
   font-family: var(--font-family-regular);
   font-style: normal;
@@ -59,7 +60,7 @@ button.close {
   line-break: auto;
   line-height: 24px;
   line-height: var(--size-24);
-  text-align: left;
+  text-align: start;
   -webkit-text-decoration: none;
   text-decoration: none;
   text-shadow: none;
@@ -82,12 +83,11 @@ button.close {
   position: absolute;
 }
 [dir="rtl"] .popover {
-  right: 0;
-  left: auto;
-  left: initial;
+  inset-inline-end: 0;
+  inset-inline-start: initial;
 }
 [dir="rtl"] .popover {
-  text-align: right;
+  text-align: end;
 }
 .np-theme-personal--forest-green .popover,
 .np-theme-personal--bright-green .popover,
@@ -101,301 +101,270 @@ button.close {
   transform: scale(0);
 }
 .popover.top {
-  margin-top: -14px;
+  margin-block-start: -14px;
   transform-origin: 50% 100%;
 }
 .popover.top-left {
-  margin-top: -14px;
+  margin-block-start: -14px;
   transform-origin: calc(100% - 29px) 100%;
 }
 .popover.top-right {
-  margin-top: -14px;
+  margin-block-start: -14px;
   transform-origin: 29px 100%;
 }
 .popover.right {
-  margin-left: 14px;
+  margin-inline-start: 14px;
   transform-origin: 0% 50%;
 }
 [dir="rtl"] .popover.right {
-  margin-right: 14px;
-  margin-left: 0;
-  margin-left: initial;
+  margin-inline-end: 14px;
+  margin-inline-start: initial;
 }
 .popover.right-top {
-  margin-left: 14px;
+  margin-inline-start: 14px;
   transform-origin: 0% 29px;
 }
 [dir="rtl"] .popover.right-top {
-  margin-right: 14px;
-  margin-left: 0;
-  margin-left: initial;
+  margin-inline-end: 14px;
+  margin-inline-start: initial;
 }
 .popover.right-bottom {
-  margin-left: 14px;
+  margin-inline-start: 14px;
   transform-origin: 0% calc(100% - 29px);
 }
 [dir="rtl"] .popover.right-bottom {
-  margin-right: 14px;
-  margin-left: 0;
-  margin-left: initial;
+  margin-inline-end: 14px;
+  margin-inline-start: initial;
 }
 .popover.bottom {
-  margin-top: 14px;
+  margin-block-start: 14px;
   transform-origin: 50% 0%;
 }
 .popover.bottom-left {
-  margin-top: 14px;
+  margin-block-start: 14px;
   transform-origin: calc(100% - 29px) 0%;
 }
 .popover.bottom-right {
-  margin-top: 14px;
+  margin-block-start: 14px;
   transform-origin: 29px 0%;
 }
 .popover.left {
-  margin-left: -14px;
+  margin-inline-start: -14px;
   transform-origin: 100% 50%;
 }
 [dir="rtl"] .popover.left {
-  margin-right: -14px;
-  margin-left: 0;
-  margin-left: initial;
+  margin-inline-end: -14px;
+  margin-inline-start: initial;
 }
 .popover.left-top {
-  margin-left: -14px;
+  margin-inline-start: -14px;
   transform-origin: 100% 29px;
 }
 [dir="rtl"] .popover.left-top {
-  margin-right: -14px;
-  margin-left: 0;
-  margin-left: initial;
+  margin-inline-end: -14px;
+  margin-inline-start: initial;
 }
 .popover.left-bottom {
-  margin-left: -14px;
+  margin-inline-start: -14px;
   transform-origin: 100% calc(100% - 29px);
 }
 [dir="rtl"] .popover.left-bottom {
-  margin-right: -14px;
-  margin-left: 0;
-  margin-left: initial;
+  margin-inline-end: -14px;
+  margin-inline-start: initial;
 }
 .popover::before {
   content: " ";
   position: absolute;
   display: block;
-  width: 14px;
-  height: 14px;
-  left: 28px;
-  top: -7px;
+  inline-size: 14px;
+  block-size: 14px;
+  inset-inline-start: 28px;
+  inset-block-start: -7px;
   transform: rotate(45deg);
   background-color: inherit;
 }
 [dir="rtl"] .popover::before {
-  right: 28px;
-  left: auto;
-  left: initial;
+  inset-inline-end: 28px;
+  inset-inline-start: initial;
 }
 .popover.top::before {
-  top: auto;
-  bottom: -7px;
-  left: 50%;
-  margin-left: -7px;
+  inset-block-start: auto;
+  inset-block-end: -7px;
+  inset-inline-start: 50%;
+  margin-inline-start: -7px;
 }
 [dir="rtl"] .popover.top::before {
-  right: 50%;
-  left: auto;
-  left: initial;
+  inset-inline-end: 50%;
+  inset-inline-start: initial;
 }
 [dir="rtl"] .popover.top::before {
-  margin-right: -7px;
-  margin-left: 0;
-  margin-left: initial;
+  margin-inline-end: -7px;
+  margin-inline-start: initial;
 }
 .popover.top-left::before {
-  top: auto;
-  bottom: -7px;
-  right: 29px;
-  left: auto;
-  margin-left: -7px;
+  inset-block-start: auto;
+  inset-block-end: -7px;
+  inset-inline-end: 29px;
+  inset-inline-start: auto;
+  margin-inline-start: -7px;
 }
 [dir="rtl"] .popover.top-left::before {
-  left: 29px;
-  right: auto;
-  right: initial;
+  inset-inline-start: 29px;
+  inset-inline-end: initial;
 }
 [dir="rtl"] .popover.top-left::before {
-  right: auto;
-  left: auto;
-  left: initial;
+  inset-inline-end: auto;
+  inset-inline-start: initial;
 }
 [dir="rtl"] .popover.top-left::before {
-  margin-right: -7px;
-  margin-left: 0;
-  margin-left: initial;
+  margin-inline-end: -7px;
+  margin-inline-start: initial;
 }
 .popover.top-right::before {
-  top: auto;
-  bottom: -7px;
-  left: 29px;
-  right: auto;
-  margin-left: -7px;
+  inset-block-start: auto;
+  inset-block-end: -7px;
+  inset-inline-start: 29px;
+  inset-inline-end: auto;
+  margin-inline-start: -7px;
 }
 [dir="rtl"] .popover.top-right::before {
-  right: 29px;
-  left: auto;
-  left: initial;
+  inset-inline-end: 29px;
+  inset-inline-start: initial;
 }
 [dir="rtl"] .popover.top-right::before {
-  left: auto;
-  right: auto;
-  right: initial;
+  inset-inline-start: auto;
+  inset-inline-end: initial;
 }
 [dir="rtl"] .popover.top-right::before {
-  margin-right: -7px;
-  margin-left: 0;
-  margin-left: initial;
+  margin-inline-end: -7px;
+  margin-inline-start: initial;
 }
 .popover.right::before {
-  top: 50%;
-  margin-top: -7px;
-  left: -7px;
+  inset-block-start: 50%;
+  margin-block-start: -7px;
+  inset-inline-start: -7px;
 }
 [dir="rtl"] .popover.right::before {
-  right: -7px;
-  left: auto;
-  left: initial;
+  inset-inline-end: -7px;
+  inset-inline-start: initial;
 }
 .popover.right-top::before {
-  top: 29px;
-  margin-top: -7px;
-  left: -7px;
+  inset-block-start: 29px;
+  margin-block-start: -7px;
+  inset-inline-start: -7px;
 }
 [dir="rtl"] .popover.right-top::before {
-  right: -7px;
-  left: auto;
-  left: initial;
+  inset-inline-end: -7px;
+  inset-inline-start: initial;
 }
 .popover.right-bottom::before {
-  top: calc(100% - 29px);
-  margin-top: -7px;
-  left: -7px;
+  inset-block-start: calc(100% - 29px);
+  margin-block-start: -7px;
+  inset-inline-start: -7px;
 }
 [dir="rtl"] .popover.right-bottom::before {
-  right: -7px;
-  left: auto;
-  left: initial;
+  inset-inline-end: -7px;
+  inset-inline-start: initial;
 }
 .popover.bottom::before {
-  top: -7px;
-  bottom: auto;
-  left: 50%;
-  margin-left: -7px;
+  inset-block-start: -7px;
+  inset-block-end: auto;
+  inset-inline-start: 50%;
+  margin-inline-start: -7px;
 }
 [dir="rtl"] .popover.bottom::before {
-  right: 50%;
-  left: auto;
-  left: initial;
+  inset-inline-end: 50%;
+  inset-inline-start: initial;
 }
 [dir="rtl"] .popover.bottom::before {
-  margin-right: -7px;
-  margin-left: 0;
-  margin-left: initial;
+  margin-inline-end: -7px;
+  margin-inline-start: initial;
 }
 .popover.bottom-left::before {
-  top: -7px;
-  bottom: auto;
-  right: 29px;
-  left: auto;
-  margin-left: -7px;
+  inset-block-start: -7px;
+  inset-block-end: auto;
+  inset-inline-end: 29px;
+  inset-inline-start: auto;
+  margin-inline-start: -7px;
 }
 [dir="rtl"] .popover.bottom-left::before {
-  left: 29px;
-  right: auto;
-  right: initial;
+  inset-inline-start: 29px;
+  inset-inline-end: initial;
 }
 [dir="rtl"] .popover.bottom-left::before {
-  right: auto;
-  left: auto;
-  left: initial;
+  inset-inline-end: auto;
+  inset-inline-start: initial;
 }
 [dir="rtl"] .popover.bottom-left::before {
-  margin-right: -7px;
-  margin-left: 0;
-  margin-left: initial;
+  margin-inline-end: -7px;
+  margin-inline-start: initial;
 }
 .popover.bottom-right::before {
-  top: -7px;
-  bottom: auto;
-  right: 29px;
-  left: auto;
-  margin-left: -7px;
+  inset-block-start: -7px;
+  inset-block-end: auto;
+  inset-inline-end: 29px;
+  inset-inline-start: auto;
+  margin-inline-start: -7px;
 }
 [dir="rtl"] .popover.bottom-right::before {
-  left: 29px;
-  right: auto;
-  right: initial;
+  inset-inline-start: 29px;
+  inset-inline-end: initial;
 }
 [dir="rtl"] .popover.bottom-right::before {
-  right: auto;
-  left: auto;
-  left: initial;
+  inset-inline-end: auto;
+  inset-inline-start: initial;
 }
 [dir="rtl"] .popover.bottom-right::before {
-  margin-right: -7px;
-  margin-left: 0;
-  margin-left: initial;
+  margin-inline-end: -7px;
+  margin-inline-start: initial;
 }
 .popover.left::before {
-  top: 50%;
-  margin-top: -7px;
-  left: auto;
-  right: -7px;
+  inset-block-start: 50%;
+  margin-block-start: -7px;
+  inset-inline-start: auto;
+  inset-inline-end: -7px;
 }
 [dir="rtl"] .popover.left::before {
-  right: auto;
-  left: auto;
-  left: initial;
+  inset-inline-end: auto;
+  inset-inline-start: initial;
 }
 [dir="rtl"] .popover.left::before {
-  left: -7px;
-  right: auto;
-  right: initial;
+  inset-inline-start: -7px;
+  inset-inline-end: initial;
 }
 .popover.left-top::before {
-  top: 29px;
-  margin-top: -7px;
-  left: auto;
-  right: -7px;
+  inset-block-start: 29px;
+  margin-block-start: -7px;
+  inset-inline-start: auto;
+  inset-inline-end: -7px;
 }
 [dir="rtl"] .popover.left-top::before {
-  right: auto;
-  left: auto;
-  left: initial;
+  inset-inline-end: auto;
+  inset-inline-start: initial;
 }
 [dir="rtl"] .popover.left-top::before {
-  left: -7px;
-  right: auto;
-  right: initial;
+  inset-inline-start: -7px;
+  inset-inline-end: initial;
 }
 .popover.left-bottom::before {
-  top: calc(100% - 29px);
-  margin-top: -7px;
-  left: auto;
-  right: -7px;
+  inset-block-start: calc(100% - 29px);
+  margin-block-start: -7px;
+  inset-inline-start: auto;
+  inset-inline-end: -7px;
 }
 [dir="rtl"] .popover.left-bottom::before {
-  right: auto;
-  left: auto;
-  left: initial;
+  inset-inline-end: auto;
+  inset-inline-start: initial;
 }
 [dir="rtl"] .popover.left-bottom::before {
-  left: -7px;
-  right: auto;
-  right: initial;
+  inset-inline-start: -7px;
+  inset-inline-end: initial;
 }
 .popover img,
 .popover .popover-image {
-  width: 65%;
-  margin: 8px 0;
+  inline-size: 65%;
+  margin-block: 8px;
+  margin-inline: 0;
 }
 .popover-title {
   padding: 0;
@@ -413,8 +382,11 @@ button.close {
   line-height: 135%;
   background-color: #ffffff;
   background-color: var(--color-background-screen);
-  border-bottom: 0;
-  border-radius: 2px 2px 0 0;
+  border-block-end: 0;
+  border-start-start-radius: 2px;
+  border-start-end-radius: 2px;
+  border-end-end-radius: 0;
+  border-end-start-radius: 0;
   color: var(--color-content-primary) !important;
 }
 @supports (hyphenate-limit-chars: 1) {
@@ -448,8 +420,8 @@ button.close {
 .popover-title + p,
 .popover-title + ul:not(.list-unstyled),
 .popover-title + ol:not(.list-unstyled) {
-  margin-top: 8px;
-  margin-top: var(--size-8);
+  margin-block-start: 8px;
+  margin-block-start: var(--size-8);
 }
 .popover-content {
   padding: 0;
@@ -463,17 +435,17 @@ button.close {
   color: var(--color-content-secondary);
 }
 .popover-content > :last-child {
-  margin-bottom: 0;
+  margin-block-end: 0;
 }
 .popover-close {
-  float: right;
+  float: inline-end;
   color: #0097c7;
   color: var(--color-content-accent);
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 [dir="rtl"] .popover-close {
-  float: left;
+  float: inline-start;
 }
 .np-theme-personal .popover-close {
   color: var(--color-interactive-primary);
@@ -517,8 +489,8 @@ button.popover-close {
   font-weight: inherit !important;
   -webkit-text-decoration: none !important;
   text-decoration: none !important;
-  border-bottom: 1px dotted #0097c7 !important;
-  border-bottom: 1px dotted var(--color-content-accent) !important;
+  border-block-end: 1px dotted #0097c7 !important;
+  border-block-end: 1px dotted var(--color-content-accent) !important;
   cursor: pointer;
 }
 [data-toggle="popover"]:not(.btn):hover,
@@ -529,17 +501,18 @@ button.popover-close {
   outline: 0;
 }
 .nav > li > a [data-toggle="popover"] {
-  border-bottom: 0;
+  border-block-end: 0;
 }
 @media (max-width: 991px) {
   .popover-modal {
     position: fixed;
-    top: 0 !important;
-    right: 0 !important;
-    left: 0 !important;
-    width: 272px;
-    margin: 32px auto !important;
-    margin: var(--size-32) auto !important;
+    inset-block-start: 0 !important;
+    inset-inline-end: 0 !important;
+    inset-inline-start: 0 !important;
+    inline-size: 272px;
+    margin-block: 32px !important;
+    margin-block: var(--size-32) !important;
+    margin-inline: auto;
   }
   .popover-modal::before {
     display: none;
@@ -547,26 +520,24 @@ button.popover-close {
 }
 @media (min-width: 992px) {
   .popover-modal.left {
-    margin-right: -var(--size-24) !important;
+    margin-inline-end: -var(--size-24) !important;
   }
   [dir="rtl"] .popover-modal.left {
-    margin-left: -var(--size-24) !important;
-    margin-right: 0 !important;
-    margin-right: initial !important;
+    margin-inline-start: -var(--size-24) !important;
+    margin-inline-end: initial !important;
   }
   .popover-modal.right {
-    margin-left: -var(--size-24) !important;
+    margin-inline-start: -var(--size-24) !important;
   }
   [dir="rtl"] .popover-modal.right {
-    margin-right: -var(--size-24) !important;
-    margin-left: 0 !important;
-    margin-left: initial !important;
+    margin-inline-end: -var(--size-24) !important;
+    margin-inline-start: initial !important;
   }
   .popover-modal.top {
-    margin-bottom: -8px !important;
+    margin-block-end: -8px !important;
   }
   .popover-modal.bottom {
-    margin-top: -8px !important;
+    margin-block-start: -8px !important;
   }
 }
 @keyframes cover-fade-in {
@@ -579,13 +550,13 @@ button.popover-close {
 }
 .popover-modal-cover {
   position: fixed;
-  top: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
   z-index: 1060;
   display: none;
-  width: 100vw;
-  height: 100vh;
-  height: 100dvh;
+  inline-size: 100vw;
+  block-size: 100vh;
+  block-size: 100dvh;
   cursor: pointer;
   background-color: #ffffff;
   background-color: var(--color-background-screen);
@@ -593,9 +564,8 @@ button.popover-close {
   animation: cover-fade-in 0.35s 0s linear forwards;
 }
 [dir="rtl"] .popover-modal-cover {
-  right: 0;
-  left: auto;
-  left: initial;
+  inset-inline-end: 0;
+  inset-inline-start: initial;
 }
 @media (max-width: 991px) {
   .popover-modal-cover {
@@ -609,7 +579,7 @@ button.popover-close {
 }
 @media (max-width: 576px) {
   .popover-promotion {
-    width: auto !important;
+    inline-size: auto !important;
     padding: 24px !important;
     padding: var(--size-24) !important;
     margin: 16px !important;
@@ -618,11 +588,13 @@ button.popover-close {
 }
 @media (min-width: 566px) and (max-width: 992px) {
   .popover-promotion {
-    width: 540px !important;
-    padding: 28px 32px !important;
-    padding: 28px var(--size-32) !important;
-    margin: 32px auto !important;
-    margin: var(--size-32) auto !important;
+    inline-size: 540px !important;
+    padding-block: 28px !important;
+    padding-inline: 32px;
+    padding-inline: var(--size-32);
+    margin-block: 32px !important;
+    margin-block: var(--size-32) !important;
+    margin-inline: auto;
   }
 }
 .popover-promotion .popover-title {
@@ -641,17 +613,17 @@ button.popover-close {
 }
 @media (max-width: 480px) {
   .popover-promotion .popover-image {
-    width: 80%;
+    inline-size: 80%;
   }
 }
 @media (min-width: 480px) and (max-width: 992px) {
   .popover-promotion .popover-image {
-    width: 60%;
+    inline-size: 60%;
   }
 }
 @media (min-width: 992px) {
   .popover-promotion .popover-image {
-    width: 80%;
+    inline-size: 80%;
   }
 }
 @media (max-width: 992px) {