From 47d5ea27ade03a5e39a54dfe285d7d574d64437f Mon Sep 17 00:00:00 2001
From: katzino <katzino@gmail.com>
Date: Wed, 26 Feb 2025 11:14:27 +0100
Subject: [PATCH 1/2] fix: details summary arrow

---
 src/theme/Details/index.js          | 15 +++++++++++++++
 src/theme/Details/styles.module.css | 15 +++++++++++++++
 2 files changed, 30 insertions(+)
 create mode 100644 src/theme/Details/index.js
 create mode 100644 src/theme/Details/styles.module.css

diff --git a/src/theme/Details/index.js b/src/theme/Details/index.js
new file mode 100644
index 0000000000..984e3c34c3
--- /dev/null
+++ b/src/theme/Details/index.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import clsx from 'clsx';
+import {Details as DetailsGeneric} from '@docusaurus/theme-common/Details';
+import styles from './styles.module.css';
+// Should we have a custom details/summary comp in Infima instead of reusing
+// alert classes?
+const InfimaClasses = 'alert alert--info';
+export default function Details({...props}) {
+  return (
+    <DetailsGeneric
+      {...props}
+      className={clsx(InfimaClasses, styles.details, props.className)}
+    />
+  );
+}
diff --git a/src/theme/Details/styles.module.css b/src/theme/Details/styles.module.css
new file mode 100644
index 0000000000..076750c8d7
--- /dev/null
+++ b/src/theme/Details/styles.module.css
@@ -0,0 +1,15 @@
+.details {
+  --docusaurus-details-summary-arrow-size: 0.6rem;
+  --docusaurus-details-decoration-color: var(--ifm-alert-border-color);
+  --docusaurus-details-transition: transform var(--ifm-transition-fast) ease;
+  margin: 0 0 var(--ifm-spacing-vertical);
+  border: 1px solid var(--ifm-alert-border-color);
+
+  & > summary {
+    padding-left: 1.6rem;
+
+    &::before {
+      top: 0.6rem;
+    }
+  }
+}

From 9c55163b34dec2caa53a33ddd5cd8275761d1844 Mon Sep 17 00:00:00 2001
From: katzino <katzino@gmail.com>
Date: Wed, 26 Feb 2025 11:18:45 +0100
Subject: [PATCH 2/2] fix: linter

---
 src/theme/Details/index.js | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/theme/Details/index.js b/src/theme/Details/index.js
index 984e3c34c3..3642c7c897 100644
--- a/src/theme/Details/index.js
+++ b/src/theme/Details/index.js
@@ -1,15 +1,16 @@
-import React from 'react';
+import { Details as DetailsGeneric } from '@docusaurus/theme-common/Details';
 import clsx from 'clsx';
-import {Details as DetailsGeneric} from '@docusaurus/theme-common/Details';
+import React from 'react';
+
 import styles from './styles.module.css';
 // Should we have a custom details/summary comp in Infima instead of reusing
 // alert classes?
 const InfimaClasses = 'alert alert--info';
-export default function Details({...props}) {
-  return (
-    <DetailsGeneric
-      {...props}
-      className={clsx(InfimaClasses, styles.details, props.className)}
-    />
-  );
+export default function Details({ ...props }) {
+    return (
+        <DetailsGeneric
+            {...props}
+            className={clsx(InfimaClasses, styles.details, props.className)}
+        />
+    );
 }