fix(rtl): add correct text-align (#11353)

* fix(rtl): add correct text-align

* feat(text-align): add mixin for backwards compatibility of variables

* fix(text-align): default null not empty string

* fix(text-align): remove default

src/components/action-sheet/action-sheet.ios.scss

@@ -74,7 +74,7 @@ $action-sheet-ios-button-cancel-font-weight:            600 !default;
 
 
 .action-sheet-ios {
-  text-align: $action-sheet-ios-text-align;
+  @include text-align($action-sheet-ios-text-align);
 }
 
 .action-sheet-ios .action-sheet-container {
@@ -95,13 +95,14 @@ $action-sheet-ios-button-cancel-font-weight:            600 !default;
 }
 
 .action-sheet-ios .action-sheet-title {
+  @include text-align($action-sheet-ios-text-align);
+
   padding: $action-sheet-ios-title-padding;
 
   border-bottom: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-border-color;
   border-radius: $action-sheet-ios-title-border-radius;
   font-size: $action-sheet-ios-title-font-size;
   font-weight: $action-sheet-ios-title-font-weight;
-  text-align: $action-sheet-ios-text-align;
   color: $action-sheet-ios-title-color;
 }
 

src/components/action-sheet/action-sheet.md.scss

@@ -4,7 +4,7 @@
 // --------------------------------------------------
 
 /// @prop - Text align of the action sheet
-$action-sheet-md-text-align:                            left !default;
+$action-sheet-md-text-align:                            start !default;
 
 /// @prop - Background color of the action sheet
 $action-sheet-md-background:                            #fafafa !default;
@@ -61,14 +61,17 @@ $action-sheet-md-icon-margin:                           0 32px 0 0 !default;
 }
 
 .action-sheet-md .action-sheet-title {
+  @include text-align($action-sheet-md-text-align);
+
   padding: $action-sheet-md-title-padding;
 
   font-size: $action-sheet-md-title-font-size;
-  text-align: $action-sheet-md-text-align;
   color: $action-sheet-md-title-color;
 }
 
 .action-sheet-md .action-sheet-button {
+  @include text-align($action-sheet-md-text-align);
+
   position: relative;
   overflow: hidden;
 
@@ -77,7 +80,6 @@ $action-sheet-md-icon-margin:                           0 32px 0 0 !default;
   min-height: $action-sheet-md-button-min-height;
 
   font-size: $action-sheet-md-button-font-size;
-  text-align: $action-sheet-md-text-align;
   color: $action-sheet-md-button-text-color;
   background: $action-sheet-md-button-background;
 }
@@ -87,13 +89,14 @@ $action-sheet-md-icon-margin:                           0 32px 0 0 !default;
 }
 
 .action-sheet-md .action-sheet-icon {
+  @include text-align($action-sheet-md-icon-text-align);
+
   margin: $action-sheet-md-icon-margin;
   padding: 0;
 
   width: $action-sheet-md-icon-width;
 
   font-size: $action-sheet-md-icon-font-size;
-  text-align: $action-sheet-md-icon-text-align;
   vertical-align: $action-sheet-md-icon-vertical-align;
 }
 

src/components/action-sheet/action-sheet.wp.scss

@@ -4,7 +4,7 @@
 // --------------------------------------------------
 
 /// @prop - Text align of the action sheet
-$action-sheet-wp-text-align:                      left !default;
+$action-sheet-wp-text-align:                      start !default;
 
 /// @prop - Background color of the action sheet
 $action-sheet-wp-background:                      #fff !default;
@@ -69,20 +69,22 @@ $action-sheet-wp-icon-margin:                     0 20px 0 0 !default;
 }
 
 .action-sheet-wp .action-sheet-title {
+  @include text-align($action-sheet-wp-title-text-align);
+
   padding: $action-sheet-wp-title-padding;
 
   font-size: $action-sheet-wp-title-font-size;
-  text-align: $action-sheet-wp-title-text-align;
   color: $action-sheet-wp-title-color;
 }
 
 .action-sheet-wp .action-sheet-button {
+  @include text-align($action-sheet-wp-button-text-align);
+
   padding: $action-sheet-wp-button-padding;
 
   min-height: $action-sheet-wp-button-height;
 
   font-size: $action-sheet-wp-button-font-size;
-  text-align: $action-sheet-wp-button-text-align;
   color: $action-sheet-wp-button-text-color;
   background: $action-sheet-wp-button-background;
 }
@@ -92,13 +94,14 @@ $action-sheet-wp-icon-margin:                     0 20px 0 0 !default;
 }
 
 .action-sheet-wp .action-sheet-icon {
+  @include text-align($action-sheet-wp-icon-text-align);
+
   margin: $action-sheet-wp-icon-margin;
   padding: 0;
 
   width: $action-sheet-wp-icon-width;
 
   font-size: $action-sheet-wp-icon-font-size;
-  text-align: $action-sheet-wp-icon-text-align;
   vertical-align: $action-sheet-wp-icon-vertical-align;
 }
 

src/components/alert/alert.ios.scss

@@ -230,9 +230,9 @@ $alert-ios-checkbox-icon-transform:             rotate(45deg) !default;
 // --------------------------------------------------
 
 .alert-ios .alert-head {
-  padding: $alert-ios-head-padding;
+  @include text-align($alert-ios-head-text-align);
 
-  text-align: $alert-ios-head-text-align;
+  padding: $alert-ios-head-padding;
 }
 
 .alert-ios .alert-title {
@@ -253,10 +253,11 @@ $alert-ios-checkbox-icon-transform:             rotate(45deg) !default;
 
 .alert-ios .alert-message,
 .alert-ios .alert-input-group {
+  @include text-align($alert-ios-message-text-align);
+
   padding: $alert-ios-message-padding;
 
   font-size: $alert-ios-message-font-size;
-  text-align: $alert-ios-message-text-align;
   color: $alert-ios-message-text-color;
 }
 

src/components/alert/alert.md.scss

@@ -22,7 +22,7 @@ $alert-md-box-shadow:                         0 16px 20px $alert-md-box-shadow-c
 $alert-md-head-padding:                       24px 24px 20px 24px !default;
 
 /// @prop - Text align of the alert head
-$alert-md-head-text-align:                    left !default;
+$alert-md-head-text-align:                    start !default;
 
 /// @prop - Font size of the alert title
 $alert-md-title-font-size:                    22px !default;
@@ -112,7 +112,7 @@ $alert-md-button-border-radius:               2px !default;
 $alert-md-button-text-transform:              uppercase !default;
 
 /// @prop - Text align of the alert button
-$alert-md-button-text-align:                  right !default;
+$alert-md-button-text-align:                  end !default;
 
 
 /// @prop - Border top of the alert list
@@ -256,9 +256,9 @@ $alert-md-checkbox-icon-transform:            rotate(45deg) !default;
 // --------------------------------------------------
 
 .alert-md .alert-head {
-  padding: $alert-md-head-padding;
+  @include text-align($alert-md-head-text-align);
 
-  text-align: $alert-md-head-text-align;
+  padding: $alert-md-head-padding;
 }
 
 .alert-md .alert-title {
@@ -474,6 +474,8 @@ $alert-md-checkbox-icon-transform:            rotate(45deg) !default;
 }
 
 .alert-md .alert-button {
+  @include text-align($alert-md-button-text-align);
+
   // necessary for ripple to work properly
   position: relative;
   overflow: hidden;
@@ -483,7 +485,6 @@ $alert-md-checkbox-icon-transform:            rotate(45deg) !default;
 
   border-radius: $alert-md-button-border-radius;
   font-weight: $alert-md-button-font-weight;
-  text-align: $alert-md-button-text-align;
   text-transform: $alert-md-button-text-transform;
   color: $alert-md-button-text-color;
   background-color: $alert-md-button-background-color;

src/components/alert/alert.scss

@@ -108,6 +108,7 @@ ion-alert input {
 }
 
 .alert-tappable {
+  @include text-align(start);
   @include appearance(none);
 
   margin: 0;
@@ -117,7 +118,5 @@ ion-alert input {
 
   font-size: inherit;
   line-height: initial;
-  text-align: left;
-  text-align: start;
   background: transparent;
 }

src/components/alert/alert.wp.scss

@@ -31,7 +31,7 @@ $alert-wp-background:                          #e6e6e6 !default;
 $alert-wp-head-padding:                        20px 22px 5px 22px !default;
 
 /// @prop - Text align of the alert head
-$alert-wp-head-text-align:                     left !default;
+$alert-wp-head-text-align:                     start !default;
 
 /// @prop - Font size of the alert title
 $alert-wp-title-font-size:                     20px !default;
@@ -256,9 +256,9 @@ $alert-wp-checkbox-icon-transform:             rotate(45deg) !default;
 // --------------------------------------------------
 
 .alert-wp .alert-head {
-  padding: $alert-wp-head-padding;
+  @include text-align($alert-wp-head-text-align);
 
-  text-align: $alert-wp-head-text-align;
+  padding: $alert-wp-head-padding;
 }
 
 .alert-wp .alert-title {

src/components/app/app.scss

@@ -333,33 +333,27 @@ ion-footer {
       // Provide `[text-{bp}]` attributes for aligning the text based
       // on the breakpoint
       [text#{$infix}-center] {
-        // scss-lint:disable ImportantRule
-        text-align: center !important;
+        @include text-align(center, !important);
       }
 
       [text#{$infix}-justify] {
-        // scss-lint:disable ImportantRule
-        text-align: justify !important;
+        @include text-align(justify, !important);
       }
 
       [text#{$infix}-start] {
-        // scss-lint:disable ImportantRule
-        text-align: start !important;
+        @include text-align(start, !important);
       }
 
       [text#{$infix}-end] {
-        // scss-lint:disable ImportantRule
-        text-align: end !important;
+        @include text-align(end, !important);
       }
 
       [text#{$infix}-left] {
-        // scss-lint:disable ImportantRule
-        text-align: left !important;
+        @include text-align(left, !important);
       }
 
       [text#{$infix}-right] {
-        // scss-lint:disable ImportantRule
-        text-align: right !important;
+        @include text-align(right, !important);
       }
 
       [text#{$infix}-nowrap] {

src/components/badge/badge.scss

@@ -11,6 +11,8 @@ $badge-font-weight:               bold !default;
 
 
 ion-badge {
+  @include text-align(center);
+
   display: inline-block;
 
   padding: 3px 8px;
@@ -21,7 +23,6 @@ ion-badge {
   font-weight: $badge-font-weight;
   line-height: 1;
 
-  text-align: center;
   white-space: nowrap;
   vertical-align: baseline;
 }

src/components/button/button.scss

@@ -11,13 +11,13 @@ $button-round-border-radius:      64px !default;
 
 
 .button {
+  @include text-align(center);
   @include appearance(none);
 
   position: relative;
   z-index: 0;
   display: inline-block;
 
-  text-align: center;
   text-overflow: ellipsis;
   text-transform: none;
 

src/components/chip/chip.scss

@@ -52,6 +52,8 @@ ion-chip .button {
 }
 
 ion-chip ion-icon {
+  @include text-align($chip-icon-text-align);
+
   width: $chip-icon-size;
   height: $chip-icon-size;
 
@@ -59,7 +61,6 @@ ion-chip ion-icon {
 
   font-size: $chip-icon-font-size;
   line-height: $chip-icon-size;
-  text-align: $chip-icon-text-align;
 }
 
 ion-chip ion-avatar {

src/components/fab/fab.scss

@@ -20,6 +20,7 @@ $fab-list-button-background-color:      #f4f4f4 !default;
 
 
 .fab {
+  @include text-align(center);
   @include appearance(none);
 
   position: relative;
@@ -33,7 +34,6 @@ $fab-list-button-background-color:      #f4f4f4 !default;
   border-radius: 50%;
   font-size: 14px;
   line-height: $fab-size;
-  text-align: center;
   text-overflow: ellipsis;
   text-transform: none;
   white-space: nowrap;

src/components/infinite-scroll/infinite-scroll.scss

@@ -28,6 +28,8 @@ ion-infinite-scroll {
 // --------------------------------------------------
 
 ion-infinite-scroll-content {
+  @include text-align(center);
+
   display: flex;
 
   flex-direction: column;
@@ -35,8 +37,6 @@ ion-infinite-scroll-content {
 
   height: 100%;
   min-height: 84px;
-
-  text-align: center;
 }
 
 .infinite-loading {

src/components/item/item-media.scss

@@ -11,9 +11,9 @@
 
 .item > ion-icon:first-child,
 .item-inner > ion-icon:first-child {
-  min-width: 24px;
+  @include text-align(center);
 
-  text-align: center;
+  min-width: 24px;
 }
 
 .item > ion-icon,

src/components/item/item.scss

@@ -19,6 +19,8 @@
 }
 
 .item-block {
+  @include text-align(initial);
+
   display: flex;
   overflow: hidden;
 
@@ -35,7 +37,6 @@
 
   font-weight: normal;
   line-height: normal;
-  text-align: initial;
   text-decoration: none;
   color: inherit;
 }

src/components/picker/picker.ios.scss

@@ -69,10 +69,9 @@ $picker-button-ios-strong-font-weight:         600 !default;
 }
 
 .picker-ios .picker-toolbar-button {
-  flex: 1;
+  @include text-align(end);
 
-  text-align: right;
-  text-align: end;
+  flex: 1;
 }
 
 .picker-ios .picker-toolbar-button:last-child .picker-button {
@@ -80,10 +79,9 @@ $picker-button-ios-strong-font-weight:         600 !default;
 }
 
 .picker-ios .picker-toolbar-cancel {
-  font-weight: normal;
+  @include text-align(start);
 
-  text-align: left;
-  text-align: start;
+  font-weight: normal;
 }
 
 .picker-ios .picker-button,

src/components/picker/picker.scss

@@ -87,6 +87,8 @@ ion-picker-cmp {
 }
 
 .picker-prefix {
+  @include text-align(end);
+
   position: relative;
 
   flex: 2;
@@ -94,12 +96,12 @@ ion-picker-cmp {
   min-width: 45%;
   max-width: 50%;
 
-  text-align: right;
-  text-align: end;
   white-space: nowrap;
 }
 
 .picker-suffix {
+  @include text-align(start);
+
   position: relative;
 
   flex: 2;
@@ -107,13 +109,13 @@ ion-picker-cmp {
   min-width: 45%;
   max-width: 50%;
 
-  text-align: left;
-  text-align: start;
   white-space: nowrap;
 }
 
 // contain property is supported by Chrome
 .picker-opt {
+  @include text-align(center);
+
   position: absolute;
   top: 0;
   left: 0;
@@ -122,7 +124,6 @@ ion-picker-cmp {
 
   width: 100%;
 
-  text-align: center;
   text-overflow: ellipsis;
   white-space: nowrap;
 

src/components/picker/picker.wp.scss

@@ -70,17 +70,15 @@ $picker-wp-option-selected-color:             color($colors-wp, primary) !defaul
 }
 
 .picker-wp .picker-toolbar-button {
-  flex: 1;
+  @include text-align(end);
 
-  text-align: right;
-  text-align: end;
+  flex: 1;
 }
 
 .picker-wp .picker-toolbar-cancel {
-  font-weight: normal;
+  @include text-align(start);
 
-  text-align: left;
-  text-align: start;
+  font-weight: normal;
 }
 
 .picker-wp .picker-button,

src/components/popover/test/basic/pages/page-one/page-one.html

@@ -34,10 +34,10 @@
   <ion-grid style="padding: 10px 0;">
     <ion-row>
       <ion-col col-6>
-        <a (click)="presentListPopover($event)" style="padding: 5px;">Present List Popover left</a>
+        <a (click)="presentListPopover($event)" style="padding: 5px;">Present List Popover start</a>
       </ion-col>
-      <ion-col col-6 style="text-align: right;">
-        <a (click)="presentListPopover($event)" style="padding: 5px;">Present List Popover right</a>
+      <ion-col col-6 text-end>
+        <a (click)="presentListPopover($event)" style="padding: 5px;">Present List Popover end</a>
       </ion-col>
     </ion-row>
   </ion-grid>

src/components/range/range.ios.scss

@@ -122,6 +122,8 @@ $range-ios-pin-padding:                       8px !default;
 }
 
 .range-ios .range-knob-handle {
+  @include text-align(center);
+
   position: absolute;
   top: ($range-ios-slider-height / 2);
   left: 0%;
@@ -131,8 +133,6 @@ $range-ios-pin-padding:                       8px !default;
 
   width: $range-ios-hit-width;
   height: $range-ios-hit-height;
-
-  text-align: center;
 }
 
 .range-ios .range-knob {
@@ -173,6 +173,8 @@ $range-ios-pin-padding:                       8px !default;
 }
 
 .range-ios .range-pin {
+  @include text-align(center);
+
   position: relative;
   top: -20px;
   display: inline-block;
@@ -185,8 +187,6 @@ $range-ios-pin-padding:                       8px !default;
 
   font-size: $range-ios-pin-font-size;
 
-  text-align: center;
-
   color: $range-ios-pin-color;
 
   background: $range-ios-pin-background-color;

src/components/range/range.md.scss

@@ -126,6 +126,8 @@ $range-md-pin-min-background-color:          $range-md-bar-background-color !def
 }
 
 .range-md .range-knob-handle {
+  @include text-align(center);
+
   position: absolute;
   top: ($range-md-slider-height / 2);
   left: 0%;
@@ -135,8 +137,6 @@ $range-md-pin-min-background-color:          $range-md-bar-background-color !def
 
   width: $range-md-hit-width;
   height: $range-md-hit-height;
-
-  text-align: center;
 }
 
 .range-md .range-knob {
@@ -186,6 +186,8 @@ $range-md-pin-min-background-color:          $range-md-bar-background-color !def
 }
 
 .range-md .range-pin {
+  @include text-align(center);
+
   position: relative;
   top: -20px;
   display: inline-block;
@@ -199,8 +201,6 @@ $range-md-pin-min-background-color:          $range-md-bar-background-color !def
 
   font-size: $range-md-pin-font-size;
 
-  text-align: center;
-
   color: $range-md-pin-color;
 
   background: $range-md-pin-background-color;

src/components/range/range.wp.scss

@@ -117,6 +117,8 @@ $range-wp-pin-padding:                       8px !default;
 }
 
 .range-wp .range-knob-handle {
+  @include text-align(center);
+
   position: absolute;
   top: ($range-wp-slider-height / 2);
   left: 0%;
@@ -126,8 +128,6 @@ $range-wp-pin-padding:                       8px !default;
 
   width: $range-wp-hit-width;
   height: $range-wp-hit-height;
-
-  text-align: center;
 }
 
 .range-wp .range-knob {
@@ -166,6 +166,8 @@ $range-wp-pin-padding:                       8px !default;
 }
 
 .range-wp .range-pin {
+  @include text-align(center);
+
   position: relative;
   top: -24px;
   display: inline-block;
@@ -178,8 +180,6 @@ $range-wp-pin-padding:                       8px !default;
 
   font-size: $range-wp-pin-font-size;
 
-  text-align: center;
-
   color: $range-wp-pin-color;
 
   background: $range-wp-pin-background-color;

src/components/refresher/refresher.scss

@@ -69,8 +69,9 @@ ion-refresher-content {
 
 .refresher-pulling-icon,
 .refresher-refreshing-icon {
+  @include text-align(center);
+
   font-size: $refresher-icon-font-size;
-  text-align: center;
   color: $refresher-icon-color;
   transform-origin: center;
   transition: 200ms;
@@ -78,8 +79,9 @@ ion-refresher-content {
 
 .refresher-pulling-text,
 .refresher-refreshing-text {
+  @include text-align(center);
+
   font-size: $refresher-text-font-size;
-  text-align: center;
   color: $refresher-text-color;
 }
 

src/components/segment/segment.scss

@@ -15,6 +15,8 @@ ion-segment {
 }
 
 .segment-button {
+  @include text-align(center);
+
   position: relative;
   display: block;
   overflow: hidden;
@@ -22,7 +24,6 @@ ion-segment {
   margin-right: 0;
   margin-left: 0;
 
-  text-align: center;
   text-overflow: ellipsis;
   white-space: nowrap;
   cursor: pointer;

src/components/slides/slides.scss

@@ -151,8 +151,9 @@
 
 /* Pagination Styles */
 .swiper-pagination {
+  @include text-align(center);
+
   position: absolute;
-  text-align: center;
   transition: 300ms;
   transform: translate3d(0, 0, 0);
   z-index: 10;
@@ -415,12 +416,13 @@ button.swiper-pagination-bullet {
 }
 
 .swiper-zoom-container {
+  @include text-align(center);
+
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
-  text-align: center;
 }
 
 .swiper-zoom-container > img,
@@ -514,9 +516,10 @@ ion-slides {
 }
 
 .slide-zoom {
+  @include text-align(center);
+
   display: block;
   width: 100%;
-  text-align: center;
 }
 
 .swiper-container {
@@ -535,12 +538,13 @@ ion-slides {
 }
 
 .swiper-slide {
+  @include text-align(center);
+
   width: 100%;
   height: 100%;
 
   box-sizing: border-box;
 
-  text-align: center;
   font-size: 18px;
 
   /* Center slide text vertically */

src/components/slides/test/intro/main.html

@@ -75,6 +75,7 @@
 }
 #list ol li {
   text-align: left;
+  text-align: start;
   list-style: decimal;
   margin: 10px 0px;
 }

src/components/tabs/tabs.scss

@@ -26,6 +26,8 @@
 }
 
 .tab-button {
+  @include text-align(center);
+
   position: relative;
   z-index: 0;
   display: flex;
@@ -42,7 +44,6 @@
   border: 0;
   border-radius: 0;
 
-  text-align: center;
   text-decoration: none;
   background: none;
   cursor: pointer;
@@ -98,17 +99,17 @@
 }
 
 [tabsLayout=icon-left] .tab-button .tab-button-icon {
-  padding-right: 8px;
+  @include text-align(end);
 
-  text-align: right;
+  padding-right: 8px;
 }
 
 [tabsLayout=icon-right] .tab-button .tab-button-icon {
+  @include text-align(start);
+
   order: 10;
 
   padding-left: 8px;
-
-  text-align: left;
 }
 
 .tab-hidden,

src/components/toolbar/toolbar-button.scss

@@ -4,6 +4,7 @@
 // --------------------------------------------------
 
 .bar-button {
+  @include text-align(center);
   @include appearance(none);
 
   position: relative;
@@ -13,7 +14,6 @@
   padding: 0;
 
   line-height: 1;
-  text-align: center;
   text-overflow: ellipsis;
   text-transform: none;
   white-space: nowrap;

src/components/toolbar/toolbar.ios.scss

@@ -97,9 +97,10 @@ $toolbar-button-ios-strong-font-weight:     600 !default;
 }
 
 .toolbar-title-ios {
+  @include text-align($toolbar-ios-title-text-align);
+
   font-size: $toolbar-ios-title-font-size;
   font-weight: $toolbar-ios-title-font-weight;
-  text-align: $toolbar-ios-title-text-align;
   color: $toolbar-ios-title-text-color;
 
   pointer-events: auto;
@@ -156,15 +157,15 @@ $toolbar-button-ios-strong-font-weight:     600 !default;
 }
 
 .bar-buttons-ios[end] {
-  order: map-get($toolbar-order-ios, buttons-end);
+  @include text-align(end);
 
-  text-align: right;
+  order: map-get($toolbar-order-ios, buttons-end);
 }
 
 .bar-buttons-ios[right] {
-  order: map-get($toolbar-order-ios, buttons-right);
+  @include text-align(right);
 
-  text-align: right;
+  order: map-get($toolbar-order-ios, buttons-right);
 }
 
 

src/components/toolbar/toolbar.md.scss

@@ -169,15 +169,15 @@ $toolbar-button-md-strong-font-weight:   bold !default;
 }
 
 .bar-buttons-md[end] {
-  order: map-get($toolbar-order-md, buttons-end);
+  @include text-align(end);
 
-  text-align: right;
+  order: map-get($toolbar-order-md, buttons-end);
 }
 
 .bar-buttons-md[right] {
-  order: map-get($toolbar-order-md, buttons-right);
+  @include text-align(right);
 
-  text-align: right;
+  order: map-get($toolbar-order-md, buttons-right);
 }
 
 
@@ -346,12 +346,13 @@ $toolbar-button-md-strong-font-weight:   bold !default;
 }
 
 .back-button-icon-md {
+  @include text-align(start);
+
   margin: 0;
   padding: 0 6px;
 
   font-size: 2.4rem;
   font-weight: normal;
-  text-align: left;
 }
 
 

src/components/toolbar/toolbar.wp.scss

@@ -129,15 +129,15 @@ $toolbar-button-wp-strong-font-weight:   bold !default;
 }
 
 .bar-buttons-wp[end] {
-  order: map-get($toolbar-order-wp, buttons-end);
+  @include text-align(end);
 
-  text-align: right;
+  order: map-get($toolbar-order-wp, buttons-end);
 }
 
 .bar-buttons-wp[right] {
-  order: map-get($toolbar-order-wp, buttons-right);
+  @include text-align(right);
 
-  text-align: right;
+  order: map-get($toolbar-order-wp, buttons-right);
 }
 
 
@@ -300,12 +300,13 @@ $toolbar-button-wp-strong-font-weight:   bold !default;
 }
 
 .back-button-icon-wp {
+  @include text-align(start);
+
   margin: 0;
   padding: 0 6px;
 
   font-size: 2.4rem;
   font-weight: normal;
-  text-align: left;
 }