Rotate the chevron in FAQs

graphql-hive · Aug 21, 2024 · fad9732 · fad9732
1 parent d0c9dca
commit fad9732
Showing 1 changed file with 1 addition and 1 deletion.
diff --git a/packages/web/docs/src/components/frequently-asked-questions/index.tsx b/packages/web/docs/src/components/frequently-asked-questions/index.tsx
@@ -49,7 +49,7 @@ export function FrequentlyAskedQuestions({ className }: { className?: string })
                   <Accordion.Header>
                     <Accordion.Trigger className="hover:bg-beige-100/80 -mx-2 my-1 flex w-[calc(100%+1rem)] flex-row items-center justify-between rounded-xl bg-white px-2 py-3 text-left font-medium transition-colors duration-[0.8s] md:my-2 md:py-4">
                       {question}
-                      <ChevronDownIcon className="size-5" />
+                      <ChevronDownIcon className="size-5 transition duration-500 ease-in [[data-state='open']_&]:[transform:rotateX(180deg)]" />
                     </Accordion.Trigger>
                   </Accordion.Header>
                   <Accordion.Content className="rdx-state-open:motion-safe:animate-accordion-down rdx-state-closed:motion-safe:animate-accordion-down overflow-hidden bg-white text-green-800 transition-all">