1 files changed, 48 insertions, 0 deletions
diff --git a/examples/snowpack/public/css/components/_copy-button.scss b/examples/snowpack/public/css/components/_copy-button.scss
new file mode 100644
index 000000000..3a27b9087
--- /dev/null
+++ b/examples/snowpack/public/css/components/_copy-button.scss
@@ -0,0 +1,48 @@
+@use '../var' as *;
+@use '../animations' as *;
+
+.copy-button {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-width: 292px;
+  padding: 0.75rem 1.25rem;
+  padding-bottom: 0.75rem;
+  font-size: 100%;
+  font-family: Menlo, ui-monospace, SFMono-Regular, Monaco, Consolas,
+    Liberation Mono, Courier New, monospace;
+  line-height: 1.5rem;
+  background-color: white;
+  border: 1px solid #0006;
+  border-radius: 4px;
+  cursor: pointer;
+  @include animation-copy-button;
+
+  svg,
+  .faded {
+    color: #ccc;
+    transition: color 0.1s ease-out;
+  }
+}
+
+// I don't think this is used
+.copy-button.active {
+  animation: pulse 0.5s;
+  animation-iteration-count: 1;
+
+  svg {
+    color: #ccc;
+  }
+}
+
+@keyframes pulse {
+  0% {
+    color: #2a85ca;
+    border-color: #2a85ca;
+  }
+
+  100% {
+  }
+}