app/components/coco/base/modal/modal.css in coveragebook_components-0.7.4 vs app/components/coco/base/modal/modal.css in coveragebook_components-0.7.5

@@ -1,8 +1,8 @@
 @layer components {
   [data-coco][data-component="modal"] {
-    @apply fixed inset-0 z-[10000] overflow-y-auto;
+    @apply fixed inset-0 z-[10000] overflow-y-auto scroll-smooth;
 
     .modal-overlay {
       @apply fixed inset-0 bg-black bg-opacity-60;
     }
 
@@ -10,9 +10,63 @@
       @apply relative flex min-h-screen justify-center items-center z-[10000] p-2 sm:p-8;
     }
 
     .modal-content {
       @apply contents;
+    }
+
+    /* transitions */
+
+    .modal-overlay {
+      &.overlay-enter {
+        @apply ease-out duration-200;
+      }
+
+      &.overlay-enter-start {
+        @apply opacity-0;
+      }
+
+      &.overlay-enter-end {
+        @apply opacity-100;
+      }
+
+      &.overlay-leave {
+        @apply ease-in duration-150;
+      }
+
+      &.overlay-leave-start {
+        @apply opacity-100;
+      }
+
+      &.overlay-leave-end {
+        @apply opacity-0;
+      }
+    }
+
+    .modal-container {
+      &.container-enter {
+        @apply ease-out duration-[400ms];
+      }
+
+      &.container-enter-start {
+        @apply opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95;
+      }
+
+      &.container-enter-end {
+        @apply opacity-100 translate-y-0 sm:scale-100;
+      }
+
+      &.container-leave {
+        @apply ease-in duration-150;
+      }
+
+      &.container-leave-start {
+        @apply opacity-100 translate-y-0 sm:scale-100;
+      }
+
+      &.container-leave-end {
+        @apply opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95;
+      }
     }
   }
 
   .modal-frame {
     @apply contents;