1 files changed, 101 insertions, 0 deletions
diff --git a/docs/components/ui/Popover/Popover.css b/docs/components/ui/Popover/Popover.css
new file mode 100644
index 0000000..724547f
--- /dev/null
+++ b/docs/components/ui/Popover/Popover.css
@@ -0,0 +1,101 @@
+@scope (#pop-demo) {
+  :scope {
+    position: relative;
+    display: block;
+    padding: 2rem 0.5rem 0;
+    height: 300px;
+    margin: 0 auto;
+    text-align: center;
+  }
+
+  .ui-popbutton {
+    border-radius: 0.25rem;
+    border-width: 1px;
+    background-color: rgb(0 0 0 / 0.1);
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    font-weight: 600;
+    color: white;
+    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
+    0 4px 6px -4px rgb(0 0 0 / 0.1);
+  }
+  .ui-popbutton:hover {
+    background-color: rgb(0 0 0 / 0.2);
+  }
+
+  [popover] {
+    background-color: Canvas;
+    border-radius: 0.25rem;
+    border: 1px solid #666;
+    color: CanvasText;
+    height: fit-content;
+    margin: 0.75rem auto 0;
+    padding: 1rem;
+    width: 15rem;
+    overflow: visible;
+    transition: all 0.2s allow-discrete;
+    /* Final state of the exit animation */
+    opacity: 0;
+    transform: translateY(-3rem);
+  }
+  [popover]:popover-open {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  /* Needs to be after the previous [popover]:popover-open rule
+  to take effect, as the specificity is the same */
+  @starting-style {
+    [popover]:popover-open {
+      opacity: 0;
+      transform: translateY(-3rem);
+    }
+  }
+
+  /* Transition for the popover's backdrop */
+  [popover]::backdrop {
+    /* Final state of the exit animation */
+    background-color: rgb(0 0 0 / 0%);
+    transition: all 0.2s allow-discrete;
+  }
+  [popover]:popover-open::backdrop {
+    background-color: rgb(0 0 0 / 15%);
+  }
+  @starting-style {
+    [popover]:popover-open::backdrop {
+      background-color: rgb(0 0 0 / 0%);
+    }
+  }
+
+  [popover] h1 {
+    font-weight: bold;
+    margin-bottom: 0.75rem;
+  }
+  [popover] label {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 0.75rem;
+    line-height: 1rem;
+  }
+  [popover] input {
+    margin-left: auto;
+    width: 66.666667%;
+    border-radius: 0.25rem;
+    border-width: 1px;
+    padding: 0.25rem;
+    font-size: 0.75rem;
+    line-height: 1rem;
+  }
+  [popover] svg.arrow {
+    position: absolute;
+    top: -4px;
+    left: 50%;
+    z-index: 10;
+    display: block;
+    transform: rotate(180deg);
+    border-color: rgb(255 255 255);
+    fill: white;
+  }
+}
+\ No newline at end of file