@iamproperty/components 3.6.0 → 3.7.0

package/assets/js/tests/table.spec.js

@@ -7,6 +7,9 @@ const basicTable = `<thead>
     <th>Heading 1</th>
     <th>Heading 2</th>
     <th>Heading 3</th>
+    <th>Heading 4</th>
+    <th>Heading 5</th>
+    <th>Heading 6</th>
   </tr>
 </thead>
 <tbody>
@@ -14,21 +17,33 @@ const basicTable = `<thead>
     <td>Cell 1</td>
     <td>Low</td>
     <td>Cell 3</td>
+    <td>Cell 4</td>
+    <td>Cell 5</td>
+    <td>Cell 6</td>
   </tr>
   <tr>
     <td>Cell 1</td>
     <td>Low</td>
     <td><a href="/link">View information</a></td>
+    <td>Cell 4</td>
+    <td>Cell 5</td>
+    <td>Cell 6</td>
   </tr>
   <tr>
     <td>Different Cell 1</td>
     <td>Medium</td>
     <td><a href="/link">View information</a></td>
+    <td>Cell 4</td>
+    <td>Cell 5</td>
+    <td>Cell 6</td>
   </tr>
   <tr>
     <td>Different Cell 1</td>
     <td>High</td>
     <td><a href="/link">View information</a></td>
+    <td>Cell 4</td>
+    <td>Cell 5</td>
+    <td>Cell 6</td>
   </tr>
 </tbody>`;
 describe('addDataAttributes', () => {

package/assets/sass/_functions/variables.scss

@@ -109,6 +109,7 @@ $theme-colors: map-merge((
   "info":       $info,
   "warning":    $warning,
   "success":    $success,
+  "complete":   #0F9D58,
   "danger":     $danger,
   "dark":       $dark,
   "light":      $light,
@@ -136,7 +137,7 @@ $theme-colors: map-merge((
   @return var(--colour-#{$identifier});
 }
 
-$utilities-colors: $theme-colors-rgb;
+$utilities-colors: $theme-colors;
 
 $utilities-text: map-merge(
   $utilities-colors,
@@ -436,41 +437,15 @@ $card-cap-bg: transparent;
 // #endregion card-variables
 
 // #region Icons
-$icon-blank: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M17 13v6c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-11c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-11c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293h6c0.552 0 1-0.448 1-1s-0.448-1-1-1h-6c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v11c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h11c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-6c0-0.552-0.448-1-1-1s-1 0.448-1 1zM10.707 14.707l9.293-9.293v3.586c0 0.552 0.448 1 1 1s1-0.448 1-1v-6c0-0.136-0.027-0.265-0.076-0.383s-0.121-0.228-0.216-0.323c-0.001-0.001-0.001-0.001-0.002-0.002-0.092-0.092-0.202-0.166-0.323-0.216-0.118-0.049-0.247-0.076-0.383-0.076h-6c-0.552 0-1 0.448-1 1s0.448 1 1 1h3.586l-9.293 9.293c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0z' stroke-width='4px'></path></svg>");
-$icon-sort: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' preserveAspectRatio='none'%3E%3Cpath opacity='.3' d='M51 1l25 23 24 22H1l25-22zm0 100l25-23 24-22H1l25 22z'/%3E%3C/svg%3E");
 $icon-arrow: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M6.5,2l9,9-9,9' style='fill:none;stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px'/></svg>");
 $icon-close: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>");
-$icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M16 0c-8.836 0-16 7.164-16 16s7.164 16 16 16 16-7.164 16-16-7.164-16-16-16zM13.52 23.383l-7.362-7.363 2.828-2.828 4.533 4.535 9.617-9.617 2.828 2.828-12.444 12.445z'/></svg>");
 $icon-question: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'><path d='M14 21.5v-3c0-0.281-0.219-0.5-0.5-0.5h-3c-0.281 0-0.5 0.219-0.5 0.5v3c0 0.281 0.219 0.5 0.5 0.5h3c0.281 0 0.5-0.219 0.5-0.5zM18 11c0-2.859-3-5-5.688-5-2.547 0-4.453 1.094-5.797 3.328-0.141 0.219-0.078 0.5 0.125 0.656l2.063 1.563c0.078 0.063 0.187 0.094 0.297 0.094 0.141 0 0.297-0.063 0.391-0.187 0.734-0.938 1.047-1.219 1.344-1.437 0.266-0.187 0.781-0.375 1.344-0.375 1 0 1.922 0.641 1.922 1.328 0 0.812-0.422 1.219-1.375 1.656-1.109 0.5-2.625 1.797-2.625 3.313v0.562c0 0.281 0.219 0.5 0.5 0.5h3c0.281 0 0.5-0.219 0.5-0.5v0c0-0.359 0.453-1.125 1.188-1.547 1.188-0.672 2.812-1.578 2.812-3.953zM24 14c0 6.625-5.375 12-12 12s-12-5.375-12-12 5.375-12 12-12 12 5.375 12 12z'/></svg>");
 
-$icon-warning: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c-13.3 0-24 10.7-24 24V264c0 13.3 10.7 24 24 24s24-10.7 24-24V152c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/></svg>");
-
-$icon-filter: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 15'><path d='M0,28.5a.5.5,0,0,0,.5.5H2.55a2.5,2.5,0,0,0,4.9,0H15.5a.5.5,0,0,0,0-1H7.45a2.5,2.5,0,0,0-4.9,0H.5A.5.5,0,0,0,0,28.5Zm3.5,0A1.5,1.5,0,1,1,5,30,1.5,1.5,0,0,1,3.5,28.5Zm6-5A1.5,1.5,0,1,1,11,25a1.5,1.5,0,0,1-1.5-1.5ZM11,21a2.5,2.5,0,0,0-2.45,2H.5a.5.5,0,0,0,0,1H8.55a2.5,2.5,0,0,0,4.9,0H15.5a.5.5,0,0,0,0-1H13.45A2.5,2.5,0,0,0,11,21ZM6,20a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,6,20Zm2.45-2a2.5,2.5,0,0,0-4.9,0H.5a.5.5,0,0,0,0,1H3.55a2.5,2.5,0,0,0,4.9,0H15.5a.5.5,0,0,0,0-1Z' transform='translate(0 -16)'/></svg>");
-
-$icon-low: url("data:image/svg+xml,<svg viewBox='0 0 22 22' xmlns='http://www.w3.org/2000/svg'><path d='M20 12.1429H2C1.42857 12.1429 1 11.5714 1 11C1 10.4286 1.42857 9.85715 2.14286 9.85715H20C20.5714 9.85715 21 10.4286 21 11C21 11.5714 20.5714 12.1429 20 12.1429Z' /></svg>");
-
-$icon-medium: url("data:image/svg+xml,<svg viewBox='0 0 20 8' xmlns='http://www.w3.org/2000/svg'><path d='M19.0001 2.28572H1.14286C0.428573 2.28572 0 1.71429 0 1.14286C0 0.571431 0.428573 0 1.14286 0H19.0001C19.5715 0 20.0001 0.571431 20.0001 1.14286C20.0001 1.71429 19.5715 2.28572 19.0001 2.28572ZM20.0001 6.85716C20.0001 6.28573 19.5715 5.7143 18.8572 5.7143H1.14286C0.428573 5.7143 0 6.28573 0 6.85716C0 7.42859 0.428573 8.00002 1.14286 8.00002H19.0001C19.5715 8.00002 20.0001 7.42859 20.0001 6.85716Z'/></svg>");
-
-$icon-high: url("data:image/svg+xml,<svg viewBox='0 0 20 22' xmlns='http://www.w3.org/2000/svg'><path d='M17.4648 11.7747L10 4.30985L2.53522 11.7747C1.97184 12.338 0.985918 12.338 0.422536 11.7747C-0.140845 11.2113 -0.140845 10.3662 0.422536 9.80282L8.87326 1.3521C9.43664 0.78872 10.2817 0.78872 10.8451 1.3521L19.4367 9.94367C20 10.5071 20 11.3521 19.4367 11.9155C19.0141 12.338 18.0282 12.338 17.4648 11.7747Z' /><path d='M17.4649 20.6479L10 13.0422L2.53524 20.5071C1.97186 21.0704 1.12679 21.0704 0.563405 20.5071C2.37375e-05 19.9437 2.37375e-05 19.0986 0.563405 18.5352L9.01413 10.0845C9.57751 9.52111 10.4226 9.52111 10.986 10.0845L19.5775 18.6761C20.1409 19.2394 20.1409 20.0845 19.5775 20.6479C19.0142 21.2113 18.0282 21.2113 17.4649 20.6479Z' /></svg>");
-
-
-$icon-flag: url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M15.578.242a1.287,1.287,0,0,0-1.3-.034,8.118,8.118,0,0,1-3.369.873A7.341,7.341,0,0,1,8.537.609,7.826,7.826,0,0,0,5.788.057,11.873,11.873,0,0,0,1,1.261V.548A.477.477,0,0,0,.5.076.477.477,0,0,0,0,.548v15a.5.5,0,0,0,1,0V12.269a11.324,11.324,0,0,1,4.65-1.217,11.982,11.982,0,0,1,3.1.5,12.171,12.171,0,0,0,3.1.5,9.326,9.326,0,0,0,3.472-.722,1,1,0,0,0,.637-.931L16,1.058A.943.943,0,0,0,15.578.242Zm-.587,10.149a8.588,8.588,0,0,1-3.134.653A11.219,11.219,0,0,1,9,10.579a12.948,12.948,0,0,0-3.35-.525,11.152,11.152,0,0,0-4.559,1.081L1,11.175V2.34l.875-.355a10.676,10.676,0,0,1,3.912-.928,7.465,7.465,0,0,1,2.444.476,8.261,8.261,0,0,0,2.678.519A9.943,9.943,0,0,0,15,1.048Z'/></svg>");
-
-
 
 $vars: map-merge((
-  --icon-blank: #{escape-svg($icon-blank)},
-  --icon-sort: #{$icon-sort},
   --icon-arrow: #{escape-svg($icon-arrow)},
   --icon-close: #{escape-svg($icon-close)},
-  --icon-tick: #{escape-svg($icon-tick)},
-  --icon-question: #{escape-svg($icon-question)},
-  --icon-warning: #{escape-svg($icon-warning)},
-  --icon-filter: #{escape-svg($icon-filter)},
-  --icon-high: #{escape-svg($icon-high)},
-  --icon-medium: #{escape-svg($icon-medium)},
-  --icon-low: #{escape-svg($icon-low)},
-  --icon-flag: #{escape-svg($icon-flag)}
+  --icon-question: #{escape-svg($icon-question)}
 ), $vars);
 // #endregion
 

package/assets/sass/components/admin-panel.scss

@@ -68,17 +68,7 @@
     margin: 0 calc(var(--padding-x) * -1) rem(24) calc(var(--padding-x) * -1);
 
     &:before {
-      content: "";
       top: 100%;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      height: 1.5rem;
-      position: sticky;
-      display: block;
-      background: linear-gradient(180deg, transparent 0%, var(--colour-canvas-2) 100%);
-      z-index: 2;
-      margin-bottom: -1.5rem;
     }
   }
 

package/assets/sass/components/card.scss

@@ -2,15 +2,10 @@
 
 // #region Default card
 .card {
-  --top-padding: 2rem;
-  --right-padding: #{rem(16+16+24)};
-  --bottom-padding: 2rem;
-  --left-padding: 1rem;
-  --icon-right: 1rem;
-
+  --card-icon-right: 1rem;
+  box-shadow: var(--card-box-shadow);
+  border-radius: var(--card-border-radius);
   position: relative;
-  box-shadow: 2px 6px 12px rgba(0,0,0,0.2);
-  border-radius: rem(8);
   font-weight: bold;
   font-size: rem(18);
   line-height: rem(24);
@@ -27,13 +22,13 @@
 
   &.border-0 {
     box-shadow: none;
-    --left-padding: 0rem;
+    --card-left-padding: 0rem;
     outline-offset: 1px!important;
   }
 
   &__body {
     position: relative;
-    padding: var(--top-padding) var(--right-padding) var(--bottom-padding) var(--left-padding);
+    padding: var(--card-top-padding) var(--card-right-padding) var(--card-bottom-padding) var(--card-left-padding);
     z-index: -1;
   }
 
@@ -41,8 +36,8 @@
   &:after {
     content: "";
     position: absolute;
-    right: var(--icon-right);
-    bottom: var(--bottom-padding);
+    right: var(--card-icon-right);
+    bottom: var(--card-bottom-padding);
     height: rem(24);
     width: rem(24);
     background: var(--colour-warning);
@@ -64,11 +59,16 @@
 
   &:is(:hover,:focus,.hover) {
     --icon-right: 0.5rem;
-    outline: 2px solid var(--colour-primary);
+    outline: 2px solid var(--colour, var(--colour-primary));
     outline-offset: -2px;
 
+  }
+  
+  // Update arrow cololur
+  &:not([class*="colour-"]):is(:hover,:focus,.hover) {
+
     &:before {
-      background: var(--colour-primary);
+      background: var(--colour-primary-theme);
     }
     &:after {
       background: #ffffff;
@@ -123,20 +123,13 @@
   }
 }
 
-
 ::slotted(i){
   font-size: rem(24);
-  margin: -3px var(--icon-right) 0 0;
+  margin: -3px var(--card-icon-right) 0 0;
   font-weight: 400;
   vertical-align: middle;
 }
 
-.card--filter ::slotted(i) {
-  display: block !important;
-  height: rem(18)!important;
-  margin: 0 0 0.5rem 0!important;
-}
-
 ::slotted(span){
   display: block;
   font-weight: normal;
@@ -145,6 +138,14 @@
 }
 // #endregion
 
+// #region border left
+.card[class*="colour-"],
+.card--filter {
+  
+  border-left: rem(12) solid var(--colour,var(--colour-primary));
+}
+// #endregion
+
 //#region Filter card
 .card--filter {
   --top-padding: #{rem(24)};
@@ -152,7 +153,7 @@
   --bottom-padding: #{rem(24)};
   --left-padding: 1rem;
 
-  border-left: rem(12) solid var(--colour,var(--colour-primary));
+  //border-left: rem(12) solid var(--colour,var(--colour-primary));
 
   &:has(.card__total) .card__body{
 
@@ -202,13 +203,19 @@
     padding-right: rem(16);
   }
 }
+
+.card--filter ::slotted(i) {
+  display: block !important;
+  font-size: rem(18)!important;
+  margin: 0 0 0.5rem 0!important;
+}
 // #endregion
 
 // #region card with an image
 .card:has(.card__head) {
   .card__head {
     padding-bottom: 0;
-    padding-top: 55%;
+    padding-top: 27%;
     position: relative;
     overflow: hidden;
     background: rgba(0,0,0,0.1);
@@ -236,7 +243,7 @@
   .card__footer {
     position: relative;
     background: #ffffff;
-    padding: var(--top-padding) var(--right-padding) var(--bottom-padding) var(--left-padding);
+    padding: var(--card-top-padding) var(--card-right-padding) var(--card-bottom-padding) var(--card-left-padding);
     z-index: -1;
     display: block;
   }

package/assets/sass/components/dialog.scss

@@ -17,13 +17,37 @@ dialog[open] {
   overscroll-behavior: contain;
   background: var(--colour-canvas-2);
   box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.11);
-  border-radius: rem(28);
+  border-radius: rem(10);
   padding: var(--dialog-padding);
   outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
 
+  display: flex;
+  flex-direction: column;
+
+  > *:last-child,
+  > .mh-lg > *:last-child{
+    margin-bottom: 0;
+  }
+  
+  > :is(p):last-child,
+  > .mh-lg > :is(p):last-child {
+    padding-bottom: 0;
+  }
+}
+// #endregion
+
+// #region modal styling
+*:not(.dialog__wrapper) > dialog[open] {
+  overflow-y: hidden;
+  width: 90vw;
+  max-width: rem(324); // col-width*4
+
+  //height: 90vh;
+  max-height: min(90vh, #{rem(752)});
+  overscroll-behavior: contain;
+
   // Close button
   > form:first-child {
-
     position: static;
   }
 
@@ -64,58 +88,338 @@ dialog[open] {
     & + * {
       padding-right: var(--dialog-padding);
       margin-right: rem(20);
+      display: block;
     }
-  }
 
-  > *:last-child {
-    margin-bottom: 0;
-  }
-  > :is(p):last-child {
-    padding-bottom: 0;
-  }
-}
-// #endregion
+    & + span:not(.h1,.h2,.h3,.h4,.h5,.h6) {
+      padding-bottom: rem(8);
+      line-height: rem(19);
+    }
 
-// #region modal styling
-*:not(.dialog__wrapper) > dialog[open] {
-  overflow-y: hidden;
-  width: 90vw;
-  max-width: rem(376); // col-width*4 // 96px*4 = 376px
-  height: fit-content;
+    & + span:not(.h1,.h2,.h3,.h4,.h5,.h6) + * {
+      padding-right: var(--dialog-padding);
+      margin-right: rem(20);
+      display: block;
+    }
+
+    @media (forced-colors: active) {
+      text-indent: 0;
+      width: fit-content;
+
+      &:after {
+        display: none;
+      }
+    }
+  }
 
   @include media-breakpoint-up(sm) {
     
     --dialog-padding: #{rem(32)};
-
-    max-width: rem(564); // col-width*6 // 96px*6 = 564px
-    border-radius: rem(34);
+    min-width: rem(335);
+    width: fit-content;
+    max-width: rem(686);
   }
   
   @include media-breakpoint-up(md) {
     
+    min-width: rem(454);
+    width: fit-content;
+    max-width: rem(736);
   }
 
   &:has(.youtube-embed){
     padding: 0!important;
   }
-}
 
-.mh-lg {
-  padding-right: rem(20);
+  &.dialog--fullwidth {
+    max-width: rem(1112);
+  }
 
-  @include media-breakpoint-up(md) {
-    margin-right: var(--dialog-padding);
+  container-type: inline-size;
+    
+  @container (width < 23.4375em) {
+
+    > .btn:not(.dialog__close),
+    > form > .btn:not(.dialog__close),
+    > .mh-lg > :is(form,div) > .btn:not(.dialog__close),
+    > .mh-lg > .btn:not(.dialog__close),
+    > form > fieldset > .btn:not(.dialog__close),
+    .btn--wrapper > .btn:not(.dialog__close) {
+      width: 100%;
+      max-width: 100%;
+      margin: 0;
+      display: block;
+      text-align: center;
+
+      &:not(:last-child) {
+        margin-bottom: 1rem!important;
+      }
+    }
   }
 
-  > *:last-child {
-    margin-bottom: 0;
+  .mh-lg {
+    padding-right: calc(var(--dialog-padding) - 10px);
+    margin-right: calc((var(--dialog-padding) * -1) + 10px);
+    margin-bottom: calc(var(--dialog-padding) * -1);
+    padding-bottom: var(--dialog-padding);
+    //max-height: none!important;
+
+    &:before {
+      top: 100%;
+      height: var(--dialog-padding);
+    }
   }
 }
 
-
 dialog::backdrop {
   background: rgba(0, 0, 0, 0.3);
   backdrop-filter: blur(4px);
+  overscroll-behavior: contain;
+}
+// #endregion
+
+// #region Transactional 
+*:not(.dialog__wrapper) > dialog[open]:not(.dialog--multi):is(:has(button:last-child),:has(form:last-child > button:last-child)) {
+
+  text-align: center;
+
+  &:before {
+    content: "\f05a";
+    font-weight: 300;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    display: var(--fa-display,inline-block);
+    font-style: normal;
+    font-variant: normal;
+    line-height: 1;
+    text-rendering: auto;
+    font-family: "Font Awesome 6 Pro";
+    font-size: 3rem;
+    @include media-breakpoint-up(md) {
+      font-size: 4rem;
+    }
+    margin-top: 0;
+    margin-bottom: rem(24);
+    line-height: 1;
+    color: var(--colour-heading);
+    clear: both;
+  }
+
+  > form:first-child button,
+  > button:first-child {
+    display: none;
+
+    & + * {
+      padding-right: 0;
+      margin-right: 0;
+    }
+
+    & + span:not(.h1,.h2,.h3,.h4,.h5,.h6) + * {
+      padding-right: 0;
+      margin-right: 0;
+    }
+  }
+
+  button {
+    margin-bottom: 0;
+  }
+}
+// #endregion
+
+// #region Multi 
+.js-enabled *:not(.dialog__wrapper) > dialog[open].dialog--multi {
+
+
+  padding-top: calc(var(--dialog-padding) * 4);
+
+  & > form:first-child button, & > button:first-child {
+    top: calc(var(--dialog-padding) * 4);
+  }
+
+  fieldset:not(.active) {
+    display: none;
+  }
+
+  &:not(:has(fieldset.active)) fieldset:first-of-type{
+    display: flex;
+  }
+
+  form > *:not(fieldset) {
+    display: none!important;
+  }
+
+  form {
+    max-height: rem(370);
+  }
+
+  :is(.h1,.h2,.h3,.h4,.h5,.h6){
+    padding-right: calc(var(--dialog-padding) * 3);
+    padding-bottom: var(--dialog-padding);
+  }
+
+  .steps {
+    width: 100%;
+    position: absolute;
+    top:0;
+    left: 0;
+    padding: var(--dialog-padding);
+    counter-reset: section;
+    display: flex;
+    justify-content: space-between;
+
+    &:before {   
+ 
+      content: "";
+      position: absolute;
+      top: calc(50% - 1px);
+      left: var(--dialog-padding);
+      z-index: 2;
+      width: calc(100% - var(--dialog-padding) - var(--dialog-padding));
+      height: 2px;
+      background: currentColor;
+      z-index: 1;
+      opacity: 0.5;
+    }
+
+    button {
+
+      position: relative;
+      background: transparent;
+      border: none;
+      color: inherit;
+      height: rem(24);
+      line-height: rem(24);
+      width: rem(24);
+      text-indent: 300%;
+      overflow: hidden;
+      z-index: 2;
+      background-color: var(--colour-primary);
+      outline: 0.5rem solid var(--colour-primary);
+
+      &:before {
+        position: absolute;
+        top: 0;
+        left: 0;
+        counter-increment: section;
+        content: counter(section);
+
+        border: 1px solid currentColor;
+        height: rem(24);
+        line-height: rem(24);
+        width: rem(24);
+        text-align: center;
+        display: inline-block;
+        text-indent: 0;
+        border-radius: 50%;
+      }
+
+      &:not(.active):before {
+        opacity: 0.5;
+      }
+    }
+  }
+
+  @include media-breakpoint-up(md) {
+    min-width: rem(924);
+    width: rem(924);
+    max-width: rem(924);
+    padding-top: var(--dialog-padding);
+    padding-left: calc(var(--dialog-padding) + #{rem(282)});
+    display: flex; 
+    flex-direction: column;
+    //height: rem(478);
+
+    @media (min-height: #{rem(500)}) {
+      height: rem(478);
+      max-height: rem(478);
+    }
+
+
+    & > form:first-child button, & > button:first-child {
+      top: var(--dialog-padding);
+    }
+
+    .steps {
+      width: rem(282);
+      height: 100%;
+      flex-direction: column;
+      justify-content: center;
+
+      &:before {
+        display: none;
+      }
+
+      button {
+        margin-block: 0.5rem;
+        width: 100%;
+        text-indent: 0;
+        text-align: left;
+        padding-left: 2rem;
+        font-size: rem(18);
+        outline-width: 1px;
+      }
+    }
+
+    .btn--wrapper {
+      margin-top: auto;
+      text-align: right;
+    }
+    > form {
+      display: contents
+    }
+    fieldset {    
+      display: flex; 
+      flex-direction: column;
+      flex-grow: 1;
+      position: relative;
+
+      overflow: auto;
+      margin-bottom: calc(var(--dialog-padding) * -1);
+      padding-bottom: var(--dialog-padding);
+
+        
+      padding-right: calc(var(--dialog-padding) - 10px);
+      margin-right: calc((var(--dialog-padding) * -1) + 10px);
+
+      &::before {
+        content: "";
+        top: 100%;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: var(--dialog-padding);
+        min-height: var(--dialog-padding);
+        position: sticky;
+        display: block;
+        background: linear-gradient(180deg, transparent 0%, var(--colour-canvas-2) 100%);
+        z-index: 2;
+        margin-bottom: calc(var(--dialog-padding) * -1);;
+      }
+    }
+  }
+}
+// #endregion
+
+// #region youTube video
+*:not(.dialog__wrapper) > dialog[open]:has(.youtube-embed){
+
+  display: block;
+
+  .mh-lg, .mh-lg:before {
+    display: contents;
+  }
+
+  @include media-breakpoint-up(sm) {
+    
+    min-width: rem(686);
+    max-width: rem(686);
+  }
+  
+  @include media-breakpoint-up(md) {
+    
+    min-width: rem(736);
+    max-width: rem(736);
+  }
 }
 // #endregion