From 2da86929c8041f6585790c3baf1cba42220650cc Mon Sep 17 00:00:00 2001
From: Chris Swithinbank
Date: Mon, 25 Sep 2023 19:34:31 +0200
Subject: Small search modal improvements (#735)

---
 .changeset/great-tomatoes-tie.md           | 5 +++++
 .changeset/lemon-cameras-tell.md           | 5 +++++
 packages/starlight/components/Search.astro | 7 +++++++
 3 files changed, 17 insertions(+)
 create mode 100644 .changeset/great-tomatoes-tie.md
 create mode 100644 .changeset/lemon-cameras-tell.md

diff --git a/.changeset/great-tomatoes-tie.md b/.changeset/great-tomatoes-tie.md
new file mode 100644
index 00000000..6d792d3b
--- /dev/null
+++ b/.changeset/great-tomatoes-tie.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/starlight': patch
+---
+
+Use Starlight font custom property in Pagefind modal
diff --git a/.changeset/lemon-cameras-tell.md b/.changeset/lemon-cameras-tell.md
new file mode 100644
index 00000000..73819902
--- /dev/null
+++ b/.changeset/lemon-cameras-tell.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/starlight': patch
+---
+
+Fix RTL styling in Pagefind modal
diff --git a/packages/starlight/components/Search.astro b/packages/starlight/components/Search.astro
index 05470756..89c2bed0 100644
--- a/packages/starlight/components/Search.astro
+++ b/packages/starlight/components/Search.astro
@@ -205,6 +205,7 @@ const pagefindTranslations = {
 	#starlight__search {
 		--pagefind-ui-primary: var(--sl-color-accent-light);
 		--pagefind-ui-text: var(--sl-color-gray-2);
+		--pagefind-ui-font: var(--__sl-font);
 		--pagefind-ui-background: var(--sl-color-black);
 		--pagefind-ui-border: var(--sl-color-gray-5);
 		--pagefind-ui-border-width: 1px;
@@ -390,6 +391,12 @@ const pagefindTranslations = {
 		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 16 16'%3E%3Cpath d='M8 0v12m6 0H8'/%3E%3C/svg%3E");
 	}
 
+	/* Flip page and tree icons around the vertical axis when in an RTL layout. */
+	[dir='rtl'] .pagefind-ui__result-title::before,
+	[dir='rtl'] .pagefind-ui__result-nested::before {
+		transform: matrix(-1, 0, 0, 1, 0, 0);
+	}
+
 	#starlight__search .pagefind-ui__result-link::after {
 		content: '';
 		position: absolute;
-- 
cgit