From 7039c310a562182f974249095d160e7c74c575d9 Mon Sep 17 00:00:00 2001
From: Rami Yushuvaev <r_a_m_i@hotmail.com>
Date: Mon, 28 Apr 2025 20:59:56 +0300
Subject: [PATCH 1/2] Use CSS logical properties to support both LTR & RTL

---
 src/css/common/_editor.scss       | 12 +++++-----
 src/css/common/_type-badges.scss  | 10 ++++----
 src/css/edit.scss                 | 34 +++++++++++++-------------
 src/css/edit/_gpt.scss            | 14 +++++------
 src/css/edit/_tags.scss           |  6 ++---
 src/css/edit/_tooltips.scss       |  8 +++----
 src/css/edit/_types.scss          |  4 ++--
 src/css/edit/_upgrade-dialog.scss | 10 ++++----
 src/css/manage.scss               | 40 +++++++++++++++----------------
 src/css/manage/_cloud.scss        | 40 +++++++++++++++----------------
 src/css/prism.scss                |  4 ++--
 src/css/settings.scss             |  6 ++---
 src/css/welcome.scss              | 40 +++++++++++++++----------------
 13 files changed, 114 insertions(+), 114 deletions(-)

diff --git a/src/css/common/_editor.scss b/src/css/common/_editor.scss
index 7157e0023..2b3b3f2c3 100644
--- a/src/css/common/_editor.scss
+++ b/src/css/common/_editor.scss
@@ -26,13 +26,13 @@
 
 	&::before {
 		content: '';
-		padding-bottom: 5px;
+		padding-block-end: 5px;
 	}
 }
 
 /* Fix cursor color with rubyblue theme (see https://goo.gl/3HDgRm */
 .cm-s-rubyblue .CodeMirror-cursor {
-	border-left: 1px solid white !important;
+	border-inline-start: 1px solid white !important;
 }
 
 [class*="CodeMirror-lint-marker"], [class*="CodeMirror-lint-message"], .CodeMirror-lint-marker-multiple {
@@ -69,7 +69,7 @@
 
 .CodeMirror-lint-message-warning {
 	background-color: #fff8e5;
-	border-left: 4px solid #ffb900;
+	border-inline-start: 4px solid #ffb900;
 }
 
 .CodeMirror-lint-marker-warning::before, .CodeMirror-lint-message-warning::before {
@@ -79,7 +79,7 @@
 
 .CodeMirror-lint-message-error {
 	background-color: #fbeaea;
-	border-left: 4px solid #dc3232;
+	border-inline-start: 4px solid #dc3232;
 }
 
 .CodeMirror-lint-marker-error::before, .CodeMirror-lint-message-error::before {
@@ -105,7 +105,7 @@
 
 .CodeMirror-foldmarker {
 	color: inherit;
-	margin-left: 0.25em;
-	margin-right: 0.25em;
+	margin-inline-start: 0.25em;
+	margin-inline-end: 0.25em;
 	font-weight: bold;
 }
diff --git a/src/css/common/_type-badges.scss b/src/css/common/_type-badges.scss
index 1dd5ee970..4ff16e31c 100644
--- a/src/css/common/_type-badges.scss
+++ b/src/css/common/_type-badges.scss
@@ -11,7 +11,7 @@
 .nav-tab .badge, .button .snippet-type-badge, .go-pro-button .badge,
 h1 .snippet-type-badge, h2 .snippet-type-badge, h3 .snippet-type-badge {
 	/* rtl:ignore */
-	margin-left: 3px;
+	margin-inline-start: 3px;
 }
 
 .button .badge {
@@ -57,7 +57,7 @@ $badges: (php: theme.$php-active, css: theme.$css-highlight, js: theme.$js-highl
 }
 
 .go-pro-badge, .pro-badge, .core-badge {
-	margin-left: 3px;
+	margin-inline-start: 3px;
 	border: 1px solid currentColor;
 	border-radius: 5px;
 	font-size: 10px;
@@ -77,12 +77,12 @@ $badges: (php: theme.$php-active, css: theme.$css-highlight, js: theme.$js-highl
 .go-pro-button .badge, .go-pro-badge {
 	color: theme.$pro;
 	border-color: theme.$pro;
-	margin-left: 1px;
+	margin-inline-start: 1px;
 }
 
 .wp-core-ui .button.nav-tab-button {
-	margin-left: 0.5em;
-	float: right;
+	margin-inline-start: 0.5em;
+	float: inline-end;
 	color: #a7aaad;
 	background: #f6f7f7;
 	border-color: #f6f7f7;
diff --git a/src/css/edit.scss b/src/css/edit.scss
index 036e4decf..f77634ca6 100644
--- a/src/css/edit.scss
+++ b/src/css/edit.scss
@@ -15,7 +15,7 @@
 }
 
 .notice.error blockquote {
-	margin-bottom: 0;
+	margin-block-end: 0;
 }
 
 h2 {
@@ -34,25 +34,25 @@ h2:first-of-type, .submit-inline {
 .saved-snippet {
 	&.inactive-snippet, &.active-snippet {
 		#title {
-			border-left-width: 4px;
+			border-inline-start-width: 4px;
 		}
 	}
 
 	&.active-snippet #title {
-		border-left-color: #46b450;
+		border-inline-start-color: #46b450;
 	}
 
 	&.inactive-snippet #title {
-		border-left-color: #bbb;
+		border-inline-start-color: #bbb;
 	}
 
 	&.erroneous-snippet #title {
-		border-left-color: #dc3232;
+		border-inline-start-color: #dc3232;
 	}
 }
 
 #snippet-form {
-	margin-top: 10px;
+	margin-block-start: 10px;
 
 	#snippet-tags, textarea {
 		width: 100%;
@@ -68,7 +68,7 @@ label[for='snippet_description'] h3 div {
 /* Add spacing in between the action buttons */
 .button + .button,
 .generate-button + .button {
-	margin-left: .5em;
+	margin-inline-start: .5em;
 }
 
 h2 .button {
@@ -87,37 +87,37 @@ h2 .button {
 }
 
 .submit-inline {
-	float: right;
-	margin-bottom: 0;
+	float: inline-end;
+	margin-block-end: 0;
 }
 
 p.snippet-scope, .snippet-scope p {
-	margin-top: 15px;
+	margin-block-start: 15px;
 }
 
 .snippet-description-container {
-	margin-top: 25px;
+	margin-block-start: 25px;
 
 	.wp-editor-tools {
-		padding-top: 5px;
+		padding-block-start: 5px;
 	}
 
 	.wp-editor-tabs {
-		float: left;
+		float: inline-start;
 	}
 }
 
 .snippet-scope label,
 .html-shortcode-options strong {
 	display: inline-block;
-	margin-right: 1.5em;
+	margin-inline-end: 1.5em;
 }
 
 .below-snippet-editor {
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: space-between;
-	padding-top: 1px;
+	padding-block-start: 1px;
 }
 
 .snippet-priority {
@@ -125,7 +125,7 @@ p.snippet-scope, .snippet-scope p {
 		font-weight: bold;
 		cursor: help;
 		font-size: 1.1em;
-		padding-right: 0.5em;
+		padding-inline-end: 0.5em;
 	}
 
 	input {
@@ -142,7 +142,7 @@ p.snippet-scope, .snippet-scope p {
 }
 
 .wrap h2.nav-tab-wrapper {
-	border-bottom: none;
+	border-block-end: none;
 }
 
 .code-snippets-copy-text {
diff --git a/src/css/edit/_gpt.scss b/src/css/edit/_gpt.scss
index efc2e6d96..428578ae0 100644
--- a/src/css/edit/_gpt.scss
+++ b/src/css/edit/_gpt.scss
@@ -14,19 +14,19 @@
 	}
 
 	.notice {
-		margin-left: 0;
-		margin-right: 0;
+		margin-inline-start: 0;
+		margin-inline-end: 0;
 	}
 }
 
 .generate-button {
-	float: right;
+	float: inline-end;
 	display: flex;
 	align-items: center;
 
 	.dashicons-warning {
 		color: #b32d2e;
-		margin-right: 11px;
+		margin-inline-end: 11px;
 	}
 }
 
@@ -38,15 +38,15 @@
 	padding: 0 8px;
 	background-color: #fff;
 	border: 1px solid #bbb;
-	border-left: 0;
-	border-right: 0;
+	border-inline-start: 0;
+	border-inline-end: 0;
 	color: #666;
 	font-style: italic;
 	font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
 
 	img {
 		height: 1rem;
-		padding-right: 5px;
+		padding-inline-end: 5px;
 	}
 }
 
diff --git a/src/css/edit/_tags.scss b/src/css/edit/_tags.scss
index 9b1dc91e9..f53fa4821 100644
--- a/src/css/edit/_tags.scss
+++ b/src/css/edit/_tags.scss
@@ -25,7 +25,7 @@
 }
 
 .tagger > ul > li {
-	padding-bottom: 0.4rem;
+	padding-block-end: 0.4rem;
 	margin: 0.4rem 5px 4px;
 
 	&:not(.tagger-new) {
@@ -50,7 +50,7 @@
 
 .tagger li a.close {
 	padding: 4px;
-	margin-left: 4px;
+	margin-inline-start: 4px;
 
 	&:hover {
 		color: white;
@@ -67,7 +67,7 @@
 		outline: none;
 		box-shadow: none;
 		width: 100%;
-		padding-left: 0;
+		padding-inline-start: 0;
 		box-sizing: border-box;
 		background: transparent;
 	}
diff --git a/src/css/edit/_tooltips.scss b/src/css/edit/_tooltips.scss
index 5653726b1..e07253e24 100644
--- a/src/css/edit/_tooltips.scss
+++ b/src/css/edit/_tooltips.scss
@@ -28,7 +28,7 @@
 	z-index: 99;
 	top: 125%;
 	right: 0;
-	margin-right: -10px;
+	margin-inline-end: -10px;
 	opacity: 0;
 	transition: opacity 0.3s;
 	white-space: nowrap;
@@ -39,13 +39,13 @@
 		position: absolute;
 		bottom: 100%;
 		right: 0;
-		margin-right: 10px;
+		margin-inline-end: 10px;
 		border: 5px solid transparent;
-		border-bottom-color: #555;
+		border-block-end-color: #555;
 	}
 
 	td:first-child {
-		padding-right: 0.5em;
+		padding-inline-end: 0.5em;
 	}
 
 	.mac-key {
diff --git a/src/css/edit/_types.scss b/src/css/edit/_types.scss
index b76c13c01..9d9918ec8 100644
--- a/src/css/edit/_types.scss
+++ b/src/css/edit/_types.scss
@@ -2,7 +2,7 @@
 .CodeMirror-sizer {
 	min-height: 300px !important;
 	box-sizing: border-box;
-	padding-bottom: 1.5em !important;
+	padding-block-end: 1.5em !important;
 
 	&::after {
 		position: absolute;
@@ -24,7 +24,7 @@
 	}
 
 	.CodeMirror-sizer {
-		padding-bottom: 0 !important;
+		padding-block-end: 0 !important;
 
 		&::before {
 			content: '<?php';
diff --git a/src/css/edit/_upgrade-dialog.scss b/src/css/edit/_upgrade-dialog.scss
index 0d36f9ff7..3eb4e0f57 100644
--- a/src/css/edit/_upgrade-dialog.scss
+++ b/src/css/edit/_upgrade-dialog.scss
@@ -14,7 +14,7 @@
 	}
 
 	p {
-		text-align: left;
+		text-align: start;
 	}
 
 	ul {
@@ -22,13 +22,13 @@
 
 		li:before {
 			content: '✓ ';
-			margin-left: 1em;
+			margin-inline-start: 1em;
 			color: #2ecc40;
 		}
 	}
 
 	.components-modal__content {
-		margin-top: 0;
+		margin-block-start: 0;
 		padding: 32px;
 	}
 
@@ -44,7 +44,7 @@
 		grid-template-columns: auto auto;
 		justify-content: space-around;
 		align-items: center;
-		margin-bottom: 0;
+		margin-block-end: 0;
 	}
 
 	.current-plan-cost {
@@ -54,7 +54,7 @@
 	.button .dashicons,
 	.button svg {
 		vertical-align: middle;
-		margin-left: 1ch;
+		margin-inline-start: 1ch;
 	}
 
 	.components-external-link.button {
diff --git a/src/css/manage.scss b/src/css/manage.scss
index cfd55920a..651e8119e 100644
--- a/src/css/manage.scss
+++ b/src/css/manage.scss
@@ -55,7 +55,7 @@ $inactive-color: #ccc;
 }
 
 .snippet-activation-switch {
-	margin-top: 5px;
+	margin-block-start: 5px;
 	width: 30px;
 	height: 17px;
 	border-radius: 34px;
@@ -91,13 +91,13 @@ $inactive-color: #ccc;
 }
 
 .snippet-execution-button {
-	margin-left: 10px;
-	margin-top: 9px;
+	margin-inline-start: 10px;
+	margin-block-start: 9px;
 	width: 0;
 	height: 0;
-	border-top: 9px solid transparent;
-	border-bottom: 9px solid transparent;
-	border-left: 10px solid $inactive-color;
+	border-block-start: 9px solid transparent;
+	border-block-end: 9px solid transparent;
+	border-inline-start: 10px solid $inactive-color;
 	transition: all 0.3s;
 
 	&::before {
@@ -114,7 +114,7 @@ $inactive-color: #ccc;
 	}
 
 	&:hover, &:focus {
-		border-left-color: #579;
+		border-inline-start-color: #579;
 
 		&::before {
 			transform: scale(1.1);
@@ -153,7 +153,7 @@ $inactive-color: #ccc;
 	}
 
 	.column-activate {
-		padding-right: 0 !important;
+		padding-inline-end: 0 !important;
 	}
 
 	.clear-filters {
@@ -167,7 +167,7 @@ $inactive-color: #ccc;
 	thead th.check-column,
 	tfoot th.check-column,
 	.inactive-snippet th.check-column {
-		padding-left: 5px;
+		padding-inline-start: 5px;
 	}
 
 	td.column-description {
@@ -183,7 +183,7 @@ $inactive-color: #ccc;
 	}
 
 	.badge {
-		margin-left: 4px;
+		margin-inline-start: 4px;
 		padding: 3px 6px;
 		text-decoration: none;
 		border: medium none;
@@ -195,19 +195,19 @@ $inactive-color: #ccc;
 
 		/* rtl:ignore */
 		.rtl & {
-			float: left;
+			float: inline-start;
 		}
 	}
 
 	tr.active-snippet + tr.inactive-snippet th,
 	tr.active-snippet + tr.inactive-snippet td {
-		border-top: 1px solid rgba(0, 0, 0, 0.03);
+		border-block-start: 1px solid rgba(0, 0, 0, 0.03);
 		box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.02), inset 0 -1px 0 #e1e1e1;
 	}
 
 	&, #all-snippets-table, #search-snippets-table {
 		a.delete:hover {
-			border-bottom: 1px solid #f00;
+			border-block-end: 1px solid #f00;
 			color: #f00;
 		}
 	}
@@ -228,7 +228,7 @@ $inactive-color: #ccc;
 	}
 
 	th.check-column {
-		border-left: 2px solid #2ea2cc;
+		border-inline-start: 2px solid #2ea2cc;
 	}
 
 	.snippet-activation-switch {
@@ -253,7 +253,7 @@ $inactive-color: #ccc;
 		}
 
 		th.check-column {
-			border-left-color: $highlight;
+			border-inline-start-color: $highlight;
 		}
 	}
 }
@@ -264,7 +264,7 @@ $inactive-color: #ccc;
 
 @media screen and (max-width: 782px) {
 	p.search-box {
-		float: left;
+		float: inline-start;
 		position: initial;
 		margin: 1em 0 0 0;
 		height: auto;
@@ -281,7 +281,7 @@ $inactive-color: #ccc;
 }
 
 .snippet-type-description {
-	border-bottom: 1px solid #ccc;
+	border-block-end: 1px solid #ccc;
 	margin: 0;
 	padding: 1em 0;
 }
@@ -294,8 +294,8 @@ $inactive-color: #ccc;
 	display: flex;
 	align-items: center;
     justify-content: flex-start;
-	margin-top: 15px;
-	margin-bottom: -39px;
+	margin-block-start: 15px;
+	margin-block-end: -39px;
 	gap: 7px;
 }
 
@@ -312,7 +312,7 @@ $inactive-color: #ccc;
 			display: none;
 		}
 		.cloud-badge{
-			margin-right: 10px;
+			margin-inline-end: 10px;
 		}
 	}
 }
diff --git a/src/css/manage/_cloud.scss b/src/css/manage/_cloud.scss
index fad0c5639..477a64e98 100644
--- a/src/css/manage/_cloud.scss
+++ b/src/css/manage/_cloud.scss
@@ -4,7 +4,7 @@
 
 	small {
 		color: #646970;
-		float: right;
+		float: inline-end;
 	}
 }
 
@@ -21,7 +21,7 @@
 }
 
 .cloud-icon {
-	margin-right: 3px;
+	margin-inline-end: 3px;
 }
 
 .nav-tab-inactive .cloud-badge {
@@ -81,7 +81,7 @@
 }
 
 .cloud-table td .no-results {
-	margin-top: 15px;
+	margin-block-start: 15px;
 	color: #e32121;
 	text-align: center;
 }
@@ -94,7 +94,7 @@
 	border: 1px solid;
 	border-radius: 5px;
 	padding: 5px;
-	margin-bottom: 5px;
+	margin-block-end: 5px;
 	display: block;
 	text-align: center;
 	background: transparent;
@@ -117,7 +117,7 @@
 }
 
 .cloud-badge {
-	margin-left: 10px;
+	margin-inline-start: 10px;
 	border: 1px solid;
 	border-radius: 5px;
 	font-size: 15px;
@@ -125,8 +125,8 @@
 }
 
 #cloud-search-form {
-	margin-top: 30px;
-	margin-bottom: 30px;
+	margin-block-start: 30px;
+	margin-block-end: 30px;
 	text-align: center;
 }
 
@@ -157,7 +157,7 @@
 	-ms-flex: 1 1 auto;
 	flex: 1 1 auto;
 	width: 1%;
-	margin-bottom: 0;
+	margin-block-end: 0;
 
 	&:focus {
 		outline: 0;
@@ -167,9 +167,9 @@
 }
 
 #cloud-select-prepend {
-	margin-right: -3px;
-	border-top-right-radius: 0;
-	border-bottom-right-radius: 0;
+	margin-inline-end: -3px;
+	border-start-end-radius: 0;
+	border-end-end-radius: 0;
 	position: relative;
 	z-index: 2;
 	color: #2271b1;
@@ -185,18 +185,18 @@
 
 #cloud-search-submit {
 	padding: 0 15px;
-	margin-left: -3px;
+	margin-inline-start: -3px;
 	display: flex;
 	justify-content: center;
 	align-items: center;
 }
 
 .cloud-search {
-	margin-left: 5px;
+	margin-inline-start: 5px;
 }
 
 .bundle-group {
-	margin-top: 10px;
+	margin-block-start: 10px;
 	justify-content: space-between;
 	display: flex;
 	gap: 5px;
@@ -230,7 +230,7 @@
 .heading-box {
 	max-width: 900px;
 	margin: auto;
-	padding-bottom: 1rem;
+	padding-block-end: 1rem;
 }
 
 .cloud-search-heading {
@@ -239,13 +239,13 @@
 	padding: 9px 0 4px;
 	line-height: 1.3;
 	text-align: center;
-	margin-bottom: 0;
+	margin-block-end: 0;
 }
 
 .cloud-badge.ai-icon {
 	font-size: 12px;
 	padding: 3px;
-	margin-left: 5px;
+	margin-inline-start: 5px;
 	color: #b22222;
 }
 
@@ -271,7 +271,7 @@
 	align-items: center;
 	max-height: 35px;
 	margin: 0 3px;
-	float: right;
+	float: inline-end;
 	gap: 5px;
 }
 
@@ -299,7 +299,7 @@
 	display: inline-flex;
 	gap: 3px;
 	align-items: center;
-	margin-bottom: 6px !important;
+	margin-block-end: 6px !important;
 
 	&:hover {
 		.thumbs-up {
@@ -413,7 +413,7 @@
 }
 
 .beta-test-notice {
-	margin-top: 20px;
+	margin-block-start: 20px;
 }
 
 .highlight-yellow {
diff --git a/src/css/prism.scss b/src/css/prism.scss
index 95e0839d5..7c9769996 100644
--- a/src/css/prism.scss
+++ b/src/css/prism.scss
@@ -18,7 +18,7 @@ pre[data-line] {
 	left: 0;
 	right: 0;
 	padding: inherit;
-	margin-top: 1em;
+	margin-block-start: 1em;
 	background: hsla(24, 20%, 50%, .08);
 	background: linear-gradient(to right, hsla(24, 20%, 50%, .1) 70%, hsla(24, 20%, 50%, 0));
 	pointer-events: none;
@@ -65,7 +65,7 @@ pre[data-line] {
 	}
 
 	.is-style-prism-coy-without-shadows pre[class*=language-] & {
-		margin-top: 0;
+		margin-block-start: 0;
 	}
 }
 
diff --git a/src/css/settings.scss b/src/css/settings.scss
index e8403c83d..358170744 100644
--- a/src/css/settings.scss
+++ b/src/css/settings.scss
@@ -13,7 +13,7 @@ p.submit {
 }
 
 .nav-tab-wrapper {
-	margin-bottom: 1em;
+	margin-block-end: 1em;
 }
 
 input[type=number] {
@@ -23,7 +23,7 @@ input[type=number] {
 .CodeMirror {
 	max-width: 800px;
 	width: 100%;
-	padding-right: 1em;
+	padding-inline-end: 1em;
 }
 
 .CodeMirror-sizer::before {
@@ -72,7 +72,7 @@ body.js {
 
 .license-status {
 	display: inline-block;
-	padding-right: 2em;
+	padding-inline-end: 2em;
 	line-height: 2;
 	color: #aaa;
 }
diff --git a/src/css/welcome.scss b/src/css/welcome.scss
index 7f9cb100f..6cddba981 100644
--- a/src/css/welcome.scss
+++ b/src/css/welcome.scss
@@ -9,8 +9,8 @@ $breakpoint: 1060px;
 
 	h1, h2, h3 {
 		font-weight: 700;
-		margin-top: 10px;
-		margin-bottom: 10px;
+		margin-block-start: 10px;
+		margin-block-end: 10px;
 
 		.dashicons {
 			font-size: 90%;
@@ -28,7 +28,7 @@ $breakpoint: 1060px;
 	}
 
 	.dashicons-external {
-		float: right;
+		float: inline-end;
 		color: #666;
 	}
 }
@@ -69,12 +69,12 @@ $breakpoint: 1060px;
 	margin: 0;
 
 	li {
-		margin-bottom: 0;
+		margin-block-end: 0;
 	}
 
 	li a {
-		margin-top: 10px;
-		margin-bottom: 10px;
+		margin-block-start: 10px;
+		margin-block-end: 10px;
 		align-items: center;
 		border-width: 1px;
 		border-style: solid;
@@ -94,8 +94,8 @@ $breakpoint: 1060px;
 
 		.dashicons, svg {
 			text-decoration: none;
-			margin-top: -1px;
-			margin-left: 3px;
+			margin-block-start: -1px;
+			margin-inline-start: 3px;
 		}
 
 		svg {
@@ -164,13 +164,13 @@ a.csp-card {
 
 .csp-section-changes {
 	border: 1px solid theme.$outline;
-	border-left: 0;
-	border-right: 0;
+	border-inline-start: 0;
+	border-inline-end: 0;
 	padding: 40px 0 50px 0;
 	display: flex;
 	flex-direction: column;
 	row-gap: 20px;
-	margin-top: 30px;
+	margin-block-start: 30px;
 
 	.csp-cards {
 		grid-template-columns: 2fr 1fr;
@@ -197,7 +197,7 @@ a.csp-card {
 		height: 400px;
 
 		h3 {
-			float: right;
+			float: inline-end;
 			color: #666;
 		}
 
@@ -206,7 +206,7 @@ a.csp-card {
 		}
 
 		ul {
-			margin-top: 5px;
+			margin-block-start: 5px;
 		}
 
 		li {
@@ -222,7 +222,7 @@ a.csp-card {
 		}
 
 		> article::after {
-			border-bottom: 1px solid #666;
+			border-block-end: 1px solid #666;
 			content: ' ';
 			display: block;
 			width: 50%;
@@ -230,7 +230,7 @@ a.csp-card {
 		}
 
 		> article:last-child {
-			padding-bottom: 1px;
+			padding-block-end: 1px;
 
 			&::after {
 				border: 0;
@@ -279,7 +279,7 @@ a.csp-card {
 	padding: 40px 0 50px 0;
 
 	.csp-card {
-		margin-top: 20px;
+		margin-block-start: 20px;
 		justify-content: flex-start;
 		color: black;
 		position: relative;
@@ -311,8 +311,8 @@ a.csp-card {
 			display: block;
 			font-size: .9rem;
 			letter-spacing: 1px;
-			margin-bottom: 0;
-			margin-top: 0;
+			margin-block-start: 0;
+			margin-block-end: 0;
 			text-transform: uppercase;
 			width: fit-content;
 			padding: 5px 15px;
@@ -348,7 +348,7 @@ a.csp-card {
 }
 
 .csp-section-partners {
-	border-top: 1px solid theme.$outline;
+	border-block-start: 1px solid theme.$outline;
 
 	header {
 		display: flex;
@@ -363,7 +363,7 @@ a.csp-card {
 	width: 0;
 	padding: 15px;
 	border: 6px solid #e7c0b3;
-	border-right-color: theme.$secondary;
+	border-inline-end-color: theme.$secondary;
 	border-radius: 22px;
 	animation: loading-rotate 1s infinite linear;
 	position: absolute;

From 828df8809fd8cf466f99cc41d459e1a00f5477d3 Mon Sep 17 00:00:00 2001
From: Rami Yushuvaev <r_a_m_i@hotmail.com>
Date: Mon, 28 Apr 2025 21:44:26 +0300
Subject: [PATCH 2/2] inset

---
 src/css/common/_editor.scss |  6 +++---
 src/css/edit.scss           |  2 +-
 src/css/edit/_tooltips.scss | 12 ++++++------
 src/css/edit/_types.scss    |  2 +-
 src/css/manage.scss         | 10 +++++-----
 src/css/manage/_cloud.scss  |  2 +-
 src/css/prism.scss          | 12 ++++++------
 src/css/welcome.scss        |  4 ++--
 8 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/src/css/common/_editor.scss b/src/css/common/_editor.scss
index 2b3b3f2c3..1b76697ba 100644
--- a/src/css/common/_editor.scss
+++ b/src/css/common/_editor.scss
@@ -45,19 +45,19 @@
 
 .CodeMirror-lint-marker-multiple {
 	position: absolute;
-	top: 0;
+	inset-block-start: 0;
 }
 
 [class*="CodeMirror-lint-marker"]:before {
 	font: normal 18px/1 dashicons;
 	position: relative;
-	top: -2px;
+	inset-block-start: -2px;
 }
 
 [class*="CodeMirror-lint-message"]:before {
 	font: normal 16px/1 dashicons;
-	left: 16px;
 	position: absolute;
+	inset-inline-start: 16px;
 }
 
 .CodeMirror-lint-message-error,
diff --git a/src/css/edit.scss b/src/css/edit.scss
index f77634ca6..dceb95bbc 100644
--- a/src/css/edit.scss
+++ b/src/css/edit.scss
@@ -155,6 +155,6 @@ p.snippet-scope, .snippet-scope p {
 
 #edit-snippet-form-container .cs-sticky-notice {
 	position: sticky;
-	top: 40px;
+	inset-block-start: 40px;
 	z-index: 100;
 }
diff --git a/src/css/edit/_tooltips.scss b/src/css/edit/_tooltips.scss
index e07253e24..bdbd62d1c 100644
--- a/src/css/edit/_tooltips.scss
+++ b/src/css/edit/_tooltips.scss
@@ -9,8 +9,8 @@
 
 .snippet-editor-help {
 	position: absolute;
-	right: 5px;
-	top: 5px;
+	inset-inline-end: 5px;
+	inset-block-start: 5px;
 
 	&:hover .editor-help-text {
 		visibility: visible;
@@ -26,8 +26,8 @@
 	border-radius: 6px;
 	position: absolute;
 	z-index: 99;
-	top: 125%;
-	right: 0;
+	inset-block-start: 125%;
+	inset-inline-end: 0;
 	margin-inline-end: -10px;
 	opacity: 0;
 	transition: opacity 0.3s;
@@ -37,8 +37,8 @@
 	&::after {
 		content: "";
 		position: absolute;
-		bottom: 100%;
-		right: 0;
+		inset-block-end: 100%;
+		inset-inline-end: 0;
 		margin-inline-end: 10px;
 		border: 5px solid transparent;
 		border-block-end-color: #555;
diff --git a/src/css/edit/_types.scss b/src/css/edit/_types.scss
index 9d9918ec8..d77869f08 100644
--- a/src/css/edit/_types.scss
+++ b/src/css/edit/_types.scss
@@ -6,7 +6,7 @@
 
 	&::after {
 		position: absolute;
-		bottom: 0;
+		inset-block-end: 0;
 	}
 }
 
diff --git a/src/css/manage.scss b/src/css/manage.scss
index 651e8119e..d5fb94362 100644
--- a/src/css/manage.scss
+++ b/src/css/manage.scss
@@ -103,10 +103,10 @@ $inactive-color: #ccc;
 	&::before {
 		content: '';
 		position: absolute;
-		top: -14px;
-		left: -21px;
-		bottom: -14px;
-		right: -8px;
+		inset-block-start: -14px;
+		inset-inline-start: -21px;
+		inset-block-end: -14px;
+		inset-inline-end: -8px;
 		border-radius: 50%;
 		border: 1.8px solid $inactive-color;
 		z-index: 2;
@@ -149,7 +149,7 @@ $inactive-color: #ccc;
 	.row-actions {
 		color: #ddd;
 		position: relative;
-		left: 0;
+		inset-inline-start: 0;
 	}
 
 	.column-activate {
diff --git a/src/css/manage/_cloud.scss b/src/css/manage/_cloud.scss
index 477a64e98..79ed7aa6a 100644
--- a/src/css/manage/_cloud.scss
+++ b/src/css/manage/_cloud.scss
@@ -403,7 +403,7 @@
 }
 
 .tooltip-box .cloud-key {
-    right: 0;
+    inset-inline-end: 0;
     color: white;
     width: 450px;
 }
diff --git a/src/css/prism.scss b/src/css/prism.scss
index 7c9769996..50ee61563 100644
--- a/src/css/prism.scss
+++ b/src/css/prism.scss
@@ -15,8 +15,8 @@ pre[data-line] {
 
 .line-highlight {
 	position: absolute;
-	left: 0;
-	right: 0;
+	inset-inline-start: 0;
+	inset-inline-end: 0;
 	padding: inherit;
 	margin-block-start: 1em;
 	background: hsla(24, 20%, 50%, .08);
@@ -32,8 +32,8 @@ pre[data-line] {
 	&:before, &[data-end]:after {
 		content: attr(data-start);
 		position: absolute;
-		top: .4em;
-		left: .6em;
+		inset-block-start: .4em;
+		inset-inline-start: .6em;
 		min-width: 1em;
 		padding: 0 .5em;
 		background-color: hsla(24, 20%, 50%, .4);
@@ -48,8 +48,8 @@ pre[data-line] {
 
 	&[data-end]:after {
 		content: attr(data-end);
-		top: auto;
-		bottom: .4em;
+		inset-block-start: auto;
+		inset-block-end: .4em;
 	}
 
 	.line-numbers &:before, .line-numbers &:after {
diff --git a/src/css/welcome.scss b/src/css/welcome.scss
index 6cddba981..489569a5f 100644
--- a/src/css/welcome.scss
+++ b/src/css/welcome.scss
@@ -367,8 +367,8 @@ a.csp-card {
 	border-radius: 22px;
 	animation: loading-rotate 1s infinite linear;
 	position: absolute;
-	left: 47%;
-	top: 45%;
+	inset-inline-start: 47%;
+	inset-block-start: 45%;
 }
 
 @keyframes loading-rotate {