@iamproperty/components 7.6.1 → 7.6.2

package/assets/sass/_functions/utility-mixins.scss

@@ -1,1523 +1 @@
-@use 'sass:map';
-
-@use 'functions' as *;
-@use 'variables' as *;
-
-@use 'mixins' as *;
-
-$layers: 'true' !default;
-
-$mobileOnly: 'false' !default;
-
-$new_utilities: ();
-
-$style_breakpoints: ();
-
-@each $bp, $value in $grid-breakpoints {
-  @if $bp != 'xs' {
-    $style_breakpoints: map.merge((#{$bp}: ''), $style_breakpoints);
-  } @else {
-    $style_breakpoints: map.merge((#{$bp}: -#{$bp}), $style_breakpoints);
-  }
-}
-
-// #region Clearfix
-$new_utilities: map.merge(
-  $new_utilities,
-  (
-    'clearfix': 'Clear the floats from both sides',
-  )
-);
-
-@mixin clearfix() {
-  .clearfix {
-    &::after {
-      display: block;
-      clear: both;
-      content: '';
-    }
-  }
-}
-// #endregion
-
-// #region visually-hidden
-$new_utilities: map.merge(
-  $new_utilities,
-  (
-    'visually-hidden': 'Hide an element from the standard user but not from screen readers',
-  )
-);
-
-@mixin visually-hidden() {
-  .visually-hidden,
-  .visually-hidden-focusable:not(:focus):not(:focus-within) {
-    position: absolute !important;
-    width: 1px !important;
-    height: 1px !important;
-    padding: 0 !important;
-    margin: -1px !important; // Fix for https://github.com/twbs/bootstrap/issues/25686
-    overflow: hidden !important;
-    clip: rect(0, 0, 0, 0) !important;
-    white-space: nowrap !important;
-    border: 0 !important;
-  }
-}
-// #endregion
-
-// #region text-truncate
-$new_utilities: map.merge(
-  $new_utilities,
-  (
-    'text-truncate': 'Keep the text onto one line and add an ellipsis if needed',
-  )
-);
-
-@mixin text-truncate() {
-  .text-truncate {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-}
-// #endregion
-
-// #region ratio
-$new_utilities: map.merge(
-  $new_utilities,
-  (
-    'ratio': 'Use pre-defined aspect ratios to generate the sizing or elements',
-  )
-);
-
-@mixin ratio() {
-  .ratio {
-    position: relative;
-    width: 100%;
-
-    &::before {
-      display: block;
-      padding-top: var(--aspect-ratio);
-      content: '';
-    }
-
-    > * {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  @each $key, $ratio in $aspect-ratios {
-    .ratio-#{$key} {
-      --aspect-ratio: #{$ratio};
-    }
-  }
-}
-// #endregion
-
-// #region fixed
-$new_utilities: map.merge(
-  $new_utilities,
-  (
-    'fixed': 'Fix elements to either the top or bottom',
-  )
-);
-
-@mixin fixed() {
-  .fixed-top {
-    position: fixed;
-    top: 0;
-    right: 0;
-    left: 0;
-    z-index: $zindex-fixed;
-  }
-
-  .fixed-bottom {
-    position: fixed;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: $zindex-fixed;
-  }
-}
-// #endregion
-
-// #region sticky
-$new_utilities: map.merge(
-  $new_utilities,
-  (
-    'sticky': 'Make elements stick to either the top or bottom',
-  )
-);
-
-@mixin sticky() {
-  @each $breakpoint in map.keys($grid-breakpoints) {
-    @include media-breakpoint-up($breakpoint, $mobileOnly) {
-      $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-
-      .sticky#{$infix}-top {
-        position: sticky;
-        top: 0;
-        z-index: $zindex-sticky;
-      }
-
-      .sticky#{$infix}-bottom {
-        position: sticky;
-        bottom: 0;
-        z-index: $zindex-sticky;
-      }
-    }
-  }
-}
-// #endregion
-
-// #region max-height
-$new_utilities: map.merge(
-  $new_utilities,
-  (
-    'max-height':
-      'Set a pre-defined max height on an element, note this will create a scrollable area if the content is larger than the max height.',
-  )
-);
-
-@mixin max-height() {
-  :is(.mh-sm, .mh-md, .mh-lg, .mh-sm-sm, .mh-sm-md, .mh-sm-lg, .mh-md-sm, .mh-md-md, .mh-md-lg, .mh-fluid) {
-    &:not(iam-table):not(.table__wrapper) {
-      padding-inline: var(--mh-padding-inline, 0);
-      margin-inline: calc(var(--mh-padding-inline, 0) * -1);
-    }
-
-    &::before {
-      top: calc(100% - 1.5rem);
-      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;
-    }
-  }
-
-  :is(.mh-sm, .mh-md, .mh-lg, .mh-fluid) {
-    overflow: auto;
-    overscroll-behavior: contain;
-
-    &::before {
-      content: '';
-    }
-  }
-
-  .mh-sm {
-    max-height: calc(#{rem(200)} - var(--mh-modifier, 0rem));
-  }
-
-  .mh-md {
-    max-height: calc(#{rem(400)} - var(--mh-modifier, 0rem));
-  }
-
-  .mh-lg {
-    max-height: calc(#{rem(600)} - var(--mh-modifier, 0rem));
-  }
-
-  .mh-fluid {
-    max-height: 100%;
-  }
-
-  @include media-breakpoint-up(sm, $mobileOnly) {
-    :is(.mh-sm-sm, .mh-sm-md, .mh-sm-lg) {
-      overflow: auto;
-      overscroll-behavior: contain;
-
-      &::before {
-        content: '';
-      }
-    }
-
-    .mh-sm-sm {
-      max-height: calc(#{rem(200)} - var(--mh-modifier, 0rem));
-    }
-
-    .mh-sm-md {
-      max-height: calc(#{rem(400)} - var(--mh-modifier, 0rem));
-    }
-
-    .mh-sm-lg {
-      max-height: calc(#{rem(600)} - var(--mh-modifier, 0rem));
-    }
-  }
-
-  @include media-breakpoint-up(md, $mobileOnly) {
-    :is(.mh-md-sm, .mh-md-md, .mh-md-lg) {
-      overflow: auto;
-      overscroll-behavior: contain;
-
-      &::before {
-        content: '';
-      }
-    }
-
-    .mh-md-sm {
-      max-height: calc(#{rem(200)} - var(--mh-modifier, 0rem));
-    }
-
-    .mh-md-md {
-      max-height: calc(#{rem(400)} - var(--mh-modifier, 0rem));
-    }
-
-    .mh-md-lg {
-      max-height: calc(#{rem(600)} - var(--mh-modifier, 0rem));
-    }
-  }
-}
-// #endregion
-
-// #region js-display
-$new_utilities: map.merge(
-  $new_utilities,
-  (
-    'js-display': 'Show and hide elements depending upon if javascript is running or not',
-  )
-);
-
-@mixin js-display() {
-  @media (scripting: enabled) {
-    .js-show {
-      display: none !important;
-    }
-  }
-
-  @media (scripting: none) {
-    .js-hide {
-      display: none !important;
-    }
-  }
-}
-// #endregion
-
-// #region Line clamp
-$new_utilities: map.merge(
-  $new_utilities,
-  (
-    'line-clamp': 'Restricts a texts height to a number of lines (1-5)',
-  )
-);
-
-@mixin line-clamp() {
-  .line-clamp {
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 1;
-    text-overflow: hidden;
-    overflow: hidden;
-  }
-
-  .line-clamp--2 {
-    -webkit-line-clamp: 2;
-  }
-
-  .line-clamp--3 {
-    -webkit-line-clamp: 3;
-  }
-
-  .line-clamp--4 {
-    -webkit-line-clamp: 4;
-  }
-
-  .line-clamp--5 {
-    -webkit-line-clamp: 5;
-  }
-}
-// #endregion
-
-// #region Wider colours
-$new_utilities: map.merge(
-  $new_utilities,
-  (
-    'wider-colours': 'Apply the wider range of colours in our design system',
-  )
-);
-
-@mixin wider-colours() {
-  
-  @for $i from 1 through 23 {
-  .wider-colour-#{$i} {
-    --wider-colour: var(--wider-colour-#{$i} );
-    --wider-colour-hover: var(--wider-colour-#{$i}-hover);
-    --wider-colour-active: var(--wider-colour-#{$i}-active);
-    color: #262626 !important;
-  }
-}
-
-}
-// #endregion
-
-// #region Align
-$new_utilities: map.merge(
-  $new_utilities,
-  (
-    'align': 'Change the alignment of the text ',
-  )
-);
-
-@mixin align() {
-  .align-baseline {
-    vertical-align: baseline !important;
-  }
-
-  .align-top {
-    vertical-align: top !important;
-  }
-
-  .align-middle {
-    vertical-align: middle !important;
-  }
-
-  .align-bottom {
-    vertical-align: bottom !important;
-  }
-
-  .align-text-bottom {
-    vertical-align: text-bottom !important;
-  }
-
-  .align-text-top {
-    vertical-align: text-top !important;
-  }
-}
-// #endregion
-
-// #region Opacity
-$new_utilities: map.merge(
-  $new_utilities,
-  (
-    'opacity': 'Apply the opacity of an element by intervals of 25%',
-  )
-);
-
-@mixin opacity() {
-  .opacity-0 {
-    opacity: 0 !important;
-  }
-
-  .opacity-25 {
-    opacity: 0.25 !important;
-  }
-
-  .opacity-50 {
-    opacity: 0.5 !important;
-  }
-
-  .opacity-75 {
-    opacity: 0.75 !important;
-  }
-
-  .opacity-100 {
-    opacity: 1 !important;
-  }
-}
-// #endregion
-
-// #region Overflow
-$new_utilities: map.merge(
-  $new_utilities,
-  (
-    'overflow': 'Update the overflow of an element',
-  )
-);
-
-@mixin overflow() {
-  .overflow-auto {
-    overflow: auto !important;
-  }
-
-  .overflow-hidden {
-    overflow: hidden !important;
-  }
-
-  .overflow-visible {
-    overflow: visible !important;
-  }
-
-  .overflow-scroll {
-    overflow: scroll !important;
-  }
-}
-// #endregion
-
-// #region Display
-$new_utilities: map.merge(
-  $new_utilities,
-  (
-    'display': 'Update the display of an element, can be applied at different breakpoints',
-  )
-);
-
-@mixin display() {
-  .d-inline {
-    display: inline !important;
-  }
-
-  .d-inline-block {
-    display: inline-block !important;
-  }
-
-  .d-block {
-    display: block !important;
-  }
-
-  .d-grid {
-    display: grid !important;
-  }
-
-  .d-table {
-    display: table !important;
-  }
-
-  .d-table-row {
-    display: table-row !important;
-  }
-
-  .d-table-cell {
-    display: table-cell !important;
-  }
-
-  .d-flex {
-    display: flex !important;
-  }
-
-  .d-inline-flex {
-    display: inline-flex !important;
-  }
-
-  .d-none {
-    display: none !important;
-  }
-
-  @each $breakpoint in map.keys($grid-breakpoints) {
-    @include media-breakpoint-up($breakpoint, $mobileOnly) {
-      $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-
-      .d#{$infix}-inline {
-        display: inline !important;
-      }
-
-      .d#{$infix}-inline-block {
-        display: inline-block !important;
-      }
-
-      .d#{$infix}-block {
-        display: block !important;
-      }
-
-      .d#{$infix}-grid {
-        display: grid !important;
-      }
-
-      .d#{$infix}-table {
-        display: table !important;
-      }
-
-      .d#{$infix}-table-row {
-        display: table-row !important;
-      }
-
-      .d#{$infix}-table-cell {
-        display: table-cell !important;
-      }
-
-      .d#{$infix}-flex {
-        display: flex !important;
-      }
-
-      .d#{$infix}-inline-flex {
-        display: inline-flex !important;
-      }
-
-      .d#{$infix}-none {
-        display: none !important;
-      }
-    }
-  }
-}
-// #endregion
-
-// #region Position
-$new_utilities: map.merge(
-  $new_utilities,
-  (
-    'position': 'Update the position of an element, can be applied at different breakpoints',
-  )
-);
-
-@mixin position() {
-  @each $breakpoint in map.keys($grid-breakpoints) {
-    @include media-breakpoint-up($breakpoint, $mobileOnly) {
-      $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-      .position#{$infix}-static {
-        position: static !important;
-      }
-
-      .position#{$infix}-relative {
-        position: relative !important;
-      }
-
-      .position#{$infix}-absolute {
-        position: absolute !important;
-      }
-
-      .position#{$infix}-fixed {
-        position: fixed !important;
-      }
-
-      .position#{$infix}-sticky {
-        position: sticky !important;
-      }
-
-      .top#{$infix}-0 {
-        top: 0 !important;
-      }
-
-      .top#{$infix}-50 {
-        top: 50% !important;
-      }
-
-      .top#{$infix}-100 {
-        top: 100% !important;
-      }
-
-      .bottom#{$infix}-0 {
-        bottom: 0 !important;
-      }
-
-      .bottom#{$infix}-50 {
-        bottom: 50% !important;
-      }
-
-      .bottom#{$infix}-100 {
-        bottom: 100% !important;
-      }
-
-      .start#{$infix}-0 {
-        left: 0 !important;
-      }
-
-      .start#{$infix}-50 {
-        left: 50% !important;
-      }
-
-      .start#{$infix}-100 {
-        left: 100% !important;
-      }
-
-      .end#{$infix}-0 {
-        right: 0 !important;
-      }
-
-      .end#{$infix}-50 {
-        right: 50% !important;
-      }
-
-      .end#{$infix}-100 {
-        right: 100% !important;
-      }
-
-      .translate#{$infix}-middle {
-        transform: translate(-50%, -50%) !important;
-      }
-
-      .translate#{$infix}-middle-x {
-        transform: translateX(-50%) !important;
-      }
-
-      .translate#{$infix}-middle-y {
-        transform: translateY(-50%) !important;
-      }
-    }
-  }
-}
-// #endregion
-
-// #region Border
-$new_utilities: map.merge(
-  $new_utilities,
-  (
-    'border': 'Apply a border and adjust its settings',
-  )
-);
-
-@mixin border() {
-  .border {
-    border: var(--border-width) var(--border-style) var(--border-color) !important;
-  }
-
-  .border-0 {
-    border: 0 !important;
-  }
-
-  .border-top {
-    border-top: var(--border-width) var(--border-style) var(--border-color) !important;
-  }
-
-  .border-top-0 {
-    border-top: 0 !important;
-  }
-
-  .border-end {
-    border-right: var(--border-width) var(--border-style) var(--border-color) !important;
-  }
-
-  .border-end-0 {
-    border-right: 0 !important;
-  }
-
-  .border-bottom {
-    border-bottom: var(--border-width) var(--border-style) var(--border-color) !important;
-  }
-
-  .border-bottom-0 {
-    border-bottom: 0 !important;
-  }
-
-  .border-start {
-    border-left: var(--border-width) var(--border-style) var(--border-color) !important;
-  }
-
-  .border-start-0 {
-    border-left: 0 !important;
-  }
-
-  .border-1 {
-    --border-width: 1px;
-  }
-
-  .border-2 {
-    --border-width: 2px;
-  }
-
-  .border-3 {
-    --border-width: 3px;
-  }
-
-  .border-4 {
-    --border-width: 4px;
-  }
-
-  .border-5 {
-    --border-width: 5px;
-  }
-
-  .border-opacity-10 {
-    --border-opacity: 0.1;
-  }
-
-  .border-opacity-25 {
-    --border-opacity: 0.25;
-  }
-
-  .border-opacity-50 {
-    --border-opacity: 0.5;
-  }
-
-  .border-opacity-75 {
-    --border-opacity: 0.75;
-  }
-
-  .border-opacity-100 {
-    --border-opacity: 1;
-  }
-}
-// #endregion
-
-// #region Sizes
-$new_utilities: map.merge(
-  $new_utilities,
-  (
-    'sizes': 'Apply sizing rules to an element',
-  )
-);
-
-@mixin sizes() {
-  .w-25 {
-    width: 25% !important;
-  }
-
-  .w-50 {
-    width: 50% !important;
-  }
-
-  .w-75 {
-    width: 75% !important;
-  }
-
-  .w-100 {
-    width: 100% !important;
-  }
-
-  .w-auto {
-    width: auto !important;
-  }
-
-  .mw-100 {
-    max-width: 100% !important;
-  }
-
-  .mw-fit-content {
-    max-width: fit-content !important;
-  }
-
-  .mw-content {
-    max-width: var(--content-max-width) !important;
-  }
-
-  .vw-100 {
-    width: 100vw !important;
-  }
-
-  .min-vw-100 {
-    min-width: 100vw !important;
-  }
-
-  .h-25 {
-    height: 25% !important;
-  }
-
-  .h-50 {
-    height: 50% !important;
-  }
-
-  .h-75 {
-    height: 75% !important;
-  }
-
-  .h-100 {
-    height: 100% !important;
-  }
-
-  .h-auto {
-    height: auto !important;
-  }
-
-  .mh-100 {
-    max-height: 100% !important;
-  }
-
-  .vh-100 {
-    height: 100vh !important;
-  }
-
-  .min-vh-100 {
-    min-height: 100vh !important;
-  }
-
-  .min-100 {
-    min-width: 100% !important;
-  }
-
-  .min-fit-content {
-    min-width: fit-content !important;
-  }
-
-  .object-cover {
-    object-fit: cover !important;
-  }
-
-  .object-contain {
-    object-fit: contain !important;
-  }
-}
-// #endregion
-
-// #region Flex
-$new_utilities: map.merge(
-  $new_utilities,
-  (
-    'flex': 'Update the flex rules of an element, can be applied at different breakpoints',
-  )
-);
-
-@mixin flex() {
-  @each $breakpoint in map.keys($grid-breakpoints) {
-    @include media-breakpoint-up($breakpoint, $mobileOnly) {
-      $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-
-      .flex#{$infix}-fill {
-        flex: 1 1 auto !important;
-      }
-
-      .flex#{$infix}-row {
-        flex-direction: row !important;
-      }
-
-      .flex#{$infix}-column {
-        flex-direction: column !important;
-      }
-
-      .flex#{$infix}-row-reverse {
-        flex-direction: row-reverse !important;
-      }
-
-      .flex#{$infix}-column-reverse {
-        flex-direction: column-reverse !important;
-      }
-
-      .flex#{$infix}-grow-0 {
-        flex-grow: 0 !important;
-      }
-
-      .flex#{$infix}-grow-1 {
-        flex-grow: 1 !important;
-      }
-
-      .flex#{$infix}-shrink-0 {
-        flex-shrink: 0 !important;
-      }
-
-      .flex#{$infix}-shrink-1 {
-        flex-shrink: 1 !important;
-      }
-
-      .flex#{$infix}-wrap {
-        flex-wrap: wrap !important;
-      }
-
-      .flex#{$infix}-nowrap {
-        flex-wrap: nowrap !important;
-      }
-
-      .flex#{$infix}-wrap-reverse {
-        flex-wrap: wrap-reverse !important;
-      }
-
-      .justify-content#{$infix}-start {
-        justify-content: flex-start !important;
-      }
-
-      .justify-content#{$infix}-end {
-        justify-content: flex-end !important;
-      }
-
-      .justify-content#{$infix}-center {
-        justify-content: center !important;
-      }
-
-      .justify-content#{$infix}-between {
-        justify-content: space-between !important;
-      }
-
-      .justify-content#{$infix}-around {
-        justify-content: space-around !important;
-      }
-
-      .justify-content#{$infix}-evenly {
-        justify-content: space-evenly !important;
-      }
-
-      .align-items#{$infix}-start {
-        align-items: flex-start !important;
-      }
-
-      .align-items#{$infix}-end {
-        align-items: flex-end !important;
-      }
-
-      .align-items#{$infix}-center {
-        align-items: center !important;
-      }
-
-      .align-items#{$infix}-baseline {
-        align-items: baseline !important;
-      }
-
-      .align-items#{$infix}-stretch {
-        align-items: stretch !important;
-      }
-
-      .align-content#{$infix}-start {
-        align-content: flex-start !important;
-      }
-
-      .align-content#{$infix}-end {
-        align-content: flex-end !important;
-      }
-
-      .align-content#{$infix}-center {
-        align-content: center !important;
-      }
-
-      .align-content#{$infix}-between {
-        align-content: space-between !important;
-      }
-
-      .align-content#{$infix}-around {
-        align-content: space-around !important;
-      }
-
-      .align-content#{$infix}-stretch {
-        align-content: stretch !important;
-      }
-
-      .align-self#{$infix}-auto {
-        align-self: auto !important;
-      }
-
-      .align-self#{$infix}-start {
-        align-self: flex-start !important;
-      }
-
-      .align-self#{$infix}-end {
-        align-self: flex-end !important;
-      }
-
-      .align-self#{$infix}-center {
-        align-self: center !important;
-      }
-
-      .align-self#{$infix}-baseline {
-        align-self: baseline !important;
-      }
-
-      .align-self#{$infix}-stretch {
-        align-self: stretch !important;
-      }
-    }
-  }
-}
-// #endregion
-
-// #region Order
-$new_utilities: map.merge(
-  $new_utilities,
-  (
-    'order': 'Update the order of an element, can be applied at different breakpoints',
-  )
-);
-
-@mixin order() {
-  @each $breakpoint in map.keys($grid-breakpoints) {
-    @include media-breakpoint-up($breakpoint, $mobileOnly) {
-      $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-
-      .order#{$infix}-first {
-        order: -1 !important;
-      }
-
-      .order#{$infix}-0 {
-        order: 0 !important;
-      }
-
-      .order#{$infix}-1 {
-        order: 1 !important;
-      }
-
-      .order#{$infix}-2 {
-        order: 2 !important;
-      }
-
-      .order#{$infix}-3 {
-        order: 3 !important;
-      }
-
-      .order#{$infix}-4 {
-        order: 4 !important;
-      }
-
-      .order#{$infix}-5 {
-        order: 5 !important;
-      }
-
-      .order#{$infix}-last {
-        order: 6 !important;
-      }
-    }
-  }
-}
-// #endregion
-
-// #region Margins
-$new_utilities: map.merge(
-  $new_utilities,
-  (
-    'margins': 'Adjust the margins of an element',
-  )
-);
-
-@mixin margins() {
-  @each $key, $value in $spacers {
-    .m-#{$key} {
-      margin: #{$value} !important;
-    }
-
-    .mx-#{$key} {
-      margin-left: #{$value} !important;
-      margin-right: #{$value} !important;
-    }
-
-    .mx-minus-#{$key} {
-      margin-left: -#{$value} !important;
-      margin-right: -#{$value} !important;
-    }
-
-    .my-minus-#{$key} {
-      margin-top: -#{$value} !important;
-      margin-bottom: -#{$value} !important;
-    }
-
-    .my-#{$key} {
-      margin-top: #{$value} !important;
-      margin-bottom: #{$value} !important;
-    }
-
-    .mt-#{$key} {
-      margin-top: #{$value} !important;
-    }
-
-    .me-#{$key} {
-      margin-right: #{$value} !important;
-    }
-
-    .mb-#{$key} {
-      margin-bottom: #{$value} !important;
-    }
-
-    .ms-#{$key} {
-      margin-left: #{$value} !important;
-    }
-  }
-
-  .m-auto {
-    margin: auto !important;
-  }
-
-  .mx-auto {
-    margin-right: auto !important;
-    margin-left: auto !important;
-  }
-
-  .my-auto {
-    margin-top: auto !important;
-    margin-bottom: auto !important;
-  }
-
-  .mt-auto {
-    margin-top: auto !important;
-  }
-
-  .me-auto {
-    margin-right: auto !important;
-  }
-
-  .mb-auto {
-    margin-bottom: auto !important;
-  }
-
-  .ms-auto {
-    margin-left: auto !important;
-  }
-}
-// #endregion
-
-// #region Paddings
-$new_utilities: map.merge(
-  $new_utilities,
-  (
-    'paddings': 'Adjust the paddings of an element',
-  )
-);
-
-@mixin paddings() {
-  @each $key, $value in $spacers {
-    .p-#{$key} {
-      padding: #{$value} !important;
-    }
-
-    .px-#{$key} {
-      padding-left: #{$value} !important;
-      padding-right: #{$value} !important;
-    }
-
-    .py-#{$key} {
-      padding-top: #{$value} !important;
-      padding-bottom: #{$value} !important;
-    }
-
-    .pt-#{$key} {
-      padding-top: #{$value} !important;
-    }
-
-    .pe-#{$key} {
-      padding-right: #{$value} !important;
-    }
-
-    .pb-#{$key} {
-      padding-bottom: #{$value} !important;
-    }
-
-    .ps-#{$key} {
-      padding-left: #{$value} !important;
-    }
-  }
-}
-// #endregion
-
-// #region Gap
-$new_utilities: map.merge(
-  $new_utilities,
-  (
-    'gap': 'Update the gap sizing of an element with the display flex',
-  )
-);
-
-@mixin gap() {
-  @each $key, $value in $spacers {
-    .gap-#{$key} {
-      gap: #{$value} !important;
-    }
-  }
-}
-// #endregion
-
-// #region Text
-$new_utilities: map.merge(
-  $new_utilities,
-  (
-    'text': 'Apply the text settings',
-  )
-);
-
-@mixin text() {
-  .font-monospace {
-    font-family: var(--font-monospace) !important;
-  }
-
-  .font-body {
-    font-family: var(--font-body) !important;
-  }
-
-  .fs-1 {
-    font-size: rfs-fluid-value(2.5rem) !important;
-  }
-
-  .fs-2 {
-    font-size: rfs-fluid-value(2rem) !important;
-  }
-
-  .fs-3 {
-    font-size: rfs-fluid-value(1.75rem) !important;
-  }
-
-  .fs-4 {
-    font-size: rfs-fluid-value(1.5rem) !important;
-  }
-
-  .fs-5 {
-    font-size: rfs-fluid-value(1.25rem) !important;
-  }
-
-  .fs-6 {
-    font-size: rfs-fluid-value(1rem) !important;
-  }
-
-  .fst-italic {
-    font-style: italic !important;
-  }
-
-  .fst-normal {
-    font-style: normal !important;
-  }
-
-  .fw-light {
-    font-weight: 300 !important;
-  }
-
-  .fw-lighter {
-    font-weight: lighter !important;
-  }
-
-  .fw-normal {
-    font-weight: 400 !important;
-  }
-
-  .fw-bold {
-    font-weight: 700 !important;
-  }
-
-  .fw-semibold {
-    font-weight: 600 !important;
-  }
-
-  .fw-bolder {
-    font-weight: bolder !important;
-  }
-
-  .lh-0 {
-    line-height: 0 !important;
-  }
-
-  .lh-1 {
-    line-height: 1 !important;
-  }
-
-  .text-start {
-    text-align: left !important;
-  }
-
-  .text-end {
-    text-align: right !important;
-  }
-
-  .text-center {
-    text-align: center !important;
-  }
-
-  .text-decoration-none {
-    text-decoration: none !important;
-  }
-
-  .text-decoration-underline {
-    text-decoration: underline !important;
-  }
-
-  .text-decoration-line-through {
-    text-decoration: line-through !important;
-  }
-
-  .text-lowercase {
-    text-transform: lowercase !important;
-  }
-
-  .text-uppercase {
-    text-transform: uppercase !important;
-  }
-
-  .text-capitalize {
-    text-transform: capitalize !important;
-  }
-
-  .text-wrap {
-    white-space: normal !important;
-  }
-
-  .text-nowrap {
-    white-space: nowrap !important;
-  }
-
-  .text-break {
-    word-wrap: break-word !important;
-    word-break: break-word !important;
-  }
-}
-// #endregion
-
-// #region Colours
-$new_utilities: map.merge(
-  $new_utilities,
-  (
-    'colours': 'Applu our design system colours by either text colour or background',
-  )
-);
-
-@mixin colours() {
-
-  .text-heading {
-    
-    color: var(--colour-heading) !important;
-  }
-
-  $new-theme-colors: (
-    'primary': var(--colour-primary),
-    'secondary': var(--colour-secondary),
-    'info': var(--colour-info),
-    'warning': var(--colour-warning),
-    'success': var(--colour-success),
-    'complete': var(--colour-complete),
-    'danger': var(--colour-danger),
-    'dark': var(--colour-dark),
-    'light': var(--colour-light),
-    'canvas': var(--colour-canvas),
-    'white': var(--colour-white),
-  );
-
-  @each $color, $value in $new-theme-colors {
-    .text-#{$color} {
-      --text-opacity: 1;
-      color: var(--colour-#{$color}) !important;
-    }
-
-    .bg-#{$color} {
-      --bg-opacity: 1;
-      --bg-colour: var(--colour-#{$color}) !important;
-      background-color: var(--colour-#{$color}) !important;
-    }
-
-    .hover-#{$color}:is(:hover,:focus,:focus-within) {
-      --bg-opacity: 1;
-      --bg-colour: var(--colour-#{$color}) !important;
-      background-color: var(--colour-#{$color}) !important;
-    }
-
-    .colour-#{$color} {
-      --colour: var(--colour-#{$color}) !important;
-    }
-  }
-}
-// #endregion
-
-// #region gradients
-$new_utilities: map.merge(
-  $new_utilities,
-  (
-    'gradients': 'Add gradients to backgrounds',
-  )
-);
-
-@mixin gradients() {
-  .bg-gradient {
-    background-image: var(--gradient) !important;
-  }
-
-  .gradient-success {
-    --gradient-direction: 180deg;
-    background-image: linear-gradient(
-      var(--gradient-direction),
-      var(--colour-success-theme) 0,
-      transparent 100%
-    ) !important;
-  }
-
-  .gradient-primary {
-    --gradient-direction: 180deg;
-    background-image: linear-gradient(
-      var(--gradient-direction),
-      var(--colour-primary-theme) 0,
-      transparent 100%
-    ) !important;
-  }
-
-  .gradient-info {
-    --gradient-direction: 180deg;
-    background-image: linear-gradient(
-      var(--gradient-direction),
-      var(--colour-info-theme) 0,
-      transparent 100%
-    ) !important;
-  }
-
-  .gradient-direction-left {
-    --gradient-direction: 90deg;
-  }
-
-  .gradient-direction-angle {
-    --gradient-direction: 135deg;
-  }
-}
-// #endregion
-
-// #region Pointer-events
-$new_utilities: map.merge(
-  $new_utilities,
-  (
-    'pointer-events': 'Disable or enable point events',
-  )
-);
-
-@mixin pointer-events() {
-  .pe-none {
-    pointer-events: none !important;
-  }
-
-  .pe-auto {
-    pointer-events: auto !important;
-  }
-}
-// #endregion
-
-// #region Rounded
-$new_utilities: map.merge(
-  $new_utilities,
-  (
-    'rounded': 'Add rounded corners',
-  )
-);
-
-@mixin rounded() {
-  .rounded {
-    border-radius: var(--border-radius) !important;
-  }
-
-  .rounded-0 {
-    border-radius: 0 !important;
-  }
-
-  .rounded-1 {
-    border-radius: var(--border-radius-sm) !important;
-  }
-
-  .rounded-2 {
-    border-radius: var(--border-radius) !important;
-  }
-
-  .rounded-3 {
-    border-radius: var(--border-radius-lg) !important;
-  }
-
-  .rounded-4 {
-    border-radius: var(--border-radius-xl) !important;
-  }
-
-  .rounded-5 {
-    border-radius: var(--border-radius-2xl) !important;
-  }
-
-  .rounded-circle {
-    border-radius: 50% !important;
-  }
-
-  .rounded-pill {
-    border-radius: var(--border-radius-pill) !important;
-  }
-
-  .rounded-top {
-    border-top-left-radius: var(--border-radius) !important;
-    border-top-right-radius: var(--border-radius) !important;
-  }
-
-  .rounded-end {
-    border-top-right-radius: var(--border-radius) !important;
-    border-bottom-right-radius: var(--border-radius) !important;
-  }
-
-  .rounded-bottom {
-    border-bottom-right-radius: var(--border-radius) !important;
-    border-bottom-left-radius: var(--border-radius) !important;
-  }
-
-  .rounded-start {
-    border-bottom-left-radius: var(--border-radius) !important;
-    border-top-left-radius: var(--border-radius) !important;
-  }
-}
-// #endregion
-
-// #region Visible
-$new_utilities: map.merge(
-  $new_utilities,
-  (
-    'visible': 'Change the visibility of elements',
-  )
-);
-
-@mixin visible() {
-  .visible {
-    visibility: visible !important;
-  }
-
-  .invisible {
-    visibility: hidden !important;
-  }
-}
-// #endregion
+/* Empty */