From dc0bc2042cec7657b1f2161176053f99e1f927e2 Mon Sep 17 00:00:00 2001
From: Lucas Vallenet <lucasvallenet@gmail.com>
Date: Mon, 14 Aug 2023 10:40:24 +0200
Subject: [PATCH] Create aspect-ratio SCSS mixin polyfill

---
 assets.json                      |  2 +-
 assets/styles/tools/_mixins.scss | 31 +++++++++++++++++++++++++++++++
 2 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/assets.json b/assets.json
index ea9e2ee..96329b1 100644
--- a/assets.json
+++ b/assets.json
@@ -1,3 +1,3 @@
 {
-    "version": 1691523058315
+    "version": 1692002413473
 }
\ No newline at end of file
diff --git a/assets/styles/tools/_mixins.scss b/assets/styles/tools/_mixins.scss
index 8f91d8c..40691d0 100644
--- a/assets/styles/tools/_mixins.scss
+++ b/assets/styles/tools/_mixins.scss
@@ -193,3 +193,34 @@
     display: $display $important;
     visibility: visible  $important;
 }
+
+// Aspect-ratio polyfill
+//
+// The element will be accessible from screen readers and visible in the document flow.
+//
+// @param  {Number} $ratio      [19/6]  - The ratio of the element.
+// @param  {Number} $width      [100%]  - The width of element.
+// @param  {Boolean} $children  [false] - Whether the element contains children.
+// @output Properties for maintaining aspect-ratio
+
+@mixin aspect-ratio($ratio: math.div(16, 9), $width: 100%, $children: false) {
+
+    @supports not (aspect-ratio: 1) {
+        aspect-ratio: $ratio;
+    }
+
+    @supports (aspect-ratio: 1) {
+        height: 0;
+        padding-top: calc(#{$width} * #{math.div(1, $ratio)});
+
+        @if ($children == true) {
+            position: relative;
+
+            > * {
+                position: absolute;
+                top: 0;
+                left: 0;
+            }
+        }
+    }
+}