@transferwise/components 0.0.0-experimental-c1f5b0b → 0.0.0-experimental-fe160ab

package/build/styles/styles/less/forms/bootstrap-forms.css

@@ -1,21 +1,21 @@
 form {
-  margin-block-end: 0;
+  margin-bottom: 0;
 }
 fieldset {
   padding: 0;
   margin: 0;
   border: 0;
-  min-inline-size: 0;
+  min-width: 0;
 }
 legend {
   display: block;
-  inline-size: 100%;
+  width: 100%;
 }
 label {
   display: inline-block;
-  max-inline-size: 100%;
-  margin-block-end: 4px;
-  margin-block-end: var(--size-4);
+  max-width: 100%;
+  margin-bottom: 4px;
+  margin-bottom: var(--size-4);
 }
 label,
 .secondary {
@@ -42,9 +42,8 @@ input[type='number']::-webkit-inner-spin-button {
 }
 input[type='radio'],
 input[type='checkbox'] {
-  margin-block: 4px 0;
-  margin-inline: 0;
-  margin-block-start: 1px;
+  margin: 4px 0 0;
+  margin-top: 1px;
   line-height: normal;
 }
 input[type='file'] {
@@ -52,11 +51,11 @@ input[type='file'] {
 }
 input[type='range'] {
   display: block;
-  inline-size: 100%;
+  width: 100%;
 }
 select[multiple],
 select[size] {
-  block-size: auto;
+  height: auto;
 }
 input[type='file']:focus,
 input[type='radio']:focus,
@@ -66,7 +65,7 @@ input[type='checkbox']:focus {
 }
 output {
   display: block;
-  padding-block-start: 9px;
+  padding-top: 9px;
   font-size: 1rem;
   font-size: var(--font-size-16);
   line-height: 1.2;
@@ -76,7 +75,7 @@ output {
 }
 .form-control {
   display: block;
-  inline-size: 100%;
+  width: 100%;
   color: #37517e;
   color: var(--color-content-primary);
   background-color: #ffffff;
@@ -85,7 +84,7 @@ output {
   border: 1px solid #c9cbce;
   border: 1px solid var(--color-interactive-secondary);
   transition: border-color ease-in-out 0.15s;
-  min-block-size: var(--input-height-base);
+  min-height: var(--input-height-base);
   padding: var(--input-padding);
   border-radius: 3px;
   font-weight: 400;
@@ -97,11 +96,11 @@ output {
   background-clip: padding-box;
 }
 select.form-control {
-  min-block-size: var(--input-height-base);
+  min-height: var(--input-height-base);
 }
 textarea.form-control,
 select[multiple].form-control {
-  block-size: auto;
+  height: auto;
 }
 .form-control:not(.disabled):not(:disabled):focus {
   border-color: #0081ba;
@@ -117,7 +116,7 @@ select[multiple].form-control {
   color: var(--color-content-tertiary);
 }
 textarea.form-control {
-  block-size: 144px;
+  height: 144px;
 }
 .form-control + .text-muted,
 .form-control + .text-primary,
@@ -127,7 +126,7 @@ textarea.form-control {
 .form-control + .text-warning,
 .form-control + .text-negative,
 .form-control + .text-danger {
-  margin-block-start: 8px;
+  margin-top: 8px;
 }
 .form-control:focus {
   border-color: #0081ba;
@@ -179,10 +178,10 @@ input[type='search'] {
   }
 }
 .form-group {
-  margin-block-end: 24px;
+  margin-bottom: 24px;
 }
 .form-group label {
-  margin-block-end: 2px;
+  margin-bottom: 2px;
 }
 .form-group:focus-within .control-label,
 .form-group:focus-within > label {
@@ -190,42 +189,56 @@ input[type='search'] {
   color: var(--color-content-primary);
 }
 .row-equal-height > [class*='col-'] > .form-group {
-  inline-size: 100%;
+  width: 100%;
 }
 .radio,
 .checkbox {
   position: relative;
   display: block;
-  margin-block-start: 0;
+  margin-top: 0;
 }
 .radio label,
 .checkbox label {
-  min-block-size: var(--input-height-base);
-  margin-block-end: 0;
+  min-height: var(--input-height-base);
+  margin-bottom: 0;
   cursor: pointer;
 }
 .radio + .radio,
 .checkbox + .checkbox {
-  margin-block-start: 12px;
+  margin-top: 12px;
 }
 .radio input[type='radio'],
 .radio-inline input[type='radio'],
 .checkbox input[type='checkbox'],
 .checkbox-inline input[type='checkbox'] {
   position: absolute;
-  margin-inline-start: -20px;
-  margin-block-start: 4px \9;
+  margin-left: -20px;
+  margin-top: 4px \9;
+}
+[dir="rtl"] .radio input[type='radio'],
+[dir="rtl"] .radio-inline input[type='radio'],
+[dir="rtl"] .checkbox input[type='checkbox'],
+[dir="rtl"] .checkbox-inline input[type='checkbox'] {
+  margin-right: -20px;
+  margin-left: 0;
+  margin-left: initial;
 }
 .radio-inline,
 .checkbox-inline {
   position: relative;
   display: inline-block;
-  padding-inline-start: 20px;
-  margin-block-end: 0;
+  padding-left: 20px;
+  margin-bottom: 0;
   vertical-align: middle;
   font-weight: normal;
   cursor: pointer;
 }
+[dir="rtl"] .radio-inline,
+[dir="rtl"] .checkbox-inline {
+  padding-right: 20px;
+  padding-left: 0;
+  padding-left: initial;
+}
 .radio-inline.disabled,
 .checkbox-inline.disabled,
 fieldset[disabled] .radio-inline,
@@ -234,8 +247,14 @@ fieldset[disabled] .checkbox-inline {
 }
 .radio-inline + .radio-inline,
 .checkbox-inline + .checkbox-inline {
-  margin-block-start: 0;
-  margin-inline-start: 10px;
+  margin-top: 0;
+  margin-left: 10px;
+}
+[dir="rtl"] .radio-inline + .radio-inline,
+[dir="rtl"] .checkbox-inline + .checkbox-inline {
+  margin-right: 10px;
+  margin-left: 0;
+  margin-left: initial;
 }
 input[type='radio'][disabled],
 input[type='checkbox'][disabled],
@@ -255,9 +274,9 @@ fieldset[disabled] .checkbox label {
   cursor: not-allowed;
 }
 .form-control-static {
-  margin-block-end: 0;
-  min-block-size: calc(1.2 * 2);
-  min-block-size: calc(var(--line-height-control) * 2);
+  margin-bottom: 0;
+  min-height: calc(1.2 * 2);
+  min-height: calc(var(--line-height-control) * 2);
   color: #5d7079;
   color: var(--color-content-secondary);
   background-color: rgba(134,167,189,0.10196);
@@ -269,11 +288,23 @@ fieldset[disabled] .checkbox label {
 }
 .form-control-static.input-lg,
 .form-control-static.input-sm {
-  padding-inline-start: 0;
-  padding-inline-end: 0;
+  padding-left: 0;
+  padding-right: 0;
+}
+[dir="rtl"] .form-control-static.input-lg,
+[dir="rtl"] .form-control-static.input-sm {
+  padding-right: 0;
+  padding-left: 0;
+  padding-left: initial;
+}
+[dir="rtl"] .form-control-static.input-lg,
+[dir="rtl"] .form-control-static.input-sm {
+  padding-left: 0;
+  padding-right: 0;
+  padding-right: initial;
 }
 .input-sm {
-  min-block-size: 32px;
+  min-height: 32px;
   padding: var(--input-padding-small);
   border-radius: 3px;
   font-size: 14px;
@@ -286,15 +317,15 @@ fieldset[disabled] .checkbox label {
   font-weight: var(--font-weight-regular);
 }
 select.input-sm {
-  min-block-size: 32px;
+  min-height: 32px;
 }
 textarea.input-sm,
 select[multiple].input-sm {
-  block-size: auto;
+  height: auto;
 }
 .form-group-sm .form-control,
 .navbar .form-control {
-  block-size: 32px;
+  height: 32px;
   padding: var(--input-padding-small);
   font-size: 0.875rem;
   font-size: var(--font-size-14);
@@ -303,27 +334,27 @@ select[multiple].input-sm {
 }
 .form-group-sm select.form-control,
 .navbar select.form-control {
-  block-size: 32px;
+  height: 32px;
   line-height: 32px;
 }
 .form-group-sm textarea.form-control,
 .navbar textarea.form-control,
 .form-group-sm select[multiple].form-control,
 .navbar select[multiple].form-control {
-  block-size: auto;
+  height: auto;
 }
 .form-group-sm .form-control-static,
 .navbar .form-control-static {
-  block-size: 32px;
-  min-block-size: calc(1.2 + 14px);
-  min-block-size: calc(var(--line-height-control) + 14px);
+  height: 32px;
+  min-height: calc(1.2 + 14px);
+  min-height: calc(var(--line-height-control) + 14px);
   padding: var(--input-padding-small);
   font-size: 0.875rem;
   font-size: var(--font-size-14);
   line-height: 24px;
 }
 .input-lg {
-  min-block-size: var(--input-height-large);
+  min-height: var(--input-height-large);
   padding: var(--input-padding-large);
   border-radius: 3px;
   font-weight: 400;
@@ -334,11 +365,11 @@ select[multiple].input-sm {
   letter-spacing: -0.011em;
 }
 select.input-lg {
-  min-block-size: var(--input-height-large);
+  min-height: var(--input-height-large);
 }
 textarea.input-lg,
 select[multiple].input-lg {
-  block-size: auto;
+  height: auto;
 }
 .form-group-lg {
   position: relative;
@@ -346,10 +377,9 @@ select[multiple].input-lg {
 .form-group-lg .input-lg,
 .form-group-lg .input-group-lg > .form-control,
 .form-group-lg .input-group-lg > .input-group-addon {
-  block-size: var(--input-height-large);
-  padding-block: calc(4px + 24px) 4px;
-  padding-block: calc(4px + var(--size-24)) 4px;
-  padding-inline: 12px;
+  height: var(--input-height-large);
+  padding: calc(4px + 24px) 12px 4px;
+  padding: calc(4px + var(--size-24)) 12px 4px;
   font-size: 22px;
   line-height: 32px;
 }
@@ -358,51 +388,66 @@ select[multiple].input-lg {
 }
 .form-group-lg textarea.form-control,
 .form-group-lg select[multiple].form-control {
-  block-size: auto;
+  height: auto;
 }
 .form-group-lg .form-control-static {
-  block-size: var(--input-height-large);
-  min-block-size: calc(1.2 + 22px);
-  min-block-size: calc(var(--line-height-control) + 22px);
+  height: var(--input-height-large);
+  min-height: calc(1.2 + 22px);
+  min-height: calc(var(--line-height-control) + 22px);
   padding: var(--input-padding-large);
   font-size: 22px;
   line-height: 32px;
 }
 .form-group-lg .control-label {
   position: absolute;
-  inset-block-start: 12px;
-  inset-inline-start: 14px;
-  margin-block-end: 0;
+  top: 12px;
+  left: 14px;
+  margin-bottom: 0;
   z-index: 1;
 }
+[dir="rtl"] .form-group-lg .control-label {
+  right: 14px;
+  left: auto;
+  left: initial;
+}
 .has-feedback {
   position: relative;
 }
 .has-feedback .form-control {
-  padding-inline-end: var(--input-height-base);
+  padding-right: var(--input-height-base);
+}
+[dir="rtl"] .has-feedback .form-control {
+  padding-left: var(--input-height-base);
+  padding-right: 0;
+  padding-right: initial;
 }
 .form-control-feedback {
   position: absolute;
-  inset-block-start: 0;
-  inset-inline-end: 0;
+  top: 0;
+  right: 0;
   z-index: 2;
   display: block;
-  inline-size: 48px;
-  block-size: 48px;
+  width: 48px;
+  height: 48px;
   text-align: center;
   pointer-events: none;
 }
+[dir="rtl"] .form-control-feedback {
+  left: 0;
+  right: auto;
+  right: initial;
+}
 .input-lg + .form-control-feedback,
 .input-group-lg + .form-control-feedback,
 .form-group-lg .form-control + .form-control-feedback {
-  inline-size: var(--input-height-large);
-  block-size: var(--input-height-large);
+  width: var(--input-height-large);
+  height: var(--input-height-large);
 }
 .input-sm + .form-control-feedback,
 .input-group-sm + .form-control-feedback,
 .form-group-sm .form-control + .form-control-feedback {
-  inline-size: 32px;
-  block-size: 32px;
+  width: 32px;
+  height: 32px;
 }
 .focus .control-label,
 .has-focus .control-label {
@@ -421,14 +466,13 @@ select[multiple].input-lg {
 }
 .help-block,
 .error-messages {
-  margin-block-start: 12px;
-  margin-block-end: 4px;
+  margin-top: 12px;
+  margin-bottom: 4px;
   border-width: 0;
   border-style: solid;
   border-radius: 10px;
   border-radius: var(--radius-small);
-  padding-block: 4px 3px;
-  padding-inline: 16px;
+  padding: 4px 16px 3px;
   transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
 }
 .help-block a,
@@ -449,32 +493,67 @@ select[multiple].input-lg {
   content: " ";
   position: absolute;
   display: block;
-  inline-size: 10px;
-  block-size: 10px;
-  inset-inline-start: 20px;
-  inset-block-start: -5px;
+  width: 10px;
+  height: 10px;
+  left: 20px;
+  top: -5px;
   transform: rotate(45deg);
   background-color: inherit;
 }
+[dir="rtl"] .help-block::before {
+  right: 20px;
+  left: auto;
+  left: initial;
+}
 .help-block.arrow-center::before {
-  inset-inline-start: 50%;
-  margin-inline-start: -5px;
+  left: 50%;
+  margin-left: -5px;
+}
+[dir="rtl"] .help-block.arrow-center::before {
+  right: 50%;
+  left: auto;
+  left: initial;
+}
+[dir="rtl"] .help-block.arrow-center::before {
+  margin-right: -5px;
+  margin-left: 0;
+  margin-left: initial;
 }
 .help-block.arrow-top::before {
-  inset-block-start: -5px;
-  inset-block-end: auto;
+  top: -5px;
+  bottom: auto;
 }
 .help-block.arrow-left::before {
-  inset-inline-start: 20px;
-  inset-inline-end: auto;
+  left: 20px;
+  right: auto;
+}
+[dir="rtl"] .help-block.arrow-left::before {
+  right: 20px;
+  left: auto;
+  left: initial;
+}
+[dir="rtl"] .help-block.arrow-left::before {
+  left: auto;
+  right: auto;
+  right: initial;
 }
 .help-block.arrow-right::before {
-  inset-inline-start: auto;
-  inset-inline-end: 20px;
+  left: auto;
+  right: 20px;
+}
+[dir="rtl"] .help-block.arrow-right::before {
+  right: auto;
+  left: auto;
+  left: initial;
+}
+[dir="rtl"] .help-block.arrow-right::before {
+  left: 20px;
+  right: auto;
+  right: initial;
 }
 .help-block.arrow-bottom::before {
-  inset-block-start: auto;
-  inset-block-end: -5px;
+  top: auto;
+  bottom: -5px;
 }
 .focus .alert,
 .has-focus .alert {
@@ -1238,21 +1317,21 @@ select[multiple].input-lg {
   border-color: var(--color-sentiment-negative);
 }
 .has-feedback label ~ .form-control-feedback {
-  inset-block-start: 1.2;
-  inset-block-start: var(--line-height-control);
+  top: 1.2;
+  top: var(--line-height-control);
 }
 .has-feedback label.sr-only ~ .form-control-feedback {
-  inset-block-start: 0;
+  top: 0;
 }
 @media (min-width: 600px) {
   .form-inline .form-group {
     display: inline-block;
-    margin-block-end: 0;
+    margin-bottom: 0;
     vertical-align: middle;
   }
   .form-inline .form-control {
     display: inline-block;
-    inline-size: auto;
+    width: auto;
     vertical-align: middle;
   }
   .form-inline .form-control-static {
@@ -1265,72 +1344,100 @@ select[multiple].input-lg {
   .form-inline .input-group .input-group-addon,
   .form-inline .input-group .input-group-btn,
   .form-inline .input-group .form-control {
-    inline-size: auto;
+    width: auto;
   }
   .form-inline .input-group > .form-control {
-    inline-size: 100%;
+    width: 100%;
   }
   .form-inline .control-label {
-    margin-block-end: 0;
+    margin-bottom: 0;
     vertical-align: calc(-2px);
   }
   .form-inline .radio,
   .form-inline .checkbox {
     display: inline-block;
-    margin-block-start: 0;
-    margin-block-end: 0;
+    margin-top: 0;
+    margin-bottom: 0;
     vertical-align: middle;
   }
   .form-inline .radio label,
   .form-inline .checkbox label {
-    padding-inline-start: 0;
+    padding-left: 0;
+  }
+  [dir="rtl"] .form-inline .radio label,
+  [dir="rtl"] .form-inline .checkbox label {
+    padding-right: 0;
+    padding-left: 0;
+    padding-left: initial;
   }
   .form-inline .radio input[type='radio'],
   .form-inline .checkbox input[type='checkbox'] {
     position: relative;
-    margin-inline-start: 0;
+    margin-left: 0;
+  }
+  [dir="rtl"] .form-inline .radio input[type='radio'],
+  [dir="rtl"] .form-inline .checkbox input[type='checkbox'] {
+    margin-right: 0;
+    margin-left: 0;
+    margin-left: initial;
   }
   .form-inline .has-feedback .form-control-feedback {
-    inset-block-start: 0;
+    top: 0;
   }
 }
 .form-horizontal .radio,
 .form-horizontal .checkbox,
 .form-horizontal .radio-inline,
 .form-horizontal .checkbox-inline {
-  margin-block-start: 0;
-  margin-block-end: 0;
-  padding-block-start: 9px;
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-top: 9px;
 }
 .form-horizontal .radio,
 .form-horizontal .checkbox {
-  min-block-size: calc(1.2 + (8px + 1));
-  min-block-size: calc(var(--line-height-control) + (8px + 1));
+  min-height: calc(1.2 + (8px + 1));
+  min-height: calc(var(--line-height-control) + (8px + 1));
 }
 .form-horizontal .form-group {
-  margin-inline-start: -12px;
-  margin-inline-end: -12px;
+  margin-left: -12px;
+  margin-right: -12px;
+}
+[dir="rtl"] .form-horizontal .form-group {
+  margin-right: -12px;
+  margin-left: -12px;
+}
+[dir="rtl"] .form-horizontal .form-group {
+  margin-left: -12px;
+  margin-right: -12px;
 }
 @media (min-width: 600px) {
   .form-horizontal .control-label {
-    text-align: end;
-    margin-block-end: 0;
-    padding-block-start: 14px;
+    text-align: right;
+    margin-bottom: 0;
+    padding-top: 14px;
+  }
+  [dir="rtl"] .form-horizontal .control-label {
+    text-align: left;
   }
 }
 .form-horizontal .has-feedback .form-control-feedback {
-  inset-inline-end: 12px;
+  right: 12px;
+}
+[dir="rtl"] .form-horizontal .has-feedback .form-control-feedback {
+  left: 12px;
+  right: auto;
+  right: initial;
 }
 @media (min-width: 600px) {
   .form-horizontal .form-group-lg .control-label {
-    padding-block-start: 17px;
+    padding-top: 17px;
     font-size: 1.25rem;
     font-size: var(--font-size-20);
   }
 }
 @media (min-width: 600px) {
   .form-horizontal .form-group-sm .control-label {
-    padding-block-start: 8px;
+    padding-top: 8px;
     font-size: 0.875rem;
     font-size: var(--font-size-14);
   }
@@ -1343,7 +1450,13 @@ select[multiple].input-lg {
 .radio > label,
 .checkbox > label {
   position: relative;
-  padding-inline-start: 48px;
+  padding-left: 48px;
+}
+[dir="rtl"] .radio > label,
+[dir="rtl"] .checkbox > label {
+  padding-right: 48px;
+  padding-left: 0;
+  padding-left: initial;
 }
 .radio > label input[type="radio"],
 .checkbox > label input[type="radio"],
@@ -1351,16 +1464,24 @@ select[multiple].input-lg {
 .checkbox > label input[type="checkbox"] {
   display: block;
   position: absolute;
-  inset-block-start: 13px;
-  inset-inline-start: 40px;
+  top: 13px;
+  left: 40px;
+}
+[dir="rtl"] .radio > label input[type="radio"],
+[dir="rtl"] .checkbox > label input[type="radio"],
+[dir="rtl"] .radio > label input[type="checkbox"],
+[dir="rtl"] .checkbox > label input[type="checkbox"] {
+  right: 40px;
+  left: auto;
+  left: initial;
 }
 .tw-checkbox-button {
   border: 1px solid #c9cbce;
   border: 1px solid var(--color-interactive-secondary);
   background: #ffffff;
   background: var(--color-background-screen);
-  inline-size: 22px;
-  block-size: 22px;
+  width: 22px;
+  height: 22px;
   border-radius: 3px;
   display: inline-block;
   padding: 0;
@@ -1375,8 +1496,8 @@ select[multiple].input-lg {
 }
 .tw-checkbox-button .tw-checkbox-check,
 .tw-checkbox-button .np-tw-checkbox-indeterminate {
-  inline-size: 20px;
-  block-size: 20px;
+  width: 20px;
+  height: 20px;
   margin: 0;
   display: none;
   color: #ffffff;
@@ -1505,8 +1626,8 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
   background-color: var(--color-interactive-negative-active);
 }
 .tw-radio-button {
-  inline-size: 24px;
-  block-size: 24px;
+  width: 24px;
+  height: 24px;
   border-radius: 50%;
   border: 1px solid #c9cbce;
   border: 1px solid var(--color-interactive-secondary);
@@ -1523,14 +1644,14 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
   box-shadow: inset 0 0 0 1px #c9cbce;
   box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
   position: relative;
-  inset-block-start: 0;
-  inset-inline-start: 0;
+  top: 0;
+  left: 0;
 }
 .tw-radio-button .tw-radio-check {
   border-radius: 50%;
   text-align: center;
-  inline-size: 12px;
-  block-size: 12px;
+  width: 12px;
+  height: 12px;
   display: block;
   opacity: 0;
   transition: all 0.15s ease-in-out;
@@ -1585,8 +1706,8 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
 .np-theme-personal .tw-radio-button:checked .tw-radio-check,
 .np-theme-personal .tw-radio-button.checked .tw-radio-check {
   background-color: var(--color-interactive-primary);
-  max-block-size: 12px;
-  max-inline-size: 12px;
+  max-height: 12px;
+  max-width: 12px;
 }
 .radio.has-error .tw-radio-button,
 .tw-radio-button.has-error {
@@ -1602,13 +1723,23 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
 }
 .radio .tw-radio-button {
   position: absolute;
-  inset-inline-start: 13px;
-  inset-block-start: 11px;
+  left: 13px;
+  top: 11px;
+}
+[dir="rtl"] .radio .tw-radio-button {
+  right: 13px;
+  left: auto;
+  left: initial;
 }
 .checkbox .tw-checkbox-button {
   position: absolute;
-  inset-inline-start: 14px;
-  inset-block-start: 12px;
+  left: 14px;
+  top: 12px;
+}
+[dir="rtl"] .checkbox .tw-checkbox-button {
+  right: 14px;
+  left: auto;
+  left: initial;
 }
 .form-inline .tw-checkbox-button,
 .form-inline .tw-radio-button {
@@ -1616,16 +1747,16 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
 }
 .form-horizontal .checkbox,
 .form-horizontal .radio {
-  padding-block-start: 0;
+  padding-top: 0;
 }
 .form-horizontal .checkbox > label,
 .form-horizontal .radio > label {
-  margin-block-end: 0;
+  margin-bottom: 0;
 }
 .np-radio.radio,
 .np-checkbox.checkbox {
-  min-inline-size: -moz-fit-content;
-  min-inline-size: fit-content;
+  min-width: -moz-fit-content;
+  min-width: fit-content;
 }
 .np-radio.radio .np-radio-button,
 .np-checkbox.checkbox .np-radio-button,
@@ -1644,17 +1775,20 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
 .np-checkbox.checkbox > label {
   display: flex;
   align-items: center;
-  padding-block: 8px 16px   ;
-  padding-block: var(--size-8);
-  padding-inline: 16px;
-  padding-inline: var(--size-16);
+  padding: 8px 16px   ;
+  padding: var(--size-8) var(--size-16)   ;
+}
+[dir="rtl"] .np-radio.radio > label,
+[dir="rtl"] .np-checkbox.checkbox > label {
+  padding: 8px 16px   ;
+  padding: var(--size-8) var(--size-16)   ;
 }
 .np-radio.radio > label .np-checkbox__text,
 .np-checkbox.checkbox > label .np-checkbox__text,
 .np-radio.radio > label .np-radio__text,
 .np-checkbox.checkbox > label .np-radio__text {
   display: block;
-  padding-block-start: 1px;
+  padding-top: 1px;
 }
 :not(.np-theme-personal) .np-radio.radio > label .np-checkbox__text,
 :not(.np-theme-personal) .np-checkbox.checkbox > label .np-checkbox__text,
@@ -1666,7 +1800,7 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
   font-size: var(--font-size-16);
   line-height: 1.25rem;
   line-height: var(--line-height-20);
-  padding-block-start: 3px;
+  padding-top: 3px;
 }
 .np-theme-personal .np-radio.radio > label,
 .np-theme-personal .np-checkbox.checkbox > label {
@@ -1675,8 +1809,11 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
 .np-radio .np-radio__avatar {
   pointer-events: none;
 }
-.input-group .input-group-btn + input {
-  border-inline-start: 0 solid transparent;
+[dir="rtl"] .input-group .input-group-btn + input {
+  border-right: 0 solid transparent;
+}
+html:not([dir="rtl"]) .input-group .input-group-btn + input {
+  border-left: 0 solid transparent;
 }
 .input-group-addon {
   color: #5d7079;
@@ -1689,9 +1826,9 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
   line-height: 48px;
 }
 .label {
-  padding-block-start: 0.25em;
+  padding-top: 0.25em;
   position: relative;
-  inset-block-start: -3px;
+  top: -3px;
 }
 .label .label-default {
   color: #5d7079;
@@ -1705,60 +1842,83 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
   font-size: var(--font-size-14);
 }
 .form-group .row {
-  margin-inline-start: -6px;
-  margin-inline-end: -6px;
+  margin-left: -6px;
+  margin-right: -6px;
+}
+[dir="rtl"] .form-group .row {
+  margin-right: -6px;
+  margin-left: 0;
+  margin-left: initial;
+}
+[dir="rtl"] .form-group .row {
+  margin-left: -6px;
+  margin-right: 0;
+  margin-right: initial;
 }
 .form-group .row [class*='col-'] {
-  padding-inline-start: 6px;
-  padding-inline-end: 6px;
+  padding-left: 6px;
+  padding-right: 6px;
+}
+[dir="rtl"] .form-group .row [class*='col-'] {
+  padding-right: 6px;
+  padding-left: 0;
+  padding-left: initial;
+}
+[dir="rtl"] .form-group .row [class*='col-'] {
+  padding-left: 6px;
+  padding-right: 0;
+  padding-right: initial;
 }
 @media (max-width: 599.98px) {
   .form-group .row [class*='col-sm-'] {
-    margin-block-end: 0;
+    margin-bottom: 0;
   }
   .form-group .row [class*='col-sm-'] .btn-input {
-    margin-block-end: 12px;
+    margin-bottom: 12px;
   }
 }
 @media (max-width: 839.98px) {
   .form-group .row [class*='col-md-'] {
-    margin-block-end: 0;
+    margin-bottom: 0;
   }
   .form-group .row [class*='col-md-'] .form-control,
   .form-group .row [class*='col-md-'] .btn-input {
-    margin-block-end: 12px;
+    margin-bottom: 12px;
   }
 }
 @media (max-width: 1159.98px) {
   .form-group .row [class*='col-lg-'] {
-    margin-block-end: 0;
+    margin-bottom: 0;
   }
   .form-group .row [class*='col-lg-'] .form-control,
   .form-group .row [class*='col-lg-'] .btn-input {
-    margin-block-end: 12px;
+    margin-bottom: 12px;
   }
 }
 @media (max-width: 1159.98px) {
   .form-group .row [class*='col-xl-'] {
-    margin-block-end: 0;
+    margin-bottom: 0;
   }
   .form-group .row [class*='col-xl-'] .form-control,
   .form-group .row [class*='col-xl-'] .btn-input {
-    margin-block-end: 12px;
+    margin-bottom: 12px;
   }
 }
 @media (min-width: 600px) {
   fieldset .form-group:nth-of-type(odd) {
-    clear: inline-start;
+    clear: left;
+  }
+  [dir="rtl"] fieldset .form-group:nth-of-type(odd) {
+    clear: right;
   }
 }
 .checkbox > label,
 .radio > label {
   display: block;
   cursor: pointer;
-  padding-block-start: 12px;
-  padding-block-end: 10px;
-  padding-inline-end: 16px;
+  padding-top: 12px;
+  padding-bottom: 10px;
+  padding-right: 16px;
   color: #37517e;
   color: var(--color-content-primary);
   background-color: #ffffff;
@@ -1768,6 +1928,12 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
   border-radius: 3px;
   transition: border 0.15s ease-in-out, background-color 0.15s ease-in-out;
 }
+[dir="rtl"] .checkbox > label,
+[dir="rtl"] .radio > label {
+  padding-left: 16px;
+  padding-right: 0;
+  padding-right: initial;
+}
 .np-theme-personal .checkbox > label,
 .np-theme-personal .radio > label {
   border-radius: 10px;
@@ -1808,8 +1974,8 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
 .radio.checkbox-lg > label,
 .checkbox.radio-lg > label,
 .radio.radio-lg > label {
-  min-block-size: 72px;
-  min-block-size: var(--size-72);
+  min-height: 72px;
+  min-height: var(--size-72);
 }
 .checkbox.checkbox-lg > label small,
 .radio.checkbox-lg > label small,
@@ -1843,17 +2009,22 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
   content: " ";
   position: absolute;
   display: block;
-  inline-size: 10px;
-  block-size: 10px;
-  inset-inline-start: 20px;
-  inset-block-start: -5px;
+  width: 10px;
+  height: 10px;
+  left: 20px;
+  top: -5px;
   transform: rotate(45deg);
   background-color: inherit;
 }
+[dir="rtl"] .error-messages::before {
+  right: 20px;
+  left: auto;
+  left: initial;
+}
 .form-group .error-messages {
   border-radius: 3px;
   border-width: 0;
-  margin-block-start: 12px;
+  margin-top: 12px;
 }
 .has-error .error-messages {
   display: block;
@@ -1930,7 +2101,7 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
   line-height: 150%;
   letter-spacing: -0.011em;
   display: block;
-  inline-size: 100%;
+  width: 100%;
   color: #768e9c;
   color: var(--color-content-tertiary);
 }
@@ -2062,11 +2233,11 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
   background-color: initial !important;
 }
 .np-theme-personal .form-group label {
-  margin-block-end: 8px;
-  margin-block-end: var(--padding-x-small);
+  margin-bottom: 8px;
+  margin-bottom: var(--padding-x-small);
 }
 .np-theme-personal .form-group .np-upload-input label {
-  margin-block-end: 0;
+  margin-bottom: 0;
 }
 .np-theme-personal .form-group .alert:before,
 .np-theme-personal .error-messages:before {
@@ -2076,17 +2247,16 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
 .np-theme-personal .alert-detach {
   color: #5d7079;
   color: var(--color-content-secondary);
-  margin-block: 8px;
-  margin-block: var(--padding-x-small);
-  margin-inline: 0;
+  margin: 8px 0;
+  margin: var(--padding-x-small) 0;
   padding: 0;
   background-color: transparent;
   background-color: initial;
 }
 .np-theme-personal .alert-detach .status-circle {
-  margin-block-start: 2px;
-  margin-inline-end: 4px;
-  margin-inline-end: var(--size-4);
+  margin-top: 2px;
+  margin-right: 4px;
+  margin-right: var(--size-4);
 }
 .np-theme-personal .has-error .error-messages,
 .np-theme-personal .has-error .alert-detach.alert-danger {