From 1019c6bd913505e2b90c7c96269a74dd9ece90d1 Mon Sep 17 00:00:00 2001
From: Romain Emery <emery.romain@gmail.com>
Date: Fri, 18 Mar 2022 09:25:44 +0100
Subject: [PATCH] feat(rtl): right-to-left batch 2 - FRONT-3566 (#2359)

* update components

* update test

* update size
---
 .../__snapshots__/carousel.test.js.snap       | 24 +++++++---
 .../components/carousel/carousel.html.twig    |  4 +-
 .../components/carousel/_carousel.scss        | 25 ++++++-----
 .../featured-item/_featured-item-print.scss   | 21 ++++-----
 .../featured-item/_featured-item.scss         | 21 ++++-----
 .../vanilla/components/gallery/_gallery.scss  | 21 ++++-----
 .../components/hero-banner/_hero-banner.scss  | 14 +++---
 .../media-container/_media-container.scss     |  2 +-
 .../components/page-banner/_page-banner.scss  | 14 +++---
 .../social-media-follow.scss                  | 12 ++---
 .../social-media-share.scss                   |  6 +--
 src/playground/ec/.storybook/preview.js       |  1 +
 src/playground/eu/.storybook/preview.js       |  2 +-
 src/presets/rtl/src/rtl.scss                  | 44 +++++++++++++++++++
 14 files changed, 139 insertions(+), 72 deletions(-)

diff --git a/src/implementations/twig/components/carousel/__snapshots__/carousel.test.js.snap b/src/implementations/twig/components/carousel/__snapshots__/carousel.test.js.snap
index 58b796af29d..7daa960eb07 100644
--- a/src/implementations/twig/components/carousel/__snapshots__/carousel.test.js.snap
+++ b/src/implementations/twig/components/carousel/__snapshots__/carousel.test.js.snap
@@ -266,8 +266,12 @@ exports[`Carousel Default renders correctly 1`] = `
           >
             1
           </span>
-           of 3
-      
+           of 
+          <span
+            class="ecl-carousel__max"
+          >
+            3
+          </span>
         </div>
         <div
           class="ecl-carousel__navigation"
@@ -574,8 +578,12 @@ exports[`Carousel Default renders correctly with extra attributes 1`] = `
           >
             1
           </span>
-           of 3
-      
+           of 
+          <span
+            class="ecl-carousel__max"
+          >
+            3
+          </span>
         </div>
         <div
           class="ecl-carousel__navigation"
@@ -880,8 +888,12 @@ exports[`Carousel Default renders correctly with extra class names 1`] = `
           >
             1
           </span>
-           of 3
-      
+           of 
+          <span
+            class="ecl-carousel__max"
+          >
+            3
+          </span>
         </div>
         <div
           class="ecl-carousel__navigation"
diff --git a/src/implementations/twig/components/carousel/carousel.html.twig b/src/implementations/twig/components/carousel/carousel.html.twig
index 2d7865686a2..1c0f947f32c 100644
--- a/src/implementations/twig/components/carousel/carousel.html.twig
+++ b/src/implementations/twig/components/carousel/carousel.html.twig
@@ -104,7 +104,9 @@
         <span class="ecl-u-sr-only">{{ _sr_autoplay }}</span>
       </button>
       <div class="ecl-carousel__pagination">
-        <span class="ecl-carousel__current">1</span>&nbsp;{{ _counter_label }} {{_items|length}}
+        <span class="ecl-carousel__current">1</span>{{- ' ' -}}
+          {{- _counter_label }}{{- ' ' -}}
+        <span class="ecl-carousel__max">{{_items|length}}</span>
       </div>
       <div class="ecl-carousel__navigation">
         {% for item in _items %}
diff --git a/src/implementations/vanilla/components/carousel/_carousel.scss b/src/implementations/vanilla/components/carousel/_carousel.scss
index 2b3644c1f43..5b86870d525 100644
--- a/src/implementations/vanilla/components/carousel/_carousel.scss
+++ b/src/implementations/vanilla/components/carousel/_carousel.scss
@@ -95,8 +95,10 @@ $_outline-width: null !default;
   left: 0;
 
   &:focus {
-    margin-left: $_outline-width;
-    padding-left: calc(#{map.get(theme.$spacing, 's')} - #{$_outline-width});
+    margin-inline-start: $_outline-width;
+    padding-inline-start: calc(
+      #{map.get(theme.$spacing, 's')} - #{$_outline-width}
+    );
   }
 }
 
@@ -104,8 +106,10 @@ $_outline-width: null !default;
   right: 0;
 
   &:focus {
-    margin-right: $_outline-width;
-    padding-right: calc(#{map.get(theme.$spacing, 's')} - #{$_outline-width});
+    margin-inline-end: $_outline-width;
+    padding-inline-end: calc(
+      #{map.get(theme.$spacing, 's')} - #{$_outline-width}
+    );
   }
 }
 
@@ -116,7 +120,7 @@ $_outline-width: null !default;
   border-radius: 50%;
   cursor: pointer;
   display: flex;
-  margin-right: map.get(theme.$spacing, 'l');
+  margin-inline-end: map.get(theme.$spacing, 'l');
   padding: 0;
 
   &:focus {
@@ -130,8 +134,9 @@ $_outline-width: null !default;
   display: flex;
   font: map.get(theme.$font, 'm');
   font-weight: map.get(theme.$font-weight, 'bold');
-  margin-right: map.get(theme.$spacing, 'l');
+  margin-inline-end: map.get(theme.$spacing, 'l');
   padding-top: 2px;
+  white-space: pre-wrap;
 }
 
 .ecl-carousel__navigation {
@@ -145,7 +150,7 @@ $_outline-width: null !default;
   border-radius: 50%;
   cursor: pointer;
   height: 1rem;
-  margin-right: map.get(theme.$spacing, 'xs');
+  margin-inline-end: map.get(theme.$spacing, 'xs');
   width: 1rem;
 
   &:focus {
@@ -159,7 +164,7 @@ $_outline-width: null !default;
 
 .ecl-carousel-container--padded .ecl-page-banner {
   .ecl-container {
-    margin-left: 100px;
+    margin-inline-start: 100px;
     transition: all 0.2s;
   }
 }
@@ -169,7 +174,7 @@ $_outline-width: null !default;
  */
 .ecl-carousel--full-width {
   left: 50%;
-  margin-left: -50vw;
+  margin-inline-start: -50vw;
   width: 100vw;
 }
 
@@ -179,7 +184,7 @@ $_outline-width: null !default;
   .ecl-page-banner:not(.ecl-page-banner--full-width)
   .ecl-container {
   padding-left: map.get(theme.$spacing, 'm');
-  padding-right: map.get(theme.$spacing, 'm');
+  padding-inline-end: map.get(theme.$spacing, 'm');
 }
 
 /* stylelint-disable-next-line order/order */
diff --git a/src/implementations/vanilla/components/featured-item/_featured-item-print.scss b/src/implementations/vanilla/components/featured-item/_featured-item-print.scss
index 59b764e6b61..2352eb4a0fd 100644
--- a/src/implementations/vanilla/components/featured-item/_featured-item-print.scss
+++ b/src/implementations/vanilla/components/featured-item/_featured-item-print.scss
@@ -70,20 +70,21 @@ $_extended-padding-bottom: null !default;
 .ecl-featured-item--extended {
   .ecl-featured-item__container {
     background-color: $_extended-background;
-    border-left: $_extended-mobile-border-size solid $_extended-border-color;
+    border-inline-start: $_extended-mobile-border-size solid
+      $_extended-border-color;
     border-radius: $_extended-border-radius;
     overflow: hidden;
     padding-bottom: map.get(theme.$spacing, 'm');
-    padding-left: map.get(theme.$spacing, 'xs');
-    padding-right: map.get(theme.$spacing, 'm');
+    padding-inline-start: map.get(theme.$spacing, 'xs');
+    padding-inline-end: map.get(theme.$spacing, 'm');
     padding-top: map.get(theme.$spacing, 'm');
   }
 
   .ecl-featured-item__heading {
-    padding-left: calc(
+    padding-inline-start: calc(
       #{map.get(theme.$spacing, 'xs')} + #{$_extended-mobile-border-size}
     );
-    padding-right: map.get(theme.$spacing, 'm');
+    padding-inline-end: map.get(theme.$spacing, 'm');
   }
 }
 
@@ -106,7 +107,7 @@ $_extended-padding-bottom: null !default;
 
     &:first-child {
       padding-bottom: 0;
-      padding-right: map.get(theme.$spacing, 'm');
+      padding-inline-end: map.get(theme.$spacing, 'm');
     }
   }
 
@@ -120,16 +121,16 @@ $_extended-padding-bottom: null !default;
   .ecl-featured-item--extended {
     .ecl-featured-item__container {
       padding-bottom: $_extended-padding-bottom;
-      padding-left: $_extended-padding-left;
-      padding-right: map.get(theme.$spacing, 'm');
+      padding-inline-start: $_extended-padding-left;
+      padding-inline-end: map.get(theme.$spacing, 'm');
       padding-top: $_extended-padding-top;
     }
 
     .ecl-featured-item__heading {
-      padding-left: calc(
+      padding-inline-start: calc(
         #{$_extended-padding-left} + #{$_extended-border-size}
       );
-      padding-right: map.get(theme.$spacing, 'm');
+      padding-inline-end: map.get(theme.$spacing, 'm');
     }
   }
 }
diff --git a/src/implementations/vanilla/components/featured-item/_featured-item.scss b/src/implementations/vanilla/components/featured-item/_featured-item.scss
index fbd089bd224..e83c9a56425 100644
--- a/src/implementations/vanilla/components/featured-item/_featured-item.scss
+++ b/src/implementations/vanilla/components/featured-item/_featured-item.scss
@@ -71,20 +71,21 @@ $_extended-padding-bottom: null !default;
 .ecl-featured-item--extended {
   .ecl-featured-item__container {
     background-color: $_extended-background;
-    border-left: $_extended-mobile-border-size solid $_extended-border-color;
+    border-inline-start: $_extended-mobile-border-size solid
+      $_extended-border-color;
     border-radius: $_extended-border-radius;
     overflow: hidden;
     padding-bottom: map.get(theme.$spacing, 'm');
-    padding-left: map.get(theme.$spacing, 'xs');
-    padding-right: map.get(theme.$spacing, 'm');
+    padding-inline-start: map.get(theme.$spacing, 'xs');
+    padding-inline-end: map.get(theme.$spacing, 'm');
     padding-top: map.get(theme.$spacing, 'm');
   }
 
   .ecl-featured-item__heading {
-    padding-left: calc(
+    padding-inline-start: calc(
       #{map.get(theme.$spacing, 'xs')} + #{$_extended-mobile-border-size}
     );
-    padding-right: map.get(theme.$spacing, 'm');
+    padding-inline-end: map.get(theme.$spacing, 'm');
   }
 }
 
@@ -107,7 +108,7 @@ $_extended-padding-bottom: null !default;
 
     &:first-child {
       padding-bottom: 0;
-      padding-right: map.get(theme.$spacing, 'm');
+      padding-inline-end: map.get(theme.$spacing, 'm');
     }
   }
 
@@ -121,16 +122,16 @@ $_extended-padding-bottom: null !default;
   .ecl-featured-item--extended {
     .ecl-featured-item__container {
       padding-bottom: $_extended-padding-bottom;
-      padding-left: $_extended-padding-left;
-      padding-right: map.get(theme.$spacing, 'm');
+      padding-inline-start: $_extended-padding-left;
+      padding-inline-end: map.get(theme.$spacing, 'm');
       padding-top: $_extended-padding-top;
     }
 
     .ecl-featured-item__heading {
-      padding-left: calc(
+      padding-inline-start: calc(
         #{$_extended-padding-left} + #{$_extended-border-size}
       );
-      padding-right: map.get(theme.$spacing, 'm');
+      padding-inline-end: map.get(theme.$spacing, 'm');
     }
   }
 }
diff --git a/src/implementations/vanilla/components/gallery/_gallery.scss b/src/implementations/vanilla/components/gallery/_gallery.scss
index 4b1ac9508c0..42789a63054 100644
--- a/src/implementations/vanilla/components/gallery/_gallery.scss
+++ b/src/implementations/vanilla/components/gallery/_gallery.scss
@@ -27,7 +27,7 @@ $_item-outline-offset: null !default;
   list-style: none;
   margin-bottom: 0;
   margin-top: -#{map.get(theme.$spacing, 'xs')};
-  padding-left: 0;
+  padding-inline-start: 0;
 }
 
 .ecl-gallery__item {
@@ -111,7 +111,7 @@ $_item-outline-offset: null !default;
 
 .ecl-gallery__info {
   color: $_gallery-info-color;
-  float: right;
+  float: end;
   font: $_gallery-info-font;
   padding: map.get(theme.$spacing, 'm') map.get(theme.$spacing, 's');
 }
@@ -131,13 +131,13 @@ $_item-outline-offset: null !default;
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    margin-left: -#{map.get(theme.$spacing, 'xs')};
+    margin-inline-start: -#{map.get(theme.$spacing, 'xs')};
   }
 
   .ecl-gallery__item {
     flex-grow: 1;
     height: $_image-height;
-    margin-left: map.get(theme.$spacing, 'xs');
+    margin-inline-start: map.get(theme.$spacing, 'xs');
     min-width: $_image-height;
     position: relative;
   }
@@ -304,7 +304,6 @@ $_overlay-links-hover-color: null !default;
   flex-shrink: 0;
   margin: $_arrow-margins;
   position: absolute;
-  right: 0;
 
   &:hover,
   &:focus {
@@ -320,8 +319,10 @@ $_overlay-links-hover-color: null !default;
 }
 
 .ecl-gallery__detail-counter {
+  display: inline-flex;
   font: map.get(theme.$font, 'm');
   font-weight: map.get(theme.$font-weight, 'bold');
+  white-space: pre-wrap;
 }
 
 .ecl-gallery__detail-actions {
@@ -329,7 +330,7 @@ $_overlay-links-hover-color: null !default;
 }
 
 .ecl-gallery__share {
-  margin-left: map.get(theme.$spacing, 's');
+  margin-inline-start: map.get(theme.$spacing, 's');
 }
 
 .ecl-gallery__download,
@@ -385,8 +386,8 @@ $_overlay-links-hover-color: null !default;
   .ecl-gallery__slider-previous {
     align-self: initial;
     margin-bottom: 0;
-    margin-left: $_arrow-margin;
-    margin-right: map.get(theme.$spacing, '2xs');
+    margin-inline-start: $_arrow-margin;
+    margin-inline-end: map.get(theme.$spacing, '2xs');
     margin-top: 0;
     order: -1;
   }
@@ -395,8 +396,8 @@ $_overlay-links-hover-color: null !default;
     align-self: initial;
     bottom: auto;
     margin-bottom: 0;
-    margin-left: map.get(theme.$spacing, '2xs');
-    margin-right: $_arrow-margin;
+    margin-inline-start: map.get(theme.$spacing, '2xs');
+    margin-inline-end: $_arrow-margin;
     margin-top: 0;
     position: relative;
     right: auto;
diff --git a/src/implementations/vanilla/components/hero-banner/_hero-banner.scss b/src/implementations/vanilla/components/hero-banner/_hero-banner.scss
index a7e6d30092e..593c323439d 100644
--- a/src/implementations/vanilla/components/hero-banner/_hero-banner.scss
+++ b/src/implementations/vanilla/components/hero-banner/_hero-banner.scss
@@ -30,7 +30,7 @@ $_font-weight: null !default;
   flex-direction: column;
   justify-content: center;
   margin-bottom: 0;
-  margin-right: 0;
+  margin-inline-end: 0;
   margin-top: 0;
   overflow: hidden;
   position: relative;
@@ -40,8 +40,8 @@ $_font-weight: null !default;
 .ecl-container
   .ecl-hero-banner:not(.ecl-hero-banner--full-width)
   .ecl-container {
-  padding-left: map.get($_padding-horizontal, 's');
-  padding-right: map.get($_padding-horizontal, 's');
+  padding-inline-start: map.get($_padding-horizontal, 's');
+  padding-inline-end: map.get($_padding-horizontal, 's');
 }
 
 .ecl-hero-banner__container {
@@ -120,8 +120,8 @@ $_font-weight: null !default;
   .ecl-container
     .ecl-hero-banner:not(.ecl-hero-banner--full-width)
     .ecl-container {
-    padding-left: map.get($_padding-horizontal, 'xl');
-    padding-right: map.get($_padding-horizontal, 'xl');
+    padding-inline-start: map.get($_padding-horizontal, 'xl');
+    padding-inline-end: map.get($_padding-horizontal, 'xl');
   }
 
   .ecl-hero-banner__title {
@@ -136,7 +136,7 @@ $_font-weight: null !default;
 .ecl-hero-banner--full-width {
   border-radius: 0;
   left: 50%;
-  margin-left: -50vw;
+  margin-inline-start: -50vw;
   width: 100vw;
 }
 
@@ -241,7 +241,7 @@ $_font-weight: null !default;
     .ecl-hero-banner__content {
       background: map.get($_background, 'image-box');
       border-bottom: map.get($_border-width, 'bottom') solid $_border-color;
-      border-left: map.get($_border-width, 'left') solid $_border-color;
+      border-inline-start: map.get($_border-width, 'left') solid $_border-color;
       border-radius: map.get($_border-radius, 'content');
       padding: $_padding-vertical map.get($_padding-horizontal, 's')
         calc(#{$_padding-vertical} - #{map.get($_border-width, 'bottom')})
diff --git a/src/implementations/vanilla/components/media-container/_media-container.scss b/src/implementations/vanilla/components/media-container/_media-container.scss
index 17b398eeda4..7b420b56d6e 100644
--- a/src/implementations/vanilla/components/media-container/_media-container.scss
+++ b/src/implementations/vanilla/components/media-container/_media-container.scss
@@ -63,6 +63,6 @@ $_scrollbar-width: 16px; // average scrollbar width; used in full screen calculu
 // We have to substract the scrollbar width, as it is not handled well by vw unit)
 .ecl-media-container--full-width {
   left: 50%;
-  margin-left: calc(-50vw + (#{$_scrollbar-width} / 2));
+  margin-inline-start: calc(-50vw + (#{$_scrollbar-width} / 2));
   width: calc(100vw - #{$_scrollbar-width});
 }
diff --git a/src/implementations/vanilla/components/page-banner/_page-banner.scss b/src/implementations/vanilla/components/page-banner/_page-banner.scss
index 58c53766985..7d17c377d6c 100644
--- a/src/implementations/vanilla/components/page-banner/_page-banner.scss
+++ b/src/implementations/vanilla/components/page-banner/_page-banner.scss
@@ -29,7 +29,7 @@ $_font-weight: null !default;
   flex-direction: column;
   justify-content: center;
   margin-bottom: 0;
-  margin-right: 0;
+  margin-inline-end: 0;
   margin-top: 0;
   overflow: hidden;
   position: relative;
@@ -39,8 +39,8 @@ $_font-weight: null !default;
 .ecl-container
   .ecl-page-banner:not(.ecl-page-banner--full-width)
   .ecl-container {
-  padding-left: map.get($_padding-horizontal, 's');
-  padding-right: map.get($_padding-horizontal, 's');
+  padding-inline-start: map.get($_padding-horizontal, 's');
+  padding-inline-end: map.get($_padding-horizontal, 's');
 }
 
 .ecl-page-banner__container {
@@ -119,8 +119,8 @@ $_font-weight: null !default;
   .ecl-container
     .ecl-page-banner:not(.ecl-page-banner--full-width)
     .ecl-container {
-    padding-left: map.get($_padding-horizontal, 'xl');
-    padding-right: map.get($_padding-horizontal, 'xl');
+    padding-inline-start: map.get($_padding-horizontal, 'xl');
+    padding-inline-end: map.get($_padding-horizontal, 'xl');
   }
 
   .ecl-page-banner__title {
@@ -135,7 +135,7 @@ $_font-weight: null !default;
 .ecl-page-banner--full-width {
   border-radius: 0;
   left: 50%;
-  margin-left: -50vw;
+  margin-inline-start: -50vw;
   width: 100vw;
 }
 
@@ -240,7 +240,7 @@ $_font-weight: null !default;
     .ecl-page-banner__content {
       background: map.get($_background, 'image-box');
       border-bottom: map.get($_border-width, 'bottom') solid $_border-color;
-      border-left: map.get($_border-width, 'left') solid $_border-color;
+      border-inline-start: map.get($_border-width, 'left') solid $_border-color;
       border-radius: map.get($_border-radius, 'content');
       padding: $_padding-vertical map.get($_padding-horizontal, 's')
         calc(#{$_padding-vertical} - #{map.get($_border-width, 'bottom')})
diff --git a/src/implementations/vanilla/components/social-media-follow/social-media-follow.scss b/src/implementations/vanilla/components/social-media-follow/social-media-follow.scss
index 79d7f792b15..6150207e3fd 100644
--- a/src/implementations/vanilla/components/social-media-follow/social-media-follow.scss
+++ b/src/implementations/vanilla/components/social-media-follow/social-media-follow.scss
@@ -29,15 +29,15 @@
   list-style: none;
   margin-bottom: 0;
   margin-top: -#{map.get(theme.$spacing, 's')};
-  padding-left: 0;
+  padding-inline-start: 0;
 }
 
 .ecl-social-media-follow__item {
-  margin-right: map.get(theme.$spacing, 'l');
+  margin-inline-end: map.get(theme.$spacing, 'l');
   margin-top: map.get(theme.$spacing, 's');
 
   &:last-child {
-    margin-right: 0;
+    margin-inline-end: 0;
   }
 }
 
@@ -52,7 +52,7 @@
 .ecl-social-media-follow__icon,
 .ecl-social-media-follow__icon-hover {
   flex-shrink: 0;
-  margin-right: map.get(theme.$spacing, 'm');
+  margin-inline-end: map.get(theme.$spacing, 'm');
   top: 0 !important;
 }
 
@@ -82,14 +82,14 @@
   }
 
   .ecl-social-media-follow__item {
-    margin-right: 0;
+    margin-inline-end: 0;
 
     &:first-child {
       margin-top: 0;
     }
 
     &:last-child {
-      margin-right: 0;
+      margin-inline-end: 0;
       margin-top: map.get(theme.$spacing, 'm');
     }
   }
diff --git a/src/implementations/vanilla/components/social-media-share/social-media-share.scss b/src/implementations/vanilla/components/social-media-share/social-media-share.scss
index 73e612594a0..2b9631c8b2c 100644
--- a/src/implementations/vanilla/components/social-media-share/social-media-share.scss
+++ b/src/implementations/vanilla/components/social-media-share/social-media-share.scss
@@ -34,7 +34,7 @@
   flex-wrap: wrap;
   list-style: none;
   margin-bottom: 0;
-  padding-left: 0;
+  padding-inline-start: 0;
 }
 
 .ecl-social-media-share__item {
@@ -46,7 +46,7 @@
 
   &:not(:last-child) .ecl-link {
     color: map.get(theme.$color, 'white');
-    padding-right: map.get(theme.$spacing, 'xs');
+    padding-inline-end: map.get(theme.$spacing, 'xs');
     width: 8.125rem;
   }
 }
@@ -66,7 +66,7 @@
 .ecl-social-media-share__icon,
 .ecl-social-media-share__icon-hover {
   flex-shrink: 0;
-  margin-right: map.get(theme.$spacing, 'xs');
+  margin-inline-end: map.get(theme.$spacing, 'xs');
 }
 
 .ecl-social-media-share__icon {
diff --git a/src/playground/ec/.storybook/preview.js b/src/playground/ec/.storybook/preview.js
index 81e12262513..32366ac9676 100644
--- a/src/playground/ec/.storybook/preview.js
+++ b/src/playground/ec/.storybook/preview.js
@@ -1,6 +1,7 @@
 import { addParameters } from '@storybook/html';
 import { withCssResources } from '@storybook/addon-cssresources';
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+
 import './ECL';
 
 addParameters({
diff --git a/src/playground/eu/.storybook/preview.js b/src/playground/eu/.storybook/preview.js
index 1f68591f8c2..e650e121f27 100644
--- a/src/playground/eu/.storybook/preview.js
+++ b/src/playground/eu/.storybook/preview.js
@@ -1,4 +1,4 @@
-import { addDecorator, addParameters } from '@storybook/html';
+import { addParameters } from '@storybook/html';
 import { withCssResources } from '@storybook/addon-cssresources';
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 
diff --git a/src/presets/rtl/src/rtl.scss b/src/presets/rtl/src/rtl.scss
index d37bb5309f0..99508da9047 100644
--- a/src/presets/rtl/src/rtl.scss
+++ b/src/presets/rtl/src/rtl.scss
@@ -2,6 +2,44 @@ html {
   direction: rtl;
 }
 
+// Carousel
+.ecl-carousel__next {
+  left: 0;
+  right: auto;
+}
+
+.ecl-carousel__prev {
+  left: auto;
+  right: 0;
+}
+
+// Gallery
+.ecl-gallery__image-icon {
+  left: 0;
+  right: auto;
+}
+
+// Hero banner
+.ecl-hero-banner--full-width {
+  left: auto;
+  right: 50%;
+}
+
+// Icons
+.ecl-icon--rotate-90 {
+  transform: rotate(270deg);
+}
+
+.ecl-icon--rotate-270 {
+  transform: rotate(90deg);
+}
+
+// Media container
+.ecl-media-container--full-width {
+  left: auto;
+  right: 50%;
+}
+
 // Menu
 .ecl-menu__link-icon {
   transform: rotate(-90deg);
@@ -11,6 +49,12 @@ html {
   transform: rotate(90deg);
 }
 
+// Page banner
+.ecl-page-banner--full-width {
+  left: auto;
+  right: 50%;
+}
+
 // Tabs
 .ecl-tabs__dropdown {
   left: 0;