fix: details summary arrow

Author: katzino

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)}
+    />
+  );
+}

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;
+    }
+  }
+}