initial

layers/ui/components/copy-button/styles.scss

@@ -0,0 +1,52 @@
+@use '../../styles/variables' as *;
+@use '../../styles/mixins' as *;
+
+.ui-copy-button {
+  $self: &;
+
+  @include txt-r-m;
+
+  display: inline-block;
+  position: relative;
+  height: 16px;
+  text-align: left;
+  width: min-content;
+  user-select: none;
+  vertical-align: middle;
+
+  &__default,
+  &__copied {
+    transition: .2s ease-in-out;
+    transition-property: transform, opacity;
+    transform-origin: center;
+
+    #{$self}.is-active & {
+      transform: translateY(-16px);
+    }
+  }
+
+  &__default {
+    opacity: 1;
+
+    #{$self}.is-active & {
+      opacity: 0;
+      pointer-events: none;
+    }
+  }
+
+  &__copied {
+    @include txt-r-m;
+
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    white-space: nowrap;
+    color: $clr-cyan-500;
+    opacity: 0;
+    pointer-events: none;
+
+    #{$self}.is-active & {
+      opacity: 1;
+    }
+  }
+}