From 260d998b871cb58dcd77822eda5fd1328a22fc02 Mon Sep 17 00:00:00 2001
From: "Ivan Mar (sOkam!)" <7308253+heysokam@users.noreply.github.com>
Date: Wed, 24 Jan 2024 10:54:06 -0800
Subject: [PATCH] fmt: Add css nesting to fix the colors until reviewed

---
 src/css/custom.css | 63 +++++++++++++++++++++++-----------------------
 1 file changed, 31 insertions(+), 32 deletions(-)

diff --git a/src/css/custom.css b/src/css/custom.css
index a3964b64734b..134da13da421 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -6,9 +6,6 @@
  * @note Any CSS included here will be global.
  * @note The Docusaurus classic template bundles the Infima CSS framework by default.
  */
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
 
 /**
  * @section Tailwind CSS directives
@@ -151,35 +148,37 @@
  * @section Admonition Customization
  * @note Colors are taken from the main --ifm-color-** variables. These are the overrides to the Docusaurus defaults.
  */
-.alert .alert--secondary {  /* Note Admonition */
-  --ifm-alert-foreground-color           : var(--ifm-color-gray-100);
-  --ifm-alert-background-color-highlight : var(--ifm-color-gray-200);
-  --ifm-alert-background-color           : var(--ifm-color-gray-800);
-  --ifm-alert-border-color               : var(--ifm-color-primary);
-};
-.alert .alert--success {  /* Tip Admonition */
-  --ifm-alert-foreground-color           : var(--ifm-color-info-lightest);
-  --ifm-alert-background-color-highlight : var(--ifm-color-info-light);
-  --ifm-alert-border-color               : var(--ifm-color-info-dark);
-  --ifm-alert-background-color           : var(--ifm-color-info-darkest);
-};
-.alert .alert--info {  /* Info Admonition */
-  --ifm-alert-foreground-color           : var(--ifm-color-success-lightest);
-  --ifm-alert-background-color-highlight : var(--ifm-color-success-light);
-  --ifm-alert-border-color               : var(--ifm-color-success-dark);
-  --ifm-alert-background-color           : var(--ifm-color-success-darkest);
-};
-.alert .alert--warning {  /* Warning Admonition */
-  --ifm-alert-foreground-color           : var(--ifm-color-warning-lightest);
-  --ifm-alert-background-color-highlight : var(--ifm-color-warning-light);
-  --ifm-alert-border-color               : var(--ifm-color-warning-dark);
-  --ifm-alert-background-color           : var(--ifm-color-warning-darkest);
-};
-.alert .alert--danger {  /* Danger Admonition */
-  --ifm-alert-foreground-color           : var(--ifm-color-danger-lightest);
-  --ifm-alert-background-color-highlight : var(--ifm-color-danger-light);
-  --ifm-alert-border-color               : var(--ifm-color-danger-dark);
-  --ifm-alert-background-color           : var(--ifm-color-danger-darkest);
+.alert {
+  &.alert--secondary {  /* Note Admonition */
+    --ifm-alert-foreground-color           : var(--ifm-color-gray-100);
+    --ifm-alert-background-color-highlight : var(--ifm-color-gray-200);
+    --ifm-alert-background-color           : var(--ifm-color-gray-800);
+    --ifm-alert-border-color               : var(--ifm-color-primary);
+  };
+  &.alert--success {  /* Tip Admonition */
+    --ifm-alert-foreground-color           : var(--ifm-color-info-lightest);
+    --ifm-alert-background-color-highlight : var(--ifm-color-info-light);
+    --ifm-alert-border-color               : var(--ifm-color-info-dark);
+    --ifm-alert-background-color           : var(--ifm-color-info-darkest);
+  };
+  &.alert--info {  /* Info Admonition */
+    --ifm-alert-foreground-color           : var(--ifm-color-success-lightest);
+    --ifm-alert-background-color-highlight : var(--ifm-color-success-light);
+    --ifm-alert-border-color               : var(--ifm-color-success-dark);
+    --ifm-alert-background-color           : var(--ifm-color-success-darkest);
+  };
+  &.alert--warning {  /* Warning Admonition */
+    --ifm-alert-foreground-color           : var(--ifm-color-warning-lightest);
+    --ifm-alert-background-color-highlight : var(--ifm-color-warning-light);
+    --ifm-alert-border-color               : var(--ifm-color-warning-dark);
+    --ifm-alert-background-color           : var(--ifm-color-warning-darkest);
+  };
+  &.alert--danger {  /* Danger Admonition */
+    --ifm-alert-foreground-color           : var(--ifm-color-danger-lightest);
+    --ifm-alert-background-color-highlight : var(--ifm-color-danger-light);
+    --ifm-alert-border-color               : var(--ifm-color-danger-dark);
+    --ifm-alert-background-color           : var(--ifm-color-danger-darkest);
+  };
 };
 
 .docusaurus-highlight-code-line {