remove old modal styles and add arrow for details element

projects/frontend/src/styles/embed.sass

@@ -1,43 +1,6 @@
 @import './mixins.scss'
 @import './tag.sass'
 
-#modal-outlet
-  position: fixed
-  top: 1em
-  left: 1em
-  bottom: 1em
-  right: 1em
-  z-index: 99
-  &::before
-    content: ''
-    position: absolute
-    top: -1em
-    left: -1em
-    bottom: -1em
-    right: -1em
-    background: var(--theme-modal-overlay)
-    z-index: -1
-  &[state="closed"]
-    opacity: 0
-    pointer-events: none
-  .container
-    width: 100%
-    height: 100%
-    @include themeColors(var(--brand-champagne-pink), var(--brand-dark-purple))
-  .close
-    height: 2em
-    cursor: pointer
-    margin-left: auto
-  .content
-    width: 100%
-    height: calc(100% - 2em)
-    overflow: scroll
-    img
-      margin: auto
-      display: block
-      max-width: calc(100vw - 2em)
-      max-height: calc(100vh - 4em)
-
 .embed
   video,
   iframe,
@@ -61,21 +24,20 @@ details.embed
   summary
     display: block
     position: relative
-    padding-left: 1em
+    padding-left: calc(var(--theme-spacing) * 2)
     &::before
       @include svgMask('/assets/icons/triangle.svg', contain)
-      content: ""
+      content: ''
       display: block
       position: absolute
       top: 0
       left: 0
-      width: 1em
-      height: 1em
-      background-color: var(--theme-body-fg)
+      width: var(--theme-spacing)
+      height: var(--theme-spacing)
       transform: rotate(90deg)
       animation-duration: var(--theme-transition-duration)
       animation-timing-function: var(--theme-transition-function)
-details.embed[open=""]
+details.embed[open='']
   summary
     &::before
       transform: rotate(180deg)