Refactored Admonitions with flex layout

src/assets/stylesheets/extensions/_admonition.scss

@@ -21,7 +21,7 @@
 ////
 
 // ----------------------------------------------------------------------------
-// Rules
+// Rules: layout
 // ----------------------------------------------------------------------------
 
 // Icon definitions
@@ -82,8 +82,54 @@
     .md-typeset__table {
       padding: 0 px2rem(12px);
     }
+  }
+
+  // Admonition title
+  .admonition-title {
+    display: flex;
+    margin: 0 px2rem(-12px);
+    padding: px2rem(8px) px2rem(12px);
+    font-weight: 700;
+    background-color: transparentize($clr-blue-a200, 0.9);
+
+    // Reset spacing, if title is the only element
+    html &:last-child {
+      margin-bottom: 0;
+    }
+
+    // Icon
+    &::before {
+      flex-shrink: 0;
+      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);
+      }
+    }
+
+    // Reset code inside Admonition titles
+    > code {
+      margin: inherit;
+      padding: inherit;
+      color: inherit;
+      background-color: inherit;
+      border-radius: initial;
+      box-shadow: none;
+    }
+  }
+}
+
+// ----------------------------------------------------------------------------
+// Rules: different flavours
+// ----------------------------------------------------------------------------
 
-    // Build representational classes
 @each $names, $tint in (
   abstract summary tldr: $clr-light-blue-a400,
   info todo: $clr-cyan-a700,
@@ -100,11 +146,12 @@
   $type: #{nth($names, 1)};
 
   // Define base class
-      &.#{$type} {
+  .md-typeset .admonition.#{$type} {
     border-left-color: $tint;
+  }
 
-        // Title
+  // Define base class
-        > :first-child {
+  .md-typeset .#{$type} > .admonition-title {
     background-color: transparentize($tint, 0.9);
 
     // Icon
@@ -113,61 +160,13 @@
       mask-image: var(--md-admonition-icon--#{$type});
     }
   }
-      }
 
   // Define synonyms for base class
   @if length($names) > 1 {
     @for $n from 2 through length($names) {
-          &.#{nth($names, $n)} {
+      .#{nth($names, $n)} {
         @extend .#{nth($names, 1)};
       }
     }
   }
 }
-  }
-
-  // Admonition title
-  .admonition-title {
-    margin: 0 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
-    &:last-child {
-      margin-bottom: 0;
-    }
-
-    // Icon
-    &::before {
-      position: absolute;
-      width: px2rem(20px);
-      height: px2rem(20px);
-      margin-left: px2rem(-28px);
-      background-color: $clr-blue-a200;
-      mask-image: var(--md-admonition-icon--note);
-      content: "";
-
-      // Adjust for right-to-left languages
-      [dir="rtl"] & {
-        margin-right: px2rem(-28px);
-        margin-left: initial;
-      }
-    }
-
-    // Reset code inside Admonition titles
-    > code {
-      margin: inherit;
-      padding: inherit;
-      color: inherit;
-      background-color: inherit;
-      border-radius: initial;
-      box-shadow: none;
-    }
-  }
-}

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

@@ -43,28 +43,17 @@
 
     // Rotate title icon
     &[open] > summary::after {
-      transform: rotate(180deg);
+      transform: rotate(0deg);
     }
 
     // Remove bottom spacing
     &:not([open]) {
       padding-bottom: 0;
-
-      // Remove bottom border if block is closed
-      > summary {
-        border-bottom: none;
-      }
     }
 
-    // Increase spacing to the right - scoped here for higher specificity
+    // Ensure clickable area, even if no title is set
     summary {
-      position: relative;
+      min-height: px2rem(20px);
-      padding-right: px2rem(40px);
-
-      // Adjust for right-to-left languages
-      [dir="rtl"] & {
-        padding-left: px2rem(40px);
-      }
     }
   }
 
@@ -73,7 +62,6 @@
     @extend .admonition-title;
 
     // Hack: set to block, so Firefox doesn't render marker
-    display: block;
     outline: none;
     cursor: pointer;
 
@@ -84,18 +72,19 @@
 
     // Icon
     &::after {
-      position: absolute;
+      flex-shrink: 0;
-      right: px2rem(12px);
       width: px2rem(20px);
       height: px2rem(20px);
-      background-color: var(--md-default-fg-color--lighter);
+      margin-left: auto;
-      mask-image: var(--md-details-icon);
+      background-image: var(--md-details-icon);
+      transform: rotate(-90deg);
+      transition: transform 250ms;
       content: "";
 
       // Adjust for right-to-left languages
       [dir="rtl"] & {
-        right: initial;
+        margin-right: auto;
-        left: px2rem(12px);
+        margin-left: initial;
       }
     }
   }