RTL desteği için scss de mixins ile box-shadow örneği

Merhaba yaptıgım bir css kodunda rtl desteği de vermem gerekiyor. box-shadow da ltr rtl olusuna göre gölgenin x  koordinatını değiştirmek gerekiyor. Örnek kod aşağıda

Mixin kodumuz

 

@mixin box-shadow($x, $y, $blur, $color, $inset: false) {
@if $inset {
-webkit-box-shadow: inset $x $y $blur $color;
-moz-box-shadow: inset $x $y $blur $color;
box-shadow: inset $x $y $blur $color;

html[dir=rtl] & {
-webkit-box-shadow: inset -1 * $x $y $blur $color;
-moz-box-shadow: inset -1 * $x $y $blur $color;
box-shadow: inset -1 * $x $y $blur $color;
}
}
@else {
-webkit-box-shadow: -1 * $x $y $blur $color;
-moz-box-shadow: -1 * $x $y $blur $color;
box-shadow: -1 * $x $y $blur $color;

html[dir=rtl] & {
-webkit-box-shadow: -1 * $x $y $blur $color;
-moz-box-shadow: -1 * $x $y $blur $color;
box-shadow: -1 * $x $y $blur $color;
}
}
}

Scss içindeki hali:

   @include box-shadow(5px,8px,11px, rgba(50, 50, 50, 0.18));

Çıktı:

.Aciklama {

-webkit-box-shadow: -5px 8px 11px rgba(50,50,50,0.18);
-moz-box-shadow: -5px 8px 11px rgba(50,50,50,0.18);
box-shadow: -5px 8px 11px rgba(50,50,50,0.18);

}

html[dir=rtl] .Aciklama {
-webkit-box-shadow: -5px 8px 11px rgba(50,50,50,0.18);
-moz-box-shadow: -5px 8px 11px rgba(50,50,50,0.18);
box-shadow: -5px 8px 11px rgba(50,50,50,0.18);
}