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: {
+    @include dir.side(padding, var(--sp-tight), var(--sp-loose));
-      left: var(--sp-tight);
-      right: var(--sp-loose);
-    }
-
-    [dir=rtl] & {
-      padding: {
-        left: var(--sp-loose);
-        right: var(--sp-tight);
-      }
-    }
 
     .ic-raw {
-      margin-right: var(--sp-extra-tight);
+      @include dir.side(margin, 0, var(--sp-extra-tight));
-
-      [dir=rtl] & {
-        margin: {
-          right: 0;
-          left: 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;
+      --ltr: translateX(calc(125%));
-      transform: translateX(calc(125%));
+      --rtl: translateX(calc(-125%));
-      opacity: 1;
+      @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);
+    @include dir.side(margin, 0, var(--sp-ultra-tight));
-    [dir=rtl] & {
-      margin-right: 0;
-      margin-left: 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: {
+      @include dir.side(
-        left: calc(var(--ic-small) + var(--sp-ultra-tight));
+        margin,
-        right: var(--sp-extra-tight);
+        calc(var(--ic-small) + var(--sp-ultra-tight)),
-      }
+        var(--sp-extra-tight)
-
+      );
-      [dir=rtl] & {
-        margin: {
-          left: var(--sp-extra-tight);
-          right: calc(var(--ic-small) + var(--sp-ultra-tight));
-        }
-      }
     }
   }
   .btn-surface:focus {

src/app/atoms/header/Header.scss

@@ -1,21 +1,14 @@
+@use '../../partials/text';
+@use '../../partials/dir';
+
 .header {
-  padding: {
+  @include dir.side(padding, var(--sp-normal), var(--sp-extra-tight));
-    left: var(--sp-normal);
-    right: 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;
+      @include dir.side(margin, 0, var(--sp-tight));
-      [dir=rtl] & {
-        margin-right: 0;
-      }
     }
 
     & > .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);
+      @include dir.side(margin, var(--sp-tight), 0);
-      padding-left: var(--sp-tight);
+      @include dir.side(padding, var(--sp-tight), 0);
-      border-left: 1px solid var(--bg-surface-border);
+      @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);
+    @include dir.side(border, 1px solid var(--bg-surface-border), none);
-    
-    [dir=rtl] & {
-      border-left: none;
-      border-right: 1px solid var(--bg-surface-border);
-    }
 
     & .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;
+    @extend .cp-txt__ellipsis;
-    white-space: nowrap;
-    text-overflow: 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);
+      @extend .cp-txt__ellipsis;
-      margin-right: var(--sp-loose);
+      @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: var(--sp-ultra-tight);
-  padding-right: var(--sp-extra-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: var(--sp-ultra-tight);
-    margin-right: var(--sp-extra-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);
+    @include dir.side(margin, 0, var(--sp-tight));
-
-    [dir=rtl] & {
-      margin-left: var(--sp-tight);
-      margin-right: 0;
-    }
 
     & > 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;
+    margin: var(--sp-tight) 0 0 0;
-    [dir=rtl] & {
+    @include dir.side(margin, 0, var(--sp-tight));
-      margin: var(--sp-tight) 0 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);
+    @include dir.side(padding, var(--sp-extra-tight), 0);
-    border-left: 4px solid var(--bg-surface-active);
+    @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: var(--sp-ultra-tight);
-  padding-right: var(--sp-extra-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);
+    @include dir.side(border, none, 1px solid var(--bg-surface-border));
-
-    [dir=rtl] & {
-      border: {
-        right: none;
-        left: 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);
+      @include dir.side(margin, var(--sp-ultra-tight), var(--sp-extra-tight));
-    }
-    [dir=rtl] & {
-      padding-right: var(--sp-tight);
-      margin: 0 var(--sp-ultra-tight) 0 var(--sp-extra-tight);
     }
   }
 }
@@ -82,11 +74,7 @@
       color: var(--tc-surface-normal);
     }
     & .ic-raw {
-      margin-right: var(--sp-tight);
+      @include dir.side(margin, 0, var(--sp-tight));
-      [dir=rtl] & {
-        margin-right: 0;
-        margin-left: 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));
+  --left-pad: calc(var(--sp-normal) + var(--av-small) + var(--sp-tight));
-  padding-right: var(--sp-extra-tight);
+  @include dir.side(padding, var(--left-pad), var(--sp-extra-tight));
-
-  [dir=rtl] & {
-    padding: {
-      left: var(--sp-extra-tight);
-      right: calc(var(--sp-normal) + var(--av-small) + var(--sp-tight));
-    }
-  }
 
   .room-intro__content {
     margin-top: var(--sp-extra-loose);

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

@@ -1,15 +1,9 @@
-.room-selector-flex {
+@use '../../partials/flex';
-  display: flex;
+@use '../../partials/text';
-  align-items: center;
+@use '../../partials/dir';
-}
-.room-selector-flexItem {
-  flex: 1;
-  min-width: 0;
-  min-height: 0;
-}
 
 .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 .cp-fx__item-one;
-  @extend .room-selector-flex;
+  @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);
+    @include dir.side(margin, 0, var(--sp-normal));
-    [dir=rtl] & {
-      margin-right: 0;
-      margin-left: 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);
+  @include dir.side(margin, var(--sp-normal), var(--sp-extra-tight));
-  margin-right: 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] & {
+      @include dir.side(margin, 46px, 0);
-        margin-left: 0;
-        margin-right: 46px;
-      }
     }
     & .text {
       display: flex;
@@ -46,24 +44,20 @@
       }
     }
     & .text:first-child {
-      border-right-width: 0;
+      @include dir.prop(border-width, 1px 0 1px 1px, 1px 1px 1px 0);
-      border-radius: var(--bo-radius) 0 0 var(--bo-radius);
+      @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;
+      @include dir.prop(border-width, 1px 1px 1px 0, 1px 0 1px 1px);
-      border-radius: 0 var(--bo-radius) var(--bo-radius) 0;
+      @include dir.prop(
-    }
+        border-radius,
-    [dir=rtl] & {
+        0 var(--bo-radius) var(--bo-radius) 0,
-      & .text:first-child {
+        var(--bo-radius) 0 0 var(--bo-radius),
-        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);
-      }
     }
   }
 
@@ -74,11 +68,7 @@
     & .input-container {
       flex: 1;
       min-width: 0;
-      margin-right: var(--sp-normal);
+      @include dir.side(margin, 0, var(--sp-normal));
-      [dir=rtl] & {
-        margin-right: 0;
-        margin-left: var(--sp-normal);
-      }
     }
     & .btn-primary {
       padding-top: 11px;
@@ -87,24 +77,13 @@
   }
 
   &__loading {
-    display: flex;
+    @extend .cp-fx__row--c-c;
-    justify-content: center;
-    align-items: center;
     & .text {
-      margin-left: var(--sp-normal);
+      @include dir.side(margin, var(--sp-normal), 0);
-      [dir=rtl] & {
-        margin-left: 0;
-        margin-right: var(--sp-normal);
-      }
     }
   }
   &__error {
     text-align: center;
     color: var(--bg-danger) !important;
   }
-
-  [dir=rtl] & {
-    margin-right: var(--sp-normal);
-    margin-left: var(--sp-extra-tight);
-  }
 }

src/app/organisms/emoji-board/EmojiBoard.scss

@@ -1,32 +1,22 @@
-.emoji-board-flexBoxV {
+@use '../../partials/flex';
-  display: flex;
+@use '../../partials/text';
-  flex-direction: column;
+@use '../../partials/dir';
-}
-.emoji-board-flexItem {
-  flex: 1;
-  min-height: 0;
-  min-width: 0;
-}
 
 .emoji-board {
   display: flex;
   &__content {
-    @extend .emoji-board-flexItem;
+    @extend .cp-fx__item-one;
-    @extend .emoji-board-flexBoxV;
+    @extend .cp-fx__column;
     height: 400px;
     width: 286px;
   }
   &__nav {
-    @extend .emoji-board-flexBoxV;
+    @extend .cp-fx__column;
     justify-content: center;
 
     padding: 4px 6px;
     background-color: var(--bg-surface-low);
-    border-left: 1px solid var(--bg-surface-border);
+    @include dir.side(border, 1px solid var(--bg-surface-border), none);
-    [dir=rtl] & {
-      border-left: none;
-      border-right: 1px solid var(--bg-surface-border);
-    }
 
     & > .ic-btn-surface {
       margin: calc(var(--sp-ultra-tight) / 2) 0;
@@ -41,13 +31,10 @@
   
   & .ic-raw {
     position: absolute;
-    left: var(--sp-normal);
+    @include dir.prop(left, var(--sp-normal), unset);
+    @include dir.prop(right, unset, var(--sp-normal));
     top: var(--sp-normal);
     transform: translateY(1px);
-    [dir=rtl] & {
-      left: unset;
-      right: var(--sp-normal);
-    }
   }
 
   & .input-container {
@@ -60,8 +47,8 @@
   }
 }
 .emoji-board__content__emojis {
-  @extend .emoji-board-flexItem;
+  @extend .cp-fx__item-one;
-  @extend .emoji-board-flexBoxV;
+  @extend .cp-fx__column;
 }
 .emoji-board__content__info {
   margin: 0 var(--sp-extra-tight);
@@ -79,11 +66,9 @@
     }
   }
   & > p:last-child {
-    @extend .emoji-board-flexItem;
+    @extend .cp-fx__item-one;
+    @extend .cp-txt__ellipsis;
     margin: 0 var(--sp-tight);
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
   }
 }
 
@@ -98,23 +83,17 @@
     z-index: 99;
     background-color: var(--bg-surface);
 
-    margin-left: var(--sp-extra-tight);
+    @include dir.side(margin, var(--sp-extra-tight), 0);
     padding: var(--sp-extra-tight) var(--sp-ultra-tight);
     text-transform: uppercase;
     box-shadow: 0 -4px 0 0 var(--bg-surface);
     border-bottom: 1px solid var(--bg-surface-border);
-    [dir=rtl] & {
-      margin-left: 0;
-      margin-right: var(--sp-extra-tight);
-    }
   }
   & .emoji-set {
-    margin: var(--sp-extra-tight) calc(var(--sp-normal) - var(--emoji-padding));
+    --left-margin: calc(var(--sp-normal) - var(--emoji-padding));
-    margin-right: calc(var(--sp-extra-tight) - var(--emoji-padding));
+    --right-margin: calc(var(--sp-extra-tight) - var(--emoji-padding));
-    [dir=rtl] & {
+    margin: var(--sp-extra-tight);
-      margin-right: calc(var(--sp-normal) - var(--emoji-padding));
+    @include dir.side(margin, var(--left-margin), var(--right-margin));
-      margin-left: calc(var(--sp-extra-tight) - var(--emoji-padding));
-    }
   }
   & .emoji {
     width: 38px;

src/app/organisms/invite-list/InviteList.scss

@@ -1,6 +1,7 @@
+@use '../../partials/dir';
+
 .invites-content {
-  margin: 0 var(--sp-normal);
+  @include dir.side(margin, var(--sp-normal), var(--sp-extra-tight));
-  margin-right: var(--sp-extra-tight);
 
   &__subheading {
     margin-top: var(--sp-extra-loose);
@@ -20,19 +21,6 @@
     }
   }
   & .invite-btn__container .btn-surface {
-    margin-right: var(--sp-normal);
+    @include dir.side(margin, 0, var(--sp-normal));
-    [dir=rtl] & {
-      margin: {
-        right: 0;
-        left: var(--sp-normal);
-      }
-    }
-  }
-
-  [dir=rtl] & {
-    margin: {
-      left: var(--sp-extra-tight);
-      right: var(--sp-normal);
-    }
   }
 }

src/app/organisms/invite-user/InviteUser.scss

@@ -1,7 +1,8 @@
+@use '../../partials/dir';
+
 .invite-user {
-  margin: 0 var(--sp-normal);
-  margin-right: var(--sp-extra-tight);
   margin-top: var(--sp-extra-tight);
+  @include dir.side(margin, var(--sp-normal), var(--sp-extra-tight));
 
   &__form {
     display: flex;
@@ -10,11 +11,7 @@
     & .input-container {
       flex: 1;
       min-width: 0;
-      margin-right: var(--sp-normal);
+      @include dir.side(margin, 0, var(--sp-normal));
-      [dir=rtl] & {
-        margin-right: 0;
-        margin-left: var(--sp-normal);
-      }
     }
 
     & .btn-primary {
@@ -45,11 +42,4 @@
       align-self: flex-end;
     }
   }
-
-  [dir=rtl] & {
-    margin: {
-      left: var(--sp-extra-tight);
-      right: var(--sp-normal);
-    }
-  }
 }

src/app/organisms/navigation/Drawer.scss

@@ -1,33 +1,24 @@
-.drawer-flexBox {
+@use '../../partials/flex';
-  display: flex;
+@use '../../partials/dir';
-  flex-direction: column;
-}
-.drawer-flexItem {
-  flex: 1;
-  min-height: 0;
-}
 
 .drawer {
-  @extend .drawer-flexItem;
+  @extend .cp-fx__column;
-  @extend .drawer-flexBox;
+  @extend .cp-fx__item-one;
   min-width: 0;
-  border-right: 1px solid var(--bg-surface-border);
+  @include dir.side(border,
-
+    none,
-  [dir=rtl] & {
+    1px solid var(--bg-surface-border),
-    border-right: none;
+  );
-    border-left: 1px solid var(--bg-surface-border);
-  }
 
   &__content-wrapper {
-    @extend .drawer-flexItem;
+    @extend .cp-fx__item-one;
-    @extend .drawer-flexBox;
+    @extend .cp-fx__column;
   }
 
   &__state {
     padding: var(--sp-extra-tight);
     border-top: 1px solid var(--bg-surface-border);
-    display: flex;
+    @extend .cp-fx__row--c-c;
-    justify-content: center;
 
     & .text {
       color: var(--tc-danger-high);
@@ -35,7 +26,7 @@
   }
 }
 .rooms__wrapper {
-  @extend .drawer-flexItem;
+  @extend .cp-fx__item-one;
   position: relative;
 }
 
@@ -58,13 +49,7 @@
 
   & > .room-selector {
     width: calc(100% - var(--sp-extra-tight));
-    margin-left: auto;
+    @include dir.side(margin, auto, 0);
-
-    [dir=rtl] & {
-      margin-left: 0;
-      margin-right: auto;
-    }
-
   }
 
   & > .room-selector:first-child {

src/app/organisms/navigation/DrawerBreadcrumb.scss

@@ -1,3 +1,6 @@
+@use '../../partials/text';
+@use '../../partials/dir';
+
 .breadcrumb__wrapper {
   height: var(--header-height);
   position: relative;
@@ -47,17 +50,12 @@
     white-space: nowrap;
     box-shadow: none;
     & p {
+      @extend .cp-txt__ellipsis;
       max-width: 86px;
-      overflow: hidden;
-      text-overflow: ellipsis;
     }
 
     & .notification-badge {
-      margin-left: var(--sp-extra-tight);
+      @include dir.side(margin, var(--sp-extra-tight), 0);
-      [dir=rtl] & {
-        margin-left: 0;
-        margin-right: var(--sp-extra-tight);
-      }
     }
   }
 

src/app/organisms/navigation/SideBar.scss

@@ -1,21 +1,16 @@
-.sidebar__flexBox {
+@use '../../partials/flex';
-  display: flex;
+@use '../../partials/dir';
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: center;
-}
 
 .sidebar {
-  @extend .sidebar__flexBox;
+  @extend .cp-fx__column;
+
   width: var(--navigation-sidebar-width);
   height: 100%;
-  border-right: 1px solid var(--bg-surface-border);
   background-color: var(--bg-surface-extra-low);
-
+  @include dir.side(border,
-  [dir=rtl] & {
+    none,
-    border-right: none;
+    1px solid var(--bg-surface-border),
-    border-left: 1px solid var(--bg-surface-border);
+  );
-  }
 
   &__scrollable,
   &__sticky {
@@ -23,12 +18,7 @@
   }
 
   &__scrollable {
-    flex: 1;
+    @extend .cp-fx__item-one;
-    min-height: 0px;
-  }
-
-  &__sticky {
-    align-items: center;
   }
 }
 
@@ -53,7 +43,7 @@
 .featured-container,
 .space-container,
 .sticky-container {
-  @extend .sidebar__flexBox;
+  @extend .cp-fx__column--c-c;
   
   padding: var(--sp-ultra-tight) 0;
 

src/app/organisms/profile-editor/ProfileEditor.scss

@@ -1,3 +1,5 @@
+@use '../../partials/dir';
+
 .profile-editor {
   display: flex;
   align-items: flex-start;
@@ -21,10 +23,6 @@
   }
 
   & > * {
-    margin-left: var(--sp-normal);
+    @include dir.side(margin, var(--sp-normal), 0);
-    [dir=rtl] & {
-      margin-left: 0;
-      margin-right: var(--sp-normal);
-    }
   }
 }

src/app/organisms/profile-viewer/ProfileViewer.scss

@@ -1,15 +1,13 @@
+@use '../../partials/dir';
+
 .profile-viewer__dialog {
   & .dialog__content__wrapper {
     position: relative;
   }
   & .dialog__content-container {
-    padding: var(--sp-normal);
+    padding-top: var(--sp-normal);
     padding-bottom: 89px;
-    padding-right: var(--sp-extra-tight);
+    @include dir.side(padding, var(--sp-normal), var(--sp-extra-tight));
-    [dir=rtl] & {
-      padding-right: var(--sp-normal);
-      padding-left: var(--sp-extra-tight);
-    }
   }
 }
 
@@ -58,11 +56,7 @@
       margin: 0 var(--sp-normal)
     }
     & > *:last-child {
-      margin-left: auto;
+      @include dir.side(margin, auto, 0);
-      [dir=rtl] & {
-        margin-left: 0;
-        margin-right: auto;
-      }
     }
   }
 }
@@ -74,13 +68,8 @@
   &__chips {
     padding-top: var(--sp-ultra-tight);
     & .chip {
-      margin: {
+      margin-top: var(--sp-extra-tight);
-        top: var(--sp-extra-tight);
+      @include dir.side(margin, 0, var(--sp-extra-tight));
-        right: var(--sp-extra-tight);
-      }
-      [dir=rtl] & {
-        margin: 0 0 var(--sp-extra-tight) var(--sp-extra-tight);
-      }
     }
   } 
 }

src/app/organisms/public-rooms/PublicRooms.scss

@@ -1,6 +1,7 @@
+@use '../../partials/dir';
+
 .public-rooms {
-  margin: 0 var(--sp-normal);
+  @include dir.side(margin, var(--sp-normal), var(--sp-extra-tight));
-  margin-right: var(--sp-extra-tight);
   margin-top: var(--sp-extra-tight);
 
   &__form {
@@ -19,33 +20,28 @@
     min-width: 0;
 
     display: flex;
-    margin-right: var(--sp-normal);
+    @include dir.side(margin, 0, var(--sp-normal));
-    [dir=rtl] & {
-      margin-right: 0;
-      margin-left: var(--sp-normal);
-    }
 
     & > div:first-child {
       flex: 1;
       min-width: 0;
 
       & .input {
-        border-radius: var(--bo-radius) 0 0 var(--bo-radius);
+        @include dir.prop(border-radius,
-        [dir=rtl] & {
+          var(--bo-radius) 0 0 var(--bo-radius),
-          border-radius: 0 var(--bo-radius) var(--bo-radius) 0;
+          0 var(--bo-radius) var(--bo-radius) 0,
-        }
+        );
       }
     }
 
     & > div:last-child .input {
       width: 120px;
-      border-left-width: 0;
+      @include dir.prop(border-left-width, 0, 1px);
-      border-radius: 0 var(--bo-radius) var(--bo-radius) 0;
+      @include dir.prop(border-right-width, 1px, 0);
-      [dir=rtl] & {
+      @include dir.prop(border-radius,
-        border-left-width: 1px;
+        0 var(--bo-radius) var(--bo-radius) 0,
-        border-right-width: 0;
+        var(--bo-radius) 0 0 var(--bo-radius),
-        border-radius: var(--bo-radius) 0 0 var(--bo-radius);
+      );
-      }
     }
   }
 
@@ -68,11 +64,7 @@
   }
   &__view-more {
     margin-top: var(--sp-loose);
-    margin-left: calc(var(--av-normal) + var(--sp-normal));
+    @include dir.side(margin, calc(var(--av-normal) + var(--sp-normal)), 0);
-    [dir=rtl] & {
-      margin-left: 0;
-      margin-right: calc(var(--av-normal) + var(--sp-normal));
-    }
   }
   
   & .room-tile {
@@ -81,13 +73,6 @@
       align-self: flex-end;
     }
   }
-
-  [dir=rtl] & {
-    margin: {
-      left: var(--sp-extra-tight);
-      right: var(--sp-normal);
-    }
-  }
 }
 
 .try-join-with-alias {

src/app/organisms/room-optons/RoomOptions.scss

@@ -1,3 +1,5 @@
+@use '../../partials/dir';
+
 .context-menu__item {
   position: relative;
 }
@@ -8,13 +10,12 @@
   width: 3px;
   height: 12px;
   background: var(--bg-positive);
-  border-radius: 0 4px 4px 0;
+  @include dir.prop(
+    border-radius,
+    0 4px 4px 0,
+    4px 0 0 4px,
+  );
   position: absolute;
-  left: 0;
+  @include dir.prop(left, 0, unset);
-
+  @include dir.prop(right, unset, 0);
-  [dir=rtl] & {
-    left: unset;
-    right: 0;
-    border-radius: 4px 0 0 4px;
-  }
 }

src/app/organisms/room/PeopleDrawer.scss

@@ -1,38 +1,23 @@
-.people-drawer-flexBox {
+@use '../../partials/flex';
-  display: flex;
+@use '../../partials/dir';
-  flex-direction: column;
-}
-.people-drawer-flexItem {
-  flex: 1;
-  min-height: 0;
-  min-width: 0;
-}
-
 
 .people-drawer {
-  @extend .people-drawer-flexBox;
+  @extend .cp-fx__column;
   width: var(--people-drawer-width);
   background-color: var(--bg-surface-low);
-  border-left: 1px solid var(--bg-surface-border);
+  @include dir.side(border, 1px solid var(--bg-surface-border), none);
-
-  [dir=rtl] & {
-    border: {
-      left: none;
-      right: 1px solid var(--bg-surface-hover);
-    }
-  }
 
   &__member-count {
     color: var(--tc-surface-low);
   }
 
   &__content-wrapper {
-    @extend .people-drawer-flexItem;
+    @extend .cp-fx__item-one;
-    @extend .people-drawer-flexBox;
+    @extend .cp-fx__column;
   }
 
   &__scrollable {
-    @extend .people-drawer-flexItem;
+    @extend .cp-fx__item-one;
   }
 
   &__noresult {
@@ -58,18 +43,12 @@
         z-index: 99;
       }
       & > .ic-raw {
-        left: var(--sp-tight);
+        @include dir.prop(left, var(--sp-tight), unset);
-        [dir=rtl] & {
+        @include dir.prop(left, unset, var(--sp-tight));
-          right: var(--sp-tight);
-          left: unset;
-        }
       }
       & > .ic-btn {
-        right: 2px;
+        @include dir.prop(right, 2px, unset);
-        [dir=rtl] & {
+        @include dir.prop(left, unset, 2px);
-          left: 2px;
-          right: unset;
-        }
       }
       & .input-container {
         flex: 1;
@@ -89,11 +68,7 @@
   & .segmented-controls {
     display: flex;
     margin-bottom: var(--sp-extra-tight);
-    margin-left: var(--sp-extra-tight);
+    @include dir.side(margin, var(--sp-extra-tight), 0);
-    [dir=rtl] & {
-      margin-left: unset;
-      margin-right: var(--sp-extra-tight);
-    }
   }
   & .segment-btn {
     flex: 1;
@@ -101,16 +76,8 @@
   }
 }
 .people-drawer__load-more {
-  padding: var(--sp-normal);
+  padding: var(--sp-normal) 0 0;
-  padding: {
+  @include dir.side(padding, var(--sp-normal), var(--sp-extra-tight));
-    bottom: 0;
-    right: var(--sp-extra-tight);
-  }
-
-  [dir=rtl] & {
-    padding-right: var(--sp-normal);
-    padding-left: var(--sp-extra-tight);
-  }
 
   & .btn-surface {
     width: 100%;

src/app/organisms/room/RoomView.scss

@@ -1,24 +1,16 @@
-.room-view-flexBox {
+@use '../../partials/flex';
-  display: flex;
-  flex-direction: column;
-}
-.room-view-flexItem {
-  flex: 1;
-  min-height: 0;
-  min-width: 0;
-}
 
 .room-view {
-  @extend .room-view-flexItem;
+  @extend .cp-fx__item-one;
-  @extend .room-view-flexBox;
+  @extend .cp-fx__column;
 
   &__content-wrapper {
-    @extend .room-view-flexItem;
+    @extend .cp-fx__item-one;
-    @extend .room-view-flexBox;
+    @extend .cp-fx__column;
   }
 
   &__scrollable {
-    @extend .room-view-flexItem;
+    @extend .cp-fx__item-one;
     position: relative;
   }
   

src/app/organisms/room/RoomViewCmdBar.scss

@@ -1,8 +1,6 @@
-.overflow-ellipsis {
+@use '../../partials/flex';
-  overflow: hidden;
+@use '../../partials/text';
-  white-space: nowrap;
+@use '../../partials/dir';
-  text-overflow: ellipsis;
-}
 
 .cmd-bar {
   --cmd-bar-height: 28px;
@@ -12,18 +10,15 @@
   &__info {
     display: flex;
     width: 40px;
-    margin: 0 10px 0 14px;
+    @include dir.side(margin, 10px, 14px);
-    [dir=rtl] & {
+
-      margin: 0 14px 0 10px;
-    }
     & > * {
       margin: auto;
     }
   }
 
   &__content {
-    min-width: 0;
+    @extend .cp-fx__item-one;
-    flex: 1;
     display: flex;
 
     &-suggestions {
@@ -33,7 +28,7 @@
       align-items: center;
 
       & > .text {
-        @extend .overflow-ellipsis;
+        @extend .cp-txt__ellipsis;
       }
     }
   }
@@ -44,7 +39,7 @@
 
   display: inline-flex;
   align-items: center;
-  margin-right: var(--sp-extra-tight);
+  @include dir.side(margin, 0, var(--sp-extra-tight));
   padding: 0 var(--sp-extra-tight);
   height: 100%;
   border-radius: var(--bo-radius) var(--bo-radius) 0 0;
@@ -53,7 +48,7 @@
   & .emoji {
     width: 20px;
     height: 20px;
-    margin-right: var(--sp-ultra-tight);
+    @include dir.side(margin, 0, var(--sp-ultra-tight));
   }
 
   &:hover {
@@ -65,13 +60,4 @@
     border-bottom: 2px solid transparent;
     outline: none;
   }
-  
-  [dir=rtl] & {
-    margin-right: 0;
-    margin-left: var(--sp-extra-tight);
-    & .emoji {
-      margin-right: 0;
-      margin-left: var(--sp-ultra-tight);
-    }
-  }
 }

src/app/organisms/room/RoomViewContent.scss

@@ -1,3 +1,5 @@
+@use '../../partials/dir';
+
 .room-view__content {
   min-height: 100%;
   display: flex;
@@ -13,26 +15,16 @@
     & .message,
     & .ph-msg,
     & .timeline-change {
-      border-radius: 0 var(--bo-radius) var(--bo-radius) 0;
+      @include dir.prop(border-radius,
-      [dir=rtl] & {
+      0 var(--bo-radius) var(--bo-radius) 0,
-        border-radius: var(--bo-radius) 0 0 var(--bo-radius);
+      var(--bo-radius) 0 0 var(--bo-radius),
-      }
+      );
     }
     
     & > .divider {
-      margin: var(--sp-extra-tight) var(--sp-normal);
+      margin: var(--sp-extra-tight);
-      margin-right: var(--sp-extra-tight);
+      @include dir.side(margin, var(--sp-normal), var(--sp-extra-tight));
-      padding-left: calc(var(--av-small) + var(--sp-tight));
+      @include dir.side(padding, calc(var(--av-small) + var(--sp-tight)), 0);
-      [dir=rtl] & {
-        padding: {
-          left: 0;
-          right: calc(var(--av-small) + var(--sp-tight));
-        }
-        margin: {
-          left: var(--sp-extra-tight);
-          right: var(--sp-normal);
-        }
-      }
     }
   }
 }

src/app/organisms/room/RoomViewFloating.scss

@@ -1,3 +1,7 @@
+ @use '../../partials/flex';
+@use '../../partials/text';
+@use '../../partials/dir';
+
 .room-view {
   &__typing {
     display: flex;
@@ -10,12 +14,9 @@
     }
 
     & .text {
-      flex: 1;
+      @extend .cp-txt__ellipsis;
-      min-width: 0;
+      @extend .cp-fx__item-one;
 
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
       margin: 0 var(--sp-tight);
     }
 
@@ -72,17 +73,14 @@
 
   &__STB {
     position: absolute;
-    right: var(--sp-normal);
+    @include dir.prop(right, var(--sp-normal), unset);
+    @include dir.prop(left, unset, var(--sp-normal));
     bottom: 0;
     border-radius: var(--bo-radius);
     box-shadow: var(--bs-surface-border);
     background-color: var(--bg-surface-low);
     transition: transform 200ms ease-in-out;
     transform: translateY(100%) scale(0);
-    [dir=rtl] & {
-      right: unset;
-      left: var(--sp-normal);
-    }
 
     &--open {
       transform: translateY(-28px) scale(1);
@@ -110,8 +108,7 @@
       border-radius: 0;
     }
     & .btn-primary {
-      flex: 1;
+      @extend .cp-fx__item-one;
-      min-width: 0;
       border-radius: 0;
       padding: 0 var(--sp-tight);
       &:focus {

src/app/organisms/room/RoomViewInput.scss

@@ -1,3 +1,5 @@
+@use '../../partials/dir';
+
 .room-input {
   padding: var(--sp-extra-tight) calc(var(--sp-normal) - 2px);
   display: flex;
@@ -30,11 +32,7 @@
       flex: 1;
 
       &:first-child {
-        margin-left: var(--sp-tight);
+        @include dir.side(margin, var(--sp-tight), 0);
-        [dir=rtl] & {
-          margin-left: 0;
-          margin-right: var(--sp-tight);
-        }
       }
     }
   }
@@ -65,13 +63,9 @@
   --side-spacing: calc(var(--sp-normal) + var(--av-small) + var(--sp-tight));
   display: flex;
   align-items: center;
-  margin-left: var(--side-spacing);
+  @include dir.side(margin, var(--side-spacing), 0);
   margin-top: var(--sp-extra-tight);
   line-height: 0;
-  [dir=rtl] & {
-    margin-left: 0;
-    margin-right: var(--side-spacing);
-  }
 
   &__preview > img {
     max-height: 40px;
@@ -107,10 +101,7 @@
   border-bottom: 1px solid var(--bg-surface-border);
 
   & .ic-btn-surface {
-    margin: 0 13px 0 17px;
+    @include dir.side(margin, 17px, 13px);
     border-radius: 0;
-    [dir=rtl] & {
-      margin: 0 17px 0 13px;
-    }
   }
 }

src/app/organisms/search/Search.scss

@@ -1,3 +1,5 @@
+@use '../../partials/dir';
+
 .search-dialog__model {
   --modal-height: 380px;
   height: 100%;
@@ -17,20 +19,16 @@
 
     & > .ic-raw {
       position: absolute;
-      left: calc(var(--sp-normal) + var(--sp-tight));
+      --away: calc(var(--sp-normal) + var(--sp-tight));
-      [dir=rtl] & {
+      @include dir.prop(left, var(--away), unset);
-        left: unset;
+      @include dir.prop(right, unset, var(--away));
-        right: calc(var(--sp-normal) + var(--sp-tight));
-      }
     }
     & > .ic-btn {
       border-radius: calc(var(--bo-radius) / 2);
       position: absolute;
-      right: calc(var(--sp-normal) + var(--sp-extra-tight));
+      --away: calc(var(--sp-normal) + var(--sp-extra-tight));
-      [dir=rtl] & {
+      @include dir.prop(right, var(--away), unset);
-        right: unset;
+      @include dir.prop(left, unset, var(--away));
-        left: calc(var(--sp-normal) + var(--sp-extra-tight));
-      }
     }
     & .input-container {
       min-width: 0;
@@ -69,13 +67,8 @@
   }
 
   &__content {
-    padding: var(--sp-extra-tight) var(--sp-normal);
+    padding: var(--sp-extra-tight);
-    padding-right: var(--sp-extra-tight);
+    @include dir.side(padding,  var(--sp-normal), var(--sp-extra-tight));
-    
-    [dir=rtl] & {
-      padding-left: var(--sp-extra-tight);
-      padding-right: var(--sp-normal);
-    }
   }
 
   &__footer {

src/app/organisms/settings/Settings.scss

@@ -1,3 +1,5 @@
+@use '../../partials/dir';
+
 .settings-window {
   & .pw__content-container {
     min-height: 100%;
@@ -5,12 +7,7 @@
 }
 
 .settings-content {
-  margin: 0 var(--sp-normal);
+  @include dir.side(margin, var(--sp-normal), var(--sp-extra-tight));
-  margin-right: var(--sp-extra-tight);
-  [dir=rtl] & {
-    margin-left: var(--sp-extra-tight);
-    margin-right: var(--sp-normal);
-  }
 
   & .setting-tile {
     margin-top: var(--sp-normal);

src/app/organisms/welcome/Welcome.jsx

@@ -8,7 +8,7 @@ import CinnySvg from '../../../../public/res/svg/cinny.svg';
 function Welcome() {
   return (
     <div className="app-welcome flex--center">
-      <div className="flex-v--center">
+      <div>
         <img className="app-welcome__logo noselect" src={CinnySvg} alt="Cinny logo" />
         <Text className="app-welcome__heading" variant="h1" weight="medium" primary>Welcome to Cinny</Text>
         <Text className="app-welcome__subheading" variant="s1">Yet another matrix client</Text>

src/app/organisms/welcome/Welcome.scss

@@ -1,10 +1,12 @@
+@use '../../partials/flex';
+
 .app-welcome {
   width: 100%;
   height: 100%;
 
   & > div {
+    @extend .cp-fx__column--c-c;
     max-width: 600px;
-    align-items: center;
   }
   &__logo {
     width: 64px;

src/app/partials/_dir.scss

@@ -0,0 +1,26 @@
+/*
+* NOTICE: only use this
+* when sides are un-even
+* if they are even just use $property: 0 $spacing; 
+*/
+
+@mixin side($property, $left, $right) {
+  #{$property}: {
+    left: $left;
+    right: $right;
+  };
+  
+  [dir=rtl] & {
+    #{$property}: {
+      left: $right;
+      right: $left;
+    };
+  }
+}
+
+@mixin prop($property, $ltr, $rtl) {
+  #{$property}: $ltr;
+  [dir=rtl] & {
+    #{$property}: $rtl;
+  }
+}

src/app/partials/_flex.scss

@@ -0,0 +1,58 @@
+._s-c {
+  justify-content: flex-start;
+  align-items: center;
+}
+._c-c {
+  justify-content: center;
+  align-items: center;
+}
+._e-c {
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.cp-fx__row {
+  display: flex;
+  flex-direction: row;
+}
+
+.cp-fx__column {
+  display: flex;
+  flex-direction: column;
+}
+
+.cp-fx__row--s-c {
+  @extend .cp-fx__row;
+  @extend ._s-c;
+}
+
+.cp-fx__row--c-c {
+  @extend .cp-fx__row;
+  @extend ._c-c;
+}
+
+.cp-fx__row--e-c {
+  @extend .cp-fx__row;
+  @extend ._e-c;
+}
+
+.cp-fx__column--s-c {
+  @extend .cp-fx__column;
+  @extend ._s-c;
+}
+
+.cp-fx__column--c-c {
+  @extend .cp-fx__column;
+  @extend ._c-c;
+}
+
+.cp-fx__column--e-c {
+  @extend .cp-fx__column;
+  @extend ._e-c;
+}
+
+.cp-fx__item-one {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}

src/app/partials/_text.scss

@@ -0,0 +1,5 @@
+.cp-txt__ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

src/app/templates/auth/Auth.jsx

@@ -533,7 +533,7 @@ function Auth() {
         <div className="auth__wrapper">
           {loginToken && <LoadingScreen message="Redirecting..." />}
           {!loginToken && (
-            <div className="auth-card flex-v">
+            <div className="auth-card">
               <Header>
                 <Avatar size="extra-small" imageSrc={CinnySvg} />
                 <TitleWrapper>

src/app/templates/auth/Auth.scss

@@ -1,3 +1,6 @@
+@use '../../partials/flex';
+@use '../../partials/dir';
+
 .auth__base {
   --pattern-size: 48px;
   min-height: 100%;
@@ -60,25 +63,22 @@
   & > .input-container {
     flex: 1;
     & .input {
-      border-right: unset;
-      border-radius: var(--bo-radius) 0 0 var(--bo-radius);
       background-color: var(--bg-surface);
+      @include dir.prop(border-right-width, 0, 1px);
+      @include dir.prop(border-left-width, 1px, 0 );
+      @include dir.prop(border-radius,
+        var(--bo-radius) 0 0 var(--bo-radius),
+        0 var(--bo-radius) var(--bo-radius) 0,
+      );
     }
   }
   & .ic-btn {
     height: 46px;
     border: 1px solid var(--bg-surface-border);
-    border-radius: 0 var(--bo-radius) var(--bo-radius) 0;
+    @include dir.prop(border-radius,
-  }
+      0 var(--bo-radius) var(--bo-radius) 0,
-  [dir=rtl] & {
+      var(--bo-radius) 0 0 var(--bo-radius),
-    & .input {
+    );
-      border-radius: 0 var(--bo-radius) var(--bo-radius) 0;
-      border-radius: 1px;
-      border-left: unset;
-    }
-    .ic-btn {
-      border-radius: var(--bo-radius) 0 0 var(--bo-radius);
-    }
   }
 
   &__status {
@@ -144,10 +144,7 @@
 }
 
 .process-wrapper {
-  display: flex;
+  @extend .cp-fx__column--c-c;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
 
   min-height: 100%;
   width: 100%;

src/index.scss

@@ -442,45 +442,8 @@ textarea {
                                   supported by Chrome, Edge, Opera and Firefox */
 }
 
-.flex {
+.flex--center {
   display: flex;
-}
-.flex-v {
-  display: flex;
-  flex-direction: column;
-}
-
-.flex--center,
-.flex--spaceBetween-center,
-.flex--end-center {
-  @extend .flex;
   justify-content: center;
   align-items: center;
 }
-.flex--spaceBetween,
-.flex--spaceBetween-center {
-  @extend .flex;
-  justify-content: space-between;
-}
-.flex--end,
-.flex--end-center {
-  @extend .flex;
-  justify-content: flex-end;
-}
-.inline-flex--center {
-  @extend .flex--center;
-  display: inline-flex
-}
-.flex--center-baseline {
-  @extend .flex--center;
-  align-items: baseline;
-}
-
-.flex-v--center {
-  @extend .flex-v;
-  justify-content: center;
-}
-.flex-v--end {
-  @extend .flex-v;
-  justify-content: flex-end;
-}