From 066ed66ea6056e7da4e66e3829db132c77e8bd03 Mon Sep 17 00:00:00 2001
From: timotheegoguely <timothee@goguely.com>
Date: Wed, 30 Oct 2024 15:15:53 +0100
Subject: [PATCH] Add edit and delete buttons under comments, and split <style>
 from PdfViewer to Comments and Comment components

---
 src/assets/css/src/2.blocks.button.css        |   8 ++
 src/assets/css/src/3.utilities.icons.css      |  26 +++--
 src/components/comments/Comment.vue           |  68 +++++++++++-
 src/components/comments/Comments.vue          |  56 +++++++++-
 .../project/client-brief/PdfViewer.vue        | 101 ------------------
 5 files changed, 145 insertions(+), 114 deletions(-)

diff --git a/src/assets/css/src/2.blocks.button.css b/src/assets/css/src/2.blocks.button.css
index 039ef61..1724d7d 100644
--- a/src/assets/css/src/2.blocks.button.css
+++ b/src/assets/css/src/2.blocks.button.css
@@ -94,6 +94,14 @@ input[type="checkbox"]:checked + .btn--primary {
   border-radius: var(--rounded-md);
 }
 
+.btn--icon {
+  --icon-size: 1rem;
+  padding: var(--space-16);
+}
+.btn--icon.btn--sm {
+  padding: .375rem;
+}
+
 @media (hover: hover) {
   .btn:hover {
     --background: var(--color-primary-hover);
diff --git a/src/assets/css/src/3.utilities.icons.css b/src/assets/css/src/3.utilities.icons.css
index 0ead9f0..d550844 100644
--- a/src/assets/css/src/3.utilities.icons.css
+++ b/src/assets/css/src/3.utilities.icons.css
@@ -5,25 +5,26 @@
   --icon-point: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50%' cy='50%' r='4' fill='currentColor'/%3E%3C/svg%3E%0A");
   --icon-point-active: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50%' cy='50%' r='4' fill='currentColor'/%3E%3Ccircle cx='50%' cy='50%' r='8' fill='currentColor' opacity='0.2'/%3E%3C/svg%3E%0A");
   --icon-home: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.875 10L10 1.875L18.125 10M4.375 11.875V18.125H15.625V11.875' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
-  --icon-calendar: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.125 4.375C2.79348 4.375 2.47554 4.5067 2.24112 4.74112C2.0067 4.97554 1.875 5.29348 1.875 5.625V16.875C1.875 17.2065 2.0067 17.5245 2.24112 17.7589C2.47554 17.9933 2.79348 18.125 3.125 18.125H16.875C17.2065 18.125 17.5245 17.9933 17.7589 17.7589C17.9933 17.5245 18.125 17.2065 18.125 16.875V5.625C18.125 5.29348 17.9933 4.97554 17.7589 4.74112C17.5245 4.5067 17.2065 4.375 16.875 4.375H14.375M1.875 9.375H18.125M5.625 1.875V6.875M14.375 1.875V6.875M5.625 4.375H11.875' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+  --icon-calendar: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.125 4.375C2.79348 4.375 2.47554 4.5067 2.24112 4.74112C2 4.97554 1.875 5.29348 1.875 5.625V16.875C1.875 17.2065 2 17.5245 2.24112 17.7589C2.47554 18 2.79348 18.125 3.125 18.125H16.875C17.2065 18.125 17.5245 18 17.7589 17.7589C18 17.5245 18.125 17.2065 18.125 16.875V5.625C18.125 5.29348 18 4.97554 17.7589 4.74112C17.5245 4.5067 17.2065 4.375 16.875 4.375H14.375M1.875 9.375H18.125M5.625 1.875V6.875M14.375 1.875V6.875M5.625 4.375H11.875' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
   --icon-check: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.875 11.9375L5.2875 16.325C5.40265 16.4746 5.5502 16.5962 5.71906 16.6806C5.88792 16.7651 6.07372 16.8101 6.2625 16.8125C6.44824 16.8146 6.63213 16.7754 6.80078 16.6975C6.96944 16.6197 7.11863 16.5052 7.2375 16.3625L18.125 3.1875' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
   --icon-check-3: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.875 11.9375L5.2875 16.325C5.40265 16.4746 5.5502 16.5962 5.71906 16.6806C5.88792 16.7651 6.07372 16.8101 6.2625 16.8125C6.44824 16.8146 6.63213 16.7754 6.80078 16.6975C6.96944 16.6197 7.11863 16.5052 7.2375 16.3625L18.125 3.1875' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-  --icon-user: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.6625 16.125C5.2203 15.2094 6.00426 14.4527 6.93901 13.9276C7.87376 13.4025 8.92787 13.1267 10 13.1267C11.0721 13.1267 12.1262 13.4025 13.061 13.9276C13.9957 14.4527 14.7797 15.2094 15.3375 16.125M13.125 8.125C13.125 9.85089 11.7259 11.25 10 11.25C8.27411 11.25 6.875 9.85089 6.875 8.125C6.875 6.39911 8.27411 5 10 5C11.7259 5 13.125 6.39911 13.125 8.125ZM18.125 10C18.125 14.4873 14.4873 18.125 10 18.125C5.51269 18.125 1.875 14.4873 1.875 10C1.875 5.51269 5.51269 1.875 10 1.875C14.4873 1.875 18.125 5.51269 18.125 10Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
-  --icon-megaphone: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.85 14.4624C11.7448 15.3307 11.3125 16.1262 10.6412 16.687C9.96999 17.2477 9.11024 17.5315 8.23708 17.4805C7.36393 17.4295 6.54305 17.0476 5.94162 16.4125C5.34019 15.7775 5.00346 14.937 5 14.0624V12.0749M17.3 16.3374L2.7125 11.2499C2.47448 11.1669 2.26713 11.0138 2.11767 10.8108C1.96821 10.6078 1.88362 10.3644 1.875 10.1124V8.74991C1.87603 8.49151 1.95711 8.23979 2.10709 8.02937C2.25707 7.81895 2.46858 7.66018 2.7125 7.57491L17.3 2.49991C17.3937 2.46828 17.4935 2.45931 17.5913 2.47374C17.6891 2.48817 17.782 2.5256 17.8626 2.58294C17.9431 2.64028 18.0089 2.7159 18.0545 2.8036C18.1001 2.89129 18.1243 2.98856 18.125 3.08741V15.7499C18.1243 15.8488 18.1001 15.946 18.0545 16.0337C18.0089 16.1214 17.9431 16.197 17.8626 16.2544C17.782 16.3117 17.6891 16.3491 17.5913 16.3636C17.4935 16.378 17.3937 16.369 17.3 16.3374Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
-  --icon-inspiration: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 2.26245V4.13745M15 4.04995L13.6754 5.38745M17.8504 7.92495H15.9754M5.00039 4.04995L6.32539 5.38745M2.15039 7.92495H4.02539M14.3754 11.25C14.3783 10.4699 14.1726 9.70317 13.7796 9.02932C13.3865 8.35547 12.8205 7.79897 12.14 7.41746C11.4596 7.03595 10.6895 6.84332 9.90957 6.85952C9.12964 6.87572 8.36823 7.10016 7.70421 7.50959C7.04019 7.91903 6.49773 8.49856 6.13301 9.18815C5.7683 9.87774 5.5946 10.6523 5.6299 11.4316C5.66521 12.2109 5.90825 12.9666 6.33383 13.6204C6.75942 14.2741 7.35207 14.8022 8.05039 15.15V17.3C8.05365 17.4271 8.10645 17.5479 8.19752 17.6366C8.28859 17.7254 8.41073 17.775 8.53789 17.775H11.4629C11.59 17.775 11.7122 17.7254 11.8033 17.6366C11.8943 17.5479 11.9471 17.4271 11.9504 17.3V15.1125C12.6707 14.7539 13.2782 14.2036 13.706 13.5222C14.1338 12.8407 14.3654 12.0545 14.3754 11.25Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
-  --icon-user: url("data:image/svg+xml,%3Csvg width='20' height='21' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.6625 16.875C5.2203 15.9594 6.00426 15.2027 6.93901 14.6776C7.87376 14.1525 8.92787 13.8767 10 13.8767C11.0721 13.8767 12.1262 14.1525 13.061 14.6776C13.9957 15.2027 14.7797 15.9594 15.3375 16.875M13.125 8.875C13.125 10.6009 11.7259 12 10 12C8.27411 12 6.875 10.6009 6.875 8.875C6.875 7.14911 8.27411 5.75 10 5.75C11.7259 5.75 13.125 7.14911 13.125 8.875ZM18.125 10.75C18.125 15.2373 14.4873 18.875 10 18.875C5.51269 18.875 1.875 15.2373 1.875 10.75C1.875 6.26269 5.51269 2.625 10 2.625C14.4873 2.625 18.125 6.26269 18.125 10.75Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
-  --icon-logout: url("data:image/svg+xml,%3Csvg width='20' height='21' viewBox='0 0 20 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.125 15.125V17.625C13.125 17.9565 12.9933 18.2745 12.7589 18.5089C12.5245 18.7433 12.2065 18.875 11.875 18.875H3.125C2.79348 18.875 2.47554 18.7433 2.24112 18.5089C2.0067 18.2745 1.875 17.9565 1.875 17.625V3.875C1.875 3.54348 2.0067 3.22554 2.24112 2.99112C2.47554 2.7567 2.79348 2.625 3.125 2.625H11.875C12.2065 2.625 12.5245 2.7567 12.7589 2.99112C12.9933 3.22554 13.125 3.54348 13.125 3.875V6.375M9.375 10.75H18.125M18.125 10.75L15.625 8.25M18.125 10.75L15.625 13.25' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+  --icon-user: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.6625 16.125C5.2203 15.2094 6.00426 14.4527 6.93901 13.9276C7.87376 13.4025 8.92787 13.1267 10 13.1267C11.0721 13.1267 12.1262 13.4025 13.061 13.9276C14 14.4527 14.7797 15.2094 15.3375 16.125M13.125 8.125C13.125 9.85089 11.7259 11.25 10 11.25C8.27411 11.25 6.875 9.85089 6.875 8.125C6.875 6.39911 8.27411 5 10 5C11.7259 5 13.125 6.39911 13.125 8.125ZM18.125 10C18.125 14.4873 14.4873 18.125 10 18.125C5.51269 18.125 1.875 14.4873 1.875 10C1.875 5.51269 5.51269 1.875 10 1.875C14.4873 1.875 18.125 5.51269 18.125 10Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+  --icon-megaphone: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.85 14.4624C11.7448 15.3307 11.3125 16.1262 10.6412 16.687C10 17.2477 9.11024 17.5315 8.23708 17.4805C7.36393 17.4295 6.54305 17.0476 5.94162 16.4125C5.34019 15.7775 5.00346 14.937 5 14.0624V12.0749M17.3 16.3374L2.7125 11.2499C2.47448 11.1669 2.26713 11.0138 2.11767 10.8108C1.96821 10.6078 1.88362 10.3644 1.875 10.1124V8.74991C1.87603 8.49151 1.95711 8.23979 2.10709 8.02937C2.25707 7.81895 2.46858 7.66018 2.7125 7.57491L17.3 2.49991C17.3937 2.46828 17.4935 2.45931 17.5913 2.47374C17.6891 2.48817 17.782 2.5256 17.8626 2.58294C17.9431 2.64028 18.0089 2.7159 18.0545 2.8036C18.1001 2.89129 18.1243 2.98856 18.125 3.08741V15.7499C18.1243 15.8488 18.1001 15.946 18.0545 16.0337C18.0089 16.1214 17.9431 16.197 17.8626 16.2544C17.782 16.3117 17.6891 16.3491 17.5913 16.3636C17.4935 16.378 17.3937 16.369 17.3 16.3374Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+  --icon-inspiration: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 2.26245V4.13745M15 4.04995L13.6754 5.38745M17.8504 7.92495H15.9754M5 4.04995L6.32539 5.38745M2.15039 7.92495H4.02539M14.3754 11.25C14.3783 10.4699 14.1726 9.70317 13.7796 9.02932C13.3865 8.35547 12.8205 7.79897 12.14 7.41746C11.4596 7.03595 10.6895 6.84332 9.90957 6.85952C9.12964 6.87572 8.36823 7.10016 7.70421 7.50959C7.04019 7.91903 6.49773 8.49856 6.13301 9.18815C5.7683 9.87774 5.5946 10.6523 5.6299 11.4316C5.66521 12.2109 5.90825 12.9666 6.33383 13.6204C6.75942 14.2741 7.35207 14.8022 8.05039 15.15V17.3C8.05365 17.4271 8.10645 17.5479 8.19752 17.6366C8.28859 17.7254 8.41073 17.775 8.53789 17.775H11.4629C11.59 17.775 11.7122 17.7254 11.8033 17.6366C11.8943 17.5479 11.9471 17.4271 11.9504 17.3V15.1125C12.6707 14.7539 13.2782 14.2036 13.706 13.5222C14.1338 12.8407 14.3654 12.0545 14.3754 11.25Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+  --icon-user: url("data:image/svg+xml,%3Csvg width='20' height='21' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.6625 16.875C5.2203 15.9594 6.00426 15.2027 6.93901 14.6776C7.87376 14.1525 8.92787 13.8767 10 13.8767C11.0721 13.8767 12.1262 14.1525 13.061 14.6776C14 15.2027 14.7797 15.9594 15.3375 16.875M13.125 8.875C13.125 10.6009 11.7259 12 10 12C8.27411 12 6.875 10.6009 6.875 8.875C6.875 7.14911 8.27411 5.75 10 5.75C11.7259 5.75 13.125 7.14911 13.125 8.875ZM18.125 10.75C18.125 15.2373 14.4873 18.875 10 18.875C5.51269 18.875 1.875 15.2373 1.875 10.75C1.875 6.26269 5.51269 2.625 10 2.625C14.4873 2.625 18.125 6.26269 18.125 10.75Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+  --icon-logout: url("data:image/svg+xml,%3Csvg width='20' height='21' viewBox='0 0 20 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.125 15.125V17.625C13.125 17.9565 13 18.2745 12.7589 18.5089C12.5245 18.7433 12.2065 18.875 11.875 18.875H3.125C2.79348 18.875 2.47554 18.7433 2.24112 18.5089C2 18.2745 1.875 17.9565 1.875 17.625V3.875C1.875 3.54348 2 3.22554 2.24112 3C2.47554 2.7567 2.79348 2.625 3.125 2.625H11.875C12.2065 2.625 12.5245 2.7567 12.7589 3C13 3.22554 13.125 3.54348 13.125 3.875V6.375M9.375 10.75H18.125M18.125 10.75L15.625 8.25M18.125 10.75L15.625 13.25' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
   --icon-summary: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.875 6.0625L9.5625 13.75C9.61861 13.8098 9.68638 13.8574 9.76163 13.89C9.83688 13.9226 9.918 13.9394 10 13.9394C10.082 13.9394 10.1631 13.9226 10.2384 13.89C10.3136 13.8574 10.3814 13.8098 10.4375 13.75L18.125 6.0625' stroke='%235E6060' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
   --icon-favorite: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 16.8126L3.1 10.5626C-0.65 6.81262 4.8625 -0.387383 10 5.43762C15.1375 -0.387383 20.625 6.83762 16.9 10.5626L10 16.8126Z' fill='currentColor'/%3E%3C/svg%3E%0A");
   --icon-chevron-single-down: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.875 6.0625L9.5625 13.75C9.61861 13.8098 9.68638 13.8574 9.76163 13.89C9.83688 13.9226 9.918 13.9394 10 13.9394C10.082 13.9394 10.1631 13.9226 10.2384 13.89C10.3136 13.8574 10.3814 13.8098 10.4375 13.75L18.125 6.0625' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
   --icon-chevron-single-left: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.9377 1.875L6.25019 9.5625C6.1904 9.61861 6.14275 9.68638 6.11017 9.76163C6.0776 9.83688 6.06079 9.918 6.06079 10C6.06079 10.082 6.0776 10.1631 6.11017 10.2384C6.14275 10.3136 6.1904 10.3814 6.25019 10.4375L13.9377 18.125' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
-  --icon-votre-brief: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.0625 5.8375C13.9088 5.60629 13.7056 5.41211 13.4677 5.26897C13.2298 5.12583 12.9631 5.0373 12.6869 5.0098C12.4106 4.98229 12.1316 5.01648 11.8702 5.1099C11.6087 5.20332 11.3713 5.35364 11.175 5.55M1.875 18.125L8.85 11.7875M18.125 7.5C18.125 10.6066 15.6066 13.125 12.5 13.125C9.3934 13.125 6.875 10.6066 6.875 7.5C6.875 4.3934 9.3934 1.875 12.5 1.875C15.6066 1.875 18.125 4.3934 18.125 7.5Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
-  --icon-offre-commerciale: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.625 10H14.375M5.625 13.75H14.375M3.125 5.625H16.875C17.5654 5.625 18.125 6.18464 18.125 6.875V16.875C18.125 17.5654 17.5654 18.125 16.875 18.125H3.125C2.43464 18.125 1.875 17.5654 1.875 16.875V6.875C1.875 6.18464 2.43464 5.625 3.125 5.625ZM7.5 1.875H12.5C12.8315 1.875 13.1495 2.0067 13.3839 2.24112C13.6183 2.47554 13.75 2.79348 13.75 3.125V5.625H6.25V3.125C6.25 2.79348 6.3817 2.47554 6.61612 2.24112C6.85054 2.0067 7.16848 1.875 7.5 1.875Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
-  --icon-brief-enrichi: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.8751 7.5C12.5655 7.5 13.1251 6.94036 13.1251 6.25C13.1251 5.55965 12.5655 5 11.8751 5C11.1848 5 10.6251 5.55965 10.6251 6.25C10.6251 6.94036 11.1848 7.5 11.8751 7.5Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.87511 13.75C7.22029 13.75 7.50011 13.4702 7.50011 13.125C7.50011 12.7798 7.22029 12.5 6.87511 12.5C6.52993 12.5 6.25011 12.7798 6.25011 13.125C6.25011 13.4702 6.52993 13.75 6.87511 13.75Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.87511 9.375C7.56547 9.375 8.12511 8.81536 8.12511 8.125C8.12511 7.43465 7.56547 6.875 6.87511 6.875C6.18476 6.875 5.62511 7.43465 5.62511 8.125C5.62511 8.81536 6.18476 9.375 6.87511 9.375Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13.1501 16.6C13.1362 16.3575 13.0519 16.1244 12.9076 15.929C12.7633 15.7337 12.5653 15.5846 12.3376 15.5C11.7722 15.3142 11.2917 14.9328 10.9824 14.4243C10.6731 13.9159 10.5553 13.3138 10.6502 12.7263C10.7451 12.1388 11.0465 11.6044 11.5001 11.2192C11.9538 10.8341 12.53 10.6234 13.1251 10.625H15.4626C15.8635 10.6261 16.2588 10.5308 16.6152 10.3471C16.9715 10.1634 17.2784 9.89665 17.5101 9.56942C17.7417 9.24219 17.8913 8.86406 17.9461 8.46691C18.0009 8.06976 17.9594 7.66525 17.8251 7.2875C17.3279 5.88371 16.4545 4.64357 15.3003 3.70256C14.146 2.76155 12.7553 2.15588 11.2801 1.95172C9.80497 1.74756 8.30206 1.95276 6.93562 2.5449C5.56917 3.13705 4.39176 4.09335 3.53201 5.30935C2.67226 6.52534 2.16325 7.95424 2.06059 9.43993C1.95793 10.9256 2.26558 12.4109 2.94991 13.7336C3.63425 15.0563 4.66895 16.1655 5.94096 16.9399C7.21298 17.7144 8.67338 18.1243 10.1626 18.125C10.8981 18.1271 11.6302 18.0261 12.3376 17.825C12.5974 17.7522 12.8224 17.5884 12.9716 17.3636C13.1207 17.1387 13.1841 16.8677 13.1501 16.6Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+  --icon-votre-brief: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.0625 5.8375C13.9088 5.60629 13.7056 5.41211 13.4677 5.26897C13.2298 5.12583 12.9631 5.0373 12.6869 5.0098C12.4106 5 12.1316 5.01648 11.8702 5.1099C11.6087 5.20332 11.3713 5.35364 11.175 5.55M1.875 18.125L8.85 11.7875M18.125 7.5C18.125 10.6066 15.6066 13.125 12.5 13.125C9.3934 13.125 6.875 10.6066 6.875 7.5C6.875 4.3934 9.3934 1.875 12.5 1.875C15.6066 1.875 18.125 4.3934 18.125 7.5Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+  --icon-offre-commerciale: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.625 10H14.375M5.625 13.75H14.375M3.125 5.625H16.875C17.5654 5.625 18.125 6.18464 18.125 6.875V16.875C18.125 17.5654 17.5654 18.125 16.875 18.125H3.125C2.43464 18.125 1.875 17.5654 1.875 16.875V6.875C1.875 6.18464 2.43464 5.625 3.125 5.625ZM7.5 1.875H12.5C12.8315 1.875 13.1495 2 13.3839 2.24112C13.6183 2.47554 13.75 2.79348 13.75 3.125V5.625H6.25V3.125C6.25 2.79348 6.3817 2.47554 6.61612 2.24112C6.85054 2 7.16848 1.875 7.5 1.875Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+  --icon-brief-enrichi: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.8751 7.5C12.5655 7.5 13.1251 6.94036 13.1251 6.25C13.1251 5.55965 12.5655 5 11.8751 5C11.1848 5 10.6251 5.55965 10.6251 6.25C10.6251 6.94036 11.1848 7.5 11.8751 7.5Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.87511 13.75C7.22029 13.75 7.50011 13.4702 7.50011 13.125C7.50011 12.7798 7.22029 12.5 6.87511 12.5C6.52993 12.5 6.25011 12.7798 6.25011 13.125C6.25011 13.4702 6.52993 13.75 6.87511 13.75Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.87511 9.375C7.56547 9.375 8.12511 8.81536 8.12511 8.125C8.12511 7.43465 7.56547 6.875 6.87511 6.875C6.18476 6.875 5.62511 7.43465 5.62511 8.125C5.62511 8.81536 6.18476 9.375 6.87511 9.375Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13.1501 16.6C13.1362 16.3575 13.0519 16.1244 12.9076 15.929C12.7633 15.7337 12.5653 15.5846 12.3376 15.5C11.7722 15.3142 11.2917 14.9328 10.9824 14.4243C10.6731 13.9159 10.5553 13.3138 10.6502 12.7263C10.7451 12.1388 11.0465 11.6044 11.5001 11.2192C11.9538 10.8341 12.53 10.6234 13.1251 10.625H15.4626C15.8635 10.6261 16.2588 10.5308 16.6152 10.3471C16.9715 10.1634 17.2784 9.89665 17.5101 9.56942C17.7417 9.24219 17.8913 8.86406 17.9461 8.46691C18 8.06976 17.9594 7.66525 17.8251 7.2875C17.3279 5.88371 16.4545 4.64357 15.3003 3.70256C14.146 2.76155 12.7553 2.15588 11.2801 1.95172C9.80497 1.74756 8.30206 1.95276 6.93562 2.5449C5.56917 3.13705 4.39176 4.09335 3.53201 5.30935C2.67226 6.52534 2.16325 7.95424 2.06059 9.43993C1.95793 10.9256 2.26558 12.4109 2.94991 13.7336C3.63425 15.0563 4.66895 16.1655 5.94096 16.9399C7.21298 17.7144 8.67338 18.1243 10.1626 18.125C10.8981 18.1271 11.6302 18.0261 12.3376 17.825C12.5974 17.7522 12.8224 17.5884 12.9716 17.3636C13.1207 17.1387 13.1841 16.8677 13.1501 16.6Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
   --icon-echantillon-virtuel: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 18V8.12502M10 8.12502L2.01294 5M10 8.12502L17.9879 5M17.9875 5C17.9209 5 17.8298 4.8402 17.725 4.8L10.225 1.96249C10.154 1.93151 10 1.91553 10 1.91553C9.92257 1.91553 9.84597 1.93151 9.775 1.96249L2.275 4.84999C2.17591 4.87623 2.08542 4.92794 2 5C1.92519 5.10562 1.87666 5.23795 1.875 5.37499V14.525C1.87662 14.6498 1.91559 14.7713 2 14.8738C2.05817 14.9763 2.15852 15 2.275 15.1L9.775 18H10.225L17.725 15C17.8415 15 18 15 18 15C18.0844 14.7713 18.1234 14.6498 18.125 14.525V5.425C18.1356 5.2709 18 5.11868 18 5Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
   --icon-upload: url("data:image/svg+xml,%3Csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M.714 15v1.429a2.857 2.857 0 0 0 2.857 2.857H16.43a2.857 2.857 0 0 0 2.857-2.857V15M5.714 5.714l4.286-5m0 0 4.286 5M10 .714v12.857' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E ");
-  --icon-description: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.714294 1.42856H19.2857M0.714294 5.71427H15M0.714294 9.99999H10.7143M0.714294 18.5714H19.2857M0.714294 14.2857H15' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
-  --icon-delete: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.4287 7.85722L15.0001 19.2858H5.00014L3.57157 7.85722M1.42871 5.00008H18.5716M6.37157 4.58579V2.11436C6.37157 1.73548 6.52208 1.37212 6.78999 1.10421C7.0579 0.836301 7.42126 0.685791 7.80014 0.685791H12.0859C12.4647 0.685791 12.8281 0.836301 13.096 1.10421C13.3639 1.37212 13.5144 1.73548 13.5144 2.11436V4.97151' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+  --icon-description: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.714294 1.42856H19.2857M0.714294 5.71427H15M0.714294 10H10.7143M0.714294 18.5714H19.2857M0.714294 14.2857H15' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+  --icon-delete: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.4286 7.85713L15 19.2857H5L3.57145 7.85713M1.42859 5H18.5714M6.37145 4.5857V2.11427C6.37145 1.73539 6.52196 1.37203 6.78986 1.10412C7.05777 0.836209 7.42114 0.685699 7.8 0.685699H12.0857C12.4646 0.685699 12.828 0.836209 13.0959 1.10412C13.3638 1.37203 13.5143 1.73539 13.5143 2.11427V4.97141' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");;
+  --icon-edit: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.714233 19.2858H16.4285M9.28571 14.2858L5 15.0573L5.71428 10.7144L15.3286 1.12868C15.4614 1 15.6194 0.888509 15.7935 0.815983C15.9675 0.743456 16.1543 0.706116 16.3428 0.706116C16.5314 0.706116 16.7182 0.743456 16.8922 0.815983C17.0663 0.888509 17.2243 1 17.3571 1.12868L18.8714 2.64297C19.0053 2.77577 19.1116 2.93378 19.1841 3.10786C19.2567 3.28195 19.294 3.46867 19.294 3.65726C19.294 3.84584 19.2567 4.03257 19.1841 4.20665C19.1116 4.38074 19.0053 4.53874 18.8714 4.67154L9.28571 14.2858Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
   --icon-arrow-left: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.125 10H1.875M1.875 10L6.25 5.625M1.875 10L6.25 14.375' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
   --icon-document: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.7143 0.714294H3.57145C3.19257 0.714294 2.82921 0.864804 2.5613 1.13271C2.29339 1.40062 2.14288 1.76399 2.14288 2.14287V17.8572C2.14288 18.236 2.29339 18.5994 2.5613 18.8673C2.82921 19.1352 3.19257 19.2857 3.57145 19.2857H16.4286C16.8075 19.2857 17.1708 19.1352 17.4387 18.8673C17.7067 18.5994 17.8572 18.236 17.8572 17.8572V7.85715M10.7143 0.714294L17.8572 7.85715M10.7143 0.714294V7.85715H17.8572' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
   --icon-comment: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.625 10.625C5.97018 10.625 6.25 10.3452 6.25 10C6.25 9.65482 5.97018 9.375 5.625 9.375C5.27982 9.375 5 9.65482 5 10C5 10.3452 5.27982 10.625 5.625 10.625Z' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.6875 10.625C10.0327 10.625 10.3125 10.3452 10.3125 10C10.3125 9.65482 10.0327 9.375 9.6875 9.375C9.34232 9.375 9.0625 9.65482 9.0625 10C9.0625 10.3452 9.34232 10.625 9.6875 10.625Z' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13.75 10.625C14.0952 10.625 14.375 10.3452 14.375 10C14.375 9.65482 14.0952 9.375 13.75 9.375C13.4048 9.375 13.125 9.65482 13.125 10C13.125 10.3452 13.4048 10.625 13.75 10.625Z' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10 1.875C8.5303 1.87546 7.08825 2.27455 5.82743 3.02977C4.56661 3.78499 3.53425 4.86805 2.84029 6.1636C2.14634 7.45914 1.81679 8.91866 1.88674 10.3867C1.95668 11.8547 2.42351 13.2763 3.2375 14.5L1.875 18.125L6.4375 17.3C7.53613 17.8369 8.74178 18.1188 9.96456 18.1249C11.1873 18.131 12.3957 17.8609 13.4996 17.335C14.6035 16.809 15.5745 16.0407 16.3401 15.0872C17.1057 14.1338 17.6462 13.0198 17.9214 11.8284C18.1966 10.637 18.1993 9.39878 17.9293 8.20616C17.6593 7.01354 17.1237 5.89723 16.3622 4.94046C15.6008 3.98368 14.6332 3.21111 13.5316 2.68034C12.43 2.14957 11.2228 1.87428 10 1.875Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
@@ -94,6 +95,9 @@
 [data-icon="delete"] { 
   --icon: var(--icon-delete)
 }
+[data-icon="edit"] { 
+  --icon: var(--icon-edit)
+}
 [data-icon="arrow-left"] { 
   --icon: var(--icon-arrow-left)
 }
diff --git a/src/components/comments/Comment.vue b/src/components/comments/Comment.vue
index f5d66c8..920ab7b 100644
--- a/src/components/comments/Comment.vue
+++ b/src/components/comments/Comment.vue
@@ -17,7 +17,12 @@
       {{ comment.text }}
     </p>
     <footer v-if="comment.replies?.length > 0" class="comment__replies">
-      <span>{{ comment.replies.length }} réponse</span>
+      <p>{{ comment.replies.length }} réponse{{ comment.replies.length > 1 ? 's' : '' }}</p>
+      <!-- TODO: n'afficher que s'il s'agit du commentaire de l'utilisateur actuellement connecté -->
+      <div class="comment__ctas | mt-8">
+        <button class="btn btn--transparent btn--icon btn--sm" data-icon="edit"><span class="sr-only">Éditer</span></button>
+        <button class="btn btn--transparent btn--icon btn--sm" data-icon="delete"><span class="sr-only">Supprimer</span></button>
+      </div>
     </footer>
   </article>
 </template>
@@ -76,3 +81,64 @@ async function readNotification(notificationId) {
   user.notifications = newNotifications;
 }
 </script>
+
+<style scoped>
+.comments > .comment:not([data-opened="true"]) {
+  cursor: pointer;
+}
+.comment {
+  --flow-space: var(--space-12);
+  font-size: var(--text-sm);
+  border: var(--border);
+  border-width: 2px;
+  border-radius: var(--rounded-lg);
+  padding: var(--space-12);
+  color: var(--color-grey-400);
+}
+.comment header p {
+  display: flex;
+  gap: var(--space-8);
+}
+.comment header strong,
+.comment footer {
+  font-weight: 500;
+  color: var(--color-white);
+}
+.comment header time {
+  color: var(--color-primary);
+  font-weight: 500;
+  margin-left: auto;
+}
+.comment[data-status="unread"] {
+  background: var(--color-white);
+  border-color: var(--color-white);
+  color: var(--color-grey-700);
+}
+.comment[data-status="unread"] header p > :first-child::before {
+  content: "";
+  display: inline-block;
+  width: 0.375rem;
+  height: 0.375rem;
+  border-radius: 50%;
+  background: var(--color-primary);
+  margin-right: var(--space-8);
+  margin-bottom: 0.075em;
+}
+.comment[data-status="unread"] header strong,
+.comment[data-status="unread"] footer {
+  color: var(--color-black);
+}
+.comment[data-status="unread"] header time {
+  color: var(--color-primary);
+}
+.comment[data-opened="true"] {
+  border-color: transparent;
+}
+.comment[data-opened="true"] .comment__replies {
+  color: var(--color-primary);
+}
+.comment__ctas > * {
+  --border-color: transparent;
+  margin-right: var(--space-4);
+}
+</style>
diff --git a/src/components/comments/Comments.vue b/src/components/comments/Comments.vue
index 9bebeb2..ea4cb1a 100644
--- a/src/components/comments/Comments.vue
+++ b/src/components/comments/Comments.vue
@@ -24,7 +24,7 @@
             <span>Retour à la liste</span>
           </button>
           <Comment :comment="openedComment" data-opened="true" />
-          <div v-if="sortedReplies.length > 0" class="replies">
+          <div v-if="sortedReplies.length > 0" class="replies | flow">
             <Comment
               v-for="(reply, commentIndex) in sortedReplies"
               :comment="reply"
@@ -155,3 +155,57 @@ async function addComment(newComment) {
   emits("update:file", newFile);
 }
 </script>
+
+<style>
+/* Comments */
+#toggle-comments {
+  position: absolute;
+  right: var(--space-16);
+  bottom: var(--space-16);
+  padding: 0.625rem;
+}
+#comments-container {
+  background-color: black;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 4.5rem;
+  width: var(--comments-w);
+  padding: var(--space-24) var(--space-32);
+}
+.comments {
+  overflow-y: auto;
+  height: calc(100% - 3.5rem);
+  margin-bottom: 1rem;
+  margin-right: -2rem;
+  padding-right: 2rem;
+}
+#comments-container form {
+  --flow-space: 0.5rem;
+  flex-direction: column;
+  position: -webkit-sticky;
+  position: sticky;
+  bottom: 5.5rem;
+}
+#comments-container textarea {
+  position: sticky;
+  bottom: 0;
+  margin: 0;
+  resize: none;
+  background: none;
+  padding: 0;
+  color: var(--color-white);
+}
+#comments-container textarea:focus {
+  outline: none;
+}
+::placeholder {
+  color: var(--color-white-50);
+}
+#comments-container form footer {
+  gap: var(--space-12);
+}
+#comments-container form footer > * {
+  flex-grow: 1;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/project/client-brief/PdfViewer.vue b/src/components/project/client-brief/PdfViewer.vue
index 8a052ed..4b6f6df 100644
--- a/src/components/project/client-brief/PdfViewer.vue
+++ b/src/components/project/client-brief/PdfViewer.vue
@@ -141,116 +141,15 @@ function changeFile(newFile) {
 #add-pdf [data-pc-name="pcclosebutton"] {
   color: var(--color-white);
 }
-
 #vpv-container {
   width: var(--max-w);
   height: calc(var(--max-h) - var(--header-h));
   background: black;
   position: relative;
 }
-
-/* Comments */
 .with-comments .vpv-pages-container-wrapper {
   margin-right: var(--comments-w, 20rem);
 }
-#toggle-comments {
-  position: absolute;
-  right: var(--space-16);
-  bottom: var(--space-16);
-  padding: 0.625rem;
-}
-#comments-container {
-  background-color: black;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 4.5rem;
-  width: var(--comments-w);
-  padding: var(--space-24) var(--space-32);
-}
-.comments {
-  overflow-y: auto;
-  height: calc(100% - 3.5rem);
-  margin-bottom: 1rem;
-  margin-right: -2rem;
-  padding-right: 2rem;
-}
-.comment {
-  --flow-space: var(--space-12);
-  font-size: var(--text-sm);
-  border: var(--border);
-  border-width: 2px;
-  border-radius: var(--rounded-lg);
-  padding: var(--space-12);
-  color: var(--color-grey-400);
-}
-.comment header p {
-  display: flex;
-  gap: var(--space-8);
-}
-.comment header strong,
-.comment footer {
-  font-weight: 500;
-  color: var(--color-white);
-}
-.comment header time {
-  color: var(--color-primary);
-  font-weight: 500;
-  margin-left: auto;
-}
-.comment[data-status="unread"] {
-  background: var(--color-white);
-  border-color: var(--color-white);
-  color: var(--color-grey-700);
-}
-.comment[data-status="unread"] header p > :first-child::before {
-  content: "";
-  display: inline-block;
-  width: 0.375rem;
-  height: 0.375rem;
-  border-radius: 50%;
-  background: var(--color-primary);
-  margin-right: var(--space-8);
-  margin-bottom: 0.075em;
-}
-.comment[data-status="unread"] header strong,
-.comment[data-status="unread"] footer {
-  color: var(--color-black);
-}
-.comment[data-status="unread"] header time {
-  color: var(--color-primary);
-}
-.comment[data-opened="true"] {
-  border-color: transparent;
-}
-.comment[data-opened="true"] .comment__replies {
-  color: var(--color-primary);
-}
-#comments-container form {
-  --flow-space: 0.5rem;
-  flex-direction: column;
-  position: -webkit-sticky;
-  position: sticky;
-  bottom: 5.5rem;
-}
-#comments-container textarea {
-  position: sticky;
-  bottom: 0;
-  margin: 0;
-  resize: none;
-  background: none;
-  padding: 0;
-  color: var(--color-white);
-}
-::placeholder {
-  color: var(--color-white-50);
-}
-#comments-container form footer {
-  gap: var(--space-12);
-}
-#comments-container form footer > * {
-  flex-grow: 1;
-}
 </style>
 
 <style scoped>