RTL-LTR Both support css design - Scss Mixins

example.html

<div class="item"></div>

<style lang="scss">
  .item {
     position: relative;
     @include padding_right_rtl(5px);
     @include rtl('right', 0, 0, 'left')
  }
</style>

rtl.mixins.scss

// RTL Mixins start
@mixin rtl($property, $ltr-value, $rtl-value, $ltr-property: false) {
  & {
    @if $ltr-property {
      #{$ltr-property}: $ltr-value;
    }
    @else {
      #{$property}: $ltr-value;
    }
  }
  [dir='rtl'] & {
    #{$property}: $rtl-value;
  }
}

@mixin rtl_modern(
  $property,
  $ltr-value,
  $rtl-value,
  $modern-property: false,
  $modern-value: false
) {
  @if $modern-property {
    @supports not ($modern-property: $modern-value) {
      @include rtl($property, $ltr-value, $rtl-value);
    }
    #{$modern-property}: $modern-value;
  } @else {
    @include rtl($property, $ltr-value, $rtl-value);
  }
}

@mixin padding_left_rtl($value) {
  @include rtl_modern(padding, 0 $value 0 0, 0 0 0 $value, padding-inline-end, $value);
}
@mixin padding_right_rtl($value) {
  @include rtl_modern(padding, 0 0 0 $value, 0 $value 0 0, padding-inline-start, $value);
}

@mixin margin_left_rtl($value) {
  @include rtl_modern(margin, 0 $value 0 0, 0 0 0 $value, margin-inline-end, $value);
}
@mixin margin_right_rtl($value) {
  @include rtl_modern(margin, 0 0 0 $value, 0 $value 0 0, margin-inline-start, $value);
}
// RTL Mixins end