@iamproperty/components 7.6.0 → 7.6.2

package/assets/sass/components/password.component.scss

@@ -1,10 +1,6 @@
 @use '../func' as *;
 @use '../elements/prefix.scss' as *;
 
-$icon-error: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d='M256 32a224 224 0 1 1 0 448 224 224 0 1 1 0-448zm0 480A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c-8.8 0-16 7.2-16 16V272c0 8.8 7.2 16 16 16s16-7.2 16-16V144c0-8.8-7.2-16-16-16zm24 224a24 24 0 1 0 -48 0 24 24 0 1 0 48 0z' fill='#dc3545'/></svg>");
-
-$icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d='M441 103c9.4 9.4 9.4 24.6 0 33.9L177 401c-9.4 9.4-24.6 9.4-33.9 0L7 265c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l119 119L407 103c9.4-9.4 24.6-9.4 33.9 0z' fill='#0f9d58' /></svg>");
-
 *,
 *::before,
 *::after {
@@ -30,12 +26,12 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
 // Password checker
 .invalid-feedback {
   color: var(--colour-danger);
-  margin-top: rem(8);
-  background-image: escape-svg($icon-error);
+  margin-top: 0.5rem;
+  background-image: var(--icon-error);
   background-repeat: no-repeat;
   background-position: left top 1px;
-  background-size: var(--input-fs, #{rem(16)}) var(--input-fs, #{rem(16)});
-  padding-left: calc(var(--input-fs, #{rem(16)}) + #{rem(8)});
+  background-size: var(--input-fs, 1rem) var(--input-fs, 1rem);
+  padding-left: calc(var(--input-fs, 1rem) + 0.5rem);
   //display: none;
 }
 
@@ -48,11 +44,11 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
   margin-top: 0.5rem;
 }
 .pwd-checker.invalid-feedback {
-  background-image: escape-svg($icon-error);
+  background-image: var(--icon-error);
 }
 
 .pwd-checker:not(.invalid-feedback) {
-  background-image: escape-svg($icon-tick) !important;
+  background-image: var(--icon-tick) !important;
 }
 label:has(.pwd-checker.invalid-feedback):after {
   display: none !important;

package/assets/sass/components/popover.component.scss

@@ -4,13 +4,13 @@
 
   :host {
     
-    padding: rem(16);
+    padding: 1rem;
     max-width: calc(anchor-size(width) * 2) !important;
 
     position: absolute;
     position-area: bottom span-x-end;
-    margin:  #{rem(4)};
-    padding: rem(16);
+    margin:  0.25rem;
+    padding: 1rem;
     max-width: calc(anchor-size(width) * 2) !important;
     position-try-fallbacks: top span-x-end, bottom span-x-start, top span-x-start;
 
@@ -18,10 +18,10 @@
       display: none;
     }
 
-    @include media-breakpoint-up(sm, $mobileOnly) {
+    @media screen and (min-width: 36em) {
       width: rem(335);
     }
-    @include media-breakpoint-up(md, $mobileOnly) {
+    @media screen and (min-width: 62em) {
       width: rem(360);
     }
   } 

package/assets/sass/components/property-searchbar.scss

@@ -5,7 +5,7 @@
   fieldset {
     position: relative;
 
-    @include media-breakpoint-up(md, $mobileOnly) {
+    @media screen and (min-width: 62em) {
       position: relative;
       padding-right: 1.5rem;
 
@@ -26,18 +26,18 @@
   .form-control__wrapper {
     margin-bottom: 1rem;
 
-    @include media-breakpoint-up(md, $mobileOnly) {
+    @media screen and (min-width: 62em) {
       margin-bottom: 0;
     }
   }
 
   .form-label,
   label {
-    font-size: rem(14);
+    font-size: 0.875rem; /* 14/16 */
     text-transform: uppercase;
   }
 
-  @include media-breakpoint-up(md, $mobileOnly) {
+  @media screen and (min-width: 62em) {
     .row .row {
       .form-label {
         display: none;
@@ -64,7 +64,7 @@
     right: 0.5rem;
     width: 5rem;
 
-    @include media-breakpoint-up(md, $mobileOnly) {
+    @media screen and (min-width: 62em) {
       right: 1.5rem;
     }
 
@@ -78,7 +78,7 @@
     }
   }
 
-  @include media-breakpoint-up(md, $mobileOnly) {
+  @media screen and (min-width: 62em) {
     .property-searchbar__btn {
       align-items: flex-end;
     }
@@ -88,7 +88,7 @@
     margin-top: 1rem;
     margin-bottom: 1rem;
 
-    @include media-breakpoint-up(md, $mobileOnly) {
+    @media screen and (min-width: 62em) {
       margin: 0;
       padding-left: 3.5rem;
       padding-right: 3.5rem;
@@ -99,7 +99,7 @@
 
 // #region Heror searchbar
 .property-searchbar--hero .property-searchbar {
-  @include reset-colours();
+
 
   padding: 1rem;
   background-color: #fff;
@@ -109,8 +109,8 @@
   box-shadow: 0 2px 4px 0 rgb(0 0 0 / 24%);
   position: relative;
 
-  @include media-breakpoint-up(md, $mobileOnly) {
-    border-radius: rem(48);
+  @media screen and (min-width: 62em) {
+    border-radius: 3rem;
     padding: 1.5rem 2.5rem;
 
     .form-label,

package/assets/sass/components/rank.component.scss

@@ -2,7 +2,7 @@
 
 @use '../_func.scss' as *;
 
-@use '../elements/type.scss' as *;
+@use '../elements/type' as *;
 
 *,
 *::before,
@@ -72,9 +72,9 @@
   align-items: center;
   flex-direction: column;
   justify-content: center;
-  padding-top: rem(12);
+  padding-top: 0.75rem;
   padding-inline: rem(5);
-  padding-bottom: rem(12);
+  padding-bottom: 0.75rem;
   height: rem(84);
   position: relative;
   border-radius: 0 0 4px 4px;

package/assets/sass/components/rankings.component.scss

@@ -1,9 +1,9 @@
 @use 'sass:map';
 @use '../_func.scss' as *;
 
-@use '../elements/type.scss' as *;
+@use '../elements/type' as *;
 
-@include max-height();
+@use '../utilities/max-height' as *;
 
 :host {
   overflow: visible;

package/assets/sass/components/rankings.global.scss

@@ -2,7 +2,7 @@
 
 @use '../_func.scss' as *;
 
-@use '../elements/type.scss' as *;
+@use '../elements/type' as *;
 
 *,
 *::before,
@@ -51,11 +51,11 @@ iam-rankings {
     &:before {
       counter-increment: countItem; /* Increment the value of section counter by 1 */
       content: counter(countItem) '.';
-      font-size: rem(32);
-      line-height: rem(40);
+      font-size: 2rem;
+      line-height: 2.5rem;
       font-weight: bolder;
       color: var(--colour-primary);
-      width: rem(48);
+      width: 3rem;
       text-align: center;
       margin-top: 0.5rem;
     }
@@ -124,9 +124,9 @@ iam-rankings {
     --colour: var(--wider-colour-7);
   }
 
-  @each $index, $value in $chart-colors {
-    tr:nth-child(#{$index + 1}) progress {
-      --colour: var(--chart-colour-#{$index}, #{$value});
+  @for $i from 1 through 10 {
+    tr:nth-child(#{$i}) progress {
+      --colour: var(--chart-colour-#{$i});
     }
   }
 }

package/assets/sass/components/record-card.component.scss

@@ -20,7 +20,7 @@
     &:before {
       font-family: var(--record-icon-font, 'Font Awesome 6 Pro');
       font-weight: normal;
-      font-size: rem(24);
+      font-size: 1.5rem;
       content: var(--record-icon);
       display: block;
       position: absolute;
@@ -53,7 +53,7 @@
   &:before {
     font-family: var(--font-body);
     font-weight: normal;
-    font-size: rem(32);
+    font-size: 2rem;
     content: attr(data-initials);
     display: block;
     position: absolute;
@@ -121,7 +121,7 @@
   display: block !important;
   font-weight: normal !important;
   font-size: rem(14) !important;
-  line-height: rem(24) !important;
+  line-height: 1.5rem !important;
 }
 
 ::slotted(span:not(.badge):not([class*='pt-'])) {
@@ -132,7 +132,7 @@
   display: block !important;
   font-weight: normal !important;
   font-size: rem(14) !important;
-  line-height: rem(24) !important;
+  line-height: 1.5rem !important;
 }
 
 :host([data-initials]) {

package/assets/sass/components/slider.scss

@@ -18,7 +18,7 @@
 }
 
 :host {
-  max-width: $input-max-width;
+  max-width: var(--input-max-width);
   display: block;
 }
 
@@ -87,7 +87,7 @@ input[type='range'] + input[type='range']::-moz-range-track {
 
   &[data-elements='2'] {
     justify-content: space-between;
-    --max-width: calc(50% - #{rem(48)});
+    --max-width: calc(50% - 3rem);
     --padding-top: 2rem;
     position: relative;
 
@@ -97,7 +97,7 @@ input[type='range'] + input[type='range']::-moz-range-track {
       width: rem(64);
       height: 2px;
       top: calc(50% - 1px);
-      left: calc(50% - #{rem(32)});
+      left: calc(50% - 2rem);
       background-color: var(--colour-border);
     }
 

package/assets/sass/components/snapshot.scss

@@ -11,13 +11,13 @@
     position: relative;
   }
 
-  @include media-breakpoint-up(sm, $mobileOnly) {
+  @media screen and (min-width: 36em) {
     > .row > .col:nth-child(8) ~ .col {
       max-width: 25%;
     }
   }
 
-  @include media-breakpoint-up(md, $mobileOnly) {
+  @media screen and (min-width: 62em) {
     > .row > .col:nth-child(8) ~ .col {
       max-width: 12.5%;
     }

package/assets/sass/components/stepper.scss

@@ -8,7 +8,7 @@
   border: 1px solid var(--colour-canvas);
   overflow: hidden;
 
-  @include media-breakpoint-up(md, $mobileOnly) {
+  @media screen and (min-width: 62em) {
     flex-wrap: nowrap;
     overflow-x: auto;
   }
@@ -21,7 +21,7 @@
     width: 100%;
     overflow: auto;
 
-    @include media-breakpoint-up(sm, $mobileOnly) {
+    @media screen and (min-width: 36em) {
       display: flex;
       flex-grow: 1;
       padding-right: calc(2rem + 1px);
@@ -31,7 +31,7 @@
       clip-path: polygon(0 0, calc(100% - 2rem) 0, 100% 50%, calc(100% - 2rem) 100%, 0 100%);
     }
 
-    @include media-breakpoint-up(md, $mobileOnly) {
+    @media screen and (min-width: 62em) {
       overflow: initial;
     }
 
@@ -41,14 +41,14 @@
       background: var(--colour-canvas);
       padding: 1px;
 
-      @include media-breakpoint-up(sm, $mobileOnly) {
+      @media screen and (min-width: 36em) {
         &:first-child a {
           padding-left: 1rem;
           clip-path: polygon(0 0, calc(100% - 2rem) 0, 100% 50%, calc(100% - 2rem) 100%, 0 100%);
         }
       }
 
-      @include media-breakpoint-up(md, $mobileOnly) {
+      @media screen and (min-width: 62em) {
         &:first-child a {
           padding-left: 2rem;
         }
@@ -64,7 +64,7 @@
         position: relative;
         color: var(--colour-primary);
 
-        @include media-breakpoint-up(sm, $mobileOnly) {
+        @media screen and (min-width: 36em) {
           margin-right: -2rem;
           padding: 2rem 3rem 2rem 3rem;
           clip-path: polygon(0 0, calc(100% - 2rem) 0, 100% 50%, calc(100% - 2rem) 100%, 0 100%, 2rem 50%);
@@ -144,7 +144,7 @@
       display: none;
     }
 
-    @include media-breakpoint-up(md, $mobileOnly) {
+    @media screen and (min-width: 62em) {
       width: max-content;
       padding: 2rem 2rem;
 

package/assets/sass/components/table-basic.component.scss

@@ -1,8 +1,8 @@
 @use '../_func.scss' as *;
 
-@include max-height();
+@use '../utilities/max-height' as *;
+
 
-$darkMode: 'true' !default;
 
 // #region Table container - Add via JS if needed, provides a safe space to scroll
 :host {
@@ -11,14 +11,15 @@ $darkMode: 'true' !default;
 }
 
 .table__container {
-  --wrapper-padding: #{rem(32)};
+  
+  --wrapper-padding: 2rem;
   --bg-colour: #ffffff;
   display: block;
-  background: white;
+  background: var(--colour-canvas-2);
   padding: var(--wrapper-padding);
   box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
   border-radius: rem(10);
-  margin-bottom: rem(32);
+  margin-bottom: 2rem;
   overflow: hidden;
 
   &:before {

package/assets/sass/components/table-basic.global.scss

@@ -1,6 +1,6 @@
 @use '../_func.scss' as *;
 
-$darkMode: 'true' !default;
+
 
 $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, iam-table-ajax';
 
@@ -37,7 +37,10 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, i
       background: var(--row-bg);
     }
   }
-
+  
+  :is(td, th) {
+    color: var(--colour-body-default);
+  }
   /*
   &[data-expandable] [data-expand-button][aria-expanded] {
     background-color: transparent;
@@ -83,7 +86,7 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, i
         border: none;
         position: absolute;
         overflow: hidden;
-        --compact-size: #{rem(32)};
+        --compact-size: 2rem;
 
         &:before {
           font-family: 'Font Awesome 6 Pro';
@@ -126,11 +129,11 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, i
       background: var(--row-bg);
       padding: var(--wrapper-padding);
       box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
-      border-radius: rem(8);
+      border-radius: 0.5rem;
       height: auto;
 
       & + tr {
-        margin-top: rem(32);
+        margin-top: 2rem;
       }
 
       &:is(:hover, :focus, .hover) {
@@ -220,7 +223,7 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, i
       width: var(--cta-width);
       min-height: calc(var(--row-height) - 2px);
       text-align: right;
-      background: linear-gradient(90deg, transparent 0%, var(--row-bg, var(--colour-canvs-2)) 1.25rem);
+      background: linear-gradient(90deg, transparent 0%, var(--row-bg, var(--colour-canvas-2)) 1.25rem);
       cursor: default;
       padding-bottom: 0;
 
@@ -233,7 +236,7 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, i
     }
 
     tbody tr:hover > *:not(:first-child):last-child {
-      background: linear-gradient(90deg, transparent 0%, var(--row-bg, var(--colour-canvs-2)) 1.25rem);
+      background: linear-gradient(90deg, transparent 0%, var(--row-bg, var(--colour-canvas-2)) 1.25rem);
     }
   }
 }
@@ -279,10 +282,10 @@ table {
       position: absolute;
       top: var(--status-pt, 1rem);
       left: 0;
-      font-size: rem(16);
+      font-size: 1rem;
       line-height: 1;
-      height: rem(16);
-      width: rem(16);
+      height: 1rem;
+      width: 1rem;
       display: inline-block;
     }
   }
@@ -396,17 +399,14 @@ table {
   margin: -2rem -2rem 2rem -2rem;
   box-shadow: none;
   border-radius: 0;
-
-  @include light-mode($darkMode) {
     background-color: #e6eaec;
-  }
 }
 
 // Actionbar
 .actionbar__sticky-wrapper {
   container-type: inline-size;
 
-  @include media-breakpoint-up(sm, $mobileOnly) {
+  @media screen and (min-width: 36em) {
     padding: 0 !important;
   }
 }
@@ -416,7 +416,7 @@ table {
     display: block;
     position: sticky;
     left: 0;
-    top: calc(var(--sticky-padding) + #{rem(16)});
+    top: calc(var(--sticky-padding) + 1rem);
     z-index: var(--index-menu);
     pointer-events: none;
 
@@ -440,11 +440,11 @@ table {
     background: var(--colour-canvas-2);
     //box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
     border-radius: 0.5rem;
-    margin-bottom: rem(24);
+    margin-bottom: 1.5rem;
   }
 }
 
-@include container-up(sm) {
+@container (width > 36em) {
   :is(#{$selector}).table--fullwidth iam-actionbar,
   :is(#{$selector}) iam-actionbar {
     margin-left: -2rem;
@@ -499,9 +499,8 @@ table {
 @container (width < 23.4375em) {
   :is(#{$selector}) {
     iam-actionbar {
-      @include light-mode($darkMode) {
         background-color: #e6eaec;
-      }
+      
     }
     .actionbar__sticky + * {
       margin-top: 0 !important;

package/assets/sass/components/table.component.scss

@@ -1,6 +1,6 @@
 @use '../_func.scss' as *;
 
-$darkMode: 'true' !default;
+
 
 @use './table-basic.component.scss';
 

package/assets/sass/components/table.global.scss

@@ -1,15 +1,13 @@
 @use '../_func.scss' as *;
 
 
-$darkMode: 'true' !default;
 
-@use './table-basic.global.scss' with (
-  $darkMode: $darkMode
-);
+
+@use './table-basic.global.scss';
 
 $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, iam-table-ajax';
 
-@include display();
+@use '../utilities/display' as *;
 
 // #region Tables are only stacked on mobile
 :is(#{$selector}):not(.table--fullwidth).table--cta {
@@ -132,7 +130,7 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, i
 
     .th--fixed + .th--fixed,
     .td--fixed + .td--fixed {
-      left: rem(48);
+      left: 3rem;
     }
 
     .th--fixed + .th--fixed + th:not(.th--fixed),
@@ -169,11 +167,6 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, i
 
 // #region sort by column header
 
-$icon-sort: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d='M182.6 470.6c-12.5 12.5-32.8 12.5-45.3 0l-96-96c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L128 370.7 128 64c0-17.7 14.3-32 32-32s32 14.3 32 32l0 306.7 41.4-41.4c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3l-96 96zm352-333.3c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L448 141.3 448 448c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-306.7-41.4 41.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l96-96c12.5-12.5 32.8-12.5 45.3 0l96 96z'/></svg>");
-
-$icon-sort-asc: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'><!--!Font Awesome Pro 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc.--><path d='M209.4 39.4C204.8 34.7 198.6 32 192 32s-12.8 2.7-17.4 7.4l-168 176c-9.2 9.6-8.8 24.8 .8 33.9s24.8 8.8 33.9-.8L168 115.9 168 456c0 13.3 10.7 24 24 24s24-10.7 24-24l0-340.1L342.6 248.6c9.2 9.6 24.3 9.9 33.9 .8s9.9-24.3 .8-33.9l-168-176z'/></svg>");
-
-$icon-sort-desc: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'><!--!Font Awesome Pro 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc.--><path d='M174.6 472.6c4.5 4.7 10.8 7.4 17.4 7.4s12.8-2.7 17.4-7.4l168-176c9.2-9.6 8.8-24.8-.8-33.9s-24.8-8.8-33.9 .8L216 396.1 216 56c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 340.1L41.4 263.4c-9.2-9.6-24.3-9.9-33.9-.8s-9.9 24.3-.8 33.9l168 176z'/></svg>");
 
 @mixin column-sort {
   th[data-sort] {
@@ -185,7 +178,7 @@ $icon-sort-desc: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'
 
     &:hover {
       background-color: var(--colour-light);
-      background-image: #{escape-svg($icon-sort)};
+      background-image: var(--icon-sort);
     }
   }
 
@@ -194,10 +187,10 @@ $icon-sort-desc: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'
   }
 
   th[data-sort][data-order-by='asc'] {
-    background-image: #{escape-svg($icon-sort-asc)};
+    background-image: var(--icon-sort-asc);
   }
   th[data-sort][data-order-by='desc'] {
-    background-image: #{escape-svg($icon-sort-desc)};
+    background-image: var(--icon-sort-desc);
   }
 }
 

package/assets/sass/components/tabs.config.scss

@@ -1,8 +1,8 @@
 @use '../_func' as *;
 
-$layers: 'true' !default;
-$mobileOnly: 'false' !default;
-$darkMode: 'true' !default;
+
+
+
 
 *:not(main):has(> iam-tabs) {
   container-type: inline-size;
@@ -119,7 +119,7 @@ iam-tabs.tabs--guided::part(next-button):not(:hover) {
     --is-current: 0;
     font-weight: bold;
     font-family: var(--font-heading);
-    font-size: rem(18);
+    font-size: 1.125rem; /* 18/16 */
     cursor: pointer;
     margin: 0;
     padding: 1.5rem 1.5rem 0.5rem 1.5rem;
@@ -184,8 +184,8 @@ iam-tabs.tabs--guided::part(next-button):not(:hover) {
   padding: 0;
   margin: calc(var(--padding-top) * -1) calc(var(--padding-x) * -1) var(--padding-top) calc(var(--padding-x) * -1);
 
-  border-top-left-radius: rem(8);
-  border-top-right-radius: rem(8);
+  border-top-left-radius: 0.5rem;
+  border-top-right-radius: 0.5rem;
   display: flex;
   flex-direction: column;
   border-bottom: 1px solid var(--colour-border);
@@ -196,14 +196,14 @@ iam-tabs.tabs--guided::part(next-button):not(:hover) {
     display: none;
   }
 
-  @include media-breakpoint-up(sm, $mobileOnly) {
+  @media screen and (min-width: 36em) {
     flex-direction: row;
   }
 
   .link:not(.text-decoration-none):not(.btn) {
     margin: 0;
     //margin-left: calc(var(--wrapper-padding) * -1);
-    padding: #{rem(16)} var(--padding-x);
+    padding: 1rem var(--padding-x);
     width: 100%;
     position: relative;
     text-align: left;
@@ -227,7 +227,7 @@ iam-tabs.tabs--guided::part(next-button):not(:hover) {
       display: none;
     }
 
-    @include media-breakpoint-up(sm, $mobileOnly) {
+    @media screen and (min-width: 36em) {
       margin: 0;
 
       &:not(:first-child) {
@@ -242,7 +242,7 @@ iam-tabs.tabs--guided::part(next-button):not(:hover) {
 }
 
 // #endregion
-@include media-breakpoint-up(sm, $mobileOnly) {
+@media screen and (min-width: 36em) {
   :host(.tabs--inline) .tabs__links {
     margin: 0;
     justify-content: center;