@deriv-web-design/ui 0.1.39 → 0.1.41

package/dist/index.css

@@ -6014,6 +6014,10 @@
   display: block;
   pointer-events: none;
 }
+[dir=rtl] .dnt__bg {
+  transform: scaleX(-1);
+  transform-origin: center;
+}
 .dnt__bg--day {
   z-index: 0;
 }
@@ -6037,9 +6041,6 @@
   top: 0;
   left: 0;
   right: 0;
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: 100% 100%;
   overflow: hidden;
 }
 .dnt__v2-bg-night {
@@ -6052,14 +6053,37 @@
   left: 0;
   right: 0;
   box-sizing: border-box;
+  overflow: hidden;
+}
+.dnt__v2-bg-media {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
   background-repeat: no-repeat;
   background-size: cover;
   background-position: 100% 100%;
+  pointer-events: none;
 }
-.dnt--webflow-v2 .dnt__v2-bg-day,
-.dnt--webflow-v2 .dnt__v2-bg-night {
+.dnt--webflow-v2 .dnt__v2-bg-media {
   background-attachment: fixed;
 }
+[dir=rtl] .dnt__v2-bg-media {
+  transform: scaleX(-1);
+  transform-origin: center;
+  background-attachment: scroll;
+  inset: auto;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 100vh;
+}
+[dir=rtl] .dnt--webflow-v2 .dnt__v2-bg-day {
+  position: sticky;
+  top: 0;
+}
 .dnt__sticky--webflow-v2 {
   z-index: 0;
 }
@@ -6071,11 +6095,8 @@
   .dnt--webflow-v2 .dnt__v2-bg-day {
     position: sticky;
     top: 0;
-    background-position: 30% 0;
-    background-repeat: repeat;
-    background-size: auto 100vh;
   }
-  .dnt--webflow-v2 .dnt__v2-bg-night {
+  .dnt--webflow-v2 .dnt__v2-bg-media {
     background-position: 30% 0;
     background-repeat: repeat;
     background-size: auto 100vh;
@@ -6100,18 +6121,14 @@
   }
 }
 @media screen and (max-width: 479px) {
-  .dnt--webflow-v2 .dnt__v2-bg-day {
-    background-position: 40% 0;
-  }
-  .dnt--webflow-v2 .dnt__v2-bg-night {
+  .dnt--webflow-v2 .dnt__v2-bg-media {
     background-position: 40% 0;
   }
   .dnt--webflow-v2 .dnt__sticky--webflow-v2 .dnt__content {
     padding: var(--spacing-80) var(--dnt-content-px) var(--dnt-content-py) var(--dnt-content-px);
   }
   .dnt--layout-v2 .dnt__inner {
-    padding-left: var(--spacing-16);
-    padding-right: var(--spacing-16);
+    padding-inline: var(--spacing-16);
   }
   .dnt--webflow-v2.dnt--headline-h1 .dnt__headline {
     font-size: 3.5rem;
@@ -7470,11 +7487,16 @@
   width: var(--tbl-col-main-width);
   min-width: var(--tbl-col-main-width);
   position: sticky;
-  left: 0;
+  inset-inline-start: 0;
+  left: auto;
   z-index: 2;
   background-color: var(--tbl-bg);
   box-shadow: 4px 0 12px rgba(0, 0, 0, 0.03);
 }
+[dir=rtl] .tbl__th--main,
+[dir=rtl] .tbl__td--main {
+  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.03);
+}
 .tbl__tbody .tbl__tr:hover .tbl__td--main {
   background-color: var(--tbl-row-hover-bg);
 }
@@ -9526,7 +9548,7 @@
 .fa__title {
   margin: 0;
   width: 100%;
-  text-align: left;
+  text-align: start;
   font-family: var(--typography-h2-font-family);
   font-size: var(--typography-h2-font-size);
   font-weight: var(--typography-h2-font-weight);
@@ -9570,7 +9592,7 @@
   display: flex;
   flex-shrink: 0;
   gap: var(--fa-item-gap-x);
-  padding-right: var(--fa-item-gap-x);
+  padding-inline-end: var(--fa-item-gap-x);
 }
 .fa__track--auto {
   animation: fa-marquee var(--fa-duration, 32s) linear infinite;