fix(VChip): rtl mode (#5802)

* fix(VChip): rtl mode

fixes #5782

* revert posible breaking change

* fixed variables

packages/vuetify/src/stylus/components/_chips.styl

@@ -8,7 +8,32 @@ v-chip($material)
   &--disabled
     color: $material.text.disabled
 
+v-chip-rtl()
+  &__close
+    margin: $chip-close-margin-rtl
+
+  &--removable
+    .v-chip__content
+      padding: $chip-removable-padding-rtl
+
+  &--select-multi
+    margin: $chip-margin 0 $chip-margin $chip-margin
+
+  .v-avatar
+    margin-right: -12px
+    margin-left: 8px
+
+  .v-icon
+    &--right
+      margin-right: $chip-icon-offset
+      margin-left: $chip-icon-negative-offset
+
+    &--left
+      margin-right: $chip-icon-negative-offset
+      margin-left: $chip-icon-offset
+
 theme(v-chip, "v-chip")
+rtl(v-chip-rtl, "v-chip")
 
 .v-chip
   align-items: center
@@ -36,7 +61,7 @@ theme(v-chip, "v-chip")
 
   &--removable
     .v-chip__content
-      padding: $chip-removeable-padding
+      padding: $chip-removable-padding
 
   .v-avatar
     // Important is needed to account for new avatar structure

packages/vuetify/src/stylus/settings/_variables.styl

@@ -194,11 +194,11 @@ $card-border-radius := 2px
 // Chip
 $chip-border-radius := 28px
 $chip-close-margin := 0 2px 0 8px
+$chip-close-margin-rtl := 0 8px 0 2px
 $chip-font-size := 13px
 $chip-label-border-radius := $card-border-radius
 $chip-icon-font-size := 20px
 $chip-padding := 0 12px
-$chip-removeable-padding := 0 4px 0 12px
 $chip-outline-background := transparent !important
 $chip-outline-color := $grey.base
 $chip-height := 32px
@@ -207,6 +207,10 @@ $chip-small-height := 24px
 $chip-small-font-size := 20px
 $chip-icon-offset := 12px
 $chip-icon-negative-offset := -8px
+$chip-removable-padding := 0 $chip-margin 0 $chip-icon-offset
+$chip-removable-padding-rtl := 0 $chip-icon-offset 0 $chip-margin
+// TODO: remove in 2.0
+$chip-removable-padding := $chip-removeable-padding
 
 // Collapsible
 $expansion-panel-collapse-height := 48px