Get drilldown menu working with RTL

diff --git a/scss/components/_drilldown.scss b/scss/components/_drilldown.scss
index 4363c25774b7a281f4e721ba43c12ebf58dd76da..6e0f24f3a696e74b7fc19295a91602e2a69ca9f5 100644 (file)
--- a/scss/components/_drilldown.scss
+++ b/scss/components/_drilldown.scss
@@ -25,7 +25,7 @@ $drilldown-arrows: true !default;
   .is-drilldown-sub {
     position: absolute;
     top: 0;
-    left: 100%;
+    #{$global-left}: 100%;
     z-index: -1;
     height: 100%;
     width: 100%;
@@ -35,11 +35,11 @@ $drilldown-arrows: true !default;
     &.is-active {
       z-index: 1;
       display: block;
-      transform: translateX(-100%);
+      transform: translateX(if($global-text-direction == ltr, -100%, 100%));
     }
 
     &.is-closing {
-      transform: translateX(100%);
+      transform: translateX(if($global-text-direction == ltr, 100%, -100%));
     }
   }
 
@@ -48,19 +48,19 @@ $drilldown-arrows: true !default;
       position: relative;
 
       &::after {
-        @include css-triangle(6px, $primary-color, right);
+        @include css-triangle(6px, $primary-color, $global-right);
         position: absolute;
         top: 50%;
         margin-top: -6px;
-        right: 1rem;
+        #{$global-right}: 1rem;
       }
     }
 
     .js-drilldown-back::before {
-      @include css-triangle(6px, $primary-color, left);
-      float: left;
-      margin-right: 0.75rem; // Creates space between the arrow and the text
-      margin-left: 0.6rem; // Lines the tip of the arrow with the items below
+      @include css-triangle(6px, $primary-color, $global-left);
+      float: $global-left;
+      margin-#{$global-right}: 0.75rem; // Creates space between the arrow and the text
+      margin-#{$global-left}: 0.6rem; // Lines the tip of the arrow with the items below
       margin-top: 14px; // Aligns the arrow with the text
     }
   }