remove old modal styles and add arrow for details element

projects/frontend/public/assets/icons/triangle.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs2" />
+  <g
+     id="layer1"
+     transform="rotate(90,50,50)">
+    <path
+       style="fill:currentColor"
+       id="path233"
+       d="M 2.7979431,45.909781 38.856871,25.091145 74.915798,4.2725133 l 4e-6,41.6372657 V 87.547042 L 38.856871,66.728412 Z"
+       transform="matrix(1.2008474,0,0,1.2008474,3.3388256,-5.1306365)" />
+  </g>
+</svg>

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
+      width: var(--theme-spacing)
-      height: 1em
+      height: var(--theme-spacing)
-      background-color: var(--theme-body-fg)
       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)