Refector sass

Signed-off-by: Ajay Bura <ajbura@gmail.com>

src/app/atoms/avatar/Avatar.jsx

@@ -26,7 +26,7 @@ function Avatar({
           : (
             <span
               style={{ backgroundColor: iconSrc === null ? bgColor : 'transparent' }}
-              className={`avatar__border${iconSrc !== null ? ' avatar__bordered' : ''} inline-flex--center`}
+              className={`avatar__border${iconSrc !== null ? '--active' : ''}`}
             >
               {
                 iconSrc !== null

src/app/atoms/avatar/Avatar.scss

@@ -1,3 +1,5 @@
+@use '../../partials/flex';
+
 .avatar-container {
   display: inline-flex;
   width: 42px;
@@ -31,11 +33,9 @@
     border-radius: inherit;
   }
 
-  .avatar__bordered {
-    box-shadow: var(--bs-surface-border);
-  }
-
   .avatar__border {
+    @extend .cp-fx__row--c-c;
+    
     position: absolute;
     top: 0;
     left: 0;
@@ -47,5 +47,9 @@
     .text {
       color: white;
     }
+    &--active {
+      @extend .avatar__border;
+      box-shadow: var(--bs-surface-border);
+    }
   }
 }

src/app/atoms/button/Button.scss

@@ -1,4 +1,5 @@
 @use 'state';
+@use '../../partials/dir';
 
 .btn-surface,
 .btn-primary,
@@ -18,27 +19,10 @@
   @include state.disabled;
 
   &--icon {
-    padding: {
-      left: var(--sp-tight);
-      right: var(--sp-loose);
-    }
-
-    [dir=rtl] & {
-      padding: {
-        left: var(--sp-loose);
-        right: var(--sp-tight);
-      }
-    }
+    @include dir.side(padding, var(--sp-tight), var(--sp-loose));
 
     .ic-raw {
-      margin-right: var(--sp-extra-tight);
-
-      [dir=rtl] & {
-        margin: {
-          right: 0;
-          left: var(--sp-extra-tight);
-        }
-      }
+      @include dir.side(margin, 0, var(--sp-extra-tight));
     }
   }
 }

src/app/atoms/button/Toggle.scss

@@ -1,3 +1,5 @@
+@use '../../partials/dir';
+
 .toggle {
   width: 44px;
   height: 24px;
@@ -27,13 +29,13 @@
     background-color: var(--bg-positive);
 
     &::before {
-      background-color: white;
-      transform: translateX(calc(125%));
-      opacity: 1;
+      --ltr: translateX(calc(125%));
+      --rtl: translateX(calc(-125%));
+      @include dir.prop(transform, var(--ltr), var(--rtl));
 
-      [dir=rtl] & {
-        transform: translateX(calc(-125%));
-      }
+      transform: translateX(calc(125%));
+      background-color: white;
+      opacity: 1;
     }
   }
 }

src/app/atoms/chip/Chip.scss

@@ -1,3 +1,5 @@
+@use '../../partials/dir';
+
 .chip {
   padding: var(--sp-ultra-tight) var(--sp-extra-tight);
   
@@ -24,10 +26,6 @@
   & > .ic-raw {
     width: 16px;
     height: 16px;
-    margin-right: var(--sp-ultra-tight);
-    [dir=rtl] & {
-      margin-right: 0;
-      margin-left: var(--sp-ultra-tight);
-    }
+    @include dir.side(margin, 0, var(--sp-ultra-tight));
   }
 }

src/app/atoms/context-menu/ContextMenu.scss

@@ -1,3 +1,6 @@
+@use '../../partials/text';
+@use '../../partials/dir';
+
 .context-menu {
   background-color: var(--bg-surface);
   box-shadow: var(--bs-popup);
@@ -29,10 +32,8 @@
   border-bottom: 1px solid var(--bg-surface-border);
 
   .text {
+    @extend .cp-txt__ellipsis;
     color: var(--tc-surface-low);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
   }
 
   &:not(:first-child) {
@@ -50,17 +51,11 @@
     white-space: nowrap;
 
     .text:first-child {
-      margin: {
-        left: calc(var(--ic-small) + var(--sp-ultra-tight));
-        right: var(--sp-extra-tight);
-      }
-
-      [dir=rtl] & {
-        margin: {
-          left: var(--sp-extra-tight);
-          right: calc(var(--ic-small) + var(--sp-ultra-tight));
-        }
-      }
+      @include dir.side(
+        margin,
+        calc(var(--ic-small) + var(--sp-ultra-tight)),
+        var(--sp-extra-tight)
+      );
     }
   }
   .btn-surface:focus {

src/app/atoms/header/Header.scss

@@ -1,21 +1,14 @@
+@use '../../partials/text';
+@use '../../partials/dir';
+
 .header {
-  padding: {
-    left: var(--sp-normal);
-    right: var(--sp-extra-tight);
-  }
+  @include dir.side(padding, var(--sp-normal), var(--sp-extra-tight));
   width: 100%;
   height: var(--header-height);
   border-bottom: 1px solid var(--bg-surface-border);
   display: flex;
   align-items: center;
 
-  [dir=rtl] & {
-    padding: {
-      left: var(--sp-extra-tight);
-      right: var(--sp-normal);
-    }
-  }
-
   &__title-wrapper {
     flex: 1;
     min-width: 0;
@@ -24,40 +17,27 @@
     margin: 0 var(--sp-tight);
     
     &:first-child {
-      margin-left: 0;
-      [dir=rtl] & {
-        margin-right: 0;
-      }
+      @include dir.side(margin, 0, var(--sp-tight));
     }
 
     & > .text:first-child {
+      @extend .cp-txt__ellipsis;
       min-width: 0;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
     }
     & > .text-b3{
       flex: 1;
       min-width: 0;
 
       margin-top: var(--sp-ultra-tight);
-      margin-left: var(--sp-tight);
-      padding-left: var(--sp-tight);
-      border-left: 1px solid var(--bg-surface-border);
+      @include dir.side(margin, var(--sp-tight), 0);
+      @include dir.side(padding, var(--sp-tight), 0);
+      @include dir.side(border, 1px solid var(--bg-surface-border), none);
+
       max-height: calc(2 * var(--lh-b3));
       overflow: hidden;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 2;
       display: -webkit-box;
-
-      [dir=rtl] & {
-        margin-left: 0;
-        padding-left: 0;
-        border-left: none;
-        margin-right: var(--sp-tight);
-        padding-right: var(--sp-tight);
-        border-right: 1px solid var(--bg-surface-border);
-      }
     }
   }
 }

src/app/atoms/segmented-controls/SegmentedControls.scss

@@ -1,4 +1,5 @@
 @use '../button/state';
+@use '../../partials/dir';
 
 .segmented-controls {
   background-color: var(--bg-surface-low);
@@ -20,12 +21,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    border-left: 1px solid var(--bg-surface-border);
-    
-    [dir=rtl] & {
-      border-left: none;
-      border-right: 1px solid var(--bg-surface-border);
-    }
+    @include dir.side(border, 1px solid var(--bg-surface-border), none);
 
     & .text:nth-child(2) {
       margin: 0 var(--sp-extra-tight);

src/app/molecules/following-members/FollowingMembers.scss

@@ -1,3 +1,4 @@
+@use '../../partials/text';
 
 .following-members {
   width: 100%;
@@ -13,9 +14,7 @@
     margin: 0 var(--sp-extra-tight);
   }
   & .text {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+    @extend .cp-txt__ellipsis;
     color: var(--tc-surface-low);
     b {
       color: var(--tc-surface-normal);

src/app/molecules/import-export-e2e-room-keys/ImportE2ERoomKeys.scss

@@ -1,3 +1,5 @@
+@use '../../partials/text';
+@use '../../partials/dir';
 
 .import-e2e-room-keys {
   &__file {
@@ -22,17 +24,9 @@
     }
     
     & .text {
-      margin-left: var(--sp-tight);
-      margin-right: var(--sp-loose);
+      @extend .cp-txt__ellipsis;
+      @include dir.side(margin, var(--sp-tight), var(--sp-loose));
       max-width: 86px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-
-      [dir=rtl] {
-        margin-right: var(--sp-tight);
-        margin-left: var(--sp-loose);
-      }
     }
   }
 

src/app/molecules/media/Media.scss

@@ -1,3 +1,5 @@
+@use '../../partials/text';
+
 .file-header {
   display: flex;
   align-items: center;
@@ -5,11 +7,9 @@
   min-height: 42px;
 
   & .file-name {
+    @extend .cp-txt__ellipsis;
     flex: 1;
     color: var(--tc-surface-low);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
   }
 
   & a {

src/app/molecules/message/Message.scss

@@ -1,9 +1,11 @@
 @use '../../atoms/scroll/scrollbar';
+@use '../../partials/text';
+@use '../../partials/dir';
 
 .message,
 .ph-msg {
-  padding: var(--sp-ultra-tight) var(--sp-normal);
-  padding-right: var(--sp-extra-tight);
+  padding: var(--sp-ultra-tight);
+  @include dir.side(padding, var(--sp-normal), var(--sp-extra-tight));
   display: flex;
 
   &:hover {
@@ -13,16 +15,10 @@
     }
   }
   
-  [dir=rtl] & {
-    padding: {
-      left: var(--sp-extra-tight);
-      right: var(--sp-normal);
-    }
-  }
-  
   &__avatar-container {
     padding-top: 6px;
-    margin-right: var(--sp-tight);
+    @include dir.side(margin, 0, var(--sp-tight));
+
     & .avatar-container {
       transition: transform 200ms var(--fluid-push);
       &:hover {
@@ -34,13 +30,6 @@
       cursor: pointer;
       display: flex;
     }
-
-    [dir=rtl] & {
-      margin: {
-        left: var(--sp-tight);
-        right: 0;
-      }
-    }
   }
 
   &__main-container {
@@ -62,7 +51,9 @@
     width: var(--av-small);
   }
   &--focus {
-    box-shadow: inset 2px 0 0 var(--bg-caution);
+    --ltr: inset 2px 0 0 var(--bg-caution);
+    --rtl: inset -2px 0 0 var(--bg-caution);
+    @include dir.prop(box-shadow, var(--ltr), var(--rtl));
     background-color: var(--bg-caution-hover);
   }
 }
@@ -77,20 +68,13 @@
 
   &__header,
   &__body > div {
-    margin: var(--sp-ultra-tight) 0;
-    margin-right: var(--sp-extra-tight);
+    margin: var(--sp-ultra-tight);
+    @include dir.side(margin, 0, var(--sp-extra-tight));
     height: var(--fs-b1);
     width: 100%;
     max-width: 100px;
     background-color: var(--bg-surface-hover);
     border-radius: calc(var(--bo-radius) / 2);
-
-    [dir=rtl] & {
-      margin: {
-        right: 0;
-        left: var(--sp-extra-tight);
-      }
-    }
   }
   &__body {
     display: flex;
@@ -121,18 +105,11 @@
   & .message__profile {
     min-width: 0;
     color: var(--tc-surface-high);
-    margin-right: var(--sp-tight);
-
-    [dir=rtl] & {
-      margin-left: var(--sp-tight);
-      margin-right: 0;
-    }
+    @include dir.side(margin, 0, var(--sp-tight));
 
     & > span {
+      @extend .cp-txt__ellipsis;
       color: inherit;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
     }
     & > span:last-child { display: none; }
     &:hover {
@@ -166,10 +143,8 @@
     }
   }
   .text {
+    @extend .cp-txt__ellipsis;
     color: var(--tc-surface-low);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
   }
   .ic-raw {
     width: 16px;
@@ -235,10 +210,8 @@
 .message__edit {
   padding: var(--sp-extra-tight) 0;
   &-btns button {
-    margin: var(--sp-tight) var(--sp-tight) 0 0;
-    [dir=rtl] & {
-      margin: var(--sp-tight) 0 0 var(--sp-tight);
-    }
+    margin: var(--sp-tight) 0 0 0;
+    @include dir.side(margin, 0, var(--sp-tight));
   }
 }
 .message__reactions {
@@ -255,7 +228,8 @@
   }
 }
 .msg__reaction {
-  margin: var(--sp-extra-tight) var(--sp-extra-tight) 0 0;
+  margin: var(--sp-extra-tight) 0 0 0;
+  @include dir.side(margin, 0, var(--sp-extra-tight));
   padding: 0 var(--sp-ultra-tight);
   min-height: 26px;
   display: inline-flex;
@@ -282,13 +256,6 @@
     margin-bottom: -2px;
   }
 
-  [dir=rtl] & {
-    margin: {
-      right: 0;
-      left: var(--sp-extra-tight);
-    }
-  }
-
   @media (hover: hover) {
     &:hover {
       background-color: var(--bg-surface-hover);
@@ -314,7 +281,9 @@
 .message__options {
   position: absolute;
   top: 0;
-  right: 60px;
+  @include dir.prop(right, 60px, unset);
+  @include dir.prop(left, unset, 60px);
+
   z-index: 99;
   transform: translateY(-50%);
 
@@ -322,11 +291,6 @@
   box-shadow: var(--bs-surface-border);
   background-color: var(--bg-surface-low);
   display: none;
-
-  [dir=rtl] & {
-    left: 60px;
-    right: unset;
-  }
 }
 
 // markdown formating
@@ -406,41 +370,23 @@
   & blockquote {
     display: inline-block;
     max-width: 100%;
-    padding-left: var(--sp-extra-tight);
-    border-left: 4px solid var(--bg-surface-active);
+    @include dir.side(padding, var(--sp-extra-tight), 0);
+    @include dir.side(border, 4px solid var(--bg-surface-active), 0);
     white-space: initial !important;
 
     & > * {
       white-space: pre-wrap;
     }
-
-    [dir=rtl] & {
-      padding: {
-        left: 0;
-        right: var(--sp-extra-tight);
-      }
-      border: {
-        left: none;
-        right: 4px solid var(--bg-surface-active);
-      }
-    }
   }
   & ul,
   & ol {
     margin: var(--sp-ultra-tight) 0;
-    padding-left: 24px;
+    @include dir.side(padding, 24px, 0);
     white-space: initial !important;
     
     & > * {
       white-space: pre-wrap;
     }
-
-    [dir=rtl] & {
-      padding: {
-        left: 0;
-        right: 24px;
-      }
-    }
   }
   & ul.contains-task-list {
     padding: 0;

src/app/molecules/message/TimelineChange.scss

@@ -1,6 +1,9 @@
+@use '../../partials/dir';
+
 .timeline-change {
-  padding: var(--sp-ultra-tight) var(--sp-normal);
-  padding-right: var(--sp-extra-tight);
+  padding: var(--sp-ultra-tight);
+  @include dir.side(padding, var(--sp-normal), var(--sp-extra-tight));
+
   display: flex;
   align-items: center;
   width: 100%;
@@ -9,13 +12,6 @@
     background-color: var(--bg-surface-hover);
   }
 
-  [dir=rtl] & {
-    padding: {
-      left: var(--sp-extra-tight);
-      right: var(--sp-normal);
-    }
-  }
-
   &__avatar-container {
     width: var(--av-small);
     display: inline-flex;

src/app/molecules/people-selector/PeopleSelector.scss

@@ -1,17 +1,14 @@
+@use '../../partials/text';
+@use '../../partials/dir';
+
 .people-selector {
   width: 100%;
   padding: var(--sp-extra-tight);
-  padding-left: var(--sp-normal);
+  @include dir.side(padding, var(--sp-normal), var(--sp-extra-tight));
   display: flex;
   align-items: center;
   cursor: pointer;
 
-  [dir=rtl] & {
-    padding: {
-      left: var(--sp-extra-tight);
-      right: var(--sp-normal);
-    }
-  }
   @media (hover: hover) {
     &:hover {
       background-color: var(--bg-surface-hover);
@@ -26,13 +23,11 @@
   }
 
   &__name {
+    @extend .cp-txt__ellipsis;
     flex: 1;
     min-width: 0;
     margin: 0 var(--sp-tight);
     color: var(--tc-surface-normal);
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
   }
   &__role {
     color: var(--tc-surface-low);

src/app/molecules/popup-window/PopupWindow.scss

@@ -1,3 +1,5 @@
+@use '../../partials/dir';
+
 .pw-model {
   --modal-height: 656px;
   max-height: var(--modal-height) !important;
@@ -16,14 +18,7 @@
   &__drawer {
     width: var(--popup-window-drawer-width);
     background-color: var(--bg-surface-low);
-    border-right: 1px solid var(--bg-surface-border);
-
-    [dir=rtl] & {
-      border: {
-        right: none;
-        left: 1px solid var(--bg-surface-border);
-      }
-    }
+    @include dir.side(border, none, 1px solid var(--bg-surface-border));
   }
   &__content {
     flex: 1;
@@ -52,12 +47,9 @@
 .pw__drawer {
   & .header {
     padding-left: var(--sp-tight);
+    @include dir.side(padding, var(--sp-tight), var(--sp-tight));
     & .header__title-wrapper {
-      margin: 0 var(--sp-extra-tight) 0 var(--sp-ultra-tight);
-    }
-    [dir=rtl] & {
-      padding-right: var(--sp-tight);
-      margin: 0 var(--sp-ultra-tight) 0 var(--sp-extra-tight);
+      @include dir.side(margin, var(--sp-ultra-tight), var(--sp-extra-tight));
     }
   }
 }
@@ -82,11 +74,7 @@
       color: var(--tc-surface-normal);
     }
     & .ic-raw {
-      margin-right: var(--sp-tight);
-      [dir=rtl] & {
-        margin-right: 0;
-        margin-left: var(--sp-tight);
-      }
+      @include dir.side(margin, 0, var(--sp-tight));
     }
   }
 }

src/app/molecules/room-intro/RoomIntro.scss

@@ -1,15 +1,10 @@
+@use '../../partials/dir';
+
 .room-intro {
   margin-top: calc(2 * var(--sp-extra-loose));
   margin-bottom: var(--sp-extra-loose);
-  padding-left: calc(var(--sp-normal) + var(--av-small) + var(--sp-tight));
-  padding-right: var(--sp-extra-tight);
-
-  [dir=rtl] & {
-    padding: {
-      left: var(--sp-extra-tight);
-      right: calc(var(--sp-normal) + var(--av-small) + var(--sp-tight));
-    }
-  }
+  --left-pad: calc(var(--sp-normal) + var(--av-small) + var(--sp-tight));
+  @include dir.side(padding, var(--left-pad), var(--sp-extra-tight));
 
   .room-intro__content {
     margin-top: var(--sp-extra-loose);

src/app/molecules/room-selector/RoomSelector.scss

@@ -1,15 +1,9 @@
-.room-selector-flex {
-  display: flex;
-  align-items: center;
-}
-.room-selector-flexItem {
-  flex: 1;
-  min-width: 0;
-  min-height: 0;
-}
+@use '../../partials/flex';
+@use '../../partials/text';
+@use '../../partials/dir';
 
 .room-selector {
-  @extend .room-selector-flex;
+  @extend .cp-fx__row--s-c;
 
   border: 1px solid transparent;
   border-radius: var(--bo-radius);
@@ -55,35 +49,28 @@
 }
 
 .room-selector__content {
-  @extend .room-selector-flexItem;
-  @extend .room-selector-flex;
+  @extend .cp-fx__item-one;
+  @extend .cp-fx__row--s-c;
   padding: 0 var(--sp-extra-tight);
   min-height: 40px;
   cursor: inherit;
 
-  & > .avatar-container .avatar__bordered {
+  & > .avatar-container .avatar__border--active {
     box-shadow: none;
   }
 
   & > .text {
-    @extend .room-selector-flexItem;
+    @extend .cp-fx__item-one;
+    @extend .cp-txt__ellipsis;
     margin: 0 var(--sp-extra-tight);
 
     color: var(--tc-surface-normal-low);
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
   }
 }
 .room-selector__options {
-  @extend .room-selector-flex;
+  @extend .cp-fx__row--s-c;
+  @include dir.side(margin, 0, var(--sp-ultra-tight));
   display: none;
-  margin-right: var(--sp-ultra-tight);
-
-  [dir=rtl] & {
-    margin-right: 0;
-    margin-left: var(--sp-ultra-tight);
-  }
 
   &:empty {
     margin: 0 !important;

src/app/molecules/setting-tile/SettingTile.scss

@@ -1,3 +1,5 @@
+@use '../../partials/dir';
+
 .setting-tile {
   &__title__wrapper {
     display: flex;
@@ -6,11 +8,6 @@
   &__title {
     flex: 1;
     min-width: 0;
-    margin-right: var(--sp-normal);
-    [dir=rtl] & {
-      margin-right: 0;
-      margin-left: var(--sp-normal);
-    }
+    @include dir.side(margin, 0, var(--sp-normal));
   }
-
 }

src/app/molecules/sidebar-avatar/SidebarAvatar.scss

@@ -1,3 +1,5 @@
+@use '../../partials/dir';
+
 .sidebar-avatar {
   position: relative;
   display: flex;
@@ -7,10 +9,11 @@
   
   & .notification-badge {
     position: absolute;
-    right: 0;
+    @include dir.prop(left, unset, 0);
+    @include dir.prop(right, 0, unset);
     top: 0;
     box-shadow: 0 0 0 2px var(--bg-surface-low);
-    transform: translate(20%, -20%);
+    @include dir.prop(transform, translate(20%, -20%), translate(-20%, -20%));
 
     margin: 0 !important;
   }
@@ -19,10 +22,12 @@
     transition: transform 200ms var(--fluid-push);
   }
   &:hover .avatar-container {
-    transform: translateX(4px)
+    @include dir.prop(transform, translateX(4px), translateX(-4px));
   }
   &:hover .notification-badge {
-    transform: translate(calc(20% + 4px), -20%);
+    --ltr: translate(calc(20% + 4px), -20%);
+    --rtl: translate(calc(-20% - 4px), -20%);
+    @include dir.prop(transform, var(--ltr), var(--rtl));
   }
   &:focus {
     outline: none;
@@ -37,21 +42,16 @@
     content: "";
     display: block;
     position: absolute;
-    left: -11px;
+    @include dir.prop(left, -11px, unset);
+    @include dir.prop(right, unset, -11px);
     top: 50%;
     transform: translateY(-50%);
 
     width: 3px;
     height: 12px;
     background-color: var(--tc-surface-high);
-    border-radius: 0 4px 4px 0;
+    @include dir.prop(border-radius, 0 4px 4px 0, 4px 0 0 4px);
     transition: height 200ms linear;
-
-    [dir=rtl] & {
-      left: unset;
-      right: -11px;
-      border-radius: 4px 0 0 4px;
-    }
   }
   &--active:hover::before,
   &--active:focus::before,

src/app/organisms/create-room/CreateRoom.scss

@@ -1,6 +1,8 @@
+@use '../../partials/flex';
+@use '../../partials/dir';
+
 .create-room {
-  margin: 0 var(--sp-normal);
-  margin-right: var(--sp-extra-tight);
+  @include dir.side(margin, var(--sp-normal), var(--sp-extra-tight));
 
   &__form > * {
     margin-top: var(--sp-normal);
@@ -23,12 +25,8 @@
       margin-bottom: var(--sp-ultra-tight);
     }
     &__tip {
-      margin-left: 46px;
       margin-top: var(--sp-ultra-tight);
-      [dir=rtl] & {
-        margin-left: 0;
-        margin-right: 46px;
-      }
+      @include dir.side(margin, 46px, 0);
     }
     & .text {
       display: flex;
@@ -46,24 +44,20 @@
       }
     }
     & .text:first-child {
-      border-right-width: 0;
-      border-radius: var(--bo-radius) 0 0 var(--bo-radius);
+      @include dir.prop(border-width, 1px 0 1px 1px, 1px 1px 1px 0);
+      @include dir.prop(
+        border-radius,
+        var(--bo-radius) 0 0 var(--bo-radius),
+        0 var(--bo-radius) var(--bo-radius) 0,
+      );
     }
     & .text:last-child {
-      border-left-width: 0;
-      border-radius: 0 var(--bo-radius) var(--bo-radius) 0;
-    }
-    [dir=rtl] & {
-      & .text:first-child {
-        border-left-width: 0;
-        border-right-width: 1px;
-        border-radius: 0 var(--bo-radius) var(--bo-radius) 0;
-      }
-      & .text:last-child {
-        border-right-width: 0;
-        border-left-width: 1px;
-        border-radius: var(--bo-radius) 0 0 var(--bo-radius);
-      }
+      @include dir.prop(border-width, 1px 1px 1px 0, 1px 0 1px 1px);
+      @include dir.prop(
+        border-radius,
+        0 var(--bo-radius) var(--bo-radius) 0,
+        var(--bo-radius) 0 0 var(--bo-radius),
+      );
     }
   }
 
@@ -74,11 +68,7 @@
     & .input-container {
       flex: 1;
       min-width: 0;
-      margin-right: var(--sp-normal);
-      [dir=rtl] & {
-        margin-right: 0;
-        margin-left: var(--sp-normal);
-      }
+      @include dir.side(margin, 0, var(--sp-normal));
     }
     & .btn-primary {
       padding-top: 11px;
@@ -87,24 +77,13 @@
   }
 
   &__loading {
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    @extend .cp-fx__row--c-c;
     & .text {
-      margin-left: var(--sp-normal);
-      [dir=rtl] & {
-        margin-left: 0;
-        margin-right: var(--sp-normal);
-      }
+      @include dir.side(margin, var(--sp-normal), 0);
     }
   }
   &__error {
     text-align: center;
     color: var(--bg-danger) !important;
   }
-
-  [dir=rtl] & {
-    margin-right: var(--sp-normal);
-    margin-left: var(--sp-extra-tight);
-  }
 }