@zohodesk/dot 1.9.10 → 1.9.11

package/lib/form/fields/Fields.module.css

@@ -10,15 +10,15 @@
 }
 
 .fieldMargin_large {
-  margin-top: var(--zd_size10) ;
+  margin-block-start: var(--zd_size10) ;
 }
 
 .fieldMargin_medium {
-  margin-top: var(--zd_size5) ;
+  margin-block-start: var(--zd_size5) ;
 }
 
 .fieldMargin_small {
-  margin-top: 0 ;
+  margin-block-start: 0 ;
 }
 
 .radioContainer,
@@ -48,18 +48,11 @@
 }
 
 .checkboxText {
+  padding-inline-start: var(--zd_size6) ;
   composes: wbreak from '~@zohodesk/components/es/common/common.module.css';
   line-height: normal;
 }
 
-[dir=ltr] .checkboxText {
-  padding-left: var(--zd_size6) ;
-}
-
-[dir=rtl] .checkboxText {
-  padding-right: var(--zd_size6) ;
-}
-
 .cbTextPointer {
   cursor: pointer;
 }
@@ -74,12 +67,9 @@
   --label_cursor: not-allowed;
 }
 
-[dir=ltr] .radio {
-  margin: var(--zd_size5) var(--zd_size32) var(--zd_size5) 0 ;
-}
-
-[dir=rtl] .radio {
-  margin: var(--zd_size5) 0 var(--zd_size5) var(--zd_size32) ;
+.radio {
+  margin-block: var(--zd_size5) ;
+  margin-inline: 0 var(--zd_size32) ;
 }
 
 .radio,
@@ -99,12 +89,14 @@
 }
 
 .radioBox.primaryTextOnly {
+  padding-inline: var(--zd_size10) ;
+  padding-block:0 ;
   height: var(--zd_size36) ;
-  padding: 0 var(--zd_size10) ;
 }
 
 .radioBox.withSecondaryText {
-  padding: var(--zd_size18) var(--zd_size16) ;
+  padding-block: var(--zd_size18) ;
+  padding-inline:var(--zd_size16) ;
 }
 
 .hoverableRadioBox:hover, .radioBoxActive {
@@ -115,12 +107,8 @@
   background-color: var(--zdt_radiofield_box_active_bg)
 }
 
-[dir=ltr] .duration {
-  margin-right: var(--zd_size15) ;
-}
-
-[dir=rtl] .duration {
-  margin-left: var(--zd_size15) ;
+.duration {
+  margin-inline-end: var(--zd_size15) ;
 }
 
 .durationWidth {
@@ -139,8 +127,9 @@
 
 .phoneIcon {
   color: var(--zdt_fields_phoneicon_icon);
+  margin-block: var(--zd_size15) 0 ;
+  margin-inline:var(--zd_size10) ;
   display: inline-block;
-  margin: var(--zd_size15) var(--zd_size10) 0 var(--zd_size10) ;
   cursor: pointer;
 }
 
@@ -164,17 +153,10 @@
 .lockIcon,
 .infoIcon {
   color: var(--zdt_fields_lockicon_icon);
+  margin-inline-start: var(--zd_size5) ;
   composes: dInflex from '~@zohodesk/components/es/common/common.module.css';
 }
 
-[dir=ltr] .lockIcon, [dir=ltr] .infoIcon {
-  margin-left: var(--zd_size5) ;
-}
-
-[dir=rtl] .lockIcon, [dir=rtl] .infoIcon {
-  margin-right: var(--zd_size5) ;
-}
-
 /* .infoIcon {
   opacity: 0;
   visibility: hidden;
@@ -192,32 +174,18 @@
 
 .timeFormat {
   font-size: var(--zd_font_size11) ;
+  margin-inline-start: var(--zd_size4) ;
   color: var(--zdt_fields_lockicon_icon);
 }
 
-[dir=ltr] .timeFormat {
-  margin-left: var(--zd_size4) ;
-}
-
-[dir=rtl] .timeFormat {
-  margin-right: var(--zd_size4) ;
-}
-
 .newTab {
+  margin-inline-start: var(--zd_size6) ;
   color: var(--zdt_fields_lockicon_icon);
   font-size: 0 ;
   display: none;
   cursor: pointer;
 }
 
-[dir=ltr] .newTab {
-  margin-left: var(--zd_size6) ;
-}
-
-[dir=rtl] .newTab {
-  margin-right: var(--zd_size6) ;
-}
-
 .newTab:hover {
   color: var(--zdt_fields_phoneicon_icon);
 }
@@ -234,37 +202,24 @@
 
 .labelMandatory:after {
   content: '*';
+  padding-inline-start: var(--zd_size2) ;
   color: var(--zdt_fields_lockicon_hover_icon);
 }
 
-[dir=ltr] .labelMandatory:after {
-  padding-left: var(--zd_size2) ;
-}
-
-[dir=rtl] .labelMandatory:after {
-  padding-right: var(--zd_size2) ;
-}
-
 .ePhiTag {
   composes: flexshrink from '~@zohodesk/components/es/common/common.module.css';
   color: var(--zdt_fields_phitag_text);
   font-size: var(--zd_font_size12) ;
+  padding-inline: var(--zd_size5) ;
+  padding-block:0 ;
+  margin-inline-start: var(--zd_size8) ;
   height: var(--zd_size18) ;
   line-height: 1.5;
   background-color: var(--zdt_fields_phitag_bg);
   border: 1px solid var(--zdt_fields_phitag_border);
-  padding: 0 var(--zd_size5) ;
   border-radius: 3px;
 }
 
-[dir=ltr] .ePhiTag {
-  margin-left: var(--zd_size8) ;
-}
-
-[dir=rtl] .ePhiTag {
-  margin-right: var(--zd_size8) ;
-}
-
 .hasChildren {
   position: relative;
 }
@@ -288,4 +243,4 @@
 
 .lineClampPickListItem {
   --line-clamp: var(--picklist-field-line-clamp, 3);
-}
+}

package/lib/form/fields/TagsMultiSelect/TagsMultiSelect.module.css

@@ -4,23 +4,22 @@
 .tag {
   max-width: 100% ;
 }
-[dir=ltr] .moreLess, [dir=ltr] .tag {
-  margin: 0 var(--zd_size6) var(--zd_size6) 0 ;
-}
-[dir=rtl] .moreLess, [dir=rtl] .tag {
-  margin: 0 0 var(--zd_size6) var(--zd_size6) ;
+.moreLess,
+.tag {
+  margin-block:0 var(--zd_size6) ;
+  margin-inline:0 var(--zd_size6) ;
 }
 .input {
   height: var(--zd_size20) ;
+  margin-block-end: var(--zd_size4) ;
   width: 100% ;
-  margin-bottom: var(--zd_size4) ;
 }
 .viewpopNew {
   max-height: var(--zd_size250) ;
 }
 .tagDiv {
+  margin-block-start: var(--zd_size5) ;
   max-height: var(--zd_size160) ;
-  margin-top: var(--zd_size5) ;
 }
 .hasBorder {
   transition: border var(--zd_transition2) linear 0s;
@@ -82,10 +81,11 @@
   composes: dotted from '~@zohodesk/components/es/common/common.module.css';
 }
 .dropdown {
-  margin-top: var(--zd_size1) ;
+  margin-block-start: var(--zd_size1) ;
 }
 .custmSpan {
   height: var(--zd_size25) ;
+  padding-inline-end: var(--zd_size28) ;
   display: inline-block;
   vertical-align: middle;
   opacity: 0;
@@ -94,12 +94,6 @@
   max-width: 100% ;
   visibility: hidden;
 }
-[dir=ltr] .custmSpan {
-  padding-right: var(--zd_size28) ;
-}
-[dir=rtl] .custmSpan {
-  padding-left: var(--zd_size28) ;
-}
 .custmInp {
   position: absolute;
   top: 0 ;
@@ -116,5 +110,6 @@
 }
 
 .searchEmpty{
-  padding:0 var(--zd_size10) 
-}
+  padding-inline:var(--zd_size10) ;
+  padding-block:0 ;
+}

package/lib/form/fields/TagsMultiSelectField/TagsMultiSelectField.module.css

@@ -1,9 +1,6 @@
 .count {
   color: var(--zdt_tagsmultiselectField_count_text);
   font-size: var(--zd_font_size12) ;
+  margin-inline-start: var(--zd_size4) ;
   word-break: break-word;
-}[dir=ltr] .count {
-  margin-left: var(--zd_size4) ;
-}[dir=rtl] .count {
-  margin-right: var(--zd_size4) ;
 }

package/lib/form/fields/TextEditor/TextEditor.module.css

@@ -166,21 +166,14 @@
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  margin-inline-end: 0 ;
 }
 
 .large :global .KB_Editor_menus .KB_Editor_MultiTools>li, .default :global .KB_Editor_menus .KB_Editor_MultiTools>li {
-  padding: 0 ;
+  padding:0 ;
   float: unset;
 }
 
-[dir=ltr] .large :global .KB_Editor_menus .KB_Editor_MultiTools>li, [dir=ltr] .default :global .KB_Editor_menus .KB_Editor_MultiTools>li {
-  margin-right: 0 ;
-}
-
-[dir=rtl] .large :global .KB_Editor_menus .KB_Editor_MultiTools>li, [dir=rtl] .default :global .KB_Editor_menus .KB_Editor_MultiTools>li {
-  margin-left: 0 ;
-}
-
 .large :global .KB_Editor_menus .KB_Editor_MultiTools li span,
 .default :global .KB_Editor_menus .KB_Editor_MultiTools li span {
   line-height: 0;
@@ -205,13 +198,11 @@
 .large :global .KB_Editor_MultiTools .KBEditortools-Block-down-arrow svg,
 .default :global .KB_Editor_MultiTools .KBEditortools-Block-down-arrow svg {
   height: var(--zd_size10) ;
+  padding-block: var(--zd_size7) ;
+  padding-inline: var(--zd_size5) ;
   width: var(--zd_size17) ;
 }
 
-.large :global .KB_Editor_MultiTools .KBEditortools-Block-down-arrow svg, .default :global .KB_Editor_MultiTools .KBEditortools-Block-down-arrow svg {
-  padding: var(--zd_size7) var(--zd_size5) ;
-}
-
 .large :global .KB_Editor_menus .KB_Editor_MultiTools .KB_Editor_Bdr_div,
 .large :global .KB_Editor_MultiTools .KB_Editor_Bdr_div.Insert_Type,
 .large :global .KB_Editor_menus .KB_Editor_MultiTools .KB_Editor_PlainText,
@@ -221,10 +212,8 @@
 .default :global .KB_Editor_menus .KB_Editor_MultiTools .KB_Editor_PlainText,
 .default :global .KB_Editor_menus .KB_Editor_MultiTools .KB_Editor_Richtext {
   line-height: unset;
-}
-
-.large :global .KB_Editor_menus .KB_Editor_MultiTools .KB_Editor_Bdr_div, .large :global .KB_Editor_MultiTools .KB_Editor_Bdr_div.Insert_Type, .large :global .KB_Editor_menus .KB_Editor_MultiTools .KB_Editor_PlainText, .large :global .KB_Editor_menus .KB_Editor_MultiTools .KB_Editor_Richtext, .default :global .KB_Editor_menus .KB_Editor_MultiTools .KB_Editor_Bdr_div, .default :global .KB_Editor_MultiTools .KB_Editor_Bdr_div.Insert_Type, .default :global .KB_Editor_menus .KB_Editor_MultiTools .KB_Editor_PlainText, .default :global .KB_Editor_menus .KB_Editor_MultiTools .KB_Editor_Richtext {
-  padding: var(--zd_size3) var(--zd_size6) ;
+  padding-block:var(--zd_size3) ;
+  padding-inline: var(--zd_size6) ;
 }
 
 .large :global .KB_Editor_menus .ze_spell,
@@ -241,12 +230,9 @@
   left: 0 ;
 }
 
-[dir=ltr] .large :global .KB_Editor_menus .KB_Editor_MultiTools>li, [dir=ltr] .default :global .KB_Editor_menus .KB_Editor_MultiTools>li {
-  margin-right: var(--zd_size2) ;
-}
-
-[dir=rtl] .large :global .KB_Editor_menus .KB_Editor_MultiTools>li, [dir=rtl] .default :global .KB_Editor_menus .KB_Editor_MultiTools>li {
-  margin-left: var(--zd_size2) ;
+.large :global .KB_Editor_menus .KB_Editor_MultiTools>li,
+.default :global .KB_Editor_menus .KB_Editor_MultiTools>li {
+  margin-inline-end: var(--zd_size2) ;
 }
 
 /* xlarge type editor - reply area, blue print cases - full height hover style */
@@ -298,18 +284,11 @@
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  margin-inline-end: 0 ;
   padding: 0 ;
   float: unset;
 }
 
-[dir=ltr] .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools>li {
-  margin-right: 0 ;
-}
-
-[dir=rtl] .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools>li {
-  margin-left: 0 ;
-}
-
 .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools li span {
   line-height: 0;
 }
@@ -321,7 +300,7 @@
 }
 
 .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools .KB_Editor_Bdr_div, .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools .KB_Editor_PlainText, .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools .KB_Editor_Richtext {
-  padding: var(--zd_size6) ;
+  padding:var(--zd_size6) ;
 }
 
 .xlarge :global .KB_Editor_menus>ul>li>span>svg {
@@ -336,8 +315,9 @@
 
 .xlarge :global .KB_Editor_MultiTools .KBEditortools-Block-down-arrow svg {
   height: var(--zd_size9) ;
+  padding-block: var(--zd_size7) ;
+  padding-inline: var(--zd_size5) ;
   width: var(--zd_size17) ;
-  padding: var(--zd_size7) var(--zd_size5) ;
 }
 
 .xlarge :global .KB_Editor_menus .ze_spell {
@@ -356,14 +336,16 @@
 
 .xlarge :global .KB_Editor_menus>ul>li>span.SnippetIcon svg {
   width: var(--zd_size17) ;
+  padding-block:0 ;
+  padding-inline: var(--zd_size7) ;
   height: var(--zd_size21) ;
-  padding: 0 var(--zd_size7) ;
 }
 
 .xlarge :global .KB_Editor_menus>ul>li>span.TemplateIcon svg {
   width: var(--zd_size16) ;
+  padding-block:0 ;
+  padding-inline: var(--zd_size9) ;
   height: var(--zd_size16) ;
-  padding: 0 var(--zd_size9) ;
 }
 
 .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools .SnippetIcon {
@@ -390,7 +372,8 @@
 
 .xlarge :global .KB_Editor_MultiTools li .Kbeditor_more_icon {
   top: initial ;
-  padding: 0 var(--zd_size7) ;
+  padding-inline: var(--zd_size7) ;
+  padding-block:0 ;
 }
 
 .xlarge :global .KB_Editor_MultiTools li .Kbeditor_more_icon>svg {
@@ -405,23 +388,18 @@
 .xlarge :global .KB_Editor_menus>ul>li>span:not(.KB_Editor_Bdr_div):not(.KBEditortools-Block-down-arrow):not(.Kbeditor_more_icon):not(.SnippetIcon):not(.TemplateIcon)>svg {
   width: var(--zd_size21) ;
   height: var(--zd_size21) ;
-  padding: 0 var(--zd_size4) ;
-}
-
-[dir=ltr] .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools .KB_Editor_PlainText {
-  padding: var(--zd_size8) var(--zd_size8) var(--zd_size7) var(--zd_size4) ;
-}
-
-[dir=rtl] .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools .KB_Editor_PlainText {
-  padding: var(--zd_size8) var(--zd_size4) var(--zd_size7) var(--zd_size8) ;
+  padding-inline: var(--zd_size4) ;
+  padding-block:0 ;
 }
 
-[dir=ltr] .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools .KB_Editor_Richtext {
-  padding: var(--zd_size8) var(--zd_size4) var(--zd_size7) var(--zd_size8) ;
+.xlarge :global .KB_Editor_menus .KB_Editor_MultiTools .KB_Editor_PlainText {
+  padding-inline: var(--zd_size4) var(--zd_size8) ;
+  padding-block:var(--zd_size8) var(--zd_size7) ;
 }
 
-[dir=rtl] .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools .KB_Editor_Richtext {
-  padding: var(--zd_size8) var(--zd_size8) var(--zd_size7) var(--zd_size4) ;
+.xlarge :global .KB_Editor_menus .KB_Editor_MultiTools .KB_Editor_Richtext {
+  padding-inline: var(--zd_size8) var(--zd_size4) ;
+  padding-block:var(--zd_size8) var(--zd_size7) ;
 }
 
 /* medium type editor - snippet, bug tracker cases */
@@ -469,11 +447,12 @@
 }
 
 .medium :global .KB_Editor_menus .KB_Editor_MultiTools>li {
+  padding-inline: var(--zd_size1) ;
+  padding-block:var(--zd_size3) ;
   height: unset;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  padding: var(--zd_size3) var(--zd_size1) ;
   float: unset;
 }
 
@@ -489,20 +468,15 @@
 .medium :global .KB_Editor_menus>ul>li>span.KB_Editor_Bdr_div>svg {
   width: var(--zd_size8) ;
   height: var(--zd_size8) ;
-}
-
-[dir=ltr] .medium :global .KB_Editor_menus>ul>li>span.KB_Editor_Bdr_div>svg {
-  padding: 0 0 0 var(--zd_size2) ;
-}
-
-[dir=rtl] .medium :global .KB_Editor_menus>ul>li>span.KB_Editor_Bdr_div>svg {
-  padding: 0 var(--zd_size2) 0 0 ;
+  padding-inline: var(--zd_size2) 0 ;
+  padding-block:0 ;
 }
 
 .medium :global .KB_Editor_MultiTools .KBEditortools-Block-down-arrow svg {
   height: var(--zd_size10) ;
   width: var(--zd_size17) ;
-  padding: var(--zd_size7) var(--zd_size2) ;
+  padding-inline: var(--zd_size2) ;
+  padding-block:var(--zd_size7) ;
 }
 
 .medium :global .KB_Editor_MultiTools .KB_Editor_Bdr_div,
@@ -529,7 +503,8 @@
 
 .medium :global .KB_Editor_MultiTools li .Kbeditor_more_icon {
   top: initial ;
-  padding: 0 var(--zd_size3) ;
+  padding-inline: var(--zd_size3) ;
+  padding-block:0 ;
 }
 
 .medium :global .KB_Editor_MultiTools li .Kbeditor_more_icon>svg {
@@ -616,10 +591,8 @@
 .mini :global .KB_Editor_menus>ul>li>span>svg {
   width: var(--zd_size25) ;
   height: var(--zd_size25) ;
-}
-
-.small :global .KB_Editor_menus>ul>li>span>svg, .mini :global .KB_Editor_menus>ul>li>span>svg {
-  padding: 0 var(--zd_size6) ;
+  padding-inline: var(--zd_size6) ;
+  padding-block:0 ;
 }
 
 .mini :global .KB_Editor_menus:after {
@@ -719,7 +692,8 @@
 :global .KB_Editor textarea.ze_area {
   font-weight: var(--zd-fw-normal) !important;
   font-size: var(--zd_font_size14)  !important;
-  padding: var(--zd_size15) var(--zd_size20)  !important;
+  padding-block: var(--zd_size15)  !important;
+  padding-inline:var(--zd_size20)  !important;
 }
 
 .textEditor :global .KB_Editor li[editor-command='styletext'] {
@@ -796,4 +770,4 @@
 
 [dir=rtl] .editorHide :global .KB_Editor {
   right: 0 ;
-}
+}

package/lib/form/fields/TextEditorWrapper/TextEditorWrapper.module.css

@@ -21,12 +21,7 @@
   position: relative;
   z-index: 1;
   /*  Variable:Ignore  */
-}
-[dir=ltr] .textEditor {
-  padding-right: var(--zd_size1) ;
-}
-[dir=rtl] .textEditor {
-  padding-left: var(--zd_size1) ;
+  padding-inline-end: 1px;
 }
 @keyframes fadeIn {
   0% {
@@ -35,4 +30,4 @@
   100% {
     opacity: 1;
   }
-}
+}

package/lib/form/fields/ValidationMessage/ValidationMessage.module.css

@@ -5,16 +5,17 @@
   display: inline;
 }
 .icon{
+  margin-block:0 ;
+  margin-inline: var(--zd_size5) ;
   /*css:theme-validation:ignore*/
   color:var(--label_text_color);
   display: inline-block;
-  margin: 0 var(--zd_size5) ;
 }
 .primary {
   position: absolute;
   top: 100% ;
+  margin-block-start: var(--zd_size5) ;
   composes:basic;
-  margin-top: var(--zd_size5) ;
 }
 [dir=ltr] .primary {
   left: 0 ;
@@ -23,6 +24,6 @@
   right: 0 ;
 }
 .secondary {
+  margin-block-start: var(--zd_size5) ;
   composes:basic;
-  margin-top: var(--zd_size5) ;
 }

package/lib/layout/SetupDetailLayout/SetupDetailLayout.module.css

@@ -12,17 +12,12 @@
   font-size: var(--zd_font_size12) ;
   display: inline-block;
   color: var(--zdt_setupdetail_backicon);
+  margin-inline-start: var(--zd_size19) ;
   line-height: 2.5;
   text-align: center;
   border-radius: 50%;
   cursor: pointer;
 }
-[dir=ltr] .backIcon {
-  margin-left: var(--zd_size19) ;
-}
-[dir=rtl] .backIcon {
-  margin-right: var(--zd_size19) ;
-}
 
 .backIcon:hover {
   background-color: var(--zdt_setupdetail_hover_backicon_bg);
@@ -30,16 +25,11 @@
 .title {
   font-size: var(--zd_font_size16) ;
   line-height: 1;
+  padding-inline-end: var(--zd_size12) ;
   font-weight: var(--zd-fw-semibold);
   color: var(--zdt_setupdetail_backicon);
   composes: ftsmooth from '~@zohodesk/components/es/common/common.module.css';
 }
-[dir=ltr] .title {
-  padding-right: var(--zd_size12) ;
-}
-[dir=rtl] .title {
-  padding-left: var(--zd_size12) ;
-}
 
 .rightPanel {
   composes: justifyFend from '~@zohodesk/components/es/common/common.module.css';
@@ -47,14 +37,14 @@
 .helpInfoCont {
   position: absolute;
   z-index: 10;
+  padding-block: var(--zd_size12) 0 ;
+  padding-inline: 0 var(--zd_size15) ;
 }
 [dir=ltr] .helpInfoCont {
   right: 0 ;
-  padding: var(--zd_size12) var(--zd_size15) 0 0 ;
 }
 [dir=rtl] .helpInfoCont {
   left: 0 ;
-  padding: var(--zd_size12) 0 0 var(--zd_size15) ;
 }
 .helpInfo {
   line-height: 2.3636;
@@ -68,21 +58,16 @@
   text-align: center;
   cursor: pointer;
 }
-[dir=ltr] .mr15 {
-  margin-right: var(--zd_size15) ;
-}
-[dir=rtl] .mr15 {
-  margin-left: var(--zd_size15) ;
+.mr15 {
+  margin-inline-end: var(--zd_size15) ;
 }
 
 .content {
   z-index: 1;
 }
-[dir=ltr] .padding {
-  padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size60) ;
-}
-[dir=rtl] .padding {
-  padding: var(--zd_size10) var(--zd_size60) var(--zd_size10) var(--zd_size25) ;
+.padding {
+  padding-block: var(--zd_size10) ;
+  padding-inline: var(--zd_size60) var(--zd_size25) ;
 }
 .popup {
   z-index: 3;
@@ -110,8 +95,9 @@
 }
 
 .infoHeader {
+  padding-block: var(--zd_size10) var(--zd_size11) ;
+  padding-inline:var(--zd_size20) ;
   color: var(--zdt_setupdetail_infoheader_text);
-  padding: var(--zd_size10) var(--zd_size20) var(--zd_size11) ;
   border-bottom: 1px solid var(--zdt_setupdetail_popup_border);
   background-color: var(--zdt_setupdetail_infoheader_bg);
 }
@@ -127,20 +113,11 @@
 }
 
 .infoText {
+  margin-inline: var(--zd_size8) ;
   composes: dotted from '~@zohodesk/components/es/common/common.module.css';
   font-size: var(--zd_font_size13) ;
 }
 
-[dir=ltr] .infoText {
-  margin-left: var(--zd_size8) ;
-  margin-right: var(--zd_size8) ;
-}
-
-[dir=rtl] .infoText {
-  margin-right: var(--zd_size8) ;
-  margin-left: var(--zd_size8) ;
-}
-
 .infoClose {
   font-size: var(--zd_font_size28) ;
   color: var(--zdt_setupdetail_infoclose);
@@ -148,5 +125,6 @@
 }
 
 .infoFooter {
-  padding: var(--zd_size10) var(--zd_size20) ;
+  padding-block: var(--zd_size10) ;
+  padding-inline:var(--zd_size20) ;
 }