Fixed print view of new tabs implementation

material/base.html

@@ -39,7 +39,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.66338c14.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.bc82e094.min.css' | url }}">
       {% if config.theme.palette %}
         {% set palette = config.theme.palette %}
         <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.3f5d1f46.min.css' | url }}">

src/assets/stylesheets/main/extensions/pymdownx/_tabbed.scss

@@ -134,9 +134,13 @@
 
 // Tab label placeholder
 %tabbed-label {
+
+  // [screen]: Show active state
+  @media screen {
     color: var(--md-accent-fg-color);
     border-color: var(--md-accent-fg-color);
   }
+}
 
 // Tab label on keyboard focus placeholder
 %tabbed-label-focus-visible {
@@ -165,6 +169,11 @@
     -ms-overflow-style: none;          // IE, Edge
     scrollbar-width: none;             // Firefox
 
+    // [print]: Move one layer up for ordering
+    @media print {
+      display: contents;
+    }
+
     // Webkit scrollbar
     &::-webkit-scrollbar {
       display: none;                   // Chrome, Safari
@@ -184,7 +193,20 @@
       border-top-left-radius: px2rem(2px);
       border-top-right-radius: px2rem(2px);
       cursor: pointer;
-      transition: background-color 250ms, color 250ms;
+      transition:
+        background-color 250ms,
+        color            250ms;
+
+      // [print]: Intersperse labels with containers
+      @media print {
+
+        // Ensure correct order of labels
+        @for $i from 1 through 10 {
+          &:nth-child(#{$i}) {
+            order: $i;
+          }
+        }
+      }
 
       // Tab label on hover
       &:hover {
@@ -195,17 +217,35 @@
 
   // Tab block container
   .tabbed-alternate {
+    flex-direction: column;
 
     // Tab content container
     .tabbed-content {
       all: initial;
       width: 100%;
+
+      // [print]: Move one layer up for ordering
+      @media print {
+        display: contents;
+      }
     }
 
     // Tab content
     .tabbed-subcontent {
       display: none;
 
+      // [print]: Intersperse labels with containers
+      @media print {
+        display: block;
+
+        // Ensure correct order of containers
+        @for $i from 1 through 10 {
+          &:nth-child(#{$i}) {
+            order: $i;
+          }
+        }
+      }
+
       // Code block is the only child of a tab - remove margin and mirror
       // previous (now deprecated) SuperFences code block grouping behavior
       > pre:only-child,