From 7495b931d4b3811b74927a65ea6a332484d841bc Mon Sep 17 00:00:00 2001
From: Mohammad Khodadadi <asmanp2012@gmail.com>
Date: Sat, 28 May 2022 18:17:36 +0430
Subject: [PATCH] refactor: changed style to minimum support of RTL language

---
 src/components/alert/alert.styles.ts          |  4 +-
 .../breadcrumb-item/breadcrumb-item.styles.ts |  4 +-
 src/components/button/button.styles.ts        | 38 ++++++++++---------
 src/components/checkbox/checkbox.styles.ts    |  2 +-
 src/components/dialog/dialog.styles.ts        |  2 +-
 src/components/drawer/drawer.styles.ts        |  2 +-
 src/components/input/input.styles.ts          | 12 +++---
 src/components/menu-item/menu-item.styles.ts  |  5 +--
 src/components/radio/radio.styles.ts          |  2 +-
 src/components/range/range.styles.ts          |  2 +-
 src/components/select/select.styles.ts        | 38 +++++++++----------
 src/components/switch/switch.styles.ts        |  2 +-
 src/components/tab-group/tab-group.styles.ts  |  1 -
 src/components/tab/tab.styles.ts              |  4 +-
 src/components/tag/tag.styles.ts              | 11 ++----
 15 files changed, 62 insertions(+), 67 deletions(-)

diff --git a/src/components/alert/alert.styles.ts b/src/components/alert/alert.styles.ts
index 30b8b4b76d..590c880c6d 100644
--- a/src/components/alert/alert.styles.ts
+++ b/src/components/alert/alert.styles.ts
@@ -38,7 +38,7 @@ export default css`
     display: flex;
     align-items: center;
     font-size: var(--sl-font-size-large);
-    padding-left: var(--sl-spacing-large);
+    padding-inline-start: var(--sl-spacing-large);
   }
 
   .alert--primary {
@@ -92,6 +92,6 @@ export default css`
     display: flex;
     align-items: center;
     font-size: var(--sl-font-size-large);
-    padding-right: var(--sl-spacing-medium);
+    padding-inline-end: var(--sl-spacing-medium);
   }
 `;
diff --git a/src/components/breadcrumb-item/breadcrumb-item.styles.ts b/src/components/breadcrumb-item/breadcrumb-item.styles.ts
index d942c44ffd..bab41d535e 100644
--- a/src/components/breadcrumb-item/breadcrumb-item.styles.ts
+++ b/src/components/breadcrumb-item/breadcrumb-item.styles.ts
@@ -68,12 +68,12 @@ export default css`
 
   .breadcrumb-item--has-prefix .breadcrumb-item__prefix {
     display: inline-flex;
-    margin-right: var(--sl-spacing-x-small);
+    margin-inline-end: var(--sl-spacing-x-small);
   }
 
   .breadcrumb-item--has-suffix .breadcrumb-item__suffix {
     display: inline-flex;
-    margin-left: var(--sl-spacing-x-small);
+    margin-inline-start: var(--sl-spacing-x-small);
   }
 
   :host(:last-of-type) .breadcrumb-item__separator {
diff --git a/src/components/button/button.styles.ts b/src/components/button/button.styles.ts
index f596f94551..678f5884ab 100644
--- a/src/components/button/button.styles.ts
+++ b/src/components/button/button.styles.ts
@@ -473,57 +473,57 @@ export default css`
   }
 
   .button--has-prefix.button--small {
-    padding-left: var(--sl-spacing-x-small);
+    padding-inline-start: var(--sl-spacing-x-small);
   }
 
   .button--has-prefix.button--small .button__label {
-    padding-left: var(--sl-spacing-x-small);
+    padding-inline-start: var(--sl-spacing-x-small);
   }
 
   .button--has-prefix.button--medium {
-    padding-left: var(--sl-spacing-small);
+    padding-inline-start: var(--sl-spacing-small);
   }
 
   .button--has-prefix.button--medium .button__label {
-    padding-left: var(--sl-spacing-small);
+    padding-inline-start: var(--sl-spacing-small);
   }
 
   .button--has-prefix.button--large {
-    padding-left: var(--sl-spacing-small);
+    padding-inline-start: var(--sl-spacing-small);
   }
 
   .button--has-prefix.button--large .button__label {
-    padding-left: var(--sl-spacing-small);
+    padding-inline-start: var(--sl-spacing-small);
   }
 
   .button--has-suffix.button--small,
   .button--caret.button--small {
-    padding-right: var(--sl-spacing-x-small);
+    padding-inline-end: var(--sl-spacing-x-small);
   }
 
   .button--has-suffix.button--small .button__label,
   .button--caret.button--small .button__label {
-    padding-right: var(--sl-spacing-x-small);
+    padding-inline-end: var(--sl-spacing-x-small);
   }
 
   .button--has-suffix.button--medium,
   .button--caret.button--medium {
-    padding-right: var(--sl-spacing-small);
+    padding-inline-end: var(--sl-spacing-small);
   }
 
   .button--has-suffix.button--medium .button__label,
   .button--caret.button--medium .button__label {
-    padding-right: var(--sl-spacing-small);
+    padding-inline-end: var(--sl-spacing-small);
   }
 
   .button--has-suffix.button--large,
   .button--caret.button--large {
-    padding-right: var(--sl-spacing-small);
+    padding-inline-end: var(--sl-spacing-small);
   }
 
   .button--has-suffix.button--large .button__label,
   .button--caret.button--large .button__label {
-    padding-right: var(--sl-spacing-small);
+    padding-inline-end: var(--sl-spacing-small);
   }
 
   /*
@@ -534,8 +534,9 @@ export default css`
    */
 
   :host(.sl-button-group__button--first:not(.sl-button-group__button--last)) .button {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
+    border-inline-end-width: 0;
+    /* border-top-right-radius: 0; */
+    /* border-bottom-right-radius: 0; */
   }
 
   :host(.sl-button-group__button--inner) .button {
@@ -543,13 +544,14 @@ export default css`
   }
 
   :host(.sl-button-group__button--last:not(.sl-button-group__button--first)) .button {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
+    border-start-start-radius: 0;
+    /* border-top-left-radius: 0;
+    border-bottom-left-radius: 0; */
   }
 
   /* All except the first */
   :host(.sl-button-group__button:not(.sl-button-group__button--first)) {
-    margin-left: calc(-1 * var(--sl-input-border-width));
+    margin-inline-start: calc(-1 * var(--sl-input-border-width));
   }
 
   /* Add a visual separator between solid buttons */
@@ -560,7 +562,7 @@ export default css`
     top: 0;
     left: 0;
     bottom: 0;
-    border-left: solid 1px rgb(128 128 128 / 33%);
+    border-inline-start-style: solid 1px rgb(128 128 128 / 33%);
     mix-blend-mode: multiply;
   }
 
diff --git a/src/components/checkbox/checkbox.styles.ts b/src/components/checkbox/checkbox.styles.ts
index 319a04619f..350bea5af6 100644
--- a/src/components/checkbox/checkbox.styles.ts
+++ b/src/components/checkbox/checkbox.styles.ts
@@ -100,7 +100,7 @@ export default css`
 
   .checkbox__label {
     line-height: var(--sl-toggle-size);
-    margin-left: 0.5em;
+    margin-inline-start: 0.5em;
     user-select: none;
   }
 `;
diff --git a/src/components/dialog/dialog.styles.ts b/src/components/dialog/dialog.styles.ts
index b2857bc3f9..fd9d1fea3d 100644
--- a/src/components/dialog/dialog.styles.ts
+++ b/src/components/dialog/dialog.styles.ts
@@ -90,7 +90,7 @@ export default css`
   }
 
   .dialog__footer ::slotted(sl-button:not(:first-of-type)) {
-    margin-left: var(--sl-spacing-x-small);
+    margin-inline-start: var(--sl-spacing-x-small);
   }
 
   .dialog:not(.dialog--has-footer) .dialog__footer {
diff --git a/src/components/drawer/drawer.styles.ts b/src/components/drawer/drawer.styles.ts
index 7499ae3535..5d15a1a39c 100644
--- a/src/components/drawer/drawer.styles.ts
+++ b/src/components/drawer/drawer.styles.ts
@@ -120,7 +120,7 @@ export default css`
   }
 
   .drawer__footer ::slotted(sl-button:not(:last-of-type)) {
-    margin-right: var(--sl-spacing-x-small);
+    margin-inline-end: var(--sl-spacing-x-small);
   }
 
   .drawer:not(.drawer--has-footer) .drawer__footer {
diff --git a/src/components/input/input.styles.ts b/src/components/input/input.styles.ts
index a101e06f33..368c998909 100644
--- a/src/components/input/input.styles.ts
+++ b/src/components/input/input.styles.ts
@@ -174,11 +174,11 @@ export default css`
   }
 
   .input--small .input__prefix ::slotted(*) {
-    padding-left: var(--sl-input-spacing-small);
+    padding-inline-start: var(--sl-input-spacing-small);
   }
 
   .input--small .input__suffix ::slotted(*) {
-    padding-right: var(--sl-input-spacing-small);
+    padding-inline-end: var(--sl-input-spacing-small);
   }
 
   .input--medium {
@@ -198,11 +198,11 @@ export default css`
   }
 
   .input--medium .input__prefix ::slotted(*) {
-    padding-left: var(--sl-input-spacing-medium);
+    padding-inline-start: var(--sl-input-spacing-medium);
   }
 
   .input--medium .input__suffix ::slotted(*) {
-    padding-right: var(--sl-input-spacing-medium);
+    padding-inline-end: var(--sl-input-spacing-medium);
   }
 
   .input--large {
@@ -222,11 +222,11 @@ export default css`
   }
 
   .input--large .input__prefix ::slotted(*) {
-    padding-left: var(--sl-input-spacing-large);
+    padding-inline-start: var(--sl-input-spacing-large);
   }
 
   .input--large .input__suffix ::slotted(*) {
-    padding-right: var(--sl-input-spacing-large);
+    padding-inline-end: var(--sl-input-spacing-large);
   }
 
   /*
diff --git a/src/components/menu-item/menu-item.styles.ts b/src/components/menu-item/menu-item.styles.ts
index b1bd3cd465..6da66fe9bb 100644
--- a/src/components/menu-item/menu-item.styles.ts
+++ b/src/components/menu-item/menu-item.styles.ts
@@ -18,7 +18,6 @@ export default css`
     font-weight: var(--sl-font-weight-normal);
     line-height: var(--sl-line-height-normal);
     letter-spacing: var(--sl-letter-spacing-normal);
-    text-align: left;
     color: var(--sl-color-neutral-700);
     padding: var(--sl-spacing-2x-small) var(--sl-spacing-2x-small);
     transition: var(--sl-transition-fast) fill;
@@ -44,7 +43,7 @@ export default css`
   }
 
   .menu-item .menu-item__prefix ::slotted(*) {
-    margin-right: var(--sl-spacing-x-small);
+    margin-inline-end: var(--sl-spacing-x-small);
   }
 
   .menu-item .menu-item__suffix {
@@ -54,7 +53,7 @@ export default css`
   }
 
   .menu-item .menu-item__suffix ::slotted(*) {
-    margin-left: var(--sl-spacing-x-small);
+    margin-inline-start: var(--sl-spacing-x-small);
   }
 
   :host(:focus) {
diff --git a/src/components/radio/radio.styles.ts b/src/components/radio/radio.styles.ts
index fc20eabe41..7b8f46da6b 100644
--- a/src/components/radio/radio.styles.ts
+++ b/src/components/radio/radio.styles.ts
@@ -99,7 +99,7 @@ export default css`
 
   .radio__label {
     line-height: var(--sl-toggle-size);
-    margin-left: 0.5em;
+    margin-inline-start: 0.5em;
     user-select: none;
   }
 `;
diff --git a/src/components/range/range.styles.ts b/src/components/range/range.styles.ts
index a1d35495da..aafb337b30 100644
--- a/src/components/range/range.styles.ts
+++ b/src/components/range/range.styles.ts
@@ -157,7 +157,7 @@ export default css`
     width: 0;
     height: 0;
     left: 50%;
-    margin-left: calc(-1 * var(--sl-tooltip-arrow-size));
+    margin-inline-start: calc(-1 * var(--sl-tooltip-arrow-size));
   }
 
   .range--tooltip-visible .range__tooltip {
diff --git a/src/components/select/select.styles.ts b/src/components/select/select.styles.ts
index c69fe4a213..942319f21d 100644
--- a/src/components/select/select.styles.ts
+++ b/src/components/select/select.styles.ts
@@ -166,7 +166,7 @@ export default css`
     align-items: center;
     flex-wrap: wrap;
     justify-content: left;
-    margin-left: var(--sl-spacing-2x-small);
+    margin-inline-start: var(--sl-spacing-2x-small);
   }
 
   /* Hidden input (for form control validation to show) */
@@ -194,7 +194,7 @@ export default css`
   }
 
   .select--small .select__prefix ::slotted(*) {
-    margin-left: var(--sl-input-spacing-small);
+    margin-inline-start: var(--sl-input-spacing-small);
   }
 
   .select--small .select__label {
@@ -202,15 +202,15 @@ export default css`
   }
 
   .select--small .select__clear {
-    margin-right: var(--sl-input-spacing-small);
+    margin-inline-end: var(--sl-input-spacing-small);
   }
 
   .select--small .select__suffix ::slotted(*) {
-    margin-right: var(--sl-input-spacing-small);
+    margin-inline-end: var(--sl-input-spacing-small);
   }
 
   .select--small .select__icon {
-    margin-right: var(--sl-input-spacing-small);
+    margin-inline-end: var(--sl-input-spacing-small);
   }
 
   .select--small .select__tags {
@@ -222,11 +222,11 @@ export default css`
   }
 
   .select--small .select__tags sl-tag:not(:last-of-type) {
-    margin-right: var(--sl-spacing-2x-small);
+    margin-inline-end: var(--sl-spacing-2x-small);
   }
 
   .select--small.select--has-tags .select__label {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
 
   /* Medium */
@@ -237,7 +237,7 @@ export default css`
   }
 
   .select--medium .select__prefix ::slotted(*) {
-    margin-left: var(--sl-input-spacing-medium);
+    margin-inline-start: var(--sl-input-spacing-medium);
   }
 
   .select--medium .select__label {
@@ -245,15 +245,15 @@ export default css`
   }
 
   .select--medium .select__clear {
-    margin-right: var(--sl-input-spacing-medium);
+    margin-inline-end: var(--sl-input-spacing-medium);
   }
 
   .select--medium .select__suffix ::slotted(*) {
-    margin-right: var(--sl-input-spacing-medium);
+    margin-inline-end: var(--sl-input-spacing-medium);
   }
 
   .select--medium .select__icon {
-    margin-right: var(--sl-input-spacing-medium);
+    margin-inline-end: var(--sl-input-spacing-medium);
   }
 
   .select--medium .select__tags {
@@ -265,11 +265,11 @@ export default css`
   }
 
   .select--medium .select__tags sl-tag:not(:last-of-type) {
-    margin-right: var(--sl-spacing-2x-small);
+    margin-inline-end: var(--sl-spacing-2x-small);
   }
 
   .select--medium.select--has-tags .select__label {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
 
   /* Large */
@@ -280,7 +280,7 @@ export default css`
   }
 
   .select--large .select__prefix ::slotted(*) {
-    margin-left: var(--sl-input-spacing-large);
+    margin-inline-start: var(--sl-input-spacing-large);
   }
 
   .select--large .select__label {
@@ -288,15 +288,15 @@ export default css`
   }
 
   .select--large .select__clear {
-    margin-right: var(--sl-input-spacing-large);
+    margin-inline-end: var(--sl-input-spacing-large);
   }
 
   .select--large .select__suffix ::slotted(*) {
-    margin-right: var(--sl-input-spacing-large);
+    margin-inline-end: var(--sl-input-spacing-large);
   }
 
   .select--large .select__icon {
-    margin-right: var(--sl-input-spacing-large);
+    margin-inline-end: var(--sl-input-spacing-large);
   }
 
   .select--large .select__tags {
@@ -307,11 +307,11 @@ export default css`
   }
 
   .select--large .select__tags sl-tag:not(:last-of-type) {
-    margin-right: var(--sl-spacing-2x-small);
+    margin-inline-end: var(--sl-spacing-2x-small);
   }
 
   .select--large.select--has-tags .select__label {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
 
   /*
diff --git a/src/components/switch/switch.styles.ts b/src/components/switch/switch.styles.ts
index d9768af4ba..b8ac1d1fda 100644
--- a/src/components/switch/switch.styles.ts
+++ b/src/components/switch/switch.styles.ts
@@ -131,7 +131,7 @@ export default css`
 
   .switch__label {
     line-height: var(--height);
-    margin-left: 0.5em;
+    margin-inline-start: 0.5em;
     user-select: none;
   }
 `;
diff --git a/src/components/tab-group/tab-group.styles.ts b/src/components/tab-group/tab-group.styles.ts
index e79b232292..7715846c66 100644
--- a/src/components/tab-group/tab-group.styles.ts
+++ b/src/components/tab-group/tab-group.styles.ts
@@ -24,7 +24,6 @@ export default css`
 
   .tab-group .tab-group__indicator {
     position: absolute;
-    left: 0;
     transition: var(--sl-transition-fast) transform ease, var(--sl-transition-fast) width ease;
   }
 
diff --git a/src/components/tab/tab.styles.ts b/src/components/tab/tab.styles.ts
index 0e06a107da..d1a0cba2be 100644
--- a/src/components/tab/tab.styles.ts
+++ b/src/components/tab/tab.styles.ts
@@ -43,7 +43,7 @@ export default css`
   }
 
   .tab.tab--closable {
-    padding-right: var(--sl-spacing-small);
+    padding-inline-end: var(--sl-spacing-small);
   }
 
   .tab.tab--disabled {
@@ -53,7 +53,7 @@ export default css`
 
   .tab__close-button {
     font-size: var(--sl-font-size-large);
-    margin-left: var(--sl-spacing-2x-small);
+    margin-inline-start: var(--sl-spacing-2x-small);
   }
 
   .tab__close-button::part(base) {
diff --git a/src/components/tag/tag.styles.ts b/src/components/tag/tag.styles.ts
index d3472032f5..4b0d4dfd40 100644
--- a/src/components/tag/tag.styles.ts
+++ b/src/components/tag/tag.styles.ts
@@ -70,7 +70,7 @@ export default css`
   }
 
   .tag--small .tag__remove {
-    margin-left: var(--sl-spacing-2x-small);
+    margin-inline-start: var(--sl-spacing-2x-small);
     margin-right: calc(-1 * var(--sl-spacing-3x-small));
   }
 
@@ -82,11 +82,6 @@ export default css`
     padding: 0 var(--sl-spacing-small);
   }
 
-  .tag__remove {
-    margin-left: var(--sl-spacing-2x-small);
-    margin-right: calc(-1 * var(--sl-spacing-2x-small));
-  }
-
   .tag--large {
     font-size: var(--sl-button-font-size-large);
     height: calc(var(--sl-input-height-large) * 0.8);
@@ -97,8 +92,8 @@ export default css`
 
   .tag__remove {
     font-size: 1.4em;
-    margin-left: var(--sl-spacing-2x-small);
-    margin-right: calc(-1 * var(--sl-spacing-x-small));
+    margin-inline-start: var(--sl-spacing-2x-small);
+    margin-inline-end: calc(-1 * var(--sl-spacing-x-small));
   }
 
   /*