feat: add height transitions for detail content and code block content (#628)

- [interpolate-size](https://developer.mozilla.org/en-US/docs/Web/CSS/interpolate-size)
- [calc-size()](https://developer.mozilla.org/en-US/docs/Web/CSS/calc-size)

assets/css/_core/_base.scss

@@ -63,6 +63,14 @@ img,video {
   height: auto;
 }
 
+details {
+  &.center {
+    summary {
+      text-align: center;
+    }
+  }
+}
+
 %code {
   padding: 0.2em 0.4em;
   margin: 0;

assets/css/_core/_root.scss

@@ -27,6 +27,8 @@
   #{$rootPrefix}scrollbar-track-color: transparent;
   #{$rootPrefix}scrollbar-width: thin;
   #{$rootPrefix}scrollbar-width-legacy: 12px;
+
+  interpolate-size: allow-keywords;
 }
 
 // Dark theme

assets/css/_mixin/_details.scss

@@ -1,15 +0,0 @@
-@mixin details-transition-open {
-  @include transition(max-height 0.2s cubic-bezier(0, 1, 0, 1) -0.1s);
-}
-
-@mixin details-transition-close {
-  @include transition(max-height 0.2s cubic-bezier(0.5, 0, 1, 0) 0s);
-}
-
-details {
-  &.center {
-    summary {
-      text-align: center;
-    }
-  }
-}

assets/css/_mixin/_index.scss

@@ -1,6 +1,5 @@
 @import '_compatibility';
 @import '_link';
 @import '_blur';
-@import '_details';
 @import '_scrollbar-width';
 @import '_z-index';

assets/css/_partials/_details.scss

@@ -17,9 +17,9 @@
   }
 
   > .details-content {
-    max-height: 0;
+    height: 0;
     overflow-y: hidden;
-    @include details-transition-open;
+    @include transition(height 0.5s ease-out);
   }
 
   &.open {
@@ -32,9 +32,8 @@
     }
 
     > .details-content {
-      max-height: 100%;
+      height: auto;
       @include border-radius(0 0 $global-border-radius $global-border-radius);
-      @include details-transition-close;
     }
   }
 

assets/css/_partials/_single/_code.scss

@@ -82,9 +82,9 @@ pre:not([data-processed]) {
 
       // delayed loading table-wrapper
       & + .table-wrapper {
-        max-height: 0;
+        height: 0;
         @include border-radius(0 0 $global-border-radius $global-border-radius);
-        @include details-transition-open;
+        @include transition(height 0.5s ease-out);
       }
 
       [data-theme='dark'] & {
@@ -227,8 +227,7 @@ pre:not([data-processed]) {
       }
 
       .table-wrapper {
-        max-height: 100%;
-        @include details-transition-close;
+        height: auto;
       }
 
       .arrow {