AAE-34493 Improved internal mat-selectors (#10829)

lib/content-services/src/lib/aspect-list/aspect-list-dialog.component.scss

@@ -1,9 +1,9 @@
-@import 'styles/mat-selectors';
+@use '../mat-selectors.scss' as ms;
 
 adf-aspect-list-dialog {
     display: block;
 
-    #{$mat-expansion-panel-body} {
+    #{ms.$mat-expansion-panel-body} {
         margin-top: -2px;
     }
 }
@@ -35,7 +35,7 @@ adf-aspect-list-dialog {
         padding-right: 4px;
         padding-top: 0;
 
-        #{$mat-dialog-content} {
+        #{ms.$mat-dialog-content} {
             padding: 0;
         }
 

lib/content-services/src/lib/aspect-list/aspect-list.component.scss

@@ -1,4 +1,5 @@
-@import 'styles/mat-selectors';
+@use '../mat-selectors.scss' as ms;
+
 $dialog-title-height: 100px;
 $dialog-information-height: 44px;
 $dialog-buttons-height: 68px;
@@ -49,7 +50,7 @@ $dialog-list-height: calc(65vh - ($dialog-title-height + $dialog-information-hei
             box-shadow: none;
             background: border-box;
 
-            #{$mat-checkbox-background} {
+            #{ms.$mat-checkbox-background} {
                 height: 16px;
                 width: 16px;
             }

lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../mat-selectors.scss' as ms;
 
 $dropdown-horizontal-offset: 30px;
 
@@ -98,6 +98,6 @@ $dropdown-horizontal-offset: 30px;
     }
 }
 
-#{$cdk-overlay-pane}:has(>.adf-breadcrumb-dropdown-panel){
+#{ms.$cdk-overlay-pane}:has(> .adf-breadcrumb-dropdown-panel) {
     min-width: fit-content;
 }

lib/content-services/src/lib/category/categories-management/categories-management.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../../mat-selectors.scss' as ms;
 
 .adf-categories-management {
     .adf-category-name-field {
@@ -20,7 +20,7 @@
             box-sizing: content-box;
         }
 
-        #{$mat-form-field-error} {
+        #{ms.$mat-form-field-error} {
             padding-top: 5px;
         }
     }
@@ -56,7 +56,7 @@
         background-color: inherit;
         color: inherit;
 
-        &:not(#{$mat-list-item-disabled}):hover {
+        &:not(#{ms.$mat-list-item-disabled}):hover {
             cursor: pointer;
             background: var(--adf-theme-mat-grey-color-a200);
         }
@@ -86,7 +86,7 @@
         overflow-wrap: anywhere;
     }
 
-    #{$mat-list-item-disabled} #{$mat-list-item-primary-text} {
+    #{ms.$mat-list-item-disabled} #{ms.$mat-list-item-primary-text} {
         opacity: 1;
     }
 }

lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../../../mat-selectors.scss' as ms;
 
 $panel-properties-height: 56px !default;
 
@@ -11,11 +11,11 @@ $panel-properties-height: 56px !default;
             margin: 12px;
 
             adf-card-view-textitem {
-                #{$mat-form-field-subscript-wrapper} {
+                #{ms.$mat-form-field-subscript-wrapper} {
                     display: none;
                 }
 
-                #{$mat-form-field-infix} {
+                #{ms.$mat-form-field-infix} {
                     padding-bottom: 0;
                 }
             }
@@ -47,7 +47,7 @@ $panel-properties-height: 56px !default;
             }
         }
 
-        #{$mat-expansion-panel-body} {
+        #{ms.$mat-expansion-panel-body} {
             padding-top: 16px;
 
             input {
@@ -64,7 +64,7 @@ $panel-properties-height: 56px !default;
             color: var(--adf-theme-foreground-text-color-054);
         }
 
-        #{$mat-chip} {
+        #{ms.$mat-chip} {
             &.metadata-properties-tag-chip {
                 // TODO: bug open https://github.com/angular/components/issues/26584
                 /* stylelint-disable selector-class-pattern */

lib/content-services/src/lib/content-node-selector/content-node-selector-panel/content-node-selector-panel.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../../mat-selectors.scss' as ms;
 
 /* stylelint-disable no-descending-specificity */
 $content-node-selector-thumbnail-width: 35px !default;
@@ -15,8 +15,8 @@ h2.adf-search-results-label {
     color: var(--adf-theme-foreground-text-color-087);
 }
 
-#{$mdc-dialog} {
+#{ms.$mdc-dialog} {
-    #{$mat-dialog-surface}:is(div) {
+    #{ms.$mat-dialog-surface}:is(div) {
         padding-bottom: 0;
     }
 }
@@ -41,17 +41,17 @@ h2.adf-search-results-label {
     }
 
     &-content {
-        #{$mat-input-element} {
+        #{ms.$mat-input-element} {
             &:focus::placeholder {
                 color: var(--theme-primary-color);
             }
         }
 
-        #{$mat-form-field-wrapper} {
+        #{ms.$mat-form-field-wrapper} {
-            #{$mat-form-field-flex} {
+            #{ms.$mat-form-field-flex} {
                 align-items: center;
 
-                #{$mat-form-field-infix} {
+                #{ms.$mat-form-field-infix} {
                     padding-bottom: 0;
                 }
             }
@@ -59,13 +59,13 @@ h2.adf-search-results-label {
 
         .adf-sites-dropdown-form-field {
             label {
-                &#{$mat-form-field-label} {
+                &#{ms.$mat-form-field-label} {
                     top: 32px;
                 }
             }
         }
 
-        #{$mat-form-field-subscript-wrapper} {
+        #{ms.$mat-form-field-subscript-wrapper} {
             height: 16px;
         }
 
@@ -88,7 +88,7 @@ h2.adf-search-results-label {
                 }
             }
 
-            #{$mat-form-field-subscript-wrapper} {
+            #{ms.$mat-form-field-subscript-wrapper} {
                 display: none;
             }
         }

lib/content-services/src/lib/content-node-selector/content-node-selector.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../mat-selectors.scss' as ms;
 
 adf-content-node-selector {
     .adf-upload-dialog {
@@ -42,7 +42,7 @@ adf-content-node-selector {
 }
 
 .adf-content-node-selector-dialog {
-    #{$mat-form-field} {
+    #{ms.$mat-form-field} {
         width: 100%;
     }
 
@@ -50,7 +50,7 @@ adf-content-node-selector {
         color: var(--adf-theme-foreground-base-color-045);
     }
 
-    #{$mat-dialog-title} {
+    #{ms.$mat-dialog-title} {
         margin-bottom: 0;
         padding: 0;
 

lib/content-services/src/lib/content-node-share/content-node-share.dialog.scss

@@ -1,8 +1,8 @@
-@import 'styles/mat-selectors';
+@use '../mat-selectors.scss' as ms;
 
 .adf-share-link-dialog {
     .adf-share-link {
-        #{$mat-form-field-flex} {
+        #{ms.$mat-form-field-flex} {
             height: 48px;
         }
 
@@ -35,7 +35,7 @@
         &__form {
             padding-top: 8px;
 
-            #{$mat-form-field-infix}:has(.adf-share-link__input) {
+            #{ms.$mat-form-field-infix}:has(.adf-share-link__input) {
                 border-top: 0.9375em solid transparent;
                 border-bottom: 0.9375em solid transparent;
                 height: 16px;

lib/content-services/src/lib/dialogs/folder/folder.dialog.scss

@@ -1,21 +1,21 @@
-@import 'styles/mat-selectors';
+@use '../../mat-selectors.scss' as ms;
 
 .adf-folder-dialog {
     .adf-folder-dialog-content {
         padding: 0;
         overflow: unset;
 
-        #{$mat-form-field-infix} {
+        #{ms.$mat-form-field-infix} {
             padding-bottom: 3.5px;
         }
 
-        #{$mat-form-field-hide-placeholder} {
+        #{ms.$mat-form-field-hide-placeholder} {
-            #{$mat-floating-label} {
+            #{ms.$mat-floating-label} {
                 padding-top: 20px;
             }
         }
 
-        #{$mat-form-field-hint-wrapper} {
+        #{ms.$mat-form-field-hint-wrapper} {
             padding-left: 0;
             margin-left: -2px;
             color: var(--adf-theme-foreground-secondary-text-color);

lib/content-services/src/lib/dialogs/library/library.dialog.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../../mat-selectors.scss' as ms;
 
 .adf-library-dialog {
     .adf-library-dialog-content {
@@ -28,34 +28,34 @@
             padding-top: 4.5px;
         }
 
-        #{$mat-floating-label} {
+        #{ms.$mat-floating-label} {
             -webkit-font-smoothing: subpixel-antialiased;
         }
 
-        &#{$mat-form-field-hide-placeholder} {
+        &#{ms.$mat-form-field-hide-placeholder} {
-            #{$mat-floating-label} {
+            #{ms.$mat-floating-label} {
                 padding-top: 20px;
             }
         }
 
         &-description {
-            &#{$mat-form-field-hide-placeholder} {
+            &#{ms.$mat-form-field-hide-placeholder} {
-                #{$mat-floating-label} {
+                #{ms.$mat-floating-label} {
                     padding-top: 20px;
                 }
             }
         }
 
-        #{$mat-form-field-infix} {
+        #{ms.$mat-form-field-infix} {
             padding-bottom: 3.5px;
         }
 
-        #{$mat-form-field-error-wrapper} {
+        #{ms.$mat-form-field-error-wrapper} {
             margin-left: -2px;
             font-size: 10.5px;
             -webkit-font-smoothing: subpixel-antialiased;
 
-            #{$mat-form-field-error} {
+            #{ms.$mat-form-field-error} {
                 height: 13.125px;
             }
         }

lib/content-services/src/lib/document-list/components/document-list.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/flex';
+@use '../../flex' as flex;
 
 .adf-document-list {
     min-height: 0;
@@ -143,7 +143,7 @@
         word-break: break-all;
         white-space: pre-line;
 
-        @include layout-bp(lt-sm) {
+        @include flex.layout-bp(lt-sm) {
             font-size: 48px;
         }
     }
@@ -165,12 +165,12 @@
         object-fit: contain;
         margin-top: 17px;
 
-        @include layout-bp(lt-sm) {
+        @include flex.layout-bp(lt-sm) {
             width: 250px;
         }
     }
 
-    @include layout-bp(lt-md) {
+    @include flex.layout-bp(lt-md) {
         &-drag-drop,
         &-any-files-here-to-add {
             display: none;

lib/content-services/src/lib/flex.scss

@@ -0,0 +1,81 @@
+@charset "UTF-8";
+/* stylelint-disable */
+
+// Non-overlapping Material Design breakpoints
+// @type map
+$breakpoints: (
+    xs: (
+        begin: 0,
+        end: 599.9px
+    ),
+    sm: (
+        begin: 600px,
+        end: 959.9px
+    ),
+    md: (
+        begin: 960px,
+        end: 1279.9px
+    ),
+    lg: (
+        begin: 1280px,
+        end: 1919.9px
+    ),
+    xl: (
+        begin: 1920px,
+        end: 4999.99px
+    )
+) !default;
+
+// Overlapping breakpoints that are greater than defined
+// Material Design breakpoints
+// @type map
+$overlapping-gt: (
+    gt-xs: 600px,
+    gt-sm: 960px,
+    gt-md: 1280px,
+    gt-lg: 1920px
+) !default;
+
+// Overlapping breakpoints that are less than defined
+// Material Design breakpoints
+// @type map
+$overlapping-lt: (
+    lt-sm: 599.9px,
+    lt-md: 959.9px,
+    lt-lg: 1279.9px,
+    lt-xl: 1919.9px
+) !default;
+
+// Media Query Mixin, takes a breakpoint and returns a wrapping
+// media query statement
+// e.g.
+//
+// @include layout-bp(xs) {
+//   background-color: red;
+// }
+//
+// becomes
+//
+// @media (min-width: 0px) and (max-width: 599px) {
+//   background-color: red;
+// }
+@mixin layout-bp($bp) {
+    @if map-has-key($breakpoints, $bp) {
+        $min: map-get(map-get($breakpoints, $bp), begin);
+        $max: map-get(map-get($breakpoints, $bp), end);
+        @media (min-width: $min) and (max-width: $max) {
+            @content;
+        }
+    } @else if map-has-key($overlapping-gt, $bp) {
+        $min: map-get($overlapping-gt, $bp);
+        @media (min-width: $min) {
+            @content;
+        }
+    } @else if map-has-key($overlapping-lt, $bp) {
+        $max: map-get($overlapping-lt, $bp);
+        @media (max-width: $max) {
+            @content;
+        }
+    }
+}
+/* stylelint-enable */

lib/content-services/src/lib/mat-selectors.scss

@@ -0,0 +1,190 @@
+/* Variables in this file are used in the Angular Material library. Do not modify them unless you know what you are doing. */
+
+$material-icons: '.material-icons';
+$mat-icon: '.mat-icon';
+$mat-icon-button: '.mat-mdc-icon-button';
+$mat-icon-button-hover: '.mdc-icon-button__ripple';
+$mat-accent: '.mat-accent';
+$mat-focused: '.mat-focused';
+$mat-line: '.mat-line';
+$mat-tab-label: '.mat-mdc-tab';
+$mat-tab-label-active: '.mdc-tab--active';
+$mat-tab-label-content: '.mdc-tab__content';
+$mat-tab-label-container: '.mat-mdc-tab-label-container';
+$mat-expansion-panel-body: '.mat-expansion-panel-body';
+$mat-tab-label-text: '.mdc-tab__text-label';
+$mat-tab-list: '.mat-mdc-tab-list';
+$mat-tab-body: '.mat-mdc-tab-body';
+$mat-tab-body-wrapper: '.mat-mdc-tab-body-wrapper';
+$mat-tab-body-content: '.mat-mdc-tab-body-content';
+$mat-tab-header: '.mat-mdc-tab-header';
+$mat-tab-labels: '.mat-mdc-tab-labels';
+$mat-tab-ink-bar: '.mdc-tab-indicator';
+$mat-chip: '.mat-mdc-chip';
+$mat-chip-list: '.mat-mdc-chip-list';
+$mat-chip-list-wrapper: '.mat-chip-list-wrapper';
+$mat-checkbox: '.mat-mdc-checkbox';
+$mat-checkbox-box: '.mdc-checkbox';
+$mat-checkbox-frame: '.mdc-checkbox__checkmark';
+$mat-checkbox-label: '.mdc-label';
+$mat-checkbox-checked: '.mat-mdc-checkbox-checked';
+$mat-button: '.mat-mdc-button';
+$mat-button-label: '.mdc-button__label';
+$mat-button-label-text: '.mdc-button__label';
+$mat-radio-checked: '.mat-mdc-radio-checked';
+$mat-radio-label: '.mdc-label';
+$mat-progress-bar: '.mat-mdc-progress-bar';
+$mat-progress-spinner: '.mat-mdc-progress-spinner';
+$mat-form-field: '.mat-mdc-form-field';
+$mat-form-field-flex: '.mat-mdc-form-field-flex';
+$mat-form-field-outline: '.mat-mdc-form-field-outline';
+$mat-form-field-wrapper: '.mat-mdc-text-field-wrapper';
+$mat-line-ripple: '.mdc-line-ripple';
+$mat-form-field-subscript-wrapper: '.mat-mdc-form-field-subscript-wrapper';
+$mat-form-field-prefix: '.mat-mdc-form-field-text-prefix';
+$mat-form-field-suffix: '.mat-mdc-form-field-text-suffix';
+$mat-form-text-field-infix: '.mat-mdc-form-text-infix';
+$mat-form-field-label: '.mat-mdc-floating-label';
+$mat-form-field-invalid: '.mat-form-field-invalid';
+$mat-form-field-appearance-outline: '.mat-form-field-appearance-outline';
+$mat-text-field-outlined: '.mdc-text-field--outlined';
+$mat-text-field-outlined-thick: '.mdc-text-field--outlined-thick';
+$mat-text-field-focused: '.mdc-text-field--focused';
+$mat-dialog-actions: '.mat-mdc-dialog-actions';
+$mat-dialog-container: '.mdc-dialog__container';
+$mat-dialog-content: '.mat-mdc-dialog-content';
+$mat-button-toggle: '.mat-button-toggle';
+$mat-button-toggle-checked: '.mat-button-toggle-checked';
+$mat-button-touch-target: '.mat-mdc-button-touch-target';
+$mat-input-element: '.mat-mdc-input-element';
+$mat-card: '.mat-mdc-card';
+$mat-card-actions: '.mat-mdc-card-actions';
+$mat-card-header-text: '.mat-mdc-card-header-text';
+$mat-card-title: '.mat-mdc-card-title';
+$mat-card-content: '.mat-mdc-card-content';
+$mat-mini-fab: '.mat-mdc-mini-fab';
+$mat-list-item-primary-text: '.mdc-list-item__primary-text';
+$mat-list-item-end: '.mdc-list-item__end';
+$mat-table: '.mat-mdc-table';
+$mat-header-row: '.mat-mdc-header-row';
+$mat-row: '.mat-mdc-row';
+$mat-select: '.mat-mdc-select';
+$mat-select-value: '.mat-select-value';
+$mat-select-value-text: '.mat-mdc-select-value-text';
+$mat-select-panel: '.mat-mdc-select-panel';
+$mat-grid-tile: '.mat-grid-tile';
+$mat-sidenav-content: '.mat-sidenav-content';
+$mat-drawer-transition: '.mat-drawer-transition';
+$mat-drawer-content: '.mat-drawer-content';
+$mat-subheader: '.mat-mdc-subheader';
+$mat-menu-panel: '.mat-mdc-menu-panel';
+$mat-menu-content: '.mat-mdc-menu-content';
+$mat-expansion-panel: '.mat-expansion-panel';
+$mat-expansion-panel-header: '.mat-expansion-panel-header';
+$mat-expanded: '.mat-expanded';
+$mat-calendar: '.mat-calendar';
+$mat-calendar-header: '.mat-calendar-header';
+$mat-calendar-content: '.mat-calendar-content';
+$mat-calendar-table-header: '.mat-calendar-table-header';
+$mat-calendar-body-disabled: '.mat-calendar-body-disabled';
+$mat-toolbar: '.mat-toolbar';
+$mat-slide-toggle: '.mat-mdc-slide-toggle';
+$mat-list-item-content: '.mdc-list-item__content';
+$mat-list-item-unscoped-content: '.mat-mdc-list-item-unscoped-content';
+$mat-text-field-no-label: '.mdc-text-field--no-label';
+$mat-form-field-infix: '.mat-mdc-form-field-infix';
+$mat-form-field-hide-placeholder: '.mat-form-field-hide-placeholder';
+$mat-form-field-hint-wrapper: '.mat-mdc-form-field-hint-wrapper';
+$mat-form-field-error-wrapper: '.mat-mdc-form-field-error-wrapper';
+$mat-form-field-error: '.mat-mdc-form-field-error';
+$mat-checkbox-background: '.mdc-checkbox__background';
+$mat-dialog-content: '.mdc-dialog__content';
+$mat-floating-label: '.mdc-floating-label';
+$mat-floating-label-above: '.mdc-floating-label--float-above';
+$mat-select-arrow-wrapper: '.mat-mdc-select-arrow-wrapper';
+$mat-dialog-title: '.mdc-dialog__title';
+$mat-expansion-panel-body: '.mat-expansion-panel-body';
+$mat-dialog-surface: '.mat-mdc-dialog-surface';
+$mdc-dialog: '.mdc-dialog';
+$mat-text-filed-input: '.mdc-text-field__input';
+$mat-floating-label-float-above: '.mdc-floating-label--float-above';
+$mat-floating-label-required: '.mdc-floating-label--required';
+$mat-evolution-chip: '.mdc-evolution-chip';
+$mat-standard-chip: '.mat-mdc-standard-chip';
+$mat-evolution-chip-action: '.mdc-evolution-chip__action';
+$mat-evolution-chip-text-label: '.mdc-evolution-chip__text-label';
+$mat-notched-outline: '.mdc-notched-outline';
+$mat-evolution-chip-graphic: '.mdc-evolution-chip__graphic';
+$mat-select-trigger: '.mat-mdc-select-trigger';
+$mat-select-arrow: '.mat-mdc-select-arrow';
+$mat-notched-outline-leading: '.mdc-notched-outline__leading';
+$mat-notched-outline-trailing: '.mdc-notched-outline__trailing';
+$mat-notched-outline-notch: '.mdc-notched-outline__notch';
+$mat-evolution-chip-set: '.mdc-evolution-chip-set';
+$mat-mdc-button: '.mdc-button';
+$mat-outlined-button: '.mat-mdc-outlined-button';
+$mat-button-base: '.mat-mdc-button-base';
+$mat-button-touch-target: '.mat-mdc-button-touch-target';
+$mat-evolution-chip-text-label: '.mdc-evolution-chip__text-label';
+$cdk-overlay-pane: '.cdk-overlay-pane';
+$cdk-drag-preview: '.cdk-drag-preview';
+$mat-snackbar: '.mdc-snackbar';
+$mat-snack-bar-container: '.mat-mdc-snack-bar-container';
+$mat-snackbar-label: '.mdc-snackbar__label';
+$mat-datetimepicker-dialog: '.mat-datetimepicker-dialog';
+$mat-tab-indicator-underline: '.mdc-tab-indicator__content--underline';
+$mat-autocomplete-panel: '.mat-mdc-autocomplete-panel';
+$mat-menu-surface: '.mdc-menu-surface';
+$mat-text-field-filled: '.mdc-text-field--filled';
+$mat-text-field-disabled: '.mdc-text-field--disabled';
+$mat-form-field-focus-overlay: '.mat-mdc-form-field-focus-overlay';
+$mat-form-field-error-wrapper: '.mat-mdc-form-field-error-wrapper';
+$mat-text-field-textarea: '.mdc-text-field--textarea';
+$mat-list-item-disabled: '.mdc-list-item--disabled';
+$mat-chip-focus-overlay: '.mat-mdc-chip-focus-overlay';
+$mat-primary: '.mat-primary';
+$mat-checkbox-touch-target: '.mat-mdc-checkbox-touch-target';
+$mat-switch: '.mdc-switch';
+$mat-switch-ripple: '.mdc-switch-ripple';
+$mat-switch-selected: '.mdc-switch--selected';
+$mat-switch-checked: '.mdc-switch--checked';
+$mat-switch-handle-track: '.mdc-switch__handle-track';
+$mat-switch-handle: '.mdc-switch__handle';
+$mat-switch-track: '.mdc-switch__track';
+$mat-switch-icons: '.mdc-switch__icons';
+$mat-switch-shadow: '.mdc-switch__shadow';
+$mat-switch-unselected: '.mdc-switch--unselected';
+$mat-chip-action: '.mat-mdc-chip-action';
+$mat-chip-graphic: '.mat-mdc-chip-graphic';
+$mat-data-table-row: '.mdc-data-table__row';
+$mat-data-table-cell: '.mdc-data-table__cell';
+$mat-data-table-header-cell: '.mdc-data-table__header-cell';
+$mat-toolbar-single-row: '.mat-toolbar-single-row';
+$mat-toolbar-multiple-row: '.mat-toolbar-multiple-row';
+$mat-unthemed: '.mat-unthemed';
+$mat-calendar-period-button: '.mat-calendar-period-button';
+$mat-radio-button: '.mat-mdc-radio-button';
+$mat-radio: '.mdc-radio';
+$mat-tab-ripple: '.mdc-tab__ripple';
+$mat-tab-disabled: '.mat-mdc-tab-disabled';
+$mat-tab-group: '.mat-mdc-tab-group';
+$mat-tab-group-stretch: '.mat-mdc-tab-group-stretch-tabs';
+$mat-list-item: '.mdc-list-item';
+$mat-menu-item: '.mat-mdc-menu-item';
+$mat-icon-no-color: '.mat-icon-no-color';
+$mat-submenu-icon: '.mat-menu-submenu-icon';
+$mat-mdc-submenu-icon: '.mat-mdc-menu-submenu-icon';
+$mdc-form-field: '.mdc-form-field';
+$mat-divider-horizontal: '.mat-divider-horizontal';
+$mat-accordion: '.mat-accordion';
+$mdc-list: '.mdc-list';
+$mat-form-field-icon-suffix: '.mat-mdc-form-field-icon-suffix';
+$mat-text-field: '.mdc-text-field';
+$mat-form-field-disabled: '.mat-form-field-disabled';
+$mat-select-disabled: '.mat-mdc-select-disabled';
+$mat-select-value: '.mat-mdc-select-value';
+$mat-checkbox-native-control: '.mdc-checkbox__native-control';
+$mat-checkbox-selected: '.mdc-checkbox--selected';
+$mat-checkbox-ripple: '.mat-mdc-checkbox-ripple';
+$mat-list-base: '.mat-mdc-list-base';
+$mat-card-header: '.mat-mdc-card-header';

lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.component.scss

@@ -1,7 +1,7 @@
-@import 'styles/mat-selectors';
+@use '../../../mat-selectors.scss' as ms;
 
-#{$mdc-dialog} {
+#{ms.$mdc-dialog} {
-    #{$mat-dialog-surface}:is(div) {
+    #{ms.$mat-dialog-surface}:is(div) {
         padding-bottom: 0;
     }
 }
@@ -31,11 +31,11 @@
                 width: 100%;
                 justify-content: unset;
 
-                #{$mat-button-label} {
+                #{ms.$mat-button-label} {
                     padding-right: 0;
                 }
 
-                #{$mat-icon} {
+                #{ms.$mat-icon} {
                     font-size: 24px;
                     width: 24px;
                     height: 24px;

lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../../../mat-selectors.scss' as ms;
 
 $search-result-height: calc(100% - 60px);
 
@@ -9,7 +9,7 @@ $search-result-height: calc(100% - 60px);
         overflow: auto;
         border: 2px solid var(--adf-theme-foreground-text-color-007);
 
-        #{$mat-list-item-end} {
+        #{ms.$mat-list-item-end} {
             display: none;
         }
 
@@ -54,18 +54,18 @@ $search-result-height: calc(100% - 60px);
             padding-bottom: 0;
             padding-top: 12px;
 
-            #{$mat-form-field-wrapper} {
+            #{ms.$mat-form-field-wrapper} {
-                #{$mat-form-field-flex} {
+                #{ms.$mat-form-field-flex} {
                     align-items: center;
 
-                    #{$mat-form-field-infix} {
+                    #{ms.$mat-form-field-infix} {
                         padding-top: 0;
                         padding-bottom: 0;
                     }
                 }
             }
 
-            #{$mat-form-field-subscript-wrapper} {
+            #{ms.$mat-form-field-subscript-wrapper} {
                 height: 16px;
             }
 

lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../../../mat-selectors.scss' as ms;
 
 .adf {
     &-permission-card {
@@ -88,7 +88,7 @@
         height: calc(100% - 63px);
     }
 
-    &-local-permission-container#{$mat-card-content} {
+    &-local-permission-container#{ms.$mat-card-content} {
         overflow: hidden;
         flex: 1 1 auto;
         padding: 0;

lib/content-services/src/lib/permission-manager/components/user-role-column/user-role-column.component.scss

@@ -1,11 +1,11 @@
-@import 'styles/mat-selectors';
+@use '../../../mat-selectors.scss' as ms;
 
-.adf-role-selector-field#{$mat-form-field} {
+.adf-role-selector-field#{ms.$mat-form-field} {
     width: 100%;
     max-width: 200px;
     height: 40px;
 
-    #{$mat-form-field-infix}:not(:disabled) {
+    #{ms.$mat-form-field-infix}:not(:disabled) {
         padding-top: 8px;
     }
 }

lib/content-services/src/lib/search/components/search-check-list/search-check-list.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../../../mat-selectors.scss' as ms;
 
 .adf-search-check-list > div {
     display: flex;
@@ -21,7 +21,7 @@
             white-space: nowrap;
         }
 
-        #{$mat-checkbox-box} {
+        #{ms.$mat-checkbox-box} {
             margin-left: 4px;
             margin-top: 5px;
             margin-bottom: 4px;

lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.scss

@@ -1,21 +1,21 @@
 /* stylelint-disable selector-class-pattern */
-@import 'styles/mat-selectors';
+@use '../../../mat-selectors.scss' as ms;
 
 adf-search-chip-autocomplete-input {
     .adf-chip-list {
         width: 100%;
     }
 
-    .adf-chip-list:has(#{$mat-notched-outline}) {
+    .adf-chip-list:has(#{ms.$mat-notched-outline}) {
         margin-top: 4px;
     }
 
-    #{$mat-form-text-field-infix} {
+    #{ms.$mat-form-text-field-infix} {
         border: none;
     }
 
-    .adf-chip-list#{$mat-form-field} {
+    .adf-chip-list#{ms.$mat-form-field} {
-        #{$mat-form-field-infix} {
+        #{ms.$mat-form-field-infix} {
             padding-top: 14px;
             padding-bottom: 14px;
             min-height: unset;
@@ -35,8 +35,8 @@ adf-search-chip-autocomplete-input {
         padding: 4px 0;
     }
 
-    #{$mat-evolution-chip-set} {
+    #{ms.$mat-evolution-chip-set} {
-        #{$mat-evolution-chip} {
+        #{ms.$mat-evolution-chip} {
             margin-left: 0;
             margin-right: 4px;
         }

lib/content-services/src/lib/search/components/search-control.component.scss

@@ -1,8 +1,8 @@
 @use '@angular/material' as mat;
-@import 'styles/flex';
+@use '../../flex' as flex;
 
-$mat-menu-overlay-min-width: 112px !default;   // 56 * 2
+$mat-menu-overlay-min-width: 112px !default; // 56 * 2
-$mat-menu-overlay-max-width: 280px !default;   // 56 * 5
+$mat-menu-overlay-max-width: 280px !default; // 56 * 5
 
 .adf {
     &-search-result-autocomplete {
@@ -24,7 +24,7 @@ $mat-menu-overlay-max-width: 280px !default;   // 56 * 5
         background-color: var(--adf-theme-background-card-color);
         border-radius: 2px;
 
-        @include layout-bp(lt-md) {
+        @include flex.layout-bp(lt-md) {
             white-space: nowrap;
             text-overflow: ellipsis;
             overflow: hidden;

lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range-tabbed.component.scss

@@ -1,7 +1,7 @@
-@import 'styles/mat-selectors';
+@use '../../../mat-selectors.scss' as ms;
 
 adf-search-date-range-tabbed {
-    #{$mat-tab-header} {
+    #{ms.$mat-tab-header} {
         margin-top: -5px;
     }
 }

lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range/search-date-range.component.scss

@@ -1,50 +1,50 @@
-@import "styles/mat-selectors";
+@use '../../../../mat-selectors' as ms;
 
 adf-search-date-range {
-  .adf-search-date-range-container {
+    .adf-search-date-range-container {
-    margin-top: 20px;
+        margin-top: 20px;
-    padding: 10px;
+        padding: 10px;
 
-    .adf-search-date-range-form-field-select {
+        .adf-search-date-range-form-field-select {
-      width: 180px;
+            width: 180px;
-      min-width: 180px;
+            min-width: 180px;
-    }
-
-    &-row {
-      display: flex;
-      flex-direction: row;
-      padding-bottom: 21px;
-      align-items: center;
-
-      &-date {
-        margin-top: 8px;
-      }
-
-      #{$mat-select-arrow-wrapper} {
-        height: unset;
-      }
-
-      .adf-search-date-range-input-field {
-        width: 75px;
-      }
-
-      .adf-search-date-range-form-field {
-        padding-left: 10px;
-        flex: 1;
-        margin-bottom: 12px;
-
-        #{$mat-form-field-flex} {
-          align-items: center;
-
-          #{$mat-form-field-infix} {
-            padding: 0.375em 0 4px;
-          }
         }
-      }
-    }
-  }
 
-  .adf-search-widget-extra-width {
+        &-row {
-    max-width: 500px;
+            display: flex;
-  }
+            flex-direction: row;
+            padding-bottom: 21px;
+            align-items: center;
+
+            &-date {
+                margin-top: 8px;
+            }
+
+            #{ms.$mat-select-arrow-wrapper} {
+                height: unset;
+            }
+
+            .adf-search-date-range-input-field {
+                width: 75px;
+            }
+
+            .adf-search-date-range-form-field {
+                padding-left: 10px;
+                flex: 1;
+                margin-bottom: 12px;
+
+                #{ms.$mat-form-field-flex} {
+                    align-items: center;
+
+                    #{ms.$mat-form-field-infix} {
+                        padding: 0.375em 0 4px;
+                    }
+                }
+            }
+        }
+    }
+
+    .adf-search-widget-extra-width {
+        max-width: 500px;
+    }
 }

lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip-tabbed/search-facet-chip-tabbed.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../../../../mat-selectors.scss' as ms;
 
 adf-search-facet-chip-tabbed {
     .adf-search-filter-chip-tabbed {
@@ -6,7 +6,7 @@ adf-search-facet-chip-tabbed {
             pointer-events: none;
         }
 
-        #{$mat-evolution-chip-graphic} {
+        #{ms.$mat-evolution-chip-graphic} {
             display: none;
         }
     }
@@ -16,6 +16,6 @@ adf-search-facet-chip-tabbed {
     }
 }
 
-.adf-search-widget-extra-width#{$mat-menu-panel} {
+.adf-search-widget-extra-width#{ms.$mat-menu-panel} {
     max-width: 500px;
 }

lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.scss

@@ -1,7 +1,7 @@
-@import 'styles/mat-selectors';
+@use '../../../../mat-selectors.scss' as ms;
 
 .adf-search-filter-chip {
-    #{$mat-evolution-chip-graphic} {
+    #{ms.$mat-evolution-chip-graphic} {
         display: none;
     }
 

lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.scss

@@ -1,5 +1,5 @@
 @use '@angular/material' as mat;
-@import 'styles/mat-selectors';
+@use '../../../mat-selectors.scss' as ms;
 
 .adf-search-filter-chip,
 .adf-search-filter-chip-tabbed {
@@ -52,15 +52,15 @@
     }
 }
 
-.adf-search-filter-chip#{$mat-evolution-chip}#{$mat-standard-chip} {
+.adf-search-filter-chip#{ms.$mat-evolution-chip}#{ms.$mat-standard-chip} {
     margin-top: 0;
     margin-bottom: 0;
 }
 
-#{$mat-standard-chip} {
+#{ms.$mat-standard-chip} {
     -webkit-font-smoothing: unset;
 }
 
-#{$mat-evolution-chip-set} {
+#{ms.$mat-evolution-chip-set} {
     margin-top: -4px;
 }

lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.scss

@@ -1,5 +1,5 @@
 @use '@angular/material' as mat;
-@import 'styles/mat-selectors';
+@use '../../../mat-selectors.scss' as ms;
 
 .adf-filter {
     &-button:has(.adf-filter-icon) {
@@ -73,7 +73,7 @@
             padding-right: 16px;
             -webkit-font-smoothing: subpixel-antialiased;
 
-            #{$mat-button-label} {
+            #{ms.$mat-button-label} {
                 font-weight: unset;
             }
         }

lib/content-services/src/lib/search/components/search-filter-tabbed/search-filter-tabbed.component.scss

@@ -1,14 +1,14 @@
-@import 'styles/mat-selectors';
+@use '../../../mat-selectors.scss' as ms;
 
 adf-search-filter-tabbed {
-    #{$mat-tab-header} {
+    #{ms.$mat-tab-header} {
         margin-top: 0;
     }
 
     .adf-search-tab-label-active {
         border-bottom: 1px solid var(--theme-primary-color);
 
-        #{$mat-tab-label-text} {
+        #{ms.$mat-tab-label-text} {
             color: var(--adf-theme-foreground-secondary-text-color);
         }
     }

lib/content-services/src/lib/search/components/search-form/search-form.component.scss

@@ -1,5 +1,5 @@
 @use '@angular/material' as mat;
-@import 'styles/mat-selectors';
+@use '../../../mat-selectors.scss' as ms;
 
 .adf-search-form {
     &.adf-search-form-button {
@@ -28,7 +28,7 @@
         text-align: left;
     }
 
-    .adf-search-form-icon#{$mat-icon} {
+    .adf-search-form-icon#{ms.$mat-icon} {
         font-size: 24px;
         height: 24px;
         width: 24px;

lib/content-services/src/lib/search/components/search-properties/search-properties.component.scss

@@ -1,5 +1,5 @@
 /* stylelint-disable selector-class-pattern */
-@import 'styles/mat-selectors';
+@use '../../../mat-selectors.scss' as ms;
 
 adf-search-properties {
     .adf-search-properties-form {
@@ -9,39 +9,39 @@ adf-search-properties {
                 display: block;
             }
 
-            #{$mat-text-field-no-label} {
+            #{ms.$mat-text-field-no-label} {
-                #{$mat-form-field-infix} {
+                #{ms.$mat-form-field-infix} {
                     padding-top: 9px;
                     padding-bottom: 9px;
                     display: inline-block;
                 }
             }
 
-            #{$mat-form-field-infix} {
+            #{ms.$mat-form-field-infix} {
                 height: 37.5px;
                 min-height: 37.5px;
                 display: inline-block;
             }
 
-            #{$mat-select-trigger} {
+            #{ms.$mat-select-trigger} {
                 height: 17.5px;
             }
 
-            #{$mat-select-arrow-wrapper} {
+            #{ms.$mat-select-arrow-wrapper} {
                 width: 16px;
             }
 
-            #{$mat-line-ripple} {
+            #{ms.$mat-line-ripple} {
                 &::before {
                     display: none;
                 }
             }
 
-            #{$mat-select-arrow} {
+            #{ms.$mat-select-arrow} {
                 margin-left: 5px;
             }
 
-            #{$mat-form-field} {
+            #{ms.$mat-form-field} {
                 margin-bottom: 18px;
             }
         }
@@ -49,7 +49,7 @@ adf-search-properties {
         adf-search-chip-autocomplete-input {
             display: block;
 
-            #{$mat-text-field-outlined} {
+            #{ms.$mat-text-field-outlined} {
                 &-start,
                 &-end {
                     border-top: 1px solid var(--adf-theme-mat-grey-color-a400);
@@ -65,15 +65,15 @@ adf-search-properties {
                 }
             }
 
-            #{$mat-focused} {
+            #{ms.$mat-focused} {
-                #{$mat-text-field-outlined} {
+                #{ms.$mat-text-field-outlined} {
                     outline: 2px auto -webkit-focus-ring-color;
                 }
             }
 
-            #{$mat-form-field-appearance-outline} {
+            #{ms.$mat-form-field-appearance-outline} {
-                #{$mat-text-field-outlined-thick} {
+                #{ms.$mat-text-field-outlined-thick} {
-                    #{$mat-text-field-outlined} {
+                    #{ms.$mat-text-field-outlined} {
                         &-start,
                         &-end {
                             border-width: 1px;
@@ -82,11 +82,11 @@ adf-search-properties {
                 }
             }
 
-            #{$mat-notched-outline-leading} {
+            #{ms.$mat-notched-outline-leading} {
                 border-color: var(--adf-theme-foreground-text-color-027);
             }
 
-            #{$mat-notched-outline-trailing} {
+            #{ms.$mat-notched-outline-trailing} {
                 border-color: var(--adf-theme-foreground-text-color-027);
             }
         }
@@ -107,14 +107,14 @@ adf-search-properties {
 
     .adf-search-properties-file-size-operator,
     .adf-search-properties-file-size-unit {
-        #{$mat-form-field-infix} {
+        #{ms.$mat-form-field-infix} {
             border: 1px solid var(--adf-theme-mat-grey-color-a400);
             border-radius: 5px;
             padding: 9px;
         }
 
-        &#{$mat-focused} {
+        &#{ms.$mat-focused} {
-            #{$mat-form-field-infix} {
+            #{ms.$mat-form-field-infix} {
                 outline: 2px auto -webkit-focus-ring-color;
             }
         }

lib/content-services/src/lib/search/components/search-text/search-text.component.scss

@@ -1,5 +1,3 @@
-@import 'styles/mat-selectors';
-
 .adf-search-text {
     padding: 0;
 

lib/content-services/src/lib/tag/tags-creator/tags-creator.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../../mat-selectors.scss' as ms;
 
 adf-tags-creator {
     display: block;
@@ -77,7 +77,7 @@ adf-tags-creator {
                 background-color: inherit;
                 color: inherit;
 
-                &:not(#{$mat-list-item-disabled}):hover {
+                &:not(#{ms.$mat-list-item-disabled}):hover {
                     cursor: pointer;
                     background: var(--adf-theme-mat-grey-color-a200);
                 }
@@ -93,7 +93,7 @@ adf-tags-creator {
                 min-height: 62px;
             }
 
-            #{$mat-list-item-disabled} #{$mat-list-item-primary-text} {
+            #{ms.$mat-list-item-disabled} #{ms.$mat-list-item-primary-text} {
                 opacity: 1;
             }
         }

lib/content-services/src/lib/version-manager/version-upload.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../mat-selectors.scss' as ms;
 
 .adf-new-version-radio-group {
     display: inline-flex;
@@ -26,11 +26,11 @@
         width: 100%;
         float: right;
 
-        #{$mat-floating-label} {
+        #{ms.$mat-floating-label} {
             padding-bottom: 10px;
         }
 
-        #{$mat-form-field-infix} {
+        #{ms.$mat-form-field-infix} {
             padding-top: 12px;
             padding-bottom: 0;
         }

lib/core/feature-flags/src/lib/components/flags/flags.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../../mat-selectors' as ms;
 
 /* stylelint-disable selector-class-pattern */
 .adf-feature-flags-overrides-header {
@@ -36,8 +36,8 @@
         width: 100%;
         display: flex;
 
-        #{$mat-form-field-subscript-wrapper},
+        #{ms.$mat-form-field-subscript-wrapper},
-        #{$mat-line-ripple} {
+        #{ms.$mat-line-ripple} {
             display: none;
         }
     }

lib/core/feature-flags/src/lib/mat-selectors.scss

@@ -0,0 +1,2 @@
+$mat-form-field-subscript-wrapper: '.mat-mdc-form-field-subscript-wrapper';
+$mat-line-ripple: '.mdc-line-ripple';

lib/core/shell/src/lib/components/shell/shell.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/flex';
+@use '../../styles/flex' as flex;
 
 .app-shell {
     display: flex;
@@ -23,13 +23,13 @@
     }
 }
 
-@include layout-bp(lt-sm) {
+@include flex.layout-bp(lt-sm) {
     .adf-app-title {
         display: none;
     }
 }
 
-@media screen and (max-width: 719px) {
+@media screen and (width <= 719px) {
     .adf-app-logo {
         display: none;
     }

lib/core/shell/src/lib/styles/flex.scss

@@ -0,0 +1,81 @@
+@charset "UTF-8";
+/* stylelint-disable */
+
+// Non-overlapping Material Design breakpoints
+// @type map
+$breakpoints: (
+    xs: (
+        begin: 0,
+        end: 599.9px
+    ),
+    sm: (
+        begin: 600px,
+        end: 959.9px
+    ),
+    md: (
+        begin: 960px,
+        end: 1279.9px
+    ),
+    lg: (
+        begin: 1280px,
+        end: 1919.9px
+    ),
+    xl: (
+        begin: 1920px,
+        end: 4999.99px
+    )
+) !default;
+
+// Overlapping breakpoints that are greater than defined
+// Material Design breakpoints
+// @type map
+$overlapping-gt: (
+    gt-xs: 600px,
+    gt-sm: 960px,
+    gt-md: 1280px,
+    gt-lg: 1920px
+) !default;
+
+// Overlapping breakpoints that are less than defined
+// Material Design breakpoints
+// @type map
+$overlapping-lt: (
+    lt-sm: 599.9px,
+    lt-md: 959.9px,
+    lt-lg: 1279.9px,
+    lt-xl: 1919.9px
+) !default;
+
+// Media Query Mixin, takes a breakpoint and returns a wrapping
+// media query statement
+// e.g.
+//
+// @include layout-bp(xs) {
+//   background-color: red;
+// }
+//
+// becomes
+//
+// @media (min-width: 0px) and (max-width: 599px) {
+//   background-color: red;
+// }
+@mixin layout-bp($bp) {
+    @if map-has-key($breakpoints, $bp) {
+        $min: map-get(map-get($breakpoints, $bp), begin);
+        $max: map-get(map-get($breakpoints, $bp), end);
+        @media (min-width: $min) and (max-width: $max) {
+            @content;
+        }
+    } @else if map-has-key($overlapping-gt, $bp) {
+        $min: map-get($overlapping-gt, $bp);
+        @media (min-width: $min) {
+            @content;
+        }
+    } @else if map-has-key($overlapping-lt, $bp) {
+        $max: map-get($overlapping-lt, $bp);
+        @media (max-width: $max) {
+            @content;
+        }
+    }
+}
+/* stylelint-enable */

lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../../../styles/mat-selectors' as ms;
 
 .adf {
     &-array-item-icon {
@@ -22,7 +22,7 @@
     }
 
     &-array-item-more-chip-container {
-        &#{$mat-card} {
+        &#{ms.$mat-card} {
             box-shadow: none;
             max-height: 300px;
             overflow-y: auto;
@@ -30,7 +30,7 @@
     }
 
     &-property-value {
-        #{$mat-chip-list} {
+        #{ms.$mat-chip-list} {
             padding-top: 6px;
         }
     }
@@ -45,7 +45,7 @@
         border-color: var(--adf-theme-foreground-divider-color);
         border-radius: 0;
 
-        #{$mat-chip}:hover {
+        #{ms.$mat-chip}:hover {
             cursor: pointer;
         }
     }

lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../../../styles/mat-selectors' as ms;
 
 .adf-card-view-dateitem {
     .adf-property-value {
@@ -50,7 +50,7 @@
             align-items: center;
             justify-content: space-between;
 
-            #{$mat-icon} {
+            #{ms.$mat-icon} {
                 opacity: 0.5;
 
                 &:hover {

lib/core/src/lib/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../../../styles/mat-selectors' as ms;
 
 .adf-card-view-key-value-pairs-item {
     .adf-property-col-key {
@@ -28,19 +28,19 @@
                 justify-content: center;
             }
 
-            &__add-btn#{$mat-button} {
+            &__add-btn#{ms.$mat-button} {
                 margin-bottom: 20px;
             }
 
             &__read-only {
                 padding-bottom: 20px;
 
-                #{$mat-table} {
+                #{ms.$mat-table} {
                     box-shadow: none;
                 }
 
-                #{$mat-header-row},
+                #{ms.$mat-header-row},
-                #{$mat-row} {
+                #{ms.$mat-row} {
                     padding: 0;
                 }
             }

lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../../../styles/mat-selectors' as ms;
 
 .adf-card-view-selectitem {
     .adf-property-value {
@@ -17,23 +17,23 @@
     .adf-property-value-editable.adf-property-value-editable {
         padding-left: 0;
 
-        #{$mat-text-field-no-label} #{$mat-form-field-infix} {
+        #{ms.$mat-text-field-no-label} #{ms.$mat-form-field-infix} {
             padding: 0;
         }
 
-        #{$mat-form-field-wrapper} {
+        #{ms.$mat-form-field-wrapper} {
             background-color: unset;
         }
 
-        #{$mat-select} {
+        #{ms.$mat-select} {
             margin-top: 0;
             border-radius: 6px;
 
-            #{$mat-select-value} {
+            #{ms.$mat-select-value} {
                 color: var(--adf-metadata-action-button-clear-color);
             }
 
-            #{$mat-select-trigger} {
+            #{ms.$mat-select-trigger} {
                 padding: 6px 12px 6px 6px;
             }
         }
@@ -43,7 +43,7 @@
         padding-left: 10px;
     }
 
-    #{$mat-form-field-subscript-wrapper} {
+    #{ms.$mat-form-field-subscript-wrapper} {
         display: none;
     }
 
@@ -53,7 +53,7 @@
         color: var(--adf-metadata-property-panel-title-color);
     }
 
-    #{$mat-line-ripple} {
+    #{ms.$mat-line-ripple} {
         display: none;
     }
 

lib/core/src/lib/card-view/components/card-view-selectitem/select-filter-input/select-filter-input.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../../../../styles/mat-selectors' as ms;
 
 $select-filter-height: 4em !default;
 
@@ -17,7 +17,7 @@ $select-filter-height: 4em !default;
         background: var(--adf-theme-background-card-color);
     }
 
-    #{$mat-form-field} {
+    #{ms.$mat-form-field} {
         width: 100%;
     }
 
@@ -26,7 +26,7 @@ $select-filter-height: 4em !default;
     }
 }
 
-#{$mat-select-panel}.adf-select-filter {
+#{ms.$mat-select-panel}.adf-select-filter {
     transform: none;
     overflow-x: hidden;
     max-height: calc(256px + #{$select-filter-height});

lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../../../styles/mat-selectors' as ms;
 
 .adf-card-view-textitem {
     .adf-textitem-error {
@@ -29,20 +29,20 @@
             color: var(--adf-theme-foreground-text-color);
         }
 
-        #{$mat-button-touch-target} {
+        #{ms.$mat-button-touch-target} {
             width: 30px;
             height: 30px;
         }
     }
 
-    #{$mat-form-field-icon-suffix} {
+    #{ms.$mat-form-field-icon-suffix} {
         position: absolute;
         right: 1px;
         bottom: 7px;
     }
 
     .adf-textitem-chip-list-container {
-        #{$mat-form-field-label} {
+        #{ms.$mat-form-field-label} {
             margin-top: 6px;
         }
     }
@@ -56,7 +56,7 @@
         }
 
         .adf-property-field {
-            #{$mat-input-element} {
+            #{ms.$mat-input-element} {
                 color: var(--theme-primary-color);
                 cursor: pointer;
             }
@@ -86,7 +86,7 @@
         white-space: nowrap;
     }
 
-    #{$mat-line-ripple} {
+    #{ms.$mat-line-ripple} {
         &::before,
         &::after {
             display: none;

lib/core/src/lib/card-view/components/card-view/card-view.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../../../styles/mat-selectors' as ms;
 
 .adf-property-list {
     border: unset;
@@ -28,11 +28,11 @@
         .adf-property-field {
             width: 100%;
 
-            #{mat-form-field-underline} {
+            #{ms.$mat-form-field-underline} {
                 display: none;
             }
 
-            #{mat-input-element} {
+            #{ms.$mat-input-element} {
                 text-overflow: ellipsis;
                 color: var(--adf-metadata-property-panel-title-color);
                 padding: 6px 0;
@@ -40,28 +40,28 @@
             }
 
             .adf-card-view__key-value-pairs__row {
-                #{$mat-input-element} {
+                #{ms.$mat-input-element} {
                     margin-top: 0;
                     padding-left: 12px;
                 }
             }
 
-            #{$mat-form-text-field-infix} {
+            #{ms.$mat-form-text-field-infix} {
                 border-top-width: 0;
             }
 
-            #{$mat-form-field-flex} {
+            #{ms.$mat-form-field-flex} {
                 padding-top: 0;
             }
 
-            #{$mat-form-field-wrapper} {
+            #{ms.$mat-form-field-wrapper} {
                 background-color: inherit;
                 padding-bottom: 0;
                 padding-left: 0;
                 padding-right: 0;
             }
 
-            #{$mat-form-field-label} {
+            #{ms.$mat-form-field-label} {
                 padding: 0;
                 justify-content: center;
                 display: flex;
@@ -92,7 +92,7 @@
             height: 32px;
             padding-left: 10px;
 
-            #{$mat-input-element} {
+            #{ms.$mat-input-element} {
                 color: var(--adf-metadata-action-button-clear-color);
                 padding: 5px 0 6px 12px;
                 margin: 5px 0 0;
@@ -102,7 +102,7 @@
         &.adf-property-readonly-value {
             color: var(--adf-metadata-property-panel-label-color);
 
-            #{$mat-input-element} {
+            #{ms.$mat-input-element} {
                 color: var(--adf-metadata-property-panel-label-color);
             }
         }

lib/core/src/lib/comments/comments.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../styles/mat-selectors' as ms;
 
 adf-comments {
     .adf-comments-container {
@@ -10,11 +10,11 @@ adf-comments {
             width: 100%;
             padding-bottom: 8px;
 
-            #{$mat-form-field} {
+            #{ms.$mat-form-field} {
                 width: 100%;
 
-                &#{$mat-form-field-invalid} {
+                &#{ms.$mat-form-field-invalid} {
-                    #{$mat-input-element} {
+                    #{ms.$mat-input-element} {
                         &::placeholder,
                         &:focus::placeholder {
                             color: var(--theme-warn-color);
@@ -23,15 +23,15 @@ adf-comments {
                 }
             }
 
-            #{$mat-form-field-wrapper} {
+            #{ms.$mat-form-field-wrapper} {
-                #{$mat-form-field-flex} {
+                #{ms.$mat-form-field-flex} {
-                    #{$mat-form-field-infix} {
+                    #{ms.$mat-form-field-infix} {
                         padding-bottom: 2px;
                         padding-top: 25px;
                     }
                 }
 
-                #{$mat-input-element} {
+                #{ms.$mat-input-element} {
                     &:focus::placeholder {
                         color: var(--theme-primary-color);
                         -webkit-font-smoothing: subpixel-antialiased;
@@ -62,7 +62,7 @@ adf-comments {
         justify-content: flex-end;
     }
 
-    #{$mat-list-item-unscoped-content} {
+    #{ms.$mat-list-item-unscoped-content} {
         display: flex;
         padding: 0 16px;
     }

lib/core/src/lib/datatable/components/datatable/datatable.component.scss

@@ -1,7 +1,7 @@
 /* stylelint-disable no-descending-specificity */
 @use '@angular/material' as mat;
-@import '../../../styles/mixins';
+@use '../../../styles/mixins' as mixins;
-@import 'styles/mat-selectors';
+@use '../../../styles/mat-selectors' as ms;
 
 $data-table-header-font-size: var(--theme-caption-font-size) !default;
 $data-table-header-sort-icon-size: var(--theme-subheading-2-font-size) !default;
@@ -53,7 +53,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
 }
 
 .adf-datatable-list,
-#{$cdk-drag-preview} {
+#{ms.$cdk-drag-preview} {
     display: flex;
     flex-direction: column;
     background-color: var(--adf-theme-background-card-color);
@@ -145,14 +145,14 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
         }
 
         .adf-datatable-row {
-            @include material-animation-default(0.28s);
+            @include mixins.material-animation-default(0.28s);
 
             transition-property: background-color;
             border-top: 1px solid var(--adf-theme-foreground-text-color-007);
             min-height: $data-table-row-height;
             cursor: pointer;
 
-            @include adf-no-select;
+            @include mixins.adf-no-select;
 
             &.adf-is-selected,
             &.adf-is-selected:hover {
@@ -238,7 +238,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
         }
 
         button {
-            #{$mat-icon} {
+            #{ms.$mat-icon} {
                 margin-top: -10px;
             }
         }
@@ -512,7 +512,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
 }
 
 .adf-datatable-cell-header {
-    @include adf-no-select;
+    @include mixins.adf-no-select;
 
     position: relative;
     display: flex;
@@ -532,7 +532,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
     }
 
     &.adf-sortable {
-        @include adf-no-select;
+        @include mixins.adf-no-select;
 
         display: flex;
         align-items: center;
@@ -544,7 +544,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
         padding-right: 0.25rem;
 
         &::after {
-            @include typo-icon;
+            @include mixins.typo-icon;
 
             font-size: $data-table-header-sort-icon-size;
             content: '\e5d8';
@@ -626,7 +626,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
     }
 }
 
-#{$cdk-drag-preview} {
+#{ms.$cdk-drag-preview} {
     min-height: $data-table-row-height;
     display: flex;
     flex-direction: row;
@@ -646,7 +646,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
 }
 
 /* [Accessibility] Material checkbox labels */
-.adf-checkbox-sr-only #{$mat-checkbox-label} {
+.adf-checkbox-sr-only #{ms.$mat-checkbox-label} {
     position: absolute;
     width: 1px;
     height: 1px;
@@ -692,7 +692,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
 }
 
 .adf-datatable--empty {
-    @include flex-column;
+    @include mixins.flex-column;
 
     justify-content: center;
     align-items: center;
@@ -719,7 +719,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
     }
 
     .adf-datatable-body {
-        @include flex-column;
+        @include mixins.flex-column;
 
         justify-content: center;
         align-items: center;

lib/core/src/lib/dialogs/edit-json/edit-json.dialog.scss

@@ -1,7 +1,7 @@
-@import 'styles/mat-selectors';
+@use '../../styles/mat-selectors' as ms;
 
 .adf-edit-json-dialog {
-    #{$mat-dialog-content} {
+    #{ms.$mat-dialog-content} {
         height: 300px;
         overflow: hidden;
     }

lib/core/src/lib/dynamic-chip-list/dynamic-chip-list.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../styles/mat-selectors' as ms;
 
 .adf-dynamic-chip-list-container {
     display: flex;
@@ -60,10 +60,10 @@
         margin-bottom: 0;
         padding: 6px 11px;
 
-        #{$mat-evolution-chip-action} {
+        #{ms.$mat-evolution-chip-action} {
             padding: 2px 12px;
 
-            #{$mat-evolution-chip-text-label} {
+            #{ms.$mat-evolution-chip-text-label} {
                 color: var(--adf-theme-foreground-text-color-054);
             }
         }

lib/core/src/lib/form/components/form-renderer.component.scss

@@ -1,6 +1,6 @@
 /* stylelint-disable selector-class-pattern */
-@import 'styles/flex';
+@use '../../styles/flex' as flex;
-@import 'styles/mat-selectors';
+@use '../../styles/mat-selectors' as ms;
 
 .adf-hidden {
     display: none;
@@ -18,7 +18,7 @@
         display: grid;
 
         &-column-view {
-            @include layout-bp(lt-md) {
+            @include flex.layout-bp(lt-md) {
                 display: flow;
             }
 
@@ -47,7 +47,7 @@
         }
     }
 
-    @include layout-bp(lt-md) {
+    @include flex.layout-bp(lt-md) {
         .adf-grid-list-item {
             flex: 1 0 100%;
         }
@@ -75,10 +75,10 @@
         top: 1.8em;
     }
 
-    #{$mat-focused} {
+    #{ms.$mat-focused} {
         width: 100%;
 
-        #{$mat-text-field-focused} {
+        #{ms.$mat-text-field-focused} {
             label {
                 color: var(--theme-primary-color);
             }
@@ -89,12 +89,12 @@
             background-color: 300ms cubic-bezier(0.55, 0, 0.55, 0.2);
         }
 
-        #{$mat-form-field-prefix} {
+        #{ms.$mat-form-field-prefix} {
             color: var(--theme-primary-color);
         }
     }
 
-    #{$mat-grid-tile} {
+    #{ms.$mat-grid-tile} {
         overflow: visible;
         width: 80%;
     }
@@ -110,16 +110,16 @@
         max-width: 100%;
         max-height: 100%;
 
-        & #{$mat-card} {
+        & #{ms.$mat-card} {
             padding: 16px 24px;
             overflow: hidden;
         }
 
-        & #{$mat-card-header-text} {
+        & #{ms.$mat-card-header-text} {
             margin: 0;
         }
 
-        & #{$mat-tab-body-content} {
+        & #{ms.$mat-tab-body-content} {
             overflow: hidden;
         }
 
@@ -132,13 +132,13 @@
             text-transform: uppercase;
         }
 
-        & #{$mat-tab-ink-bar} {
+        & #{ms.$mat-tab-ink-bar} {
-            #{$mat-tab-indicator-underline} {
+            #{ms.$mat-tab-indicator-underline} {
                 border-top-width: 4px;
             }
         }
 
-        & #{$mat-form-field-wrapper} {
+        & #{ms.$mat-form-field-wrapper} {
             margin: 0 12px 0 0;
         }
     }
@@ -201,7 +201,7 @@
         padding-bottom: 25px;
         padding-right: 25px;
 
-        & #{$mat-button} {
+        & #{ms.$mat-button} {
             height: 36px;
             border-radius: 5px;
             width: auto;
@@ -210,7 +210,7 @@
             white-space: nowrap;
         }
 
-        & #{$mat-button-label} {
+        & #{ms.$mat-button-label} {
             min-width: 58px;
         }
     }
@@ -223,7 +223,7 @@
         }
     }
 
-    &-left-label-input-container #{$mat-form-field-label} {
+    &-left-label-input-container #{ms.$mat-form-field-label} {
         top: auto;
         bottom: 0;
     }
@@ -237,7 +237,7 @@
 form-field {
     width: 100%;
 
-    #{$mat-input-element} {
+    #{ms.$mat-input-element} {
         font-size: var(--theme-body-2-font-size);
         padding-top: 8px;
         line-height: normal;

lib/core/src/lib/form/components/inplace-form-input/inplace-form-input.component.scss

@@ -1,5 +1,5 @@
 /* stylelint-disable selector-class-pattern */
-@import 'styles/mat-selectors';
+@use '../../../styles/mat-selectors' as ms;
 
 $adf-inplace-input-padding: 7px;
 
@@ -10,16 +10,16 @@ $adf-inplace-input-padding: 7px;
         }
     }
 
-    #{$mat-line-ripple} {
+    #{ms.$mat-line-ripple} {
         display: none;
     }
 
-    #{$mat-form-text-field-infix} {
+    #{ms.$mat-form-text-field-infix} {
         display: flex;
         border-top: 0;
     }
 
-    #{$mat-form-field-label} {
+    #{ms.$mat-form-field-label} {
         padding: $adf-inplace-input-padding;
     }
 

lib/core/src/lib/form/components/widgets/amount/amount.widget.scss

@@ -1,5 +1,5 @@
 /* stylelint-disable selector-class-pattern */
-@import 'styles/mat-selectors';
+@use '../../../../styles/mat-selectors' as ms;
 
 .adf {
     &-amount-widget {
@@ -14,17 +14,17 @@
     &-amount-widget__input {
         margin-top: -15px;
 
-        #{$mat-focused} {
+        #{ms.$mat-focused} {
             transition: none;
         }
 
-        #{$mat-form-field-prefix} {
+        #{ms.$mat-form-field-prefix} {
             padding-top: 16px;
             padding-bottom: 16px;
             align-self: flex-end;
         }
 
-        &:not(#{$mat-focused}):not(#{$mat-form-field-invalid}) {
+        &:not(#{ms.$mat-focused}):not(#{ms.$mat-form-field-invalid}) {
             .adf-amount-widget__prefix-spacing {
                 color: var(--adf-theme-foreground-secondary-text-color);
             }

lib/core/src/lib/form/components/widgets/date-time/date-time.widget.scss

@@ -1,27 +1,27 @@
 /* stylelint-disable selector-class-pattern */
-@import 'styles/mat-selectors';
+@use '../../../../styles/mat-selectors' as ms;
 
 .adf {
     &-date-time-widget {
-        #{$mat-form-field-suffix} {
+        #{ms.$mat-form-field-suffix} {
             top: 26px;
         }
 
-        #{$mat-form-field-label} {
+        #{ms.$mat-form-field-label} {
             top: 20px;
         }
     }
 
     &-left-label-input-datepicker {
-        #{$mat-form-field-suffix} {
+        #{ms.$mat-form-field-suffix} {
             top: 0;
         }
-        #{$mat-form-text-field-infix} {
+        #{ms.$mat-form-text-field-infix} {
             width: 100%;
         }
     }
 }
 
-.mat-datetimepicker-toggle {
+#{ms.$mat-datetimepicker-toggle} {
     color: var(--adf-theme-foreground-icon-color);
 }

lib/core/src/lib/form/components/widgets/form.theme.scss

@@ -1,5 +1,6 @@
 /* stylelint-disable no-descending-specificity */
-@import 'styles/mat-selectors';
+/* stylelint-disable declaration-no-important */
+@use '../../../styles/mat-selectors' as ms;
 
 ul > li > form-field > .adf-focus {
     .adf-label {
@@ -36,15 +37,15 @@ ul > li > form-field > .adf-focus {
     }
 
     &-invalid {
-        #{$mat-checkbox} {
+        #{ms.$mat-checkbox} {
             padding-bottom: 12px;
         }
 
-        #{$mat-line-ripple} {
+        #{ms.$mat-line-ripple} {
             background-color: var(--theme-warn-color) !important;
         }
 
-        #{$mat-select} {
+        #{ms.$mat-select} {
             &-arrow {
                 color: var(--adf-theme-foreground-secondary-text-color) !important;
             }
@@ -54,7 +55,7 @@ ul > li > form-field > .adf-focus {
             border-color: var(--theme-warn-color);
         }
 
-        #{$mat-form-field-prefix} {
+        #{ms.$mat-form-field-prefix} {
             color: var(--adf-theme-foreground-secondary-text-color);
         }
 
@@ -71,9 +72,9 @@ ul > li > form-field > .adf-focus {
 /* query for Microsoft IE 11 */
 @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
     adf-form-field {
-        #{$mat-input-element},
+        #{ms.$mat-input-element},
-        #{$mat-select},
+        #{ms.$mat-select},
-        #{$mat-form-field} {
+        #{ms.$mat-form-field} {
             display: block !important;
         }
     }

lib/core/src/lib/form/components/widgets/text/text.widget.scss

@@ -1,11 +1,11 @@
 /* stylelint-disable selector-class-pattern */
-@import 'styles/mat-selectors';
+@use '../../../../styles/mat-selectors' as ms;
 
 .adf {
     &-text-widget {
         width: 100%;
 
-        #{$mat-form-field-label} {
+        #{ms.$mat-form-field-label} {
             top: 20px;
         }
     }

lib/core/src/lib/identity-user-info/identity-user-info.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/flex';
+@use '../styles/flex' as flex;
 
 .adf {
     &-userinfo-container {
@@ -14,7 +14,7 @@
     &-userinfo-name {
         padding: 0 5px;
 
-        @include layout-bp(lt-md) {
+        @include flex.layout-bp(lt-md) {
             display: none;
         }
     }
@@ -65,7 +65,7 @@
         display: flex;
         flex-direction: column;
 
-        @include layout-bp(lt-sm) {
+        @include flex.layout-bp(lt-sm) {
             padding: 10px;
         }
     }

lib/core/src/lib/info-drawer/info-drawer-layout.component.scss

@@ -1,5 +1,5 @@
-@import '../styles/mixins';
+@use '../styles/mixins' as mixins;
-@import 'styles/mat-selectors';
+@use '../styles/mat-selectors' as ms;
 
 $adf-info-drawer-layout-title-font-size: var(--theme-title-font-size) !default;
 $adf-info-drawer-icon-size: 48px !default;
@@ -7,25 +7,25 @@ $adf-info-drawer-icon-size-half: 24px !default;
 
 .adf {
     &-info-drawer {
-        @include flex-column;
+        @include mixins.flex-column;
     }
 
     &-info-drawer-layout {
-        @include flex-column;
+        @include mixins.flex-column;
 
         overflow: auto;
         width: 100%;
         background-color: var(--theme-card-background-color);
         box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.27);
 
-        & #{$mat-tab-label-text} {
+        & #{ms.$mat-tab-label-text} {
             font-weight: bold;
             text-align: left;
             opacity: 1;
         }
 
-        #{$mat-tab-label}#{$mat-tab-label-active} {
+        #{ms.$mat-tab-label}#{ms.$mat-tab-label-active} {
-            & #{$mat-tab-label-text} {
+            & #{ms.$mat-tab-label-text} {
                 color: inherit;
             }
         }
@@ -75,7 +75,7 @@ $adf-info-drawer-icon-size-half: 24px !default;
                 margin-bottom: 0;
             }
 
-            .adf-info-drawer-tabs #{$mat-tab-body-content} {
+            .adf-info-drawer-tabs #{ms.$mat-tab-body-content} {
                 .adf-manage-versions-empty,
                 .adf-manage-versions-no-permission {
                     margin: 0;

lib/core/src/lib/info-drawer/info-drawer.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../styles/mat-selectors' as ms;
 
 .adf {
     &-info-drawer {
@@ -7,7 +7,7 @@
             margin: 0;
         }
 
-        #{$mat-tab-label-text} {
+        #{ms.$mat-tab-label-text} {
             min-width: 0;
         }
 
@@ -31,28 +31,28 @@
                 }
 
                 .adf-info-drawer-tabs {
-                    & #{$mat-tab-body-content} > * {
+                    & #{ms.$mat-tab-body-content} > * {
                         margin-bottom: 20px;
                         display: block;
                     }
 
-                    & #{$mat-tab-body-content} > *:last-child {
+                    & #{ms.$mat-tab-body-content} > *:last-child {
                         margin-bottom: 0;
                     }
 
-                    #{$mat-tab-label-text} {
+                    #{ms.$mat-tab-label-text} {
                         flex-grow: 1;
 
-                        #{$mat-icon} + span {
+                        #{ms.$mat-icon} + span {
                             padding-left: 5px;
                         }
                     }
 
-                    #{$mat-tab-body} {
+                    #{ms.$mat-tab-body} {
                         overflow-y: hidden;
                     }
 
-                    #{$mat-tab-body-content} {
+                    #{ms.$mat-tab-body-content} {
                         /* stylelint-disable */
                         overflow: auto;
                         /* stylelint-enable */
@@ -65,7 +65,7 @@
 
 /* stylelint-disable-next-line no-descending-specificity */
 .adf-info-drawer-tabs {
-    #{$mat-tab-label-container} {
+    #{ms.$mat-tab-label-container} {
         border-bottom: 1px solid rgba(0, 0, 0, 0.12);
     }
 
@@ -75,7 +75,7 @@
         border-bottom: unset;
         opacity: 1;
 
-        &#{$mat-tab-label} {
+        &#{ms.$mat-tab-label} {
             flex-grow: 1;
         }
 

lib/core/src/lib/layout/components/header/header.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/flex';
+@use '../../../styles/flex' as flex;
 
 adf-layout-header .adf-toolbar-container-row {
     color: var(--theme-header-text-color);
@@ -51,7 +51,7 @@ adf-layout-header .adf-toolbar-container-row {
         padding: 0;
     }
 
-    @include layout-bp(lt-sm) {
+    @include flex.layout-bp(lt-sm) {
         .adf-app-logo,
         .adf-app-title {
             display: none;

lib/core/src/lib/layout/components/layout-container/layout-container.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../../../styles/mat-selectors' as ms;
 
 adf-layout-container {
     display: block;
@@ -34,8 +34,8 @@ adf-layout-container {
 }
 
 /* stylelint-disable selector-class-pattern, declaration-no-important */
-#{$mat-sidenav-content},
+#{ms.$mat-sidenav-content},
-#{$mat-drawer-transition} #{$mat-drawer-content} {
+#{ms.$mat-drawer-transition} #{ms.$mat-drawer-content} {
     margin-left: 0 !important;
     margin-right: 0 !important;
     transform: unset !important;

lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.scss

@@ -1,6 +1,6 @@
 @use '../../../styles/flex' as flex;
-@import '../../../styles/mixins';
+@use '../../../styles/mixins' as mixins;
-@import 'styles/mat-selectors';
+@use '../../../styles/mat-selectors' as ms;
 
 .adf-sidenav-layout {
     &-full-space {
@@ -13,7 +13,7 @@
         width: 100%;
     }
 
-    @include flex-column;
+    @include mixins.flex-column;
 
     width: 100%;
 
@@ -25,15 +25,15 @@
         flex: 0 0;
     }
 
-    #{$mat-drawer-content} {
+    #{ms.$mat-drawer-content} {
-        @include flex-column;
+        @include mixins.flex-column;
 
         position: unset;
         overflow: auto;
     }
 
     .adf-layout-container-sidenav {
-        #{$mat-icon} {
+        #{ms.$mat-icon} {
             vertical-align: sub;
         }
     }

lib/core/src/lib/login/components/login/login.component.scss

@@ -1,8 +1,8 @@
-@import '../../../styles/mixins';
+@use '../../../styles/mixins' as mixins;
-@import 'styles/mat-selectors';
+@use '../../../styles/mat-selectors' as ms;
 
 .adf-login {
-    @include flex-column;
+    @include mixins.flex-column;
 }
 
 .adf-login-content {
@@ -204,7 +204,7 @@
             padding-bottom: 16px;
             font-size: var(--theme-subheading-2-font-size);
 
-            #{$mat-form-field-infix} {
+            #{ms.$mat-form-field-infix} {
                 min-height: 0;
                 padding-bottom: 3px;
                 padding-top: 20px;
@@ -213,7 +213,7 @@
                     font-size: var(--theme-subheading-2-font-size);
                 }
 
-                #{$mat-floating-label-required} {
+                #{ms.$mat-floating-label-required} {
                     &::after {
                         font-size: var(--theme-subheading-2-font-size);
                     }

lib/core/src/lib/notifications/components/notification-history.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../../styles/mat-selectors' as ms;
 
 $notification-item-height: 72px;
 
@@ -8,7 +8,7 @@ $notification-item-height: 72px;
         -webkit-font-smoothing: subpixel-antialiased;
     }
 
-    &-notification-history-menu_button#{$mat-button} {
+    &-notification-history-menu_button#{ms.$mat-button} {
         border-radius: 90%;
         padding: 0;
         min-width: 40px;
@@ -154,11 +154,11 @@ $notification-item-height: 72px;
     }
 }
 
-#{$mat-menu-panel}.adf-notification-history-menu.adf-notification-history-menu-panel {
+#{ms.$mat-menu-panel}.adf-notification-history-menu.adf-notification-history-menu-panel {
     min-width: 320px;
     max-height: 500px;
 
-    #{$mat-menu-content} {
+    #{ms.$mat-menu-content} {
         padding: 0;
     }
 }

lib/core/src/lib/search-text/search-text-input.component.scss

@@ -1,11 +1,11 @@
-@import 'styles/mat-selectors';
+@use '../styles/mat-selectors' as ms;
 
 .adf-search-container {
     &:has(.adf-input-form-field-divider) {
         overflow: hidden;
     }
 
-    #{$mat-form-field-subscript-wrapper} {
+    #{ms.$mat-form-field-subscript-wrapper} {
         display: none;
     }
 

lib/core/src/lib/snackbar-content/snackbar-content.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../styles/mat-selectors' as ms;
 
 :host {
     display: flex;
@@ -20,7 +20,7 @@
         display: flex;
         flex-direction: row;
 
-        #{$mat-button} {
+        #{ms.$mat-button} {
             min-width: 0;
             margin: -8px;
             height: unset;

lib/core/src/lib/styles/_mat-selectors.scss

@@ -186,3 +186,13 @@ $mat-checkbox-selected: '.mdc-checkbox--selected';
 $mat-checkbox-ripple: '.mat-mdc-checkbox-ripple';
 $mat-list-base: '.mat-mdc-list-base';
 $mat-card-header: '.mat-mdc-card-header';
+$mat-datetimepicker-calendar: '.mat-datetimepicker-calendar';
+$mat-datetimepicker-calendar-header: '.mat-datetimepicker-calendar-header';
+$mat-datetimepicker-calendar-table-header: '.mat-datetimepicker-calendar-table-header';
+$mat-datetimepicker-calendar-header-year: '.mat-datetimepicker-calendar-header-year';
+$mat-datetimepicker-calendar-header-date: '.mat-datetimepicker-calendar-header-date';
+$mat-datetimepicker-calendar-header-time: '.mat-datetimepicker-calendar-header-time';
+$mat-datetimepicker-calendar-content: '.mat-datetimepicker-calendar-content';
+$mat-datetimepicker-calendar-body-disabled: '.mat-datetimepicker-calendar-body-disabled';
+$mat-datetimepicker-toggle: '.mat-datetimepicker-toggle';
+$mat-form-field-underline: '.mat-form-field-underline';

lib/core/src/lib/styles/material.theme.scss

@@ -1,18 +1,18 @@
-@import './mat-selectors';
+@use './mat-selectors' as ms;
 
 @mixin adf-material-theme() {
-    #{$mat-expansion-panel} {
+    #{ms.$mat-expansion-panel} {
-        & #{$mat-expansion-panel-header}.cdk-keyboard-focused,
+        & #{ms.$mat-expansion-panel-header}.cdk-keyboard-focused,
-        & #{$mat-expansion-panel-header}.cdk-program-focused,
+        & #{ms.$mat-expansion-panel-header}.cdk-program-focused,
-        &:not(#{$mat-expanded}) #{$mat-expansion-panel-header}:hover {
+        &:not(#{ms.$mat-expanded}) #{ms.$mat-expansion-panel-header}:hover {
             &:not([aria-disabled='true']) {
                 background-color: var(--adf-theme-background-hover-color);
             }
         }
     }
 
-    #{$mat-calendar} {
+    #{ms.$mat-calendar} {
-        #{$mat-calendar-header} {
+        #{ms.$mat-calendar-header} {
             button {
                 color: var(--adf-theme-foreground-text-color-087);
 
@@ -22,68 +22,69 @@
             }
         }
 
-        #{$mat-calendar-content} {
+        #{ms.$mat-calendar-content} {
-            #{$mat-calendar-table-header} th {
+            #{ms.$mat-calendar-table-header} th {
                 color: var(--adf-theme-foreground-text-color-054);
             }
 
-            #{$mat-calendar-body-disabled} > div {
+            #{ms.$mat-calendar-body-disabled} > div {
+                /* stylelint-disable-next-line declaration-no-important */
                 color: var(--adf-theme-foreground-text-color-054) !important;
             }
         }
     }
 
-    .mat-datetimepicker-calendar {
+    #{ms.$mat-datetimepicker-calendar} {
-        .mat-datetimepicker-calendar-header {
+        #{ms.$mat-datetimepicker-calendar-header} {
-            .mat-datetimepicker-calendar-header-year {
+            #{ms.$mat-datetimepicker-calendar-header-year} {
                 opacity: 1;
             }
 
-            .mat-datetimepicker-calendar-header-date {
+            #{ms.$mat-datetimepicker-calendar-header-date} {
                 opacity: 1;
             }
 
-            .mat-datetimepicker-calendar-header-time {
+            #{ms.$mat-datetimepicker-calendar-header-time} {
                 opacity: 1;
             }
         }
 
-        .mat-datetimepicker-calendar-content {
+        #{ms.$mat-datetimepicker-calendar-content} {
-            .mat-datetimepicker-calendar-table-header th {
+            #{ms.$mat-datetimepicker-calendar-table-header} th {
                 color: var(--adf-theme-foreground-text-color-054);
             }
 
-            .mat-datetimepicker-calendar-body-disabled > div {
+            #{ms.$mat-datetimepicker-calendar-body-disabled} > div {
                 color: var(--adf-theme-foreground-text-color-054);
             }
         }
     }
 
-    #{$mat-snackbar} {
+    #{ms.$mat-snackbar} {
-        &#{$mat-snack-bar-container} {
+        &#{ms.$mat-snack-bar-container} {
             margin: 24px;
 
-            #{$mat-snackbar-label} {
+            #{ms.$mat-snackbar-label} {
                 line-height: unset;
             }
         }
     }
 
-    #{$mat-input-element} {
+    #{ms.$mat-input-element} {
         &:focus::placeholder {
             color: var(--theme-primary-color);
         }
     }
 
-    #{$mat-datetimepicker-dialog} {
+    #{ms.$mat-datetimepicker-dialog} {
-        #{$mat-dialog-container} {
+        #{ms.$mat-dialog-container} {
-            #{$mat-dialog-surface} {
+            #{ms.$mat-dialog-surface} {
                 padding: 0;
             }
         }
     }
 
-    #{$mat-button-base} {
+    #{ms.$mat-button-base} {
         -webkit-font-smoothing: antialiased;
     }
 }

lib/core/src/lib/templates/empty-content/empty-content.component.scss

@@ -1,5 +1,3 @@
-@import 'styles/mat-selectors';
-
 .adf-empty-content {
     color: var(--adf-theme-foreground-text-color-054);
     display: flex;

lib/core/src/lib/templates/error-content/error-content.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/flex';
+@use '../../styles/flex' as flex;
 
 .adf-error-content {
     color: var(--adf-theme-foreground-text-color-054);
@@ -36,7 +36,7 @@
     }
 }
 
-@include layout-bp(lt-md) {
+@include flex.layout-bp(lt-md) {
     .adf-error-content {
         &-code {
             margin-top: 100px;

lib/core/src/lib/viewer/components/img-viewer/img-viewer.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../../../styles/mat-selectors' as ms;
 
 .adf-image-viewer {
     width: 100%;
@@ -33,7 +33,7 @@
         left: 50%;
         transform: translateX(-50%);
 
-        .adf-toolbar #{$mat-toolbar} {
+        .adf-toolbar #{ms.$mat-toolbar} {
             max-height: 48px;
             background-color: var(--adf-theme-background-card-color);
             border-width: 0;

lib/core/src/lib/viewer/components/pdf-viewer/pdf-viewer.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../../../styles/mat-selectors' as ms;
 
 .adf-pdf-viewer {
     width: 100%;
@@ -79,7 +79,7 @@
         max-height: 100px;
         max-width: 300px;
 
-        #{$mat-progress-bar} {
+        #{ms.$mat-progress-bar} {
             max-width: 300px;
             margin: 0;
             position: absolute;
@@ -98,7 +98,7 @@
         left: 50%;
         transform: translateX(-50%);
 
-        .adf-toolbar #{$mat-toolbar} {
+        .adf-toolbar #{ms.$mat-toolbar} {
             max-height: 48px;
             background-color: var(--adf-theme-background-card-color);
             border-width: 0;

lib/core/src/lib/viewer/components/viewer-render/viewer-render.component.scss

@@ -1,5 +1,4 @@
 /* stylelint-disable scss/at-extend-no-missing-placeholder */
-@import 'styles/mat-selectors';
 
 .adf-full-screen {
     width: 100%;

lib/core/src/lib/viewer/components/viewer.component.scss

@@ -1,5 +1,5 @@
 /* stylelint-disable scss/at-extend-no-missing-placeholder */
-@import 'styles/mat-selectors';
+@use '../../styles/mat-selectors' as ms;
 
 .adf-full-screen {
     width: 100%;
@@ -12,7 +12,7 @@
     width: 100%;
     height: 100%;
 
-    #{$mat-toolbar} {
+    #{ms.$mat-toolbar} {
         color: var(--adf-theme-foreground-text-color-054);
 
         .adf-toolbar-title {
@@ -33,7 +33,7 @@
     }
 
     &-toolbar {
-        #{$mat-toolbar} {
+        #{ms.$mat-toolbar} {
             background-color: var(--adf-theme-background-card-color-087);
         }
     }

lib/insights/src/lib/analytics-process/components/buttons-menu/buttons-menu.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../../mat-selectors' as ms;
 
 .adf-buttons-menu {
     margin-right: 10px;
@@ -23,7 +23,7 @@
             display: none;
         }
 
-        button > #{$material-icons} {
+        button > #{ms.$material-icons} {
             color: black;
             margin: 0 10px;
         }

lib/insights/src/lib/analytics-process/mat-selectors.scss

@@ -0,0 +1,3 @@
+/* Variables in this file are used in the Angular Material library. Do not modify them unless you know what you are doing. */
+
+$material-icons: '.material-icons';

lib/process-services-cloud/src/lib/app/components/app-list-cloud/app-list-cloud.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/flex';
+@use '../../../flex' as flex;
 
 adf-cloud-app-list {
     width: 100%;
@@ -29,11 +29,11 @@ adf-cloud-app-list {
             flex: 1 1 100%;
             max-width: 33.3333%;
 
-            @include layout-bp(lt-md) {
+            @include flex.layout-bp(lt-md) {
                 max-width: 50%;
             }
 
-            @include layout-bp(lt-sm) {
+            @include flex.layout-bp(lt-sm) {
                 max-width: 100%;
             }
         }

lib/process-services-cloud/src/lib/flex.scss

@@ -0,0 +1,81 @@
+@charset "UTF-8";
+/* stylelint-disable */
+
+// Non-overlapping Material Design breakpoints
+// @type map
+$breakpoints: (
+    xs: (
+        begin: 0,
+        end: 599.9px
+    ),
+    sm: (
+        begin: 600px,
+        end: 959.9px
+    ),
+    md: (
+        begin: 960px,
+        end: 1279.9px
+    ),
+    lg: (
+        begin: 1280px,
+        end: 1919.9px
+    ),
+    xl: (
+        begin: 1920px,
+        end: 4999.99px
+    )
+) !default;
+
+// Overlapping breakpoints that are greater than defined
+// Material Design breakpoints
+// @type map
+$overlapping-gt: (
+    gt-xs: 600px,
+    gt-sm: 960px,
+    gt-md: 1280px,
+    gt-lg: 1920px
+) !default;
+
+// Overlapping breakpoints that are less than defined
+// Material Design breakpoints
+// @type map
+$overlapping-lt: (
+    lt-sm: 599.9px,
+    lt-md: 959.9px,
+    lt-lg: 1279.9px,
+    lt-xl: 1919.9px
+) !default;
+
+// Media Query Mixin, takes a breakpoint and returns a wrapping
+// media query statement
+// e.g.
+//
+// @include layout-bp(xs) {
+//   background-color: red;
+// }
+//
+// becomes
+//
+// @media (min-width: 0px) and (max-width: 599px) {
+//   background-color: red;
+// }
+@mixin layout-bp($bp) {
+    @if map-has-key($breakpoints, $bp) {
+        $min: map-get(map-get($breakpoints, $bp), begin);
+        $max: map-get(map-get($breakpoints, $bp), end);
+        @media (min-width: $min) and (max-width: $max) {
+            @content;
+        }
+    } @else if map-has-key($overlapping-gt, $bp) {
+        $min: map-get($overlapping-gt, $bp);
+        @media (min-width: $min) {
+            @content;
+        }
+    } @else if map-has-key($overlapping-lt, $bp) {
+        $max: map-get($overlapping-lt, $bp);
+        @media (max-width: $max) {
+            @content;
+        }
+    }
+}
+/* stylelint-enable */

lib/process-services-cloud/src/lib/form/components/form-cloud.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../../mat-selectors' as ms;
 
 /* cspell: disable-next-line */
 /* stylelint-disable scss/at-extend-no-missing-placeholder */
@@ -38,7 +38,7 @@
     }
 
     &-toolbar {
-        #{$mat-toolbar} {
+        #{ms.$mat-toolbar} {
             background-color: var(--adf-theme-background-card-color-087);
         }
     }
@@ -83,7 +83,7 @@
                 flex-direction: column;
                 height: 100%;
 
-                #{$mat-card-content} {
+                #{ms.$mat-card-content} {
                     height: 100%;
                     overflow: hidden auto;
                 }

lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.scss

@@ -1,10 +1,10 @@
 /* stylelint-disable selector-class-pattern */
-@import 'styles/mat-selectors';
+@use '../../../../mat-selectors' as ms;
 
 .adf {
     // eslint-disable-selector-class-pattern
     &-date-widget {
-        #{$mat-form-field-suffix} {
+        #{ms.$mat-form-field-suffix} {
             top: 26px;
         }
 
@@ -14,11 +14,11 @@
     }
 
     &-left-label-input-datepicker {
-        #{$mat-form-field-suffix} {
+        #{ms.$mat-form-field-suffix} {
             top: 0;
         }
 
-        #{$mat-form-text-field-infix} {
+        #{ms.$mat-form-text-field-infix} {
             width: 100%;
         }
     }

lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../../../../mat-selectors' as ms;
 
 .adf {
     &-dropdown-widget {
@@ -27,7 +27,7 @@
             margin-top: 1px;
         }
 
-        #{$mat-select-arrow-wrapper} {
+        #{ms.$mat-select-arrow-wrapper} {
             height: auto;
         }
     }

lib/process-services-cloud/src/lib/mat-selectors.scss

@@ -0,0 +1,9 @@
+/* Variables in this file are used in the Angular Material library. Do not modify them unless you know what you are doing. */
+
+$mat-toolbar: '.mat-toolbar';
+$mat-card-content: '.mat-mdc-card-content';
+$mat-form-field-suffix: '.mat-mdc-form-field-text-suffix';
+$mat-form-text-field-infix: '.mat-mdc-form-text-infix';
+$mat-select-arrow-wrapper: '.mat-mdc-select-arrow-wrapper';
+$mat-button: '.mat-mdc-button';
+$mat-button-label: '.mdc-button__label';

lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter/edit-process-filter-cloud.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/flex';
+@use '../../../../flex' as flex;
 
 .adf-edit-process-filter-date-error-container {
     position: absolute;
@@ -50,7 +50,7 @@
             max-width: 23%;
         }
 
-        @include layout-bp(lt-sm) {
+        @include flex.layout-bp(lt-sm) {
             flex-flow: column;
 
             :not(:last-child) {

lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/edit-service-task-filter/edit-service-task-filter-cloud.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/flex';
+@use '../../../../../flex' as flex;
 
 .adf-edit-task-filter-checkbox {
     font-size: var(--theme-subheading-2-font-size);
@@ -60,7 +60,7 @@
             flex: 1 1 23%;
         }
 
-        @include layout-bp(lt-sm) {
+        @include flex.layout-bp(lt-sm) {
             flex-flow: column;
 
             :not(:last-child) {

lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/edit-task-filter/edit-task-filter-cloud.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/flex';
+@use '../../../../../flex' as flex;
 
 .adf-edit-task-filter-checkbox {
     font-size: var(--theme-subheading-2-font-size);
@@ -60,7 +60,7 @@
             flex: 1 1 23%;
         }
 
-        @include layout-bp(lt-sm) {
+        @include flex.layout-bp(lt-sm) {
             flex-flow: column;
 
             :not(:last-child) {

lib/process-services-cloud/src/lib/task/task-form/components/task-form-cloud/task-form-cloud.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../../../../mat-selectors' as ms;
 
 .adf-task-form-cloud-container {
     height: 100%;
@@ -16,7 +16,7 @@
                     border-radius: 5px;
                 }
 
-                #{$mat-button} {
+                #{ms.$mat-button} {
                     height: 36px;
                     border-radius: 5px;
                     width: auto;
@@ -25,7 +25,7 @@
                     white-space: nowrap;
                 }
 
-                #{$mat-button-label} {
+                #{ms.$mat-button-label} {
                     min-width: 58px;
                 }
             }

lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/flex';
+@use '../../../flex' as flex;
 
 .adf {
     &-controls {
@@ -28,7 +28,7 @@
     }
 }
 
-@include layout-bp(lt-md) {
+@include flex.layout-bp(lt-md) {
     adf-card-view .adf-property-value {
         text-overflow: ellipsis;
         overflow: hidden;

lib/process-services/src/lib/app-list/apps-list.component.scss

@@ -1,21 +1,52 @@
-@import 'styles/flex';
+@use 'sass:map';
-@import 'styles/mat-selectors';
+@use '../styles/mat-selectors' as ms;
+@use '../styles/flex' as flex;
 
 .adf-app-list-item {
     cursor: pointer;
 }
 
 $tile-themes: (
-    theme-1: (bg: #269abc, color: #168aac),
+    theme-1: (
-    theme-2: (bg: #7da9b0, color: #6d99a0),
+        bg: #269abc,
-    theme-3: (bg: #7689ab, color: #66799b),
+        color: #168aac
-    theme-4: (bg: #c74e3e, color: #b73e2e),
+    ),
-    theme-5: (bg: #fab96c, color: #eaa95c),
+    theme-2: (
-    theme-6: (bg: #759d4c, color: #658d3c),
+        bg: #7da9b0,
-    theme-7: (bg: #b1b489, color: #a1a479),
+        color: #6d99a0
-    theme-8: (bg: #a17299, color: #916289),
+    ),
-    theme-9: (bg: #696c67, color: #595c57),
+    theme-3: (
-    theme-10: (bg: #cabb33, color: #baab23)
+        bg: #7689ab,
+        color: #66799b
+    ),
+    theme-4: (
+        bg: #c74e3e,
+        color: #b73e2e
+    ),
+    theme-5: (
+        bg: #fab96c,
+        color: #eaa95c
+    ),
+    theme-6: (
+        bg: #759d4c,
+        color: #658d3c
+    ),
+    theme-7: (
+        bg: #b1b489,
+        color: #a1a479
+    ),
+    theme-8: (
+        bg: #a17299,
+        color: #916289
+    ),
+    theme-9: (
+        bg: #696c67,
+        color: #595c57
+    ),
+    theme-10: (
+        bg: #cabb33,
+        color: #baab23
+    )
 );
 
 .adf-app-list-spinner,
@@ -26,7 +57,7 @@ $tile-themes: (
     flex-direction: column;
     height: 85vh;
 
-    #{$mat-progress-spinner} {
+    #{ms.$mat-progress-spinner} {
         margin: 0 auto;
     }
 }
@@ -46,12 +77,12 @@ $tile-themes: (
             flex: 1 1 33.3333%;
             max-width: 33.3333%;
 
-            @include layout-bp(lt-md) {
+            @include flex.layout-bp(lt-md) {
                 flex: 1 1 50%;
                 max-width: 50%;
             }
 
-            @include layout-bp(lt-sm) {
+            @include flex.layout-bp(lt-sm) {
                 flex: 1 1 100%;
                 max-width: 100%;
             }
@@ -59,12 +90,12 @@ $tile-themes: (
             &-card {
                 @for $i from 1 through 10 {
                     &.theme-#{$i} {
-                        $tile-theme: map-get($tile-themes, theme-#{$i});
+                        $tile-theme: map.get($tile-themes, theme-#{$i});
 
-                        background-color: map-get($tile-theme, bg);
+                        background-color: map.get($tile-theme, bg);
 
                         .adf-app-listgrid-item-card-logo-icon {
-                            color: map-get($tile-theme, color);
+                            color: map.get($tile-theme, color);
                         }
                     }
                 }
@@ -72,15 +103,12 @@ $tile-themes: (
                 outline: none;
                 flex-direction: column;
                 display: flex;
-                transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1),
+                transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
-                box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
                 min-height: 200px;
                 padding: 0;
 
                 &:hover {
-                    box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14),
+                    box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
-                    0 3px 14px 2px rgba(0, 0, 0, 0.12),
-                    0 5px 5px -3px rgba(0, 0, 0, 0.2);
                     cursor: pointer;
                     transform: scale(1.015);
                 }

lib/process-services/src/lib/attachment/process-attachment-list/process-attachment-list.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/flex';
+@use '../../styles/flex' as flex;
 
 .adf-attachment-list-loading-margin {
     margin-left: calc((100% - 100px) / 2);
@@ -41,7 +41,7 @@
     object-fit: contain;
     margin-top: 17px;
 
-    @include layout-bp(lt-sm) {
+    @include flex.layout-bp(lt-sm) {
         width: 250px;
     }
 }

lib/process-services/src/lib/attachment/task-attachment-list/task-attachment-list.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/flex';
+@use '../../styles/flex' as flex;
 
 .adf-attachment-list-loading-margin {
     margin-left: calc((100% - 100px) / 2);
@@ -23,7 +23,7 @@
     word-break: break-all;
     white-space: pre-line;
 
-    @include layout-bp(lt-sm) {
+    @include flex.layout-bp(lt-sm) {
         font-size: 40px;
     }
 }
@@ -46,7 +46,7 @@
     object-fit: contain;
     margin-top: 17px;
 
-    @include layout-bp(lt-sm) {
+    @include flex.layout-bp(lt-sm) {
         width: 250px;
     }
 }

lib/process-services/src/lib/form/start-form/start-form.component.scss

@@ -1,23 +1,23 @@
-@import 'styles/mat-selectors';
+@use '../../styles/mat-selectors' as ms;
 
 .adf-form-container {
     max-width: 100%;
     max-height: 100%;
 
-    & #{$mat-card} {
+    & #{ms.$mat-card} {
         padding: 16px 24px;
         overflow: hidden;
     }
 
-    & #{$mat-card-header-text} {
+    & #{ms.$mat-card-header-text} {
         margin: 0;
     }
 
-    & #{$mat-tab-body-content} {
+    & #{ms.$mat-tab-body-content} {
         overflow: hidden;
     }
 
-    & #{$mat-tab-label-text} {
+    & #{ms.$mat-tab-label-text} {
         font-size: var(--theme-subheading-2-font-size);
         line-height: var(--theme-headline-line-height);
         letter-spacing: -0.4px;
@@ -26,79 +26,79 @@
         text-transform: uppercase;
     }
 
-    & #{$mat-tab-ink-bar} {
+    & #{ms.$mat-tab-ink-bar} {
         height: 4px;
     }
 
-    & #{$mat-form-field-wrapper} {
+    & #{ms.$mat-form-field-wrapper} {
         margin: 0 12px 0 0;
     }
 }
 
-    .adf-form-container-card {
+.adf-form-container-card {
-        .adf {
+    .adf {
-            &-form-title {
+        &-form-title {
-                font-size: var(--theme-title-font-size);
+            font-size: var(--theme-title-font-size);
+        }
+
+        &-form-debug-container {
+            padding: 10px;
+        }
+
+        &-form-debug-container .adf-debug-toggle-text {
+            padding-left: 15px;
+            cursor: pointer;
+        }
+
+        &-form-debug-container .adf-debug-toggle-text:hover {
+            font-weight: bold;
+        }
+
+        &-form-reload-button {
+            position: absolute;
+            right: 12px;
+            top: 30px;
+        }
+
+        &-form-validation-button {
+            position: absolute;
+            right: 50px;
+            top: 39px;
+            color: var(--theme-accent-color);
+
+            & .adf-invalid-color {
+                color: var(--theme-warn-color);
+            }
+        }
+
+        &-form-hide-button {
+            display: none;
+        }
+
+        &-task-title {
+            text-align: center;
+        }
+
+        &-label {
+            width: 32px;
+            height: 16px;
+            font-size: var(--theme-caption-font-size);
+            line-height: var(--theme-headline-line-height);
+            text-align: left;
+            white-space: nowrap;
+        }
+
+        &-form-mat-card-actions {
+            float: right;
+            padding-bottom: 25px;
+            padding-right: 25px;
+
+            & #{ms.$mat-button} {
+                height: 36px;
+                border-radius: 5px;
             }
 
-            &-form-debug-container {
+            & #{ms.$mat-button-label} {
-                padding: 10px;
-            }
-
-            &-form-debug-container .adf-debug-toggle-text {
-                padding-left: 15px;
-                cursor: pointer;
-            }
-
-            &-form-debug-container .adf-debug-toggle-text:hover {
-                font-weight: bold;
-            }
-
-            &-form-reload-button {
-                position: absolute;
-                right: 12px;
-                top: 30px;
-            }
-
-            &-form-validation-button {
-                position: absolute;
-                right: 50px;
-                top: 39px;
-                color: var(--theme-accent-color);
-
-                & .adf-invalid-color {
-                    color: var(--theme-warn-color);
-                }
-            }
-
-            &-form-hide-button {
-                display: none;
-            }
-
-            &-task-title {
-                text-align: center;
-            }
-
-            &-label {
-                width: 32px;
-                height: 16px;
-                font-size: var(--theme-caption-font-size);
-                line-height: var(--theme-headline-line-height);
-                text-align: left;
-                white-space: nowrap;
-            }
-
-            &-form-mat-card-actions {
-                float: right;
-                padding-bottom: 25px;
-                padding-right: 25px;
-
-                & #{$mat-button} {
-                    height: 36px;
-                    border-radius: 5px;
-                }
-
-            & #{$mat-button-label} {
                 width: 58px;
                 height: 20px;
                 opacity: 0.54;
@@ -109,11 +109,10 @@
     }
 }
 
-
 form-field {
     width: 100%;
 
-    #{$mat-input-element} {
+    #{ms.$mat-input-element} {
         font-size: var(--theme-body-2-font-size);
         padding-top: 8px;
         line-height: normal;

lib/process-services/src/lib/form/widgets/content-widget/attach-file-widget-dialog.component.scss

@@ -1,7 +1,7 @@
-@import 'styles/mat-selectors';
+@use '../../../styles/mat-selectors' as ms;
 
 .adf-attach-file-widget-dialog {
-    #{$mat-dialog-actions} {
+    #{ms.$mat-dialog-actions} {
         background-color: var(--theme-background-color);
         display: flex;
         justify-content: flex-end;
@@ -30,7 +30,6 @@
     }
 }
 
-#{$mat-dialog-surface} {
+#{ms.$mat-dialog-surface} {
     overflow-x: hidden;
 }
-

lib/process-services/src/lib/form/widgets/content-widget/attach-folder-widget.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../../../styles/mat-selectors' as ms;
 
 .adf {
     &-attach-folder-widget-container {
@@ -28,7 +28,7 @@
     &-attach-folder-files-row {
         padding-left: 8px;
 
-        #{$mat-line} {
+        #{ms.$mat-line} {
             margin-bottom: 0;
         }
     }
@@ -42,7 +42,7 @@
         display: flex;
         flex-direction: row-reverse;
 
-        #{$mat-icon} {
+        #{ms.$mat-icon} {
             margin-left: 4px;
             margin-right: 0;
         }

lib/process-services/src/lib/form/widgets/dropdown/dropdown.widget.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../../../styles/mat-selectors' as ms;
 
 .adf {
     &-dropdown-widget {
@@ -9,7 +9,7 @@
             width: 100%;
         }
 
-        #{$mat-select-value-text} {
+        #{ms.$mat-select-value-text} {
             font-size: var(--theme-body-1-font-size);
         }
 

lib/process-services/src/lib/form/widgets/people/people.widget.scss

@@ -1,10 +1,10 @@
-@import 'styles/mat-selectors';
+@use '../../../styles/mat-selectors' as ms;
 
 .adf {
     &-people-widget {
         width: 100%;
 
-        #{$mat-form-field-label} {
+        #{ms.$mat-form-field-label} {
             top: 10px;
         }
 

lib/process-services/src/lib/form/widgets/upload/upload.widget.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../../../styles/mat-selectors' as ms;
 
 .adf {
     &-upload-widget-container {
@@ -27,7 +27,7 @@
     }
 
     &-upload-files-row {
-        #{$mat-line} {
+        #{ms.$mat-line} {
             margin-bottom: 0;
         }
     }

lib/process-services/src/lib/people/components/people/people.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../../../styles/mat-selectors' as ms;
 
 .adf-assignment-header {
     border-bottom: 1px solid var(--adf-theme-foreground-divider-color);
@@ -26,7 +26,7 @@
     }
 }
 
-.adf-assignment-top-container#{$mat-card} {
+.adf-assignment-top-container#{ms.$mat-card} {
     border-top: 1px solid var(--adf-theme-foreground-divider-color);
     margin: 0;
     padding: 0;

lib/process-services/src/lib/process-list/components/start-process/start-process.component.scss

@@ -1,5 +1,5 @@
-@import 'styles/flex';
+@use '../../../styles/mat-selectors' as ms;
-@import 'styles/mat-selectors';
+@use '../../../styles/flex' as flex;
 
 .adf {
     &-start-process {
@@ -12,7 +12,7 @@
             width: 100%;
         }
 
-        #{$mat-form-field-label} {
+        #{ms.$mat-form-field-label} {
             color: var(--adf-theme-mat-grey-color-a200-dark);
         }
 
@@ -22,7 +22,7 @@
             text-align: right;
         }
 
-        #{$mat-button} {
+        #{ms.$mat-button} {
             width: auto;
             padding: 0 16px;
             margin: 0 8px;
@@ -40,7 +40,7 @@
         }
 
         &-process-name {
-            margin-top: 16px
+            margin-top: 16px;
         }
     }
 
@@ -62,11 +62,11 @@
     }
 
     &-start-form-container {
-        #{$mat-card-content} {
+        #{ms.$mat-card-content} {
             margin-bottom: 100px;
         }
 
-        #{$mat-card-header} {
+        #{ms.$mat-card-header} {
             display: none;
         }
 
@@ -81,7 +81,7 @@
         padding-bottom: 16px;
 
         button {
-            text-wrap: none;
+            text-wrap: nowrap;
         }
     }
 
@@ -92,11 +92,11 @@
         align-items: baseline;
 
         .adf-start-process-definition-select {
-            .mat-mdc-select-arrow-wrapper {
+            #{ms.$mat-select-arrow-wrapper} {
-                transform:  none;
+                transform: none;
 
                 svg {
-                    fill: initial;
+                    fill: currentcolor;
                 }
             }
         }
@@ -107,7 +107,7 @@
     }
 }
 
-@include layout-bp(lt-sm) {
+@include flex.layout-bp(lt-sm) {
     .adf-start-process {
         width: 90%;
         margin-left: auto;

lib/process-services/src/lib/styles/flex.scss

@@ -0,0 +1,81 @@
+@charset "UTF-8";
+/* stylelint-disable */
+
+// Non-overlapping Material Design breakpoints
+// @type map
+$breakpoints: (
+    xs: (
+        begin: 0,
+        end: 599.9px
+    ),
+    sm: (
+        begin: 600px,
+        end: 959.9px
+    ),
+    md: (
+        begin: 960px,
+        end: 1279.9px
+    ),
+    lg: (
+        begin: 1280px,
+        end: 1919.9px
+    ),
+    xl: (
+        begin: 1920px,
+        end: 4999.99px
+    )
+) !default;
+
+// Overlapping breakpoints that are greater than defined
+// Material Design breakpoints
+// @type map
+$overlapping-gt: (
+    gt-xs: 600px,
+    gt-sm: 960px,
+    gt-md: 1280px,
+    gt-lg: 1920px
+) !default;
+
+// Overlapping breakpoints that are less than defined
+// Material Design breakpoints
+// @type map
+$overlapping-lt: (
+    lt-sm: 599.9px,
+    lt-md: 959.9px,
+    lt-lg: 1279.9px,
+    lt-xl: 1919.9px
+) !default;
+
+// Media Query Mixin, takes a breakpoint and returns a wrapping
+// media query statement
+// e.g.
+//
+// @include layout-bp(xs) {
+//   background-color: red;
+// }
+//
+// becomes
+//
+// @media (min-width: 0px) and (max-width: 599px) {
+//   background-color: red;
+// }
+@mixin layout-bp($bp) {
+    @if map-has-key($breakpoints, $bp) {
+        $min: map-get(map-get($breakpoints, $bp), begin);
+        $max: map-get(map-get($breakpoints, $bp), end);
+        @media (min-width: $min) and (max-width: $max) {
+            @content;
+        }
+    } @else if map-has-key($overlapping-gt, $bp) {
+        $min: map-get($overlapping-gt, $bp);
+        @media (min-width: $min) {
+            @content;
+        }
+    } @else if map-has-key($overlapping-lt, $bp) {
+        $max: map-get($overlapping-lt, $bp);
+        @media (max-width: $max) {
+            @content;
+        }
+    }
+}
+/* stylelint-enable */

lib/process-services/src/lib/styles/mat-selectors.scss

@@ -0,0 +1,25 @@
+/* Variables in this file are used in the Angular Material library. Do not modify them unless you know what you are doing. */
+
+$mat-progress-spinner: '.mat-mdc-progress-spinner';
+$mat-card: '.mat-mdc-card';
+$mat-card-header-text: '.mat-mdc-card-header-text';
+$mat-card-content: '.mat-mdc-card-content';
+$mat-card-header: '.mat-mdc-card-header';
+$mat-card-title: '.mat-mdc-card-title';
+$mat-tab-body-content: '.mat-mdc-tab-body-content';
+$mat-tab-label-text: '.mdc-tab__text-label';
+$mat-tab-ink-bar: '.mdc-tab-indicator';
+$mat-form-field-wrapper: '.mat-mdc-text-field-wrapper';
+$mat-button: '.mat-mdc-button';
+$mat-button-label: '.mdc-button__label';
+$mat-input-element: '.mat-mdc-input-element';
+$mat-dialog-actions: '.mat-mdc-dialog-actions';
+$mat-line: '.mat-line';
+$mat-icon: '.mat-icon';
+$mat-select-value-text: '.mat-mdc-select-value-text';
+$mat-form-field-label: '.mat-mdc-floating-label';
+$mat-form-field: '.mat-mdc-form-field';
+$mat-form-field-prefix: '.mat-mdc-form-field-text-prefix';
+$mat-slide-toggle: '.mat-mdc-slide-toggle';
+$mat-select-arrow-wrapper: '.mat-mdc-select-arrow-wrapper';
+$mat-dialog-surface: '.mat-mdc-dialog-surface';

lib/process-services/src/lib/task-list/components/attach-form/attach-form.component.scss

@@ -1,7 +1,7 @@
-@import 'styles/mat-selectors';
+@use '../../../styles/mat-selectors' as ms;
 
 .adf-attach-form {
-    #{$mat-form-field} {
+    #{ms.$mat-form-field} {
         width: 100%;
     }
 

lib/process-services/src/lib/task-list/components/checklist/checklist.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../../../styles/mat-selectors' as ms;
 
 :host {
     width: 100%;
@@ -8,7 +8,7 @@
     font-weight: bolder;
 }
 
-#{$mat-form-field} {
+#{ms.$mat-form-field} {
     width: 100%;
 }
 

lib/process-services/src/lib/task-list/components/start-task/start-task.component.scss

@@ -1,12 +1,12 @@
-@import 'styles/flex';
+@use '../../../styles/mat-selectors' as ms;
-@import 'styles/mat-selectors';
+@use '../../../styles/flex' as flex;
 
 /* stylelint-disable no-descending-specificity */
 .adf-new-task-heading {
     padding-top: 12px;
     border-bottom: 1px solid var(--adf-theme-foreground-divider-color);
 
-    #{$mat-card-title} {
+    #{ms.$mat-card-title} {
         font-weight: bold;
         font-size: var(--theme-adf-task-title-font-size);
     }
@@ -32,11 +32,11 @@
         }
 
         .adf-input-row {
-            @include layout-bp(lt-md) {
+            @include flex.layout-bp(lt-md) {
                 flex-direction: column;
             }
 
-            @include layout-bp(lt-md) {
+            @include flex.layout-bp(lt-md) {
                 mat-form-field {
                     margin-right: 20px;
                 }
@@ -48,7 +48,7 @@
             box-sizing: border-box;
             max-width: 48%;
 
-            @include layout-bp(lt-sm) {
+            @include flex.layout-bp(lt-sm) {
                 max-width: 100%;
             }
         }
@@ -69,20 +69,20 @@
 }
 
 adf-start-task {
-    #{$mat-button}.adf-uppercase {
+    #{ms.$mat-button}.adf-uppercase {
         text-transform: uppercase;
     }
 
     people-widget.adf-people-widget-content {
         width: 100%;
 
-        #{$mat-form-field-label} {
+        #{ms.$mat-form-field-label} {
             top: -14px;
         }
     }
 
     .adf-people-widget-content {
-        #{$mat-form-field} {
+        #{ms.$mat-form-field} {
             width: 100%;
         }
 
@@ -96,7 +96,7 @@ adf-start-task {
     }
 
     .adf {
-        &-start-task-input-container #{$mat-form-field-wrapper} {
+        &-start-task-input-container #{ms.$mat-form-field-wrapper} {
             padding-top: 8px;
         }
 
@@ -136,7 +136,7 @@ adf-start-task {
                 border-color: var(--theme-warn-color);
             }
 
-            #{$mat-form-field-prefix} {
+            #{ms.$mat-form-field-prefix} {
                 color: var(--theme-warn-color);
             }