Reverted Admonition flex layout

src/assets/stylesheets/extensions/_admonition.scss

@@ -45,7 +45,7 @@
 // Scoped in typesetted content to match specificity of regular content
 .md-typeset {
 
-  // Admonition
+  // Admonition extension
   .admonition {
     margin: 1.5625em 0;
     padding: 0 px2rem(12px);
@@ -64,7 +64,7 @@
       border-left: none;
     }
 
-    // Omit rendering errors for print
+    // Hack: omit rendering errors for print
     @media print {
       box-shadow: none;
     }
@@ -92,12 +92,17 @@
 
   // Admonition title
   .admonition-title {
-    display: flex;
+    position: relative;
     margin: 0 px2rem(-12px);
-    padding: px2rem(8px) px2rem(12px);
+    padding: px2rem(8px) px2rem(12px) px2rem(8px) px2rem(40px);
     font-weight: 700;
     background-color: transparentize($clr-blue-a200, 0.9);
 
+    // Adjust for right-to-left languages
+    [dir="rtl"] & {
+      padding: px2rem(8px) px2rem(40px) px2rem(8px) px2rem(12px);
+    }
+
     // Reset spacing, if title is the only element
     html &:last-child {
       margin-bottom: 0;
@@ -105,18 +110,18 @@
 
     // Icon
     &::before {
-      flex-shrink: 0;
+      position: absolute;
+      left: px2rem(12px);
       width: px2rem(20px);
       height: px2rem(20px);
-      margin-right: px2rem(8px);
       background-color: $clr-blue-a200;
       mask-image: var(--md-admonition-icon--note);
       content: "";
 
       // Adjust for right-to-left languages
       [dir="rtl"] & {
-        margin-right: initial;
-        margin-left: px2rem(8px);
+        right: px2rem(12px);
+        left: initial;
       }
 
       // Hack: mask-image is not supported in PDFs

src/assets/stylesheets/extensions/pymdown/_details.scss

@@ -40,6 +40,7 @@
 
     display: block;
     padding-top: 0;
+    overflow: visible;
 
     // Rotate title icon
     &[open] > summary::after {
@@ -50,17 +51,28 @@
     &:not([open]) {
       padding-bottom: 0;
     }
+
+    // Hack: omit margin collapse
+    &::after {
+      display: table;
+      content: "";
+    }
   }
 
-  // Title
+  // Details title
   summary {
     @extend .admonition-title;
 
     box-sizing: border-box;
     min-height: px2rem(20px);
-    outline: none;
+    padding: px2rem(8px) px2rem(36px) px2rem(8px) px2rem(40px);
     cursor: pointer;
 
+    // Adjust for right-to-left languages
+    [dir="rtl"] & {
+      padding: px2rem(8px) px2rem(40px) px2rem(8px) px2rem(36px);
+    }
+
     // Remove default details marker
     &::-webkit-details-marker {
       display: none;
@@ -68,10 +80,11 @@
 
     // Details marker
     &::after {
-      flex-shrink: 0;
+      position: absolute;
+      top: px2rem(8px);
+      right: px2rem(8px);
       width: px2rem(20px);
       height: px2rem(20px);
-      margin-left: auto;
       background-image: var(--md-details-icon);
       transform: rotate(0deg);
       transition: transform 250ms;
@@ -79,48 +92,10 @@
 
       // Adjust for right-to-left languages
       [dir="rtl"] & {
-        margin-right: auto;
-        margin-left: initial;
+        right: initial;
+        left: px2rem(8px);
         transform: rotate(180deg);
       }
     }
-
-    // Hack: absolute positioning for summary elements in Safari 9+ because,
-    // of course, they cannot be flex containers: https://bit.ly/2IW5g4O
-    _:default:not(:root:root), & { // stylelint-disable-line
-      position: relative;
-      padding: px2rem(8px) px2rem(40px);
-
-      // Icon and details marker
-      &::before,
-      &::after {
-        position: absolute;
-        flex-shrink: initial;
-        margin: initial;
-      }
-
-      // Icon
-      &::before {
-        margin-left: px2rem(-28px);
-
-        // Adjust for right-to-left languages
-        [dir="rtl"] & {
-          margin-right: px2rem(-28px);
-          margin-left: initial;
-        }
-      }
-
-      // Details marker
-      &::after {
-        top: px2rem(8px);
-        right: px2rem(12px);
-
-        // Adjust for right-to-left languages
-        [dir="rtl"] & {
-          right: initial;
-          left: px2rem(12px);
-        }
-      }
-    }
   }
 }