From 9bc2bc2bf5c3f1a5d1fce13e8943553b485e5505 Mon Sep 17 00:00:00 2001
From: Nonimart <martinon.toinou@protonmail.com>
Date: Tue, 24 Jun 2025 15:21:17 +0200
Subject: [PATCH] FEATURE Introducing toolbar button styling

---
 resources/css/app.css                        |  1 +
 resources/css/components/article-toolbar.css | 23 ++++++++++++++++++++
 2 files changed, 24 insertions(+)
 create mode 100644 resources/css/components/article-toolbar.css

diff --git a/resources/css/app.css b/resources/css/app.css
index 8f23a9f..5e4a6b3 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -30,6 +30,7 @@
 @import './components/sommaire-index.css';
 @import './components/index-panel.css';
 @import './components/footnotes-index.css';
+@import './components/article-toolbar.css';
 
 /* ########### PAGES ############ */
 @import './pages/singles.css';
diff --git a/resources/css/components/article-toolbar.css b/resources/css/components/article-toolbar.css
new file mode 100644
index 0000000..d00ff38
--- /dev/null
+++ b/resources/css/components/article-toolbar.css
@@ -0,0 +1,23 @@
+#article-toolbar {
+  @apply col-span-2;
+
+  .tablist {
+    @apply flex gap-12 border-b border-primary;
+    button {
+      @apply text-xl  mt-8  nunito pb-4 flex items-center gap-4;
+      .icon {
+        @apply w-8 h-8 block;
+      }
+
+      &[aria-selected='true'] {
+        @apply text-primary border-b-4 border-primary;
+        .icon {
+          @apply filter-primary;
+        }
+      }
+      &[aria-selected='false'] {
+        @apply text-black opacity-40;
+      }
+    }
+  }
+}