From bf8f69de2a66029243a4c2e85a3b619b6910ec33 Mon Sep 17 00:00:00 2001
From: indaco <github@mircoveltri.me>
Date: Sat, 4 May 2024 14:13:01 +0200
Subject: [PATCH] style(gropdown-css.templ): tune colors and styles

---
 gropdown-css.templ    | 247 +++++++++++++++++++++++-------------------
 gropdown-css_templ.go |   2 +-
 2 files changed, 135 insertions(+), 114 deletions(-)

diff --git a/gropdown-css.templ b/gropdown-css.templ
index dd4a4e1..6d3fcc1 100644
--- a/gropdown-css.templ
+++ b/gropdown-css.templ
@@ -141,84 +141,104 @@ templ GropdownCSS() {
       --gdd-item-divider-style: solid;
     }
 
-    :root[data-theme="light"] {
-      --gdd-button-color: var(--gdd-primary-darker);
-      --gdd-button-color-hover: var(--gdd-primary-darkest);
-      --gdd-button-bg-color: var(--gdd-primary-lightest);
-      --gdd-button-bg-color-hover: var(--gdd-primary-lighter);
-      --gdd-button-border-color: transparent;
-      --gdd-button-ring-color: var(--gdd-primary-light);
-
-      --gdd-content-bg-color: #FFFFFF;
-      --gdd-content-border-color: var(--gdd-primary-lighter);
-
-      --gdd-item-color: var(--gdd-primary-darkest);
-      --gdd-item-color-hover: var(--gdd-primary-darkest);
-      --gdd-item-bg-color: transparent;
-      --gdd-item-bg-color-hover: var(--gdd-primary-lighter);
-
-      --gdd-item-divider-color: var(--gdd-primary-lighter);
-    }
-
-    :root[data-theme="dark"] {
-      --gdd-button-color: var(--gdd-primary-lightest);
-      --gdd-button-color-hover: var(--gdd-primary-lightest);
-      --gdd-button-bg-color: var(--gdd-primary-darker);
-      --gdd-button-bg-color-hover: var(--gdd-primary-dark);
-      --gdd-button-border-color: transparent;
-      --gdd-button-ring-color: var(--gdd-primary-light);
-
-      --gdd-content-bg-color: var(--gdd-primary-darker);
-      --gdd-content-border-color: var(--gdd-primary-darkest);
-
-      --gdd-item-color: var(--gdd-primary-lighter);
-      --gdd-item-color-hover: var(--gdd-primary-lighter);
-      --gdd-item-bg-color: transparent;
-      --gdd-item-bg-color-hover:  var(--gdd-primary-dark);
-
-      --gdd-item-divider-color: var(--gdd-primary);
-    }
-
     @media (prefers-color-scheme: light) {
       :root {
+        /* button */
         --gdd-button-color: var(--gdd-primary-darker);
-        --gdd-button-color-hover: var(--gdd-primary-darkest);
-        --gdd-button-bg-color: var(--gdd-primary-lightest);
-        --gdd-button-bg-color-hover: var(--gdd-primary-lighter);
+        --gdd-button-color-hover: var(--gdd-primary-darker);
+        --gdd-button-color-focus: var(--gdd-primary-darker);
+        --gdd-button-bg: var(--gdd-primary-lightest);
+        --gdd-button-bg-hover: var(--gdd-primary-lighter);
+        --gdd-button-bg-focus: var(--gdd-primary-lighter);
         --gdd-button-border-color: transparent;
         --gdd-button-ring-color: var(--gdd-primary-light);
-
-        --gdd-content-bg-color: #FFFFFF;
+        /* content */
+        --gdd-content-bg: #FFFFFF;
         --gdd-content-border-color: var(--gdd-primary-lighter);
-
-        --gdd-item-color: var(--gdd-primary-darkest);
-        --gdd-item-color-hover: var(--gdd-primary-darkest);
-        --gdd-item-bg-color: transparent;
-        --gdd-item-bg-color-hover: var(--gdd-primary-lighter);
-
-        --gdd-item-divider-color: var(--gdd-primary-lighter);
+        /* item */
+        --gdd-item-color: var(--gdd-primary-dark);
+        --gdd-item-color-hover: var(--gdd-primary-darker);
+        --gdd-item-color-focus: var(--gdd-primary-darker);
+        --gdd-item-bg: transparent;
+        --gdd-item-bg-hover: var(--gdd-primary-lightest);
+        --gdd-item-bg-focus: var(--gdd-primary-lightest);
+        /* divider */
+        --gdd-divider-color: var(--gdd-primary-lighter);
       }
     }
 
     @media (prefers-color-scheme: dark){
       :root {
-        --gdd-button-color: var(--gdd-primary-lightest);
-        --gdd-button-color-hover: var(--gdd-primary-lightest);
-        --gdd-button-bg-color: var(--gdd-primary-darker);
-        --gdd-button-bg-color-hover: var(--gdd-primary-dark);
+        /* button */
+        --gdd-button-color: var(--gdd-primary-lighter);
+        --gdd-button-color-hover: var(--gdd-primary-lighter);
+        --gdd-button-color-focus: var(--gdd-primary-lighter);
+        --gdd-button-bg: var(--gdd-primary-dark);
+        --gdd-button-bg-hover: var(--gdd-primary-darker);
+        --gdd-button-bg-focus: var(--gdd-primary-darker);
         --gdd-button-border-color: transparent;
-        --gdd-button-ring-color: var(--gdd-primary-light);
-
-        --gdd-content-bg-color: var(--gdd-primary-darker);
+        --gdd-button-ring-color: var(--gdd-primary);
+        /* content */
+        --gdd-content-bg: var(--gdd-primary-darker);
         --gdd-content-border-color: var(--gdd-primary-darkest);
+        /* item */
+        --gdd-item-color: var(--gdd-primary-light);
+        --gdd-item-color-hover: var(--gdd-primary-lightest);
+        --gdd-item-color-focus: var(--gdd-primary-lightest);
+        --gdd-item-bg: transparent;
+        --gdd-item-bg-hover:  var(--gdd-primary-60);
+        --gdd-item-bg-focus:  var(--gdd-primary-60);
+        /* divider */
+        --gdd-divider-color: var(--gdd-primary);
+      }
+    }
 
-        --gdd-item-color: var(--gdd-primary-lighter);
-        --gdd-item-color-hover: var(--gdd-primary-lighter);
-        --gdd-item-bg-color: transparent;
-        --gdd-item-bg-color-hover:  var(--gdd-primary-dark);
+    :root[data-theme="light"] {
+      /* button */
+      --gdd-button-color: var(--gdd-primary-darker);
+      --gdd-button-color-hover: var(--gdd-primary-darker);
+      --gdd-button-color-focus: var(--gdd-primary-darker);
+      --gdd-button-bg: var(--gdd-primary-lightest);
+      --gdd-button-bg-hover: var(--gdd-primary-lighter);
+      --gdd-button-bg-focus: var(--gdd-primary-lighter);
+      --gdd-button-border-color: transparent;
+      --gdd-button-ring-color: var(--gdd-primary-light);
+      /* content */
+      --gdd-content-bg: #FFFFFF;
+      --gdd-content-border-color: var(--gdd-primary-lighter);
+      /* item */
+      --gdd-item-color: var(--gdd-primary-dark);
+      --gdd-item-color-hover: var(--gdd-primary-darker);
+      --gdd-item-color-focus: var(--gdd-primary-darker);
+      --gdd-item-bg: transparent;
+      --gdd-item-bg-hover: var(--gdd-primary-lightest);
+      --gdd-item-bg-focus: var(--gdd-primary-lightest);
+      /* divider */
+      --gdd-divider-color: var(--gdd-primary-lighter);
+    }
 
-        --gdd-item-divider-color: var(--gdd-primary);
-      }
+    :root[data-theme="dark"] {
+      /* button */
+      --gdd-button-color: var(--gdd-primary-lighter);
+      --gdd-button-color-hover: var(--gdd-primary-lighter);
+      --gdd-button-color-focus: var(--gdd-primary-lighter);
+      --gdd-button-bg: var(--gdd-primary-dark);
+      --gdd-button-bg-hover: var(--gdd-primary-darker);
+      --gdd-button-bg-focus: var(--gdd-primary-darker);
+      --gdd-button-border-color: transparent;
+      --gdd-button-ring-color: var(--gdd-primary);
+      /* content */
+      --gdd-content-bg: var(--gdd-primary-darker);
+      --gdd-content-border-color: var(--gdd-primary-darkest);
+      /* item */
+      --gdd-item-color: var(--gdd-primary-light);
+      --gdd-item-color-hover: var(--gdd-primary-lightest);
+      --gdd-item-color-focus: var(--gdd-primary-lightest);
+      --gdd-item-bg: transparent;
+      --gdd-item-bg-hover:  var(--gdd-primary-60);
+      --gdd-item-bg-focus:  var(--gdd-primary-60);
+      /* divider */
+      --gdd-divider-color: var(--gdd-primary);
     }
 
     /* ********************************************* *
@@ -249,7 +269,7 @@ templ GropdownCSS() {
       border-style: var(--gdd-button-border-style);
       border-color: var(--gdd-button-border-color);
       border-radius: var(--gdd-button-border-radius);
-      background-color: var(--gdd-button-bg-color);
+      background-color: var(--gdd-button-bg);
       font-family: var(--gdd-button-font-family);
       font-size: var(--gdd-button-font-size);
       font-weight: var(--gdd-button-font-weight);
@@ -261,14 +281,14 @@ templ GropdownCSS() {
     }
 
     .gdd_button:hover {
-      color: var(--gdd-button-color-hover);
-      background-color: var(--gdd-button-bg-color-hover);
+      --gdd-button-color: var(--gdd-button-color-hover);
+      --gdd-button-bg: var(--gdd-button-bg-hover);
     }
 
     .gdd_button:focus,
     .gdd_button:focus-visible {
-      color: var(--gdd-button-color-hover);
-      background-color: var(--gdd-button-bg-color-hover);
+      --gdd-button-color: var(--gdd-button-color-focus);
+      --gdd-button-bg: var(--gdd-button-bg-focus);
       outline: var(--gdd-button-ring-color) var(--gdd-button-ring-style) var(--gdd-button-ring-width);
       outline-offset: var(--gdd-button-ring-offset);
     }
@@ -292,11 +312,11 @@ templ GropdownCSS() {
 
     /* Apply animations based on classes */
     .iconToOpen {
-        animation: var(--gdd-button-animation-open-name) 0.3s ease forwards;
+      animation: var(--gdd-button-animation-open-name) 0.3s ease forwards;
     }
 
     .iconToClose {
-        animation: var(--gdd-button-animation-close-name) 0.3s ease forwards;
+      animation: var(--gdd-button-animation-close-name) 0.3s ease forwards;
     }
 
     /* ********************************************* *
@@ -311,7 +331,7 @@ templ GropdownCSS() {
       max-width: var(--gdd-content-max-w);
       margin: var(--gdd-content-my) var(--gdd-content-mx);
       padding: var(--gdd-content-py) var(--gdd-content-px);
-      background-color: var(--gdd-content-bg-color);
+      background-color: var(--gdd-content-bg);
       border-width: var(--gdd-content-border-width);
       border-style: var(--gdd-content-border-style);
       border-color: var(--gdd-content-border-color);
@@ -323,29 +343,29 @@ templ GropdownCSS() {
     }
 
     [data-position="top"] .gdd_content {
-        top: auto;
-        bottom: 100%;
+      top: auto;
+      bottom: 100%;
     }
 
     [data-position="bottom"] .gdd_content {
-        top: 100%;
-        bottom: auto;
+      top: 100%;
+      bottom: auto;
     }
 
     [data-position="left"] .gdd_content {
-        --gdd-content-my: 0;
-        --gdd-content-mx: 0.25rem;
-        inset-inline-end: 100%;
-        top: 0;
-        bottom: auto;
+      --gdd-content-my: 0;
+      --gdd-content-mx: 0.25rem;
+      inset-inline-end: 100%;
+      top: 0;
+      bottom: auto;
     }
 
     [data-position="right"] .gdd_content {
-        --gdd-content-my: 0;
-        --gdd-content-mx: 0.25rem;
-        inset-inline-start: 100%;
-        top: 0;
-        bottom: auto;
+      --gdd-content-my: 0;
+      --gdd-content-mx: 0.25rem;
+      inset-inline-start: 100%;
+      top: 0;
+      bottom: auto;
     }
 
     .gdd_content[data-state="open"] {
@@ -374,28 +394,29 @@ templ GropdownCSS() {
       font-size: var(--gdd-item-font-size);
       line-height: var(--gdd-item-line-height);
       letter-spacing: var(--gdd-item-letter-spacing);
-      background-color: var(--gdd-item-bg-color);
+      background-color: var(--gdd-item-bg);
       border-width: var(--gdd-item-border-width);
       border-style: var(--gdd-item-border-style);
       border-color: var(--gdd-item-border-color);
       border-radius: var(--gdd-item-border-radius);
-      }
+    }
 
     .gdd_content_item[href^="http"] {
-        padding-right: 1.25em;
+      padding-right: 1.25em;
     }
 
     .gdd_content_item:hover {
-        color: var(--gdd-item-color-hover);
-        background-color: var(--gdd-item-bg-color-hover);
+      --gdd-item-color: var(--gdd-item-color-hover);
+      --gdd-item-bg: var(--gdd-item-bg-hover);
     }
 
     .gdd_content_item:focus,
     .gdd_content_item:focus-visible {
-        color: var(--gdd-item-color-hover);
-        background-color: var(--gdd-item-bg-color-hover);
-        outline: var(--gdd-item-ring-color) var(--gdd-item-ring-style) var(--gdd-item-ring-width);
-        outline-offset: var(--gdd-item-ring-offset);
+      --gdd-item-color: var(--gdd-item-color-focus);
+      --gdd-item-bg: var(--gdd-item-bg-focus);
+      outline: var(--gdd-item-ring-color) var(--gdd-item-ring-style) var(--gdd-item-ring-width);
+      outline-offset: var(--gdd-item-ring-offset);
+      opacity: 1;
     }
 
     .gdd_content_item_icon {
@@ -410,7 +431,7 @@ templ GropdownCSS() {
       height: 0;
       margin: 0.125rem 0;
       overflow: hidden;
-      border-top: var(--gdd-item-divider-width) var(--gdd-item-divider-style) var(--gdd-item-divider-color);
+      border-top: var(--gdd-item-divider-width) var(--gdd-item-divider-style) var(--gdd-divider-color);
     }
 
     .gdd_sr_only {
@@ -429,33 +450,33 @@ templ GropdownCSS() {
      * Animations
      * ********************************************* */
     @keyframes fadeIn {
-        from {
-            opacity: 0;
-        }
+      from {
+        opacity: 0;
+      }
 
-        to {
-            opacity: 1;
-        }
+      to {
+        opacity: 1;
+      }
     }
 
     @keyframes flipInX {
-        from {
-            transform: scaleY(-1);
-        }
+      from {
+        transform: scaleY(-1);
+      }
 
-        to {
-            transform: scaleY(1);
-        }
+      to {
+        transform: scaleY(1);
+      }
     }
 
     @keyframes flipOutX {
-        from {
-            transform: scaleY(1);
-        }
+      from {
+        transform: scaleY(1);
+      }
 
-        to {
-            transform: scaleY(-1);
-        }
+      to {
+        transform: scaleY(-1);
+      }
     }
 </style>
 }
diff --git a/gropdown-css_templ.go b/gropdown-css_templ.go
index d1916d1..f8628c3 100644
--- a/gropdown-css_templ.go
+++ b/gropdown-css_templ.go
@@ -23,7 +23,7 @@ func GropdownCSS() templ.Component {
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<style type=\"text/css\">\n    * {\n      box-sizing: border-box;\n      border-width: 0;\n      border-style: solid;\n    }\n\n    :root {\n      --gdd-color-space: oklab;\n\n      /* - Color Shades - */\n      --gdd-primary: hsl(215deg 16.3% 46.9%);\n\n      --gdd-primary-10: color-mix(\n          in var(--gdd-color-space),\n          var(--gdd-primary) 10%,\n          white\n      );\n\n      --gdd-primary-20: color-mix(\n          in var(--gdd-color-space),\n          var(--gdd-primary) 30%,\n          white\n      );\n\n      --gdd-primary-30: color-mix(\n          in var(--gdd-color-space),\n          var(--gdd-primary) 50%,\n          white\n      );\n\n      --gdd-primary-40: color-mix(\n          in var(--gdd-color-space),\n          var(--gdd-primary) 70%,\n          white\n      );\n\n      --gdd-primary-50: var(--gdd-primary);\n\n      --gdd-primary-60: color-mix(\n          in var(--gdd-color-space),\n          var(--gdd-primary) 70%,\n          black\n      );\n\n      --gdd-primary-70: color-mix(\n          in var(--gdd-color-space),\n          var(--gdd-primary) 50%,\n          black\n      );\n\n      --gdd-primary-80: color-mix(\n          in var(--gdd-color-space),\n          var(--gdd-primary) 30%,\n          black\n      );\n\n      --gdd-primary-90: color-mix(\n          in var(--gdd-color-space),\n          var(--gdd-primary) 10%,\n          black\n      );\n\n      --gdd-primary-lightest: var(--gdd-primary-10);\n      --gdd-primary-lighter: var(--gdd-primary-20);\n      --gdd-primary-light: var(--gdd-primary-30);\n      --gdd-primary-dark: var(--gdd-primary-70);\n      --gdd-primary-darker: var(--gdd-primary-80);\n      --gdd-primary-darkest: var(--gdd-primary-90);\n\n      /* Dropdown Button */\n      --gdd-button-min-w: 4.5em;\n      --gdd-button-py: 1ch;\n      --gdd-button-px: 2ch;\n      --gdd-button-icon-space: 0.5ch;\n\n      --gdd-button-font-size: 1rem;\n      --gdd-button-font-family: inherit;\n      --gdd-button-font-weight: 500;\n      --gdd-button-line-height: 1.25;\n      --gdd-button-letter-spacing: 0.025em;\n\n      --gdd-button-border-width: 1px;\n      --gdd-button-border-style: solid;\n      --gdd-button-border-radius: 0.25rem;\n\n      --gdd-button-transition-property: background;\n      --gdd-button-transition-duration: 300ms;\n      --gdd-button-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n      --gdd-button-ring-width: 2px;\n      --gdd-button-ring-style: solid;\n      --gdd-button-ring-offset: 1px;\n\n      --gdd-button-animation-open-name: flipOutX;\n      --gdd-button-animation-close-name: flipInX;\n\n      /* Dropdown Content */\n      --gdd-content-w: 13rem;\n      --gdd-content-max-w: 16rem;\n      --gdd-content-mx: 0;\n      --gdd-content-my: 0.25em;\n      --gdd-content-px: 0.375em;\n      --gdd-content-py: 0.5em;\n\n      --gdd-content-border-width: 1px;\n      --gdd-content-border-style: solid;\n      --gdd-content-border-radius: 0.25rem;\n\n      --gdd-content-animation-name: fadeIn;\n      --gdd-content-animation-duration: 0.3s;\n      --gdd-content-animation-timing-function: ease-in-out;\n      --gdd-content-animation-direction: forwards;\n\n      /* Dropdown Item */\n      --gdd-item-px: 0.375em;\n      --gdd-item-py: 0.375em;\n      --gdd-item-icon-space: 1ch;\n\n      --gdd-item-font-family: inherit;\n      --gdd-item-font-size: 1rem;\n      --gdd-item-font-weight: 500;\n      --gdd-item-line-height: 1.25;\n      --gdd-item-letter-spacing: 0.025em;\n\n      --gdd-item-border-width: 1px;\n      --gdd-item-border-style: solid;\n      --gdd-item-border-color: transparent;\n      --gdd-item-border-radius: 0.25rem;\n\n      --gdd-item-ring-width: 1px;\n      --gdd-item-ring-style: solid;\n      --gdd-item-ring-offset: 0;\n      --gdd-item-ring-color: transparent;\n\n      /* Divider */\n      --gdd-item-divider-width: 1px;\n      --gdd-item-divider-style: solid;\n    }\n\n    :root[data-theme=\"light\"] {\n      --gdd-button-color: var(--gdd-primary-darker);\n      --gdd-button-color-hover: var(--gdd-primary-darkest);\n      --gdd-button-bg-color: var(--gdd-primary-lightest);\n      --gdd-button-bg-color-hover: var(--gdd-primary-lighter);\n      --gdd-button-border-color: transparent;\n      --gdd-button-ring-color: var(--gdd-primary-light);\n\n      --gdd-content-bg-color: #FFFFFF;\n      --gdd-content-border-color: var(--gdd-primary-lighter);\n\n      --gdd-item-color: var(--gdd-primary-darkest);\n      --gdd-item-color-hover: var(--gdd-primary-darkest);\n      --gdd-item-bg-color: transparent;\n      --gdd-item-bg-color-hover: var(--gdd-primary-lighter);\n\n      --gdd-item-divider-color: var(--gdd-primary-lighter);\n    }\n\n    :root[data-theme=\"dark\"] {\n      --gdd-button-color: var(--gdd-primary-lightest);\n      --gdd-button-color-hover: var(--gdd-primary-lightest);\n      --gdd-button-bg-color: var(--gdd-primary-darker);\n      --gdd-button-bg-color-hover: var(--gdd-primary-dark);\n      --gdd-button-border-color: transparent;\n      --gdd-button-ring-color: var(--gdd-primary-light);\n\n      --gdd-content-bg-color: var(--gdd-primary-darker);\n      --gdd-content-border-color: var(--gdd-primary-darkest);\n\n      --gdd-item-color: var(--gdd-primary-lighter);\n      --gdd-item-color-hover: var(--gdd-primary-lighter);\n      --gdd-item-bg-color: transparent;\n      --gdd-item-bg-color-hover:  var(--gdd-primary-dark);\n\n      --gdd-item-divider-color: var(--gdd-primary);\n    }\n\n    @media (prefers-color-scheme: light) {\n      :root {\n        --gdd-button-color: var(--gdd-primary-darker);\n        --gdd-button-color-hover: var(--gdd-primary-darkest);\n        --gdd-button-bg-color: var(--gdd-primary-lightest);\n        --gdd-button-bg-color-hover: var(--gdd-primary-lighter);\n        --gdd-button-border-color: transparent;\n        --gdd-button-ring-color: var(--gdd-primary-light);\n\n        --gdd-content-bg-color: #FFFFFF;\n        --gdd-content-border-color: var(--gdd-primary-lighter);\n\n        --gdd-item-color: var(--gdd-primary-darkest);\n        --gdd-item-color-hover: var(--gdd-primary-darkest);\n        --gdd-item-bg-color: transparent;\n        --gdd-item-bg-color-hover: var(--gdd-primary-lighter);\n\n        --gdd-item-divider-color: var(--gdd-primary-lighter);\n      }\n    }\n\n    @media (prefers-color-scheme: dark){\n      :root {\n        --gdd-button-color: var(--gdd-primary-lightest);\n        --gdd-button-color-hover: var(--gdd-primary-lightest);\n        --gdd-button-bg-color: var(--gdd-primary-darker);\n        --gdd-button-bg-color-hover: var(--gdd-primary-dark);\n        --gdd-button-border-color: transparent;\n        --gdd-button-ring-color: var(--gdd-primary-light);\n\n        --gdd-content-bg-color: var(--gdd-primary-darker);\n        --gdd-content-border-color: var(--gdd-primary-darkest);\n\n        --gdd-item-color: var(--gdd-primary-lighter);\n        --gdd-item-color-hover: var(--gdd-primary-lighter);\n        --gdd-item-bg-color: transparent;\n        --gdd-item-bg-color-hover:  var(--gdd-primary-dark);\n\n        --gdd-item-divider-color: var(--gdd-primary);\n      }\n    }\n\n    /* ********************************************* *\n     * Dropdown Container\n     * ********************************************* */\n    .gdd_gropdown_container {\n      -webkit-font-smoothing: antialiased;\n      -moz-osx-font-smoothing: grayscale;\n      font-smooth: auto;\n      position: relative;\n      display: inline-block;\n    }\n\n    /* ********************************************* *\n     * Dropdown Button\n     * ********************************************* */\n    .gdd_button {\n      cursor: pointer;\n      min-width: var(--gdd-button-min-w);\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      gap: var(--gdd-button-icon-space);\n      margin: 0;\n      padding: var(--gdd-button-py) var(--gdd-button-px);\n      color: var(--gdd-button-color);\n      border-width: var(--gdd-button-border-width);\n      border-style: var(--gdd-button-border-style);\n      border-color: var(--gdd-button-border-color);\n      border-radius: var(--gdd-button-border-radius);\n      background-color: var(--gdd-button-bg-color);\n      font-family: var(--gdd-button-font-family);\n      font-size: var(--gdd-button-font-size);\n      font-weight: var(--gdd-button-font-weight);\n      line-height: var(--gdd-button-line-height);\n      letter-spacing: var(--gdd-button-letter-spacing);\n      text-transform: none;\n      text-decoration-line: var(--_text-decoration-line);\n      transition: var(--gdd-button-transition-property) var(--gdd-button-transition-duration) var(--gdd-button-transition-timing-function);\n    }\n\n    .gdd_button:hover {\n      color: var(--gdd-button-color-hover);\n      background-color: var(--gdd-button-bg-color-hover);\n    }\n\n    .gdd_button:focus,\n    .gdd_button:focus-visible {\n      color: var(--gdd-button-color-hover);\n      background-color: var(--gdd-button-bg-color-hover);\n      outline: var(--gdd-button-ring-color) var(--gdd-button-ring-style) var(--gdd-button-ring-width);\n      outline-offset: var(--gdd-button-ring-offset);\n    }\n\n    .gdd_button_icon {\n      display: inline-flex;\n      align-items: center;\n      flex-shrink: 0;\n      width: 1em;\n      height: 1em;\n    }\n\n    .gdd_button_icon_only {\n      min-width: 2.5rem;\n      padding: 0;\n      width: 2.5rem;\n      height: 2.5rem;\n      border-radius: 1e5px;\n      aspect-ratio: 1;\n    }\n\n    /* Apply animations based on classes */\n    .iconToOpen {\n        animation: var(--gdd-button-animation-open-name) 0.3s ease forwards;\n    }\n\n    .iconToClose {\n        animation: var(--gdd-button-animation-close-name) 0.3s ease forwards;\n    }\n\n    /* ********************************************* *\n     * Dropdown Content\n     * ********************************************* */\n    .gdd_content {\n      position: absolute;\n      z-index: 10;\n      overflow: hidden;\n      list-style: none;\n      width: var(--gdd-content-w);\n      max-width: var(--gdd-content-max-w);\n      margin: var(--gdd-content-my) var(--gdd-content-mx);\n      padding: var(--gdd-content-py) var(--gdd-content-px);\n      background-color: var(--gdd-content-bg-color);\n      border-width: var(--gdd-content-border-width);\n      border-style: var(--gdd-content-border-style);\n      border-color: var(--gdd-content-border-color);\n      border-radius: var(--gdd-content-border-radius);\n      transition: opacity var(--gdd-content-animation-duration) var(--gdd-content-animation-timing-function);\n      animation-duration: var(--gdd-content-animation-duration);\n      animation-direction: var(--gdd-content-animation-direction);\n      animation-timing-function: var(--gdd-content-animation-timing-function);\n    }\n\n    [data-position=\"top\"] .gdd_content {\n        top: auto;\n        bottom: 100%;\n    }\n\n    [data-position=\"bottom\"] .gdd_content {\n        top: 100%;\n        bottom: auto;\n    }\n\n    [data-position=\"left\"] .gdd_content {\n        --gdd-content-my: 0;\n        --gdd-content-mx: 0.25rem;\n        inset-inline-end: 100%;\n        top: 0;\n        bottom: auto;\n    }\n\n    [data-position=\"right\"] .gdd_content {\n        --gdd-content-my: 0;\n        --gdd-content-mx: 0.25rem;\n        inset-inline-start: 100%;\n        top: 0;\n        bottom: auto;\n    }\n\n    .gdd_content[data-state=\"open\"] {\n      visibility: visible;\n      opacity: 1;\n      animation-name: var(--gdd-content-animation-name);\n    }\n\n    .gdd_content[data-state=\"close\"] {\n      visibility: hidden;\n      opacity: 0;\n    }\n\n    /* ********************************************* *\n     * Dropdown Content Item\n     * ********************************************* */\n    .gdd_content_item {\n      position: relative;\n      display: flex;\n      width: 100%;\n      text-decoration: none;\n      gap: var(--gdd-item-icon-space);\n      padding: var(--gdd-item-py) var(--gdd-item-px);\n      color: var(--gdd-item-color);\n      font-family: var(--gdd-item-font-family);\n      font-size: var(--gdd-item-font-size);\n      line-height: var(--gdd-item-line-height);\n      letter-spacing: var(--gdd-item-letter-spacing);\n      background-color: var(--gdd-item-bg-color);\n      border-width: var(--gdd-item-border-width);\n      border-style: var(--gdd-item-border-style);\n      border-color: var(--gdd-item-border-color);\n      border-radius: var(--gdd-item-border-radius);\n      }\n\n    .gdd_content_item[href^=\"http\"] {\n        padding-right: 1.25em;\n    }\n\n    .gdd_content_item:hover {\n        color: var(--gdd-item-color-hover);\n        background-color: var(--gdd-item-bg-color-hover);\n    }\n\n    .gdd_content_item:focus,\n    .gdd_content_item:focus-visible {\n        color: var(--gdd-item-color-hover);\n        background-color: var(--gdd-item-bg-color-hover);\n        outline: var(--gdd-item-ring-color) var(--gdd-item-ring-style) var(--gdd-item-ring-width);\n        outline-offset: var(--gdd-item-ring-offset);\n    }\n\n    .gdd_content_item_icon {\n      display: inline-flex;\n      align-items: center;\n      flex-shrink: 0;\n      width: 1.25em;\n      height: 1.25em;\n    }\n\n    .gdd_content_divider {\n      height: 0;\n      margin: 0.125rem 0;\n      overflow: hidden;\n      border-top: var(--gdd-item-divider-width) var(--gdd-item-divider-style) var(--gdd-item-divider-color);\n    }\n\n    .gdd_sr_only {\n      position: absolute;\n      width: 1px;\n      height: 1px;\n      padding: 0;\n      margin: -1px;\n      overflow: hidden;\n      clip: rect(0, 0, 0, 0);\n      white-space: nowrap;\n      border-width: 0;\n    }\n\n    /* ********************************************* *\n     * Animations\n     * ********************************************* */\n    @keyframes fadeIn {\n        from {\n            opacity: 0;\n        }\n\n        to {\n            opacity: 1;\n        }\n    }\n\n    @keyframes flipInX {\n        from {\n            transform: scaleY(-1);\n        }\n\n        to {\n            transform: scaleY(1);\n        }\n    }\n\n    @keyframes flipOutX {\n        from {\n            transform: scaleY(1);\n        }\n\n        to {\n            transform: scaleY(-1);\n        }\n    }\n</style>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<style type=\"text/css\">\r\n    * {\r\n      box-sizing: border-box;\r\n      border-width: 0;\r\n      border-style: solid;\r\n    }\r\n\r\n    :root {\r\n      --gdd-color-space: oklab;\r\n\r\n      /* - Color Shades - */\r\n      --gdd-primary: hsl(215deg 16.3% 46.9%);\r\n\r\n      --gdd-primary-10: color-mix(\r\n          in var(--gdd-color-space),\r\n          var(--gdd-primary) 10%,\r\n          white\r\n      );\r\n\r\n      --gdd-primary-20: color-mix(\r\n          in var(--gdd-color-space),\r\n          var(--gdd-primary) 30%,\r\n          white\r\n      );\r\n\r\n      --gdd-primary-30: color-mix(\r\n          in var(--gdd-color-space),\r\n          var(--gdd-primary) 50%,\r\n          white\r\n      );\r\n\r\n      --gdd-primary-40: color-mix(\r\n          in var(--gdd-color-space),\r\n          var(--gdd-primary) 70%,\r\n          white\r\n      );\r\n\r\n      --gdd-primary-50: var(--gdd-primary);\r\n\r\n      --gdd-primary-60: color-mix(\r\n          in var(--gdd-color-space),\r\n          var(--gdd-primary) 70%,\r\n          black\r\n      );\r\n\r\n      --gdd-primary-70: color-mix(\r\n          in var(--gdd-color-space),\r\n          var(--gdd-primary) 50%,\r\n          black\r\n      );\r\n\r\n      --gdd-primary-80: color-mix(\r\n          in var(--gdd-color-space),\r\n          var(--gdd-primary) 30%,\r\n          black\r\n      );\r\n\r\n      --gdd-primary-90: color-mix(\r\n          in var(--gdd-color-space),\r\n          var(--gdd-primary) 10%,\r\n          black\r\n      );\r\n\r\n      --gdd-primary-lightest: var(--gdd-primary-10);\r\n      --gdd-primary-lighter: var(--gdd-primary-20);\r\n      --gdd-primary-light: var(--gdd-primary-30);\r\n      --gdd-primary-dark: var(--gdd-primary-70);\r\n      --gdd-primary-darker: var(--gdd-primary-80);\r\n      --gdd-primary-darkest: var(--gdd-primary-90);\r\n\r\n      /* Dropdown Button */\r\n      --gdd-button-min-w: 4.5em;\r\n      --gdd-button-py: 1ch;\r\n      --gdd-button-px: 2ch;\r\n      --gdd-button-icon-space: 0.5ch;\r\n\r\n      --gdd-button-font-size: 1rem;\r\n      --gdd-button-font-family: inherit;\r\n      --gdd-button-font-weight: 500;\r\n      --gdd-button-line-height: 1.25;\r\n      --gdd-button-letter-spacing: 0.025em;\r\n\r\n      --gdd-button-border-width: 1px;\r\n      --gdd-button-border-style: solid;\r\n      --gdd-button-border-radius: 0.25rem;\r\n\r\n      --gdd-button-transition-property: background;\r\n      --gdd-button-transition-duration: 300ms;\r\n      --gdd-button-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\r\n\r\n      --gdd-button-ring-width: 2px;\r\n      --gdd-button-ring-style: solid;\r\n      --gdd-button-ring-offset: 1px;\r\n\r\n      --gdd-button-animation-open-name: flipOutX;\r\n      --gdd-button-animation-close-name: flipInX;\r\n\r\n      /* Dropdown Content */\r\n      --gdd-content-w: 13rem;\r\n      --gdd-content-max-w: 16rem;\r\n      --gdd-content-mx: 0;\r\n      --gdd-content-my: 0.25em;\r\n      --gdd-content-px: 0.375em;\r\n      --gdd-content-py: 0.5em;\r\n\r\n      --gdd-content-border-width: 1px;\r\n      --gdd-content-border-style: solid;\r\n      --gdd-content-border-radius: 0.25rem;\r\n\r\n      --gdd-content-animation-name: fadeIn;\r\n      --gdd-content-animation-duration: 0.3s;\r\n      --gdd-content-animation-timing-function: ease-in-out;\r\n      --gdd-content-animation-direction: forwards;\r\n\r\n      /* Dropdown Item */\r\n      --gdd-item-px: 0.375em;\r\n      --gdd-item-py: 0.375em;\r\n      --gdd-item-icon-space: 1ch;\r\n\r\n      --gdd-item-font-family: inherit;\r\n      --gdd-item-font-size: 1rem;\r\n      --gdd-item-font-weight: 500;\r\n      --gdd-item-line-height: 1.25;\r\n      --gdd-item-letter-spacing: 0.025em;\r\n\r\n      --gdd-item-border-width: 1px;\r\n      --gdd-item-border-style: solid;\r\n      --gdd-item-border-color: transparent;\r\n      --gdd-item-border-radius: 0.25rem;\r\n\r\n      --gdd-item-ring-width: 1px;\r\n      --gdd-item-ring-style: solid;\r\n      --gdd-item-ring-offset: 0;\r\n      --gdd-item-ring-color: transparent;\r\n\r\n      /* Divider */\r\n      --gdd-item-divider-width: 1px;\r\n      --gdd-item-divider-style: solid;\r\n    }\r\n\r\n    @media (prefers-color-scheme: light) {\r\n      :root {\r\n        /* button */\r\n        --gdd-button-color: var(--gdd-primary-darker);\r\n        --gdd-button-color-hover: var(--gdd-primary-darker);\r\n        --gdd-button-color-focus: var(--gdd-primary-darker);\r\n        --gdd-button-bg: var(--gdd-primary-lightest);\r\n        --gdd-button-bg-hover: var(--gdd-primary-lighter);\r\n        --gdd-button-bg-focus: var(--gdd-primary-lighter);\r\n        --gdd-button-border-color: transparent;\r\n        --gdd-button-ring-color: var(--gdd-primary-light);\r\n        /* content */\r\n        --gdd-content-bg: #FFFFFF;\r\n        --gdd-content-border-color: var(--gdd-primary-lighter);\r\n        /* item */\r\n        --gdd-item-color: var(--gdd-primary-dark);\r\n        --gdd-item-color-hover: var(--gdd-primary-darker);\r\n        --gdd-item-color-focus: var(--gdd-primary-darker);\r\n        --gdd-item-bg: transparent;\r\n        --gdd-item-bg-hover: var(--gdd-primary-lightest);\r\n        --gdd-item-bg-focus: var(--gdd-primary-lightest);\r\n        /* divider */\r\n        --gdd-divider-color: var(--gdd-primary-lighter);\r\n      }\r\n    }\r\n\r\n    @media (prefers-color-scheme: dark){\r\n      :root {\r\n        /* button */\r\n        --gdd-button-color: var(--gdd-primary-lighter);\r\n        --gdd-button-color-hover: var(--gdd-primary-lighter);\r\n        --gdd-button-color-focus: var(--gdd-primary-lighter);\r\n        --gdd-button-bg: var(--gdd-primary-dark);\r\n        --gdd-button-bg-hover: var(--gdd-primary-darker);\r\n        --gdd-button-bg-focus: var(--gdd-primary-darker);\r\n        --gdd-button-border-color: transparent;\r\n        --gdd-button-ring-color: var(--gdd-primary);\r\n        /* content */\r\n        --gdd-content-bg: var(--gdd-primary-darker);\r\n        --gdd-content-border-color: var(--gdd-primary-darkest);\r\n        /* item */\r\n        --gdd-item-color: var(--gdd-primary-light);\r\n        --gdd-item-color-hover: var(--gdd-primary-lightest);\r\n        --gdd-item-color-focus: var(--gdd-primary-lightest);\r\n        --gdd-item-bg: transparent;\r\n        --gdd-item-bg-hover:  var(--gdd-primary-60);\r\n        --gdd-item-bg-focus:  var(--gdd-primary-60);\r\n        /* divider */\r\n        --gdd-divider-color: var(--gdd-primary);\r\n      }\r\n    }\r\n\r\n    :root[data-theme=\"light\"] {\r\n      /* button */\r\n      --gdd-button-color: var(--gdd-primary-darker);\r\n      --gdd-button-color-hover: var(--gdd-primary-darker);\r\n      --gdd-button-color-focus: var(--gdd-primary-darker);\r\n      --gdd-button-bg: var(--gdd-primary-lightest);\r\n      --gdd-button-bg-hover: var(--gdd-primary-lighter);\r\n      --gdd-button-bg-focus: var(--gdd-primary-lighter);\r\n      --gdd-button-border-color: transparent;\r\n      --gdd-button-ring-color: var(--gdd-primary-light);\r\n      /* content */\r\n      --gdd-content-bg: #FFFFFF;\r\n      --gdd-content-border-color: var(--gdd-primary-lighter);\r\n      /* item */\r\n      --gdd-item-color: var(--gdd-primary-dark);\r\n      --gdd-item-color-hover: var(--gdd-primary-darker);\r\n      --gdd-item-color-focus: var(--gdd-primary-darker);\r\n      --gdd-item-bg: transparent;\r\n      --gdd-item-bg-hover: var(--gdd-primary-lightest);\r\n      --gdd-item-bg-focus: var(--gdd-primary-lightest);\r\n      /* divider */\r\n      --gdd-divider-color: var(--gdd-primary-lighter);\r\n    }\r\n\r\n    :root[data-theme=\"dark\"] {\r\n      /* button */\r\n      --gdd-button-color: var(--gdd-primary-lighter);\r\n      --gdd-button-color-hover: var(--gdd-primary-lighter);\r\n      --gdd-button-color-focus: var(--gdd-primary-lighter);\r\n      --gdd-button-bg: var(--gdd-primary-dark);\r\n      --gdd-button-bg-hover: var(--gdd-primary-darker);\r\n      --gdd-button-bg-focus: var(--gdd-primary-darker);\r\n      --gdd-button-border-color: transparent;\r\n      --gdd-button-ring-color: var(--gdd-primary);\r\n      /* content */\r\n      --gdd-content-bg: var(--gdd-primary-darker);\r\n      --gdd-content-border-color: var(--gdd-primary-darkest);\r\n      /* item */\r\n      --gdd-item-color: var(--gdd-primary-light);\r\n      --gdd-item-color-hover: var(--gdd-primary-lightest);\r\n      --gdd-item-color-focus: var(--gdd-primary-lightest);\r\n      --gdd-item-bg: transparent;\r\n      --gdd-item-bg-hover:  var(--gdd-primary-60);\r\n      --gdd-item-bg-focus:  var(--gdd-primary-60);\r\n      /* divider */\r\n      --gdd-divider-color: var(--gdd-primary);\r\n    }\r\n\r\n    /* ********************************************* *\r\n     * Dropdown Container\r\n     * ********************************************* */\r\n    .gdd_gropdown_container {\r\n      -webkit-font-smoothing: antialiased;\r\n      -moz-osx-font-smoothing: grayscale;\r\n      font-smooth: auto;\r\n      position: relative;\r\n      display: inline-block;\r\n    }\r\n\r\n    /* ********************************************* *\r\n     * Dropdown Button\r\n     * ********************************************* */\r\n    .gdd_button {\r\n      cursor: pointer;\r\n      min-width: var(--gdd-button-min-w);\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      gap: var(--gdd-button-icon-space);\r\n      margin: 0;\r\n      padding: var(--gdd-button-py) var(--gdd-button-px);\r\n      color: var(--gdd-button-color);\r\n      border-width: var(--gdd-button-border-width);\r\n      border-style: var(--gdd-button-border-style);\r\n      border-color: var(--gdd-button-border-color);\r\n      border-radius: var(--gdd-button-border-radius);\r\n      background-color: var(--gdd-button-bg);\r\n      font-family: var(--gdd-button-font-family);\r\n      font-size: var(--gdd-button-font-size);\r\n      font-weight: var(--gdd-button-font-weight);\r\n      line-height: var(--gdd-button-line-height);\r\n      letter-spacing: var(--gdd-button-letter-spacing);\r\n      text-transform: none;\r\n      text-decoration-line: var(--_text-decoration-line);\r\n      transition: var(--gdd-button-transition-property) var(--gdd-button-transition-duration) var(--gdd-button-transition-timing-function);\r\n    }\r\n\r\n    .gdd_button:hover {\r\n      --gdd-button-color: var(--gdd-button-color-hover);\r\n      --gdd-button-bg: var(--gdd-button-bg-hover);\r\n    }\r\n\r\n    .gdd_button:focus,\r\n    .gdd_button:focus-visible {\r\n      --gdd-button-color: var(--gdd-button-color-focus);\r\n      --gdd-button-bg: var(--gdd-button-bg-focus);\r\n      outline: var(--gdd-button-ring-color) var(--gdd-button-ring-style) var(--gdd-button-ring-width);\r\n      outline-offset: var(--gdd-button-ring-offset);\r\n    }\r\n\r\n    .gdd_button_icon {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      flex-shrink: 0;\r\n      width: 1em;\r\n      height: 1em;\r\n    }\r\n\r\n    .gdd_button_icon_only {\r\n      min-width: 2.5rem;\r\n      padding: 0;\r\n      width: 2.5rem;\r\n      height: 2.5rem;\r\n      border-radius: 1e5px;\r\n      aspect-ratio: 1;\r\n    }\r\n\r\n    /* Apply animations based on classes */\r\n    .iconToOpen {\r\n      animation: var(--gdd-button-animation-open-name) 0.3s ease forwards;\r\n    }\r\n\r\n    .iconToClose {\r\n      animation: var(--gdd-button-animation-close-name) 0.3s ease forwards;\r\n    }\r\n\r\n    /* ********************************************* *\r\n     * Dropdown Content\r\n     * ********************************************* */\r\n    .gdd_content {\r\n      position: absolute;\r\n      z-index: 10;\r\n      overflow: hidden;\r\n      list-style: none;\r\n      width: var(--gdd-content-w);\r\n      max-width: var(--gdd-content-max-w);\r\n      margin: var(--gdd-content-my) var(--gdd-content-mx);\r\n      padding: var(--gdd-content-py) var(--gdd-content-px);\r\n      background-color: var(--gdd-content-bg);\r\n      border-width: var(--gdd-content-border-width);\r\n      border-style: var(--gdd-content-border-style);\r\n      border-color: var(--gdd-content-border-color);\r\n      border-radius: var(--gdd-content-border-radius);\r\n      transition: opacity var(--gdd-content-animation-duration) var(--gdd-content-animation-timing-function);\r\n      animation-duration: var(--gdd-content-animation-duration);\r\n      animation-direction: var(--gdd-content-animation-direction);\r\n      animation-timing-function: var(--gdd-content-animation-timing-function);\r\n    }\r\n\r\n    [data-position=\"top\"] .gdd_content {\r\n      top: auto;\r\n      bottom: 100%;\r\n    }\r\n\r\n    [data-position=\"bottom\"] .gdd_content {\r\n      top: 100%;\r\n      bottom: auto;\r\n    }\r\n\r\n    [data-position=\"left\"] .gdd_content {\r\n      --gdd-content-my: 0;\r\n      --gdd-content-mx: 0.25rem;\r\n      inset-inline-end: 100%;\r\n      top: 0;\r\n      bottom: auto;\r\n    }\r\n\r\n    [data-position=\"right\"] .gdd_content {\r\n      --gdd-content-my: 0;\r\n      --gdd-content-mx: 0.25rem;\r\n      inset-inline-start: 100%;\r\n      top: 0;\r\n      bottom: auto;\r\n    }\r\n\r\n    .gdd_content[data-state=\"open\"] {\r\n      visibility: visible;\r\n      opacity: 1;\r\n      animation-name: var(--gdd-content-animation-name);\r\n    }\r\n\r\n    .gdd_content[data-state=\"close\"] {\r\n      visibility: hidden;\r\n      opacity: 0;\r\n    }\r\n\r\n    /* ********************************************* *\r\n     * Dropdown Content Item\r\n     * ********************************************* */\r\n    .gdd_content_item {\r\n      position: relative;\r\n      display: flex;\r\n      width: 100%;\r\n      text-decoration: none;\r\n      gap: var(--gdd-item-icon-space);\r\n      padding: var(--gdd-item-py) var(--gdd-item-px);\r\n      color: var(--gdd-item-color);\r\n      font-family: var(--gdd-item-font-family);\r\n      font-size: var(--gdd-item-font-size);\r\n      line-height: var(--gdd-item-line-height);\r\n      letter-spacing: var(--gdd-item-letter-spacing);\r\n      background-color: var(--gdd-item-bg);\r\n      border-width: var(--gdd-item-border-width);\r\n      border-style: var(--gdd-item-border-style);\r\n      border-color: var(--gdd-item-border-color);\r\n      border-radius: var(--gdd-item-border-radius);\r\n    }\r\n\r\n    .gdd_content_item[href^=\"http\"] {\r\n      padding-right: 1.25em;\r\n    }\r\n\r\n    .gdd_content_item:hover {\r\n      --gdd-item-color: var(--gdd-item-color-hover);\r\n      --gdd-item-bg: var(--gdd-item-bg-hover);\r\n    }\r\n\r\n    .gdd_content_item:focus,\r\n    .gdd_content_item:focus-visible {\r\n      --gdd-item-color: var(--gdd-item-color-focus);\r\n      --gdd-item-bg: var(--gdd-item-bg-focus);\r\n      outline: var(--gdd-item-ring-color) var(--gdd-item-ring-style) var(--gdd-item-ring-width);\r\n      outline-offset: var(--gdd-item-ring-offset);\r\n      opacity: 1;\r\n    }\r\n\r\n    .gdd_content_item_icon {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      flex-shrink: 0;\r\n      width: 1.25em;\r\n      height: 1.25em;\r\n    }\r\n\r\n    .gdd_content_divider {\r\n      height: 0;\r\n      margin: 0.125rem 0;\r\n      overflow: hidden;\r\n      border-top: var(--gdd-item-divider-width) var(--gdd-item-divider-style) var(--gdd-divider-color);\r\n    }\r\n\r\n    .gdd_sr_only {\r\n      position: absolute;\r\n      width: 1px;\r\n      height: 1px;\r\n      padding: 0;\r\n      margin: -1px;\r\n      overflow: hidden;\r\n      clip: rect(0, 0, 0, 0);\r\n      white-space: nowrap;\r\n      border-width: 0;\r\n    }\r\n\r\n    /* ********************************************* *\r\n     * Animations\r\n     * ********************************************* */\r\n    @keyframes fadeIn {\r\n      from {\r\n        opacity: 0;\r\n      }\r\n\r\n      to {\r\n        opacity: 1;\r\n      }\r\n    }\r\n\r\n    @keyframes flipInX {\r\n      from {\r\n        transform: scaleY(-1);\r\n      }\r\n\r\n      to {\r\n        transform: scaleY(1);\r\n      }\r\n    }\r\n\r\n    @keyframes flipOutX {\r\n      from {\r\n        transform: scaleY(1);\r\n      }\r\n\r\n      to {\r\n        transform: scaleY(-1);\r\n      }\r\n    }\r\n</style>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}