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

2025-07-24 17:32:15 +00:00 · 2025-04-28 11:17:36 -04:00
parent dc35ef8a6f
commit b1113c51a7
104 changed files with 1131 additions and 544 deletions
--- a/lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.scss
+++ b/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;
        }
    }
--- a/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.scss
+++ b/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 {
--- a/lib/core/src/lib/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.scss
+++ b/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},
-                #{$mat-row} {
+                #{ms.$mat-header-row},
+                #{ms.$mat-row} {
                    padding: 0;
                }
            }
--- a/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.scss
+++ b/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;
    }

--- a/lib/core/src/lib/card-view/components/card-view-selectitem/select-filter-input/select-filter-input.component.scss
+++ b/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});
--- a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss
+++ b/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;
--- a/lib/core/src/lib/card-view/components/card-view/card-view.component.scss
+++ b/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);
            }
        }
--- a/lib/core/src/lib/comments/comments.component.scss
+++ b/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} {
-                    #{$mat-input-element} {
+                &#{ms.$mat-form-field-invalid} {
+                    #{ms.$mat-input-element} {
                        &::placeholder,
                        &:focus::placeholder {
                            color: var(--theme-warn-color);
@@ -23,15 +23,15 @@ adf-comments {
                }
            }

-            #{$mat-form-field-wrapper} {
-                #{$mat-form-field-flex} {
-                    #{$mat-form-field-infix} {
+            #{ms.$mat-form-field-wrapper} {
+                #{ms.$mat-form-field-flex} {
+                    #{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;
    }
--- a/lib/core/src/lib/datatable/components/datatable/datatable.component.scss
+++ b/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';
-@import 'styles/mat-selectors';
+@use '../../../styles/mixins' as mixins;
+@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;
--- a/lib/core/src/lib/dialogs/edit-json/edit-json.dialog.scss
+++ b/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;
    }
--- a/lib/core/src/lib/dynamic-chip-list/dynamic-chip-list.component.scss
+++ b/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);
            }
        }
--- a/lib/core/src/lib/form/components/form-renderer.component.scss
+++ b/lib/core/src/lib/form/components/form-renderer.component.scss
@@ -1,6 +1,6 @@
 /* stylelint-disable selector-class-pattern */
-@import 'styles/flex';
-@import 'styles/mat-selectors';
+@use '../../styles/flex' as flex;
+@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} {
-            #{$mat-tab-indicator-underline} {
+        & #{ms.$mat-tab-ink-bar} {
+            #{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;
--- a/lib/core/src/lib/form/components/inplace-form-input/inplace-form-input.component.scss
+++ b/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;
    }

--- a/lib/core/src/lib/form/components/widgets/amount/amount.widget.scss
+++ b/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);
            }
--- a/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.scss
+++ b/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);
 }
--- a/lib/core/src/lib/form/components/widgets/form.theme.scss
+++ b/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},
-        #{$mat-select},
-        #{$mat-form-field} {
+        #{ms.$mat-input-element},
+        #{ms.$mat-select},
+        #{ms.$mat-form-field} {
            display: block !important;
        }
    }
--- a/lib/core/src/lib/form/components/widgets/text/text.widget.scss
+++ b/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;
        }
    }
--- a/lib/core/src/lib/identity-user-info/identity-user-info.component.scss
+++ b/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;
        }
    }
--- a/lib/core/src/lib/info-drawer/info-drawer-layout.component.scss
+++ b/lib/core/src/lib/info-drawer/info-drawer-layout.component.scss
@@ -1,5 +1,5 @@
-@import '../styles/mixins';
-@import 'styles/mat-selectors';
+@use '../styles/mixins' as mixins;
+@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} {
-            & #{$mat-tab-label-text} {
+        #{ms.$mat-tab-label}#{ms.$mat-tab-label-active} {
+            & #{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;
--- a/lib/core/src/lib/info-drawer/info-drawer.component.scss
+++ b/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;
        }

--- a/lib/core/src/lib/layout/components/header/header.component.scss
+++ b/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;
--- a/lib/core/src/lib/layout/components/layout-container/layout-container.component.scss
+++ b/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},
-#{$mat-drawer-transition} #{$mat-drawer-content} {
+#{ms.$mat-sidenav-content},
+#{ms.$mat-drawer-transition} #{ms.$mat-drawer-content} {
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: unset !important;
--- a/lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.scss
+++ b/lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.scss
@@ -1,6 +1,6 @@
@use '../../../styles/flex' as flex;
-@import '../../../styles/mixins';
-@import 'styles/mat-selectors';
+@use '../../../styles/mixins' as mixins;
+@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} {
-        @include flex-column;
+    #{ms.$mat-drawer-content} {
+        @include mixins.flex-column;

        position: unset;
        overflow: auto;
    }

    .adf-layout-container-sidenav {
-        #{$mat-icon} {
+        #{ms.$mat-icon} {
            vertical-align: sub;
        }
    }
--- a/lib/core/src/lib/login/components/login/login.component.scss
+++ b/lib/core/src/lib/login/components/login/login.component.scss
@@ -1,8 +1,8 @@
-@import '../../../styles/mixins';
-@import 'styles/mat-selectors';
+@use '../../../styles/mixins' as mixins;
+@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);
                    }
--- a/lib/core/src/lib/notifications/components/notification-history.component.scss
+++ b/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;
    }
 }
--- a/lib/core/src/lib/search-text/search-text-input.component.scss
+++ b/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;
    }

--- a/lib/core/src/lib/snackbar-content/snackbar-content.component.scss
+++ b/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;
--- a/lib/core/src/lib/styles/_mat-selectors.scss
+++ b/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';
--- a/lib/core/src/lib/styles/material.theme.scss
+++ b/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} {
-        & #{$mat-expansion-panel-header}.cdk-keyboard-focused,
-        & #{$mat-expansion-panel-header}.cdk-program-focused,
-        &:not(#{$mat-expanded}) #{$mat-expansion-panel-header}:hover {
+    #{ms.$mat-expansion-panel} {
+        & #{ms.$mat-expansion-panel-header}.cdk-keyboard-focused,
+        & #{ms.$mat-expansion-panel-header}.cdk-program-focused,
+        &:not(#{ms.$mat-expanded}) #{ms.$mat-expansion-panel-header}:hover {
            &:not([aria-disabled='true']) {
                background-color: var(--adf-theme-background-hover-color);
            }
        }
    }

-    #{$mat-calendar} {
-        #{$mat-calendar-header} {
+    #{ms.$mat-calendar} {
+        #{ms.$mat-calendar-header} {
            button {
                color: var(--adf-theme-foreground-text-color-087);

@@ -22,68 +22,69 @@
            }
        }

-        #{$mat-calendar-content} {
-            #{$mat-calendar-table-header} th {
+        #{ms.$mat-calendar-content} {
+            #{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 {
-        .mat-datetimepicker-calendar-header {
-            .mat-datetimepicker-calendar-header-year {
+    #{ms.$mat-datetimepicker-calendar} {
+        #{ms.$mat-datetimepicker-calendar-header} {
+            #{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 {
-            .mat-datetimepicker-calendar-table-header th {
+        #{ms.$mat-datetimepicker-calendar-content} {
+            #{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} {
-        &#{$mat-snack-bar-container} {
+    #{ms.$mat-snackbar} {
+        &#{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} {
-        #{$mat-dialog-container} {
-            #{$mat-dialog-surface} {
+    #{ms.$mat-datetimepicker-dialog} {
+        #{ms.$mat-dialog-container} {
+            #{ms.$mat-dialog-surface} {
                padding: 0;
            }
        }
    }

-    #{$mat-button-base} {
+    #{ms.$mat-button-base} {
        -webkit-font-smoothing: antialiased;
    }
 }
--- a/lib/core/src/lib/templates/empty-content/empty-content.component.scss
+++ b/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;
--- a/lib/core/src/lib/templates/error-content/error-content.component.scss
+++ b/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;
--- a/lib/core/src/lib/viewer/components/img-viewer/img-viewer.component.scss
+++ b/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;
--- a/lib/core/src/lib/viewer/components/pdf-viewer/pdf-viewer.component.scss
+++ b/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;
--- a/lib/core/src/lib/viewer/components/viewer-render/viewer-render.component.scss
+++ b/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%;
--- a/lib/core/src/lib/viewer/components/viewer.component.scss
+++ b/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);
        }
    }