RTL fixes and anchor restyle

sass/_article-list.scss

@@ -26,6 +26,10 @@
 			a:hover::after {
 				transform: none;
 				opacity: 1;
+
+				:root[dir*="rtl"] & {
+					transform: scaleX(-1);
+				}
 			}
 
 			a::after {
@@ -40,6 +44,10 @@
 				width: 1rem;
 				height: 1rem;
 				content: "";
+
+				:root[dir*="rtl"] & {
+					transform: scaleX(-1) translateX(-0.25rem);
+				}
 			}
 		}
 

sass/_article.scss

@@ -107,21 +107,21 @@
 
 		&[open] summary~* {
 			transform-origin: bottom right;
-			animation: toc-dropdown-open var(--transition);
+			animation: toc-open var(--transition);
 
 			:root[dir*="rtl"] & {
 				transform-origin: bottom left;
-				animation: toc-dropdown-open-rtl var(--transition);
+				animation: toc-open-rtl var(--transition);
 			}
 
-			@keyframes toc-dropdown-open {
+			@keyframes toc-open {
 				from {
 					transform: scale(0.5) translate(1rem, 1rem);
 					opacity: 0;
 				}
 			}
 
-			@keyframes toc-dropdown-open-rtl {
+			@keyframes toc-open-rtl {
 				from {
 					transform: scale(0.5) translate(-1rem, 1rem);
 					opacity: 0;

sass/_comments.scss

@@ -32,7 +32,7 @@
 			background-color: transparent;
 
 			&:disabled {
-				animation: loading-fill var(--transition-long) ease-in-out alternate infinite;
+				animation: loading-shimmer var(--transition-long) ease-in-out alternate infinite;
 				transition: none;
 				cursor: not-allowed;
 
@@ -45,7 +45,7 @@
 					transform: none;
 				}
 
-				@keyframes loading-fill {
+				@keyframes loading-shimmer {
 					to {
 						background-position-x: -200%;
 					}

sass/_input.scss

@@ -118,6 +118,10 @@ input[type="checkbox"] {
 			&::before {
 				transform: translateX(1rem);
 				background-color: var(--contrast-color);
+
+				:root[dir*="rtl"] & {
+					transform: translateX(-1rem);
+				}
 			}
 		}
 

sass/_pre-container.scss

@@ -55,11 +55,15 @@
 				transition: var(--transition);
 				width: 1rem;
 				height: 1rem;
+
+				:root[dir*="rtl"] & {
+					transform: scaleX(-1);
+				}
 			}
 		}
 
 		&.active {
-			animation: active-fill var(--transition-long);
+			animation: active-shimmer var(--transition-long);
 
 			button {
 				box-shadow: var(--edge-highlight);
@@ -71,7 +75,7 @@
 				}
 			}
 
-			@keyframes active-fill {
+			@keyframes active-shimmer {
 				to {
 					background-position-x: -200%;
 				}

sass/_zola-anchor.scss

@@ -5,16 +5,31 @@ h4,
 h5,
 h6 {
 	&:hover .zola-anchor {
+		transform: translateY(-0.125em);
 		opacity: 1;
+
+		:root[dir*="rtl"] & {
+			transform: translateY(-0.125em);
+		}
 	}
 }
 
 .zola-anchor {
-	display: inline-block;
+	position: absolute;
+	transform: translateX(0.5rem) translateY(-0.125em);
 	opacity: 0;
 	transition: var(--transition);
-	margin: 0 0.25em;
+	margin-inline-start: calc(-1em + -0.5rem);
 	color: var(--fg-muted-4);
+	line-height: 1;
+
+	@media only screen and (max-width: 832px) {
+		display: none;
+	}
+
+	:root[dir*="rtl"] & {
+		transform: translateX(-0.5rem) translateY(-0.125em);
+	}
 
 	&:hover {
 		color: var(--accent-color);
@@ -34,6 +49,10 @@ h6 {
 		transition: var(--transition);
 		width: 1em;
 		height: 1em;
+
+		:root[dir*="rtl"] & {
+			transform: scaleX(-1);
+		}
 	}
 }