refactor: unify the border radius of blocks

scope: code blocks, prompts, images, and videos

_sass/addon/syntax.scss

@@ -29,18 +29,12 @@ html {
   }
 }
 
-/* -- Codes Snippet -- */
-
-$code-radius: 6px;
+/* -- code snippets -- */
 
 %code-snippet-bg {
   background: var(--highlight-bg-color);
 }
 
-%code-snippet-radius {
-  border-radius: $code-radius;
-}
-
 %code-snippet-padding {
   padding-left: 1rem;
   padding-right: 1.5rem;
@@ -48,7 +42,7 @@ $code-radius: 6px;
 
 .highlighter-rouge {
   @extend %code-snippet-bg;
-  @extend %code-snippet-radius;
+  @extend %rounded;
 
   color: var(--highlighter-rouge-color);
   margin-top: 0.5rem;
@@ -56,7 +50,7 @@ $code-radius: 6px;
 }
 
 .highlight {
-  @extend %code-snippet-radius;
+  @extend %rounded;
   @extend %code-snippet-bg;
 
   @at-root figure#{&} {
@@ -173,8 +167,6 @@ div {
 
   $code-header-height: 2.25rem;
 
-  border-top-left-radius: $code-radius;
-  border-top-right-radius: $code-radius;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -226,9 +218,9 @@ div {
   /* clipboard */
   button {
     @extend %cursor-pointer;
+    @extend %rounded;
 
     border: 1px solid transparent;
-    border-radius: $code-radius;
     height: $code-header-height;
     width: $code-header-height;
     padding: 0;