From 0ea7a654a19b3037229902fede0c1ba7e25f5580 Mon Sep 17 00:00:00 2001
From: AleksanderSklorz <115619721+AleksanderSklorz@users.noreply.github.com>
Date: Fri, 17 May 2024 12:19:17 +0200
Subject: [PATCH] [ACS-7768] unify inputs and selects across the app (#9687)

* Changed ng version before material migration

* migration for material'

* Fixed most of unit tests failing

* [affected:*][ci:force] Fixing rebase

* [affected:*][ci:force] attempt to fix mat-selectors importing

* [affected:*][ci:force] Fixing the styles - check

* AAE-21392 Fix dropdown form widget style (#9605)

* ACS-7768 Applied new styles for inputs

* ACS-7768 Align icon

* ACS-7768 Input colors based on input state

* ACS-7768 Corrected spaces

* ACS-7768 Styles for selectboxes

* ACS-7768 Fixed label jumping on hovering

* ACS-7768 Style inputs for add permission panel, user role column and comments, styles for inputs without label

* ACS-7768 Style inputs in search filters

* ACS-7768 Set appearance for inputs globally to outline

* ACS-7768 Style inputs for share dialog and login page

* ACS-7768 Style inputs in properties panel

* ACS-7768 Fixed white background when disabled field

* ACS-7768 Moved setting outline appearance for inputs to ACA, fix issue for inputs in permission container

* Revert "[affected:*][ci:force] Fixing the styles - check"

This reverts commit 80d971f7abbaf3fdd66f6731e6a84ffe23900c56.

* Revert "[affected:*][ci:force] attempt to fix mat-selectors importing"

This reverts commit 821d9e1864b48bb2723b51347e133346cc311e5d.

* Revert "[affected:*][ci:force] Fixing rebase"

This reverts commit 378c6c2000fe1319b2043ca3e4652e12737e30d8.

* Revert "Fixed most of unit tests failing"

This reverts commit 44948e0a2888f3f62c93d5ee439eeccf849cf9b2.

* ACS-7768 Reverted unwanted changes

---------

Co-authored-by: Vito Albano <vito.albano@hyland.com>
Co-authored-by: Diogo Bastos <50139916+DiogoABastos@users.noreply.github.com>
---
 .../categories-management.component.html      |   6 +-
 .../categories-management.component.scss      |  12 --
 .../content-metadata.component.scss           |  25 ---
 ...content-node-selector-panel.component.html |   1 -
 .../content-node-share.dialog.html            |   8 +-
 .../content-node-share.dialog.scss            |  46 +++---
 .../src/lib/dialogs/folder.dialog.html        |  10 +-
 .../lib/dialogs/library/library.dialog.html   |   6 +-
 lib/content-services/src/lib/i18n/en.json     |   5 +-
 .../src/lib/material.module.ts                |   3 +-
 .../add-permission-panel.component.html       |   4 +-
 .../permission-container.component.scss       |   4 +
 .../user-role-column.component.ts             |   5 -
 ...rch-chip-autocomplete-input.component.html |   4 +-
 ...rch-chip-autocomplete-input.component.scss |  22 +--
 .../search-date-range.component.html          |  17 +-
 .../search-date-range.component.scss          |  21 +--
 .../search-widget-chip.component.ts           |  23 ++-
 .../search-input/search-input.component.html  |   2 +-
 .../search-logical-filter.component.html      |  10 +-
 .../search-logical-filter.component.scss      |  10 --
 .../search-properties.component.html          |  25 +--
 .../search-properties.component.scss          | 111 +------------
 .../search-text/search-text.component.html    |   2 +-
 .../search-text/search-text.component.scss    |  30 +---
 .../sites-dropdown.component.html             |   2 +-
 .../tags-creator/tags-creator.component.html  |   7 +-
 .../tags-creator/tags-creator.component.scss  |   8 +-
 .../card-view-dateitem.component.html         |  57 ++++---
 .../card-view-dateitem.component.scss         |  49 +++---
 .../card-view-selectitem.component.html       |  63 ++++---
 .../card-view-selectitem.component.scss       |  23 ++-
 .../card-view-textitem.component.html         |   1 -
 .../card-view-textitem.component.scss         |  13 +-
 .../card-view/card-view.component.scss        |  70 --------
 .../src/lib/comments/comments.component.scss  |   1 +
 .../components/login/login.component.scss     |  29 +---
 .../src/lib/styles/_components-variables.scss |   7 +
 lib/core/src/lib/styles/_mat-selectors.scss   |  11 ++
 .../src/lib/styles/_reference-variables.scss  |   6 +
 lib/core/src/lib/styles/_typography.scss      |  24 +--
 lib/core/src/lib/styles/material.theme.scss   | 155 ++++++++++++++++++
 42 files changed, 425 insertions(+), 513 deletions(-)

diff --git a/lib/content-services/src/lib/category/categories-management/categories-management.component.html b/lib/content-services/src/lib/category/categories-management/categories-management.component.html
index 1f67b7bccc8..42351c7b430 100644
--- a/lib/content-services/src/lib/category/categories-management/categories-management.component.html
+++ b/lib/content-services/src/lib/category/categories-management/categories-management.component.html
@@ -1,15 +1,15 @@
 <div class="adf-categories-management">
-    <div *ngIf="categoryNameControlVisible" class="adf-category-name-field">
+    <mat-form-field *ngIf="categoryNameControlVisible" class="adf-category-name-field">
+        <mat-label>{{ 'CATEGORIES_MANAGEMENT.CATEGORIES_SEARCH_PLACEHOLDER' | translate }}</mat-label>
         <input #categoryNameInput
             matInput
             autocomplete="off"
             [formControl]="categoryNameControl"
             (keyup.enter)="addCategory()"
-            placeholder="{{'CATEGORIES_MANAGEMENT.CATEGORIES_SEARCH_PLACEHOLDER' | translate }}"
             adf-auto-focus
             />
         <mat-error *ngIf="categoryNameControl.invalid">{{ categoryNameErrorMessageKey | translate }}</mat-error>
-    </div>
+    </mat-form-field>
     <div class="adf-categories-list" [class.adf-categories-list-fixed]="!categoryNameControlVisible">
         <span
             *ngFor="let category of categories"
diff --git a/lib/content-services/src/lib/category/categories-management/categories-management.component.scss b/lib/content-services/src/lib/category/categories-management/categories-management.component.scss
index eaf93e97a2c..f9362772d38 100644
--- a/lib/content-services/src/lib/category/categories-management/categories-management.component.scss
+++ b/lib/content-services/src/lib/category/categories-management/categories-management.component.scss
@@ -1,18 +1,6 @@
 .adf-categories-management {
     .adf-category-name-field {
-        justify-content: space-between;
         width: 100%;
-        color: var(--adf-metadata-property-panel-text-color);
-        background: var(--adf-metadata-buttons-background-color);
-        height: 32px;
-        border-radius: 12px;
-        align-items: center;
-
-        input {
-            background-color: transparent;
-            padding: 7px 8px 8px;
-            width: 100%;
-        }
     }
 
     .adf-assigned-categories {
diff --git a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss
index f71648c9337..3664085ab04 100644
--- a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss
+++ b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss
@@ -9,22 +9,6 @@ $panel-properties-height: 56px !default;
             border: 1px solid var(--adf-metadata-property-panel-border-color);
             border-radius: 12px;
             margin: 12px;
-
-            .adf-property-list .adf-property .adf-property-field {
-                .adf-property-value:not(.adf-card-view-selectitem .adf-property-value) {
-                    margin-top: 10px;
-                    height: 32px;
-
-                    &:is(textarea) {
-                        padding-top: 6px;
-                    }
-                }
-
-                label {
-                    font-size: 19px;
-                    line-height: 20px;
-                }
-            }
         }
 
         .adf-metadata-properties-header {
@@ -39,15 +23,6 @@ $panel-properties-height: 56px !default;
 
         #{$mat-expansion-panel-body} {
             padding-top: 16px;
-
-            input {
-                border-color: transparent;
-                width: 100%;
-
-                &:focus-visible {
-                    outline: none;
-                }
-            }
         }
 
         .adf-edit-icon-buttons {
diff --git a/lib/content-services/src/lib/content-node-selector/content-node-selector-panel.component.html b/lib/content-services/src/lib/content-node-selector/content-node-selector-panel.component.html
index c4e196d26f9..575cde7b354 100644
--- a/lib/content-services/src/lib/content-node-selector/content-node-selector-panel.component.html
+++ b/lib/content-services/src/lib/content-node-selector/content-node-selector-panel.component.html
@@ -1,6 +1,5 @@
 <div class="adf-content-node-selector-content">
     <mat-form-field floatPlaceholder="never"
-                    appearance="outline"
                     class="adf-content-node-selector-content-input"
                     subscriptSizing="dynamic"
                     *ngIf="showSearch">
diff --git a/lib/content-services/src/lib/content-node-share/content-node-share.dialog.html b/lib/content-services/src/lib/content-node-share/content-node-share.dialog.html
index 35775a2787f..f9373d276b0 100644
--- a/lib/content-services/src/lib/content-node-share/content-node-share.dialog.html
+++ b/lib/content-services/src/lib/content-node-share/content-node-share.dialog.html
@@ -31,13 +31,13 @@
                     [style.display]="isExpiryDateToggleChecked ? 'block' : 'none'"
                     data-automation-id="adf-slide-toggle-checked"
                     class="adf-share-link__date-time-container">
-                    <mat-form-field class="adf-full-width" subscriptSizing="dynamic" data-automation-id="adf-content-share-expiration-field">
+                    <mat-form-field class="adf-full-width" data-automation-id="adf-content-share-expiration-field">
                         <mat-label>{{ 'SHARE.EXPIRATION-PLACEHOLDER' | translate }}</mat-label>
                         <mat-datepicker-toggle
                             [disabled]="time.disabled"
                             [for]="datePicker"
                             matSuffix
-                            class="adf-share-link__icon adf-share-link__calender-icon">
+                            class="adf-share-link__icon">
                         </mat-datepicker-toggle>
                         <mat-datepicker
                             #datePicker
@@ -75,16 +75,16 @@
                 <mat-form-field
                     subscriptSizing="dynamic"
                     floatLabel="always"
-                    class="adf-full-width adf-share-link__form--field"
+                    class="adf-full-width"
                     data-automation-id="adf-content-share-public-link-field"
                     [ngClass]="isLinkWithExpiryDate? 'adf-share-link__border-color' : ''">
+                    <mat-label>{{ 'SHARE.PUBLIC-LINK' | translate }}</mat-label>
                     <input
                         #sharedLinkInput
                         data-automation-id="adf-share-link"
                         class="adf-share-link__input"
                         matInput
                         cdkFocusInitial
-                        placeholder="{{ 'SHARE.PUBLIC-LINK' | translate }}"
                         [attr.aria-label]="'SHARE.PUBLIC-LINK' | translate"
                         formControlName="sharedUrl"
                         readonly="readonly">
diff --git a/lib/content-services/src/lib/content-node-share/content-node-share.dialog.scss b/lib/content-services/src/lib/content-node-share/content-node-share.dialog.scss
index 1e755c46a65..1b98fe43886 100644
--- a/lib/content-services/src/lib/content-node-share/content-node-share.dialog.scss
+++ b/lib/content-services/src/lib/content-node-share/content-node-share.dialog.scss
@@ -34,15 +34,6 @@
 
         &__form {
             padding-top: 8px;
-
-            #{$mat-form-field-infix}:has(.adf-share-link__input) {
-                border-top: 0.9375em solid transparent;
-                height: 16px;
-            }
-
-            &--field {
-                padding-bottom: 16px;
-            }
         }
 
         &__public-content {
@@ -64,12 +55,12 @@
             margin: 8px 0;
 
             &-sharable {
-                margin-bottom: 0;
+                margin-bottom: 14px;
             }
         }
 
         &--sharable-container {
-            margin-bottom: 0;
+            margin-bottom: 14px;
         }
 
         &--header {
@@ -116,23 +107,30 @@
             font-size: 22px;
         }
 
-        &__calender-icon {
-            top: 12px;
-            position: relative;
-            right: -6px;
-
-            svg {
-                height: 18px;
-                width: 18px;
-            }
-        }
-
         &__date-time-container {
-            padding-bottom: 20px;
+            padding-bottom: 2px;
         }
 
         &__border-color {
-            border: 1px solid var(--theme-warn-color-a700);
+            &.adf-full-width {
+                &#{$mat-form-field} {
+                    &#{$mat-form-field-label-always-float} {
+                        &#{$mat-form-field-appearance-outline} {
+                            #{$mat-text-field-outlined}, #{$mat-text-field-outlined}:hover {
+                                #{$mat-notched-outline-leading}, #{$mat-notched-outline-trailing}, #{$mat-notched-outline-notch} {
+                                    border-color: var(--theme-warn-color-a700);
+                                    border-width: 2px;
+                                }
+
+                                #{$mat-notched-outline-notch} {
+                                    border-left: none;
+                                    border-left-width: 0;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
         }
     }
 
diff --git a/lib/content-services/src/lib/dialogs/folder.dialog.html b/lib/content-services/src/lib/dialogs/folder.dialog.html
index 943cf924af5..7a8d44cb3ae 100644
--- a/lib/content-services/src/lib/dialogs/folder.dialog.html
+++ b/lib/content-services/src/lib/dialogs/folder.dialog.html
@@ -4,7 +4,7 @@ <h2 data-automation-id="adf-folder-dialog-title" class="adf-folder-dialog-title"
 
 <mat-dialog-content class="adf-folder-dialog-content">
     <form [formGroup]="form" (submit)="submit()">
-        <mat-form-field class="adf-full-width" appearance="outline">
+        <mat-form-field class="adf-full-width">
             <mat-label>{{ 'CORE.FOLDER_DIALOG.FOLDER_NAME.LABEL' | translate }}</mat-label>
             <input
                 id="adf-folder-name-input"
@@ -15,7 +15,7 @@ <h2 data-automation-id="adf-folder-dialog-title" class="adf-folder-dialog-title"
                 adf-auto-focus
             />
 
-            <mat-hint *ngIf="form.controls['name'].dirty">
+            <mat-error *ngIf="form.controls['name'].dirty">
                 <span *ngIf="form.controls['name'].errors?.required">
                     {{ 'CORE.FOLDER_DIALOG.FOLDER_NAME.ERRORS.REQUIRED' | translate }}
                 </span>
@@ -23,10 +23,10 @@ <h2 data-automation-id="adf-folder-dialog-title" class="adf-folder-dialog-title"
                 <span *ngIf="!form.controls['name'].errors?.required && form.controls['name'].errors?.message">
                     {{ form.controls['name'].errors?.message | translate }}
                 </span>
-            </mat-hint>
+            </mat-error>
         </mat-form-field>
 
-        <mat-form-field class="adf-full-width" appearance="outline">
+        <mat-form-field class="adf-full-width">
             <mat-label>{{ 'CORE.FOLDER_DIALOG.FOLDER_TITLE.LABEL' | translate }}</mat-label>
             <input
                 id="adf-folder-title-input"
@@ -36,7 +36,7 @@ <h2 data-automation-id="adf-folder-dialog-title" class="adf-folder-dialog-title"
             />
         </mat-form-field>
 
-        <mat-form-field class="adf-full-width" appearance="outline">
+        <mat-form-field class="adf-full-width">
             <mat-label>{{ 'CORE.FOLDER_DIALOG.FOLDER_DESCRIPTION.LABEL' | translate }}</mat-label>
             <textarea
                 id="adf-folder-description-input"
diff --git a/lib/content-services/src/lib/dialogs/library/library.dialog.html b/lib/content-services/src/lib/dialogs/library/library.dialog.html
index 12bb2d28aaf..090b7a0bb10 100644
--- a/lib/content-services/src/lib/dialogs/library/library.dialog.html
+++ b/lib/content-services/src/lib/dialogs/library/library.dialog.html
@@ -2,7 +2,7 @@ <h2 mat-dialog-title>{{ createTitle | translate }}</h2>
 
 <mat-dialog-content class="adf-library-dialog-content">
   <form novalidate [formGroup]="form" (submit)="submit()">
-    <mat-form-field class="adf-library-dialog-form-field" appearance="outline">
+    <mat-form-field class="adf-library-dialog-form-field">
       <mat-label>{{ 'LIBRARY.DIALOG.FORM.NAME' | translate }}</mat-label>
       <input
         required
@@ -28,7 +28,7 @@ <h2 mat-dialog-title>{{ createTitle | translate }}</h2>
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field class="adf-library-dialog-form-field" appearance="outline">
+    <mat-form-field class="adf-library-dialog-form-field">
       <mat-label>{{ 'LIBRARY.DIALOG.FORM.SITE_ID' | translate }}</mat-label>
       <input
         required
@@ -46,7 +46,7 @@ <h2 mat-dialog-title>{{ createTitle | translate }}</h2>
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field class="adf-library-dialog-form-field" appearance="outline">
+    <mat-form-field class="adf-library-dialog-form-field">
       <mat-label>{{ 'LIBRARY.DIALOG.FORM.DESCRIPTION' | translate }}</mat-label>
       <textarea
         matInput
diff --git a/lib/content-services/src/lib/i18n/en.json b/lib/content-services/src/lib/i18n/en.json
index c68da5598bd..1cb7739d067 100644
--- a/lib/content-services/src/lib/i18n/en.json
+++ b/lib/content-services/src/lib/i18n/en.json
@@ -437,10 +437,7 @@
         "WEEKS": "In the last {{value}} weeks",
         "MONTHS": "In the last {{value}} months"
       },
-      "BETWEEN_PLACEHOLDERS": {
-        "START_DATE": "Start Date",
-        "END_DATE": "End Date"
-      },
+      "BETWEEN_PLACEHOLDER": "Start Date - End Date",
       "ERROR": {
         "IN_LAST": "Value required",
         "START_DATE": {
diff --git a/lib/content-services/src/lib/material.module.ts b/lib/content-services/src/lib/material.module.ts
index 7899b3c8884..cf544467277 100644
--- a/lib/content-services/src/lib/material.module.ts
+++ b/lib/content-services/src/lib/material.module.ts
@@ -88,5 +88,4 @@ import { MatBadgeModule } from '@angular/material/badge';
         MatBadgeModule
     ]
 })
-export class MaterialModule {
-}
+export class MaterialModule {}
diff --git a/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.html b/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.html
index 29f1497699a..32e8ae486a5 100644
--- a/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.html
+++ b/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.html
@@ -1,11 +1,11 @@
-<mat-form-field appearance="outline" floatPlaceholder="never" class="adf-permission-search-input">
+<mat-form-field class="adf-permission-search-input">
+    <mat-label>{{ 'PERMISSION_MANAGER.ADD-PERMISSION.SEARCH' | translate }}</mat-label>
     <input
         matInput
         id="searchInput"
         [formControl]="searchInput"
         type="text"
         title="{{ 'PERMISSION_MANAGER.ADD-PERMISSION.SEARCH' | translate }}"
-        placeholder="{{ 'PERMISSION_MANAGER.ADD-PERMISSION.SEARCH' | translate }}"
         [value]="searchedWord"
     />
 
diff --git a/lib/content-services/src/lib/permission-manager/components/permission-container/permission-container.component.scss b/lib/content-services/src/lib/permission-manager/components/permission-container/permission-container.component.scss
index 4d537fca8e2..1f4d17be961 100644
--- a/lib/content-services/src/lib/permission-manager/components/permission-container/permission-container.component.scss
+++ b/lib/content-services/src/lib/permission-manager/components/permission-container/permission-container.component.scss
@@ -10,6 +10,10 @@
             position: relative;
         }
 
+        .adf-datatable-row {
+            min-height: 85px;
+        }
+
         .adf-delete-permission-column {
             min-width: 80px;
 
diff --git a/lib/content-services/src/lib/permission-manager/components/user-role-column/user-role-column.component.ts b/lib/content-services/src/lib/permission-manager/components/user-role-column/user-role-column.component.ts
index f782216af12..35d34c6f170 100644
--- a/lib/content-services/src/lib/permission-manager/components/user-role-column/user-role-column.component.ts
+++ b/lib/content-services/src/lib/permission-manager/components/user-role-column/user-role-column.component.ts
@@ -45,13 +45,8 @@ import { RoleModel } from '../../models/role.model';
         `
             .adf-role-selector-field.mat-mdc-form-field {
                 width: 100%;
-                height: 40px;
                 max-width: 200px;
 
-                .mat-mdc-form-field-infix {
-                    padding-top: 8px;
-                }
-
                 .mat-mdc-form-field-subscript-wrapper {
                     display: none;
                 }
diff --git a/lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.html b/lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.html
index 4e1b4cfaa4f..8ef6c65e2dc 100644
--- a/lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.html
+++ b/lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.html
@@ -1,4 +1,5 @@
-<mat-form-field class="adf-chip-list" appearance="outline">
+<mat-form-field class="adf-chip-list">
+    <mat-label>{{ placeholder | translate }}</mat-label>
     <mat-chip-grid #chipList [attr.aria-label]="'SEARCH.FILTER.ARIA-LABEL.OPTIONS-SELECTION' | translate">
         <mat-chip-row
             class="adf-option-chips adf-autocomplete-added-option-chips"
@@ -16,7 +17,6 @@
             </button>
         </mat-chip-row>
         <input
-            placeholder="{{ placeholder | translate }}"
             aria-controls="adf-search-chip-autocomplete"
             #optionInput
             [formControl]="formCtrl"
diff --git a/lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.scss b/lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.scss
index 62ed507e8ad..23f1780d3d0 100644
--- a/lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.scss
+++ b/lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.scss
@@ -4,28 +4,24 @@
 adf-search-chip-autocomplete-input {
     .adf-chip-list {
         width: 100%;
+
+        mat-chip-grid {
+            padding-left: 9px;
+        }
+
+        .adf-search-properties-file-input {
+            margin-left: 0;
+        }
     }
 
     .adf-chip-list:has(#{$mat-notched-outline}) {
-        margin-top: 4px;
+        margin-top: 2px;
     }
 
     #{$mat-form--text-field-infix} {
         border: none;
     }
 
-    .adf-chip-list#{$mat-form-field} {
-        #{$mat-form-field-infix} {
-            padding-top: 14px;
-            padding-bottom: 14px;
-            min-height: unset;
-        }
-    }
-
-    .adf-search-properties-file-input {
-        margin-left: 3px;
-    }
-
     .adf-autocomplete-added-option-chips.adf-option-chips {
         border: 1px solid var(--theme-text-color);
         border-radius: 10px;
diff --git a/lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range/search-date-range.component.html b/lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range/search-date-range.component.html
index 961d22ffbe8..6bc69dda38a 100644
--- a/lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range/search-date-range.component.html
+++ b/lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range/search-date-range.component.html
@@ -28,12 +28,19 @@
       <mat-radio-button [value]="DateRangeType.BETWEEN" data-automation-id="date-range-between">
         {{ 'SEARCH.DATE_RANGE_ADVANCED.OPTIONS.BETWEEN' | translate }}
       </mat-radio-button>
-      <mat-form-field class="adf-search-date-range-form-field" subscriptSizing="dynamic">
+      <mat-form-field class="adf-search-date-range-form-field">
+        <mat-label>{{ 'SEARCH.DATE_RANGE_ADVANCED.BETWEEN_PLACEHOLDER' | translate }}</mat-label>
         <mat-date-range-input [rangePicker]="$any(picker)" [max]="convertedMaxDate">
-          <input matStartDate placeholder="{{ 'SEARCH.DATE_RANGE_ADVANCED.BETWEEN_PLACEHOLDERS.START_DATE' | translate }}"
-                 data-automation-id="date-range-between-start-input" [formControl]="betweenStartDateFormControl" (change)="dateChanged($event, betweenStartDateFormControl)">
-          <input matEndDate placeholder="{{ 'SEARCH.DATE_RANGE_ADVANCED.BETWEEN_PLACEHOLDERS.END_DATE' | translate }}"
-                 data-automation-id="date-range-between-end-input" [formControl]="betweenEndDateFormControl" (change)="dateChanged($event, betweenEndDateFormControl)">
+          <input
+              matStartDate
+              data-automation-id="date-range-between-start-input"
+              [formControl]="betweenStartDateFormControl"
+              (change)="dateChanged($event, betweenStartDateFormControl)">
+          <input
+              matEndDate
+              data-automation-id="date-range-between-end-input"
+              [formControl]="betweenEndDateFormControl"
+              (change)="dateChanged($event, betweenEndDateFormControl)">
         </mat-date-range-input>
         <mat-datepicker-toggle matSuffix [for]="picker" data-automation-id="date-range-between-datepicker-toggle"></mat-datepicker-toggle>
         <mat-date-range-picker #picker></mat-date-range-picker>
diff --git a/lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range/search-date-range.component.scss b/lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range/search-date-range.component.scss
index 4e43f9271e4..2dce2f053b4 100644
--- a/lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range/search-date-range.component.scss
+++ b/lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range/search-date-range.component.scss
@@ -1,14 +1,9 @@
 @import 'styles/mat-selectors';
 
 adf-search-date-range {
-    #{$mat-icon-button}:is(button),
-    #{$mat-icon-button}#{$mat-button-base} {
-        height: 24px;
-    }
-
     .adf-search-date-range-container {
         margin-top: 20px;
-        padding: 10px;
+        padding: 10px 10px 0;
 
         .adf-search-date-range-form-field-select {
             width: 180px;
@@ -23,10 +18,11 @@ adf-search-date-range {
 
             &-date {
                 margin-top: 8px;
-            }
+                align-items: flex-start;
 
-            #{$mat-select-arrow-wrapper} {
-                height: unset;
+                mat-radio-button {
+                    margin-top: 19px;
+                }
             }
 
             .adf-search-date-range-input-field {
@@ -36,12 +32,9 @@ adf-search-date-range {
             .adf-search-date-range-form-field {
                 padding-left: 10px;
                 flex: 1;
-                margin-bottom: 12px;
 
-                #{$mat-form-field-flex} {
-                    #{$mat-form-field-infix} {
-                        padding: 0.375em 0 4px;
-                    }
+                #{$mat-date-range-input-container} {
+                    justify-content: space-between;
                 }
             }
         }
diff --git a/lib/content-services/src/lib/search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.ts b/lib/content-services/src/lib/search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.ts
index e8870704fd9..afad1e1a1eb 100644
--- a/lib/content-services/src/lib/search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.ts
+++ b/lib/content-services/src/lib/search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.ts
@@ -22,19 +22,18 @@ import { MatMenuTrigger } from '@angular/material/menu';
 import { SearchWidgetContainerComponent } from '../../search-widget-container/search-widget-container.component';
 
 @Component({
-  selector: 'adf-search-widget-chip',
-  templateUrl: './search-widget-chip.component.html',
-  styles: [
-      `
-                .adf-search-widget-extra-width.adf-search-filter-chip-menu-panel {
-                  max-width: 500px;
-                }
-              `
-  ],
-  encapsulation: ViewEncapsulation.None
+    selector: 'adf-search-widget-chip',
+    templateUrl: './search-widget-chip.component.html',
+    styles: [
+        `
+            .adf-search-widget-extra-width.adf-search-filter-chip-menu-panel {
+                max-width: 500px;
+            }
+        `
+    ],
+    encapsulation: ViewEncapsulation.None
 })
-export class SearchWidgetChipComponent  {
-
+export class SearchWidgetChipComponent {
     @Input()
     category: SearchCategory;
 
diff --git a/lib/content-services/src/lib/search/components/search-input/search-input.component.html b/lib/content-services/src/lib/search/components/search-input/search-input.component.html
index 2adba706036..2a7141d6486 100644
--- a/lib/content-services/src/lib/search/components/search-input/search-input.component.html
+++ b/lib/content-services/src/lib/search/components/search-input/search-input.component.html
@@ -1,5 +1,5 @@
 <div class="adf-search-input-container">
-    <mat-form-field appearance="outline">
+    <mat-form-field>
         <mat-label *ngIf="label">{{ label | translate }}</mat-label>
         <input matInput [placeholder]="placeholder | translate" [value]="value" (change)="onSearchInputChanged($event)" />
     </mat-form-field>
diff --git a/lib/content-services/src/lib/search/components/search-logical-filter/search-logical-filter.component.html b/lib/content-services/src/lib/search/components/search-logical-filter/search-logical-filter.component.html
index 4ba39e54bcc..73f07bf540f 100644
--- a/lib/content-services/src/lib/search/components/search-logical-filter/search-logical-filter.component.html
+++ b/lib/content-services/src/lib/search/components/search-logical-filter/search-logical-filter.component.html
@@ -1,10 +1,12 @@
 <div class="adf-search-logical-filter-container">
-    <div *ngFor="let field of fields" class="adf-search-input">
+    <mat-form-field *ngFor="let field of fields" class="adf-search-input">
         <mat-label data-automation-id="adf-search-input-label">{{('SEARCH.LOGICAL_SEARCH.' + field + '_LABEL') | translate}}</mat-label>
-        <input type="text"
+        <input
+            type="text"
+            matInput
             [(ngModel)]="searchCondition[LogicalSearchFields[field]]"
-            placeholder="{{ ('SEARCH.LOGICAL_SEARCH.' + field + '_HINT') | translate }}"
             [attr.aria-label]="('SEARCH.LOGICAL_SEARCH.' + field + '_HINT') | translate"
             (change)="onInputChange()"/>
-    </div>
+        <mat-hint>{{ ('SEARCH.LOGICAL_SEARCH.' + field + '_HINT') | translate }}</mat-hint>
+    </mat-form-field>
 </div>
diff --git a/lib/content-services/src/lib/search/components/search-logical-filter/search-logical-filter.component.scss b/lib/content-services/src/lib/search/components/search-logical-filter/search-logical-filter.component.scss
index a467b7e956d..97a69dd33c5 100644
--- a/lib/content-services/src/lib/search/components/search-logical-filter/search-logical-filter.component.scss
+++ b/lib/content-services/src/lib/search/components/search-logical-filter/search-logical-filter.component.scss
@@ -7,15 +7,5 @@
         &:last-child {
             padding: 0;
         }
-
-        input {
-            height: 25px;
-            border: 1px solid var(--adf-theme-mat-grey-color-a400);
-            border-radius: 5px;
-            margin-top: 5px;
-            padding: 5px;
-            font-size: 14px;
-            color: var(--adf-theme-foreground-text-color);
-        }
     }
 }
diff --git a/lib/content-services/src/lib/search/components/search-properties/search-properties.component.html b/lib/content-services/src/lib/search/components/search-properties/search-properties.component.html
index 37e8ce454f9..739ee4e0dce 100644
--- a/lib/content-services/src/lib/search/components/search-properties/search-properties.component.html
+++ b/lib/content-services/src/lib/search/components/search-properties/search-properties.component.html
@@ -20,17 +20,20 @@
                 </mat-option>
             </mat-select>
         </mat-form-field>
-        <input
-            [formControl]="form.controls.fileSize"
-            type="number"
-            min="0"
-            step="any"
-            (input)="narrowDownAllowedCharacters($event)"
-            (keydown)="preventIncorrectNumberCharacters($event)"
-            id="adf-search-properties-file-size"
-            [placeholder]="'SEARCH.SEARCH_PROPERTIES.FILE_SIZE_PLACEHOLDER' | translate"
-            (blur)="clearNumberFieldWhenInvalid($event)"
-            data-automation-id="adf-search-properties-file-size-input" />
+        <mat-form-field subscriptSizing="dynamic" class="adf-search-properties-file-size">
+            <mat-label>{{ 'SEARCH.SEARCH_PROPERTIES.FILE_SIZE_PLACEHOLDER' | translate }}</mat-label>
+            <input
+                matInput
+                [formControl]="form.controls.fileSize"
+                type="number"
+                min="0"
+                step="any"
+                (input)="narrowDownAllowedCharacters($event)"
+                (keydown)="preventIncorrectNumberCharacters($event)"
+                id="adf-search-properties-file-size"
+                (blur)="clearNumberFieldWhenInvalid($event)"
+                data-automation-id="adf-search-properties-file-size-input" />
+        </mat-form-field>
         <mat-form-field class="adf-search-properties-file-size-unit" subscriptSizing="dynamic">
             <mat-select
                 [formControl]="form.controls.fileSizeUnit"
diff --git a/lib/content-services/src/lib/search/components/search-properties/search-properties.component.scss b/lib/content-services/src/lib/search/components/search-properties/search-properties.component.scss
index 4cc4126ba76..b1d9bd79fee 100644
--- a/lib/content-services/src/lib/search/components/search-properties/search-properties.component.scss
+++ b/lib/content-services/src/lib/search/components/search-properties/search-properties.component.scss
@@ -7,115 +7,16 @@ adf-search-properties {
             .adf-search-properties-file-size-label {
                 margin-top: 4px;
                 display: block;
+                margin-bottom: 3px;
             }
 
-            #{$mat-text-field--no-label} {
-                #{$mat-form-field-infix} {
-                    padding-top: 9px;
-                    padding-bottom: 9px;
-                    display: inline-block;
-                }
+            .adf-search-properties-file-size {
+                margin-left: 8px;
+                margin-right: 8px;
             }
 
-            #{$mat-form-field-infix} {
-                height: 37.5px;
-                min-height: 37.5px;
-                display: inline-block;
-            }
-
-            #{$mat-select-trigger} {
-                height: 17.5px;
-            }
-
-            #{$mat-select-arrow-wrapper} {
-                width: 16px;
-            }
-
-            #{$mat-form-field-underline} {
-                &::before {
-                    display: none;
-                }
-            }
-
-            #{$mat-select-arrow} {
-                margin-left: 5px;
-            }
-
-            #{$mat-form-field} {
-                margin-bottom: 18px;
-            }
-        }
-
-        adf-search-chip-autocomplete-input {
-            display: block;
-
-            #{$mat-text-field-outlined} {
-                &-start,
-                &-end {
-                    border-top: 1px solid var(--adf-theme-mat-grey-color-a400);
-                    border-bottom: 1px solid var(--adf-theme-mat-grey-color-a400);
-                }
-
-                &-start {
-                    border-left: 1px solid var(--adf-theme-mat-grey-color-a400);
-                }
-
-                &-end {
-                    border-right: 1px solid var(--adf-theme-mat-grey-color-a400);
-                }
-            }
-
-            #{$mat-focused} {
-                #{$mat-text-field-outlined} {
-                    outline: 2px auto -webkit-focus-ring-color;
-                }
-            }
-
-            #{$mat-form-field-appearance-outline} {
-                #{$mat-text-field-outlined-thick} {
-                    #{$mat-text-field-outlined} {
-                        &-start,
-                        &-end {
-                            border-width: 1px;
-                        }
-                    }
-                }
-            }
-
-            #{$mat-notched-outline-leading} {
-                border-color: var(--adf-theme-foreground-text-color-027);
-            }
-
-            #{$mat-notched-outline-trailing} {
-                border-color: var(--adf-theme-foreground-text-color-027);
-            }
-        }
-    }
-
-    input,
-    .mat-form-field-infix.mat-form-field-infix {
-        height: 25px;
-        border: 1px solid var(--adf-theme-mat-grey-color-a400);
-        border-radius: 5px;
-        margin-top: 5px;
-        padding: 5px;
-        font-size: 14px;
-        color: var(--adf-theme-foreground-text-color);
-        margin-left: 8px;
-        margin-right: 8px;
-    }
-
-    .adf-search-properties-file-size-operator,
-    .adf-search-properties-file-size-unit {
-        #{$mat-form-field-infix} {
-            border: 1px solid var(--adf-theme-mat-grey-color-a400);
-            border-radius: 5px;
-            padding: 9px;
-        }
-
-        &#{$mat-focused} {
-            #{$mat-form-field-infix} {
-                outline: 2px auto -webkit-focus-ring-color;
+            .adf-search-properties-file-size-operator {
+                min-width: 100px;
             }
         }
     }
diff --git a/lib/content-services/src/lib/search/components/search-text/search-text.component.html b/lib/content-services/src/lib/search/components/search-text/search-text.component.html
index 3b97888693e..48869ad06a0 100644
--- a/lib/content-services/src/lib/search/components/search-text/search-text.component.html
+++ b/lib/content-services/src/lib/search/components/search-text/search-text.component.html
@@ -1,6 +1,6 @@
 <mat-form-field
     class="adf-search-text-form-field"
-    appearance="outline">
+    subscriptSizing="dynamic">
     <mat-label>{{ settings?.placeholder | translate }}</mat-label>
     <input
         matInput
diff --git a/lib/content-services/src/lib/search/components/search-text/search-text.component.scss b/lib/content-services/src/lib/search/components/search-text/search-text.component.scss
index 919d87d4493..f3e0e593b84 100644
--- a/lib/content-services/src/lib/search/components/search-text/search-text.component.scss
+++ b/lib/content-services/src/lib/search/components/search-text/search-text.component.scss
@@ -1,34 +1,8 @@
 @import 'styles/mat-selectors';
 
 .adf-search-text {
-    padding: 0;
-
-    #{$mat-form-field-wrapper} {
-        margin-top: -5px;
-        padding: 0;
-
-        #{$mat-form-field-infix} {
-            padding-bottom: 6px;
-        }
-    }
-
-    #{$mat-notched-outline} {
-        #{$mat-notched-outline-trailing},
-        #{$mat-notched-outline-notch} {
-            border-top: 0 solid;
-            border-left: 0 solid;
-            border-right: 0 solid;
-            border-bottom: 1px solid var(--adf-theme-foreground-secondary-text-color);
-
-            #{$mat-floating-label} {
-                left: 0;
-            }
-        }
-    }
-
-    #{$mat-notched-outline-leading}  {
-        display: none;
-    }
+    display: block;
+    padding-bottom: 10px;
 
     .adf-search-text-form-field {
         width: 100%;
diff --git a/lib/content-services/src/lib/site-dropdown/sites-dropdown.component.html b/lib/content-services/src/lib/site-dropdown/sites-dropdown.component.html
index c4e853c17f3..de5a9f1b715 100644
--- a/lib/content-services/src/lib/site-dropdown/sites-dropdown.component.html
+++ b/lib/content-services/src/lib/site-dropdown/sites-dropdown.component.html
@@ -1,5 +1,5 @@
 <div id="site-dropdown-container" class="adf-site-dropdown-container">
-    <mat-form-field class="adf-sites-dropdown-form-field" appearance="outline" subscriptSizing="dynamic">
+    <mat-form-field class="adf-sites-dropdown-form-field" subscriptSizing="dynamic">
         <mat-label>{{ 'NODE_SELECTOR.LOCATION' | translate }}</mat-label>
         <mat-select
             adf-infinite-select-scroll
diff --git a/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.html b/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.html
index d98a9e4cc54..0fc0cb2ba04 100644
--- a/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.html
+++ b/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.html
@@ -1,5 +1,6 @@
 <div class="adf-tags-creation">
-    <div *ngIf="tagNameControlVisible" class="adf-tag-name-field">
+    <mat-form-field *ngIf="tagNameControlVisible" class="adf-tag-name-field">
+        <mat-label>{{ 'TAG.TAGS_CREATOR.TAG_SEARCH_PLACEHOLDER' | translate }}</mat-label>
         <input
             #tagNameInput
             class="adf-tag-search-field"
@@ -7,10 +8,10 @@
             autocomplete="off"
             [formControl]="tagNameControl"
             (keyup.enter)="addTag()"
-            placeholder="{{ 'TAG.TAGS_CREATOR.TAG_SEARCH_PLACEHOLDER' | translate }}"
+            adf-auto-focus
         />
         <mat-error *ngIf="tagNameControl.invalid && tagNameControl.touched">{{ tagNameErrorMessageKey | translate }} </mat-error>
-    </div>
+    </mat-form-field>
     <p class="adf-no-tags-message" *ngIf="showEmptyTagMessage">
         {{ 'TAG.TAGS_CREATOR.NO_TAGS_CREATED' | translate }}
     </p>
diff --git a/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.scss b/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.scss
index 741f236b1e0..2ad79784642 100644
--- a/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.scss
+++ b/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.scss
@@ -29,13 +29,7 @@ adf-tags-creator {
     .adf-tag-name-field[hidden] {
         padding-top: 10px;
         margin-right: 12px;
-    }
-
-    .adf-tag-search-field {
-        background: var(--adf-metadata-buttons-background-color);
-        height: 32px;
-        border-radius: 12px;
-        padding: 0 6px;
+        width: 100%;
     }
 
     .adf-create-tag-label {
diff --git a/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.html b/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.html
index 71677b55d70..4bd016e7d41 100644
--- a/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.html
+++ b/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.html
@@ -1,24 +1,14 @@
-<label
-    class="adf-property-label"
-    [attr.data-automation-id]="'card-dateitem-label-' + property.key"
-    *ngIf="showProperty || isEditable"
-    [attr.for]="'card-view-dateitem-' + property.key"
-    [ngClass]="{ 'adf-property-readonly-value': isReadonlyProperty, 'adf-property-value-editable': editable }"
->
-    {{ property.label | translate }}
-</label>
 <div class="adf-property-value" [ngClass]="{ 'adf-property-value-editable': editable, 'adf-property-readonly-value': isReadonlyProperty }">
-    <span *ngIf="!isEditable && !property.multivalued" [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key">
-        <span
-            *ngIf="showProperty"
-            [attr.data-automation-id]="'card-dateitem-' + property.key"
-            (dblclick)="copyToClipboard(property.displayValue)"
-            matTooltipShowDelay="1000"
-            [matTooltip]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate"
-            >{{ property.displayValue }}</span
+    <mat-form-field *ngIf="!property.multivalued" class="adf-dateitem-editable">
+        <mat-label
+            class="adf-property-label"
+            [attr.data-automation-id]="'card-dateitem-label-' + property.key"
+            *ngIf="showProperty || isEditable"
+            [attr.for]="'card-view-dateitem-' + property.key"
+            [ngClass]="{ 'adf-property-readonly-value': isReadonlyProperty, 'adf-property-value-editable': editable }"
         >
-    </span>
-    <div *ngIf="isEditable && !property.multivalued" class="adf-dateitem-editable">
+            {{ property.label | translate }}
+        </mat-label>
         <div class="adf-dateitem-editable-controls">
             <span
                 class="adf-datepicker-toggle"
@@ -28,13 +18,18 @@
                 role="button"
                 (keyup.enter)="showDatePicker()"
             >
-                <span *ngIf="showProperty; else elseEmptyValueBlock" [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key">
+                <span
+                    (dblclick)="copyToClipboard(property.displayValue)"
+                    matTooltipShowDelay="1000"
+                    [matTooltip]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate"
+                    *ngIf="showProperty; else elseEmptyValueBlock"
+                    [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key">
                     {{ property.displayValue }}</span
                 >
             </span>
 
             <mat-icon
-                *ngIf="showClearAction"
+                *ngIf="showClearAction && isEditable"
                 class="adf-date-reset-icon"
                 (click)="onDateClear()"
                 [attr.title]="'CORE.METADATA.ACTIONS.CLEAR' | translate"
@@ -44,6 +39,7 @@
             </mat-icon>
 
             <mat-datetimepicker-toggle
+                *ngIf="isEditable"
                 [attr.tabindex]="-1"
                 [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
                 [attr.data-automation-id]="'datepickertoggle-' + property.key"
@@ -53,9 +49,11 @@
         </div>
 
         <input
+            matInput
             class="adf-invisible-date-input"
             [attr.tabIndex]="-1"
             [matDatetimepicker]="datetimePicker"
+            [disabled]="!isEditable"
             [value]="valueDate"
             (dateChange)="onDateChanged($event)"
             [attr.id]="'card-view-dateitem-' + property.key"
@@ -69,12 +67,12 @@
             [startAt]="valueDate"
         >
         </mat-datetimepicker>
-    </div>
+    </mat-form-field>
     <ng-template #elseEmptyValueBlock>
         {{ property.default | translate }}
     </ng-template>
 
-    <div *ngIf="property.multivalued"
+    <mat-form-field *ngIf="property.multivalued"
          class="adf-property-field adf-dateitem-chip-list-container adf-dateitem-editable">
         <mat-chip-listbox #chipList class="adf-textitem-chip-list">
             <mat-chip-option
@@ -85,7 +83,15 @@
                 <mat-icon *ngIf="isEditable" matChipRemove>cancel</mat-icon>
             </mat-chip-option>
         </mat-chip-listbox>
-
+        <mat-label
+            class="adf-property-label"
+            [attr.data-automation-id]="'card-dateitem-label-' + property.key"
+            *ngIf="showProperty || isEditable"
+            [attr.for]="'card-view-dateitem-' + property.key"
+            [ngClass]="{ 'adf-property-readonly-value': isReadonlyProperty, 'adf-property-value-editable': editable }"
+        >
+            {{ property.label | translate }}
+        </mat-label>
         <div
             *ngIf="isEditable"
             class="adf-property-field adf-dateitem-editable-controls"
@@ -95,6 +101,7 @@
             (keyup.enter)="showDatePicker()"
         >
             <input
+                matInput
                 class="adf-invisible-date-input"
                 [attr.tabIndex]="-1"
                 [matDatetimepicker]="datetimePicker"
@@ -118,5 +125,5 @@
             >
             </mat-datetimepicker>
         </div>
-    </div>
+    </mat-form-field>
 </div>
diff --git 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
index 94b09fc6ce4..05f9cce4120 100644
--- 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
@@ -9,28 +9,33 @@
         border-bottom: 1px solid var(--adf-metadata-property-panel-border-color);
         margin-top: 10px;
 
-        &.adf-property-value-editable {
-            display: flex;
-            align-items: center;
-            border-radius: 6px;
-            border-bottom: inherit;
-            margin-bottom: 18px;
-        }
+        &:not(.adf-property-readonly-value) {
+            #{$mat-text-field-disabled} {
+                #{$mat-notched-outline-leading}, #{$mat-notched-outline-trailing}, #{$mat-notched-outline-notch} {
+                    border: none;
+                    background-color: inherit;
+                }
 
-        &.adf-property-readonly-value {
-            padding: 0 0 0 12px;
+                #{$mat-select-arrow-wrapper} {
+                    display: none;
+                }
+            }
         }
     }
 
-    .adf-invisible-date-input {
-        height: 2px;
-        width: 0;
-        overflow: hidden;
-        opacity: 0;
-        border: none;
-        margin: 0;
-        padding: 0;
-        float: right;
+    #{$mat-form-field-wrapper} {
+        #{$mat-form-field-input-control} {
+            &.adf-invisible-date-input {
+                height: 0;
+                width: 0;
+                overflow: hidden;
+                opacity: 0;
+                border: none;
+                margin: 0;
+                padding: 0;
+                float: right;
+            }
+        }
     }
 
     .adf-dateitem-chip-list-container.adf-property-field {
@@ -40,8 +45,7 @@
     }
 
     .adf-dateitem-editable {
-        cursor: pointer;
-        padding: 0 12px;
+        width: 100%;
 
         /* stylelint-disable-next-line no-descending-specificity */
         &-controls {
@@ -57,8 +61,6 @@
             }
 
             #{$mat-icon} {
-                width: 16px;
-                height: 16px;
                 opacity: 0.5;
 
                 &:hover {
@@ -71,9 +73,6 @@
             }
 
             .adf-date-reset-icon {
-                line-height: 10px;
-                position: relative;
-                top: 4px;
                 padding: 0 8px;
             }
         }
diff --git a/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.html b/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.html
index 8aeacf38062..b57af7907ee 100644
--- a/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.html
+++ b/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.html
@@ -1,37 +1,34 @@
 <ng-container *ngIf="!property.isEmpty() || isEditable">
-    <div
-        [attr.data-automation-id]="'card-select-label-' + property.key"
-        class="adf-property-label"
-        [ngClass]="{
-            'adf-property-value-editable': isEditable,
-            'adf-property-readonly-value': isReadonlyProperty
-        }"
-    >{{ property.label | translate }}</div>
     <div class="adf-property-field">
-        <div
-            *ngIf="!isEditable"
-            class="adf-property-value adf-property-read-only"
-            [attr.data-automation-id]="'select-readonly-value-' + property.key"
-            data-automation-class="read-only-value">{{ (property.displayValue | async) | translate }}
-        </div>
-        <div *ngIf="isEditable">
-            <mat-form-field class="adf-property-value" [ngClass]="{'adf-property-value-editable': isEditable}">
-                <mat-select
-                    [(value)]="value"
-                    [ngClass]="{ 'adf-property-readonly-value': isReadonlyProperty }"
-                    panelClass="adf-select-filter"
-                    (selectionChange)="onChange($event)"
-                    data-automation-class="select-box"
-                    [aria-label]="property.label | translate">
-                    <adf-select-filter-input *ngIf="showInputFilter" (change)="onFilterInputChange($event)"></adf-select-filter-input>
-                    <mat-option *ngIf="displayNoneOption">{{ 'CORE.CARDVIEW.NONE' | translate }}</mat-option>
-                    <mat-option
-                        *ngFor="let option of list$ | async"
-                        [value]="option.key">
-                        {{ option.label | translate }}
-                    </mat-option>
-                </mat-select>
-            </mat-form-field>
-        </div>
+        <mat-form-field class="adf-property-value" [ngClass]="{
+            'adf-property-value-editable': isEditable,
+            'adf-property-read-only': !isEditable
+        }">
+            <mat-label
+                [attr.data-automation-id]="'card-select-label-' + property.key"
+                class="adf-property-label adf-property-value-editable"
+                [ngClass]="{
+                    'adf-property-readonly-value': isReadonlyProperty
+                }">
+                {{ property.label | translate }}
+            </mat-label>
+            <mat-select
+                [attr.data-automation-id]="'select-readonly-value-' + property.key"
+                [(value)]="value"
+                [ngClass]="{ 'adf-property-readonly-value': isReadonlyProperty }"
+                panelClass="adf-select-filter"
+                (selectionChange)="onChange($event)"
+                data-automation-class="select-box"
+                [aria-label]="property.label | translate"
+                [disabled]="!isEditable">
+                <adf-select-filter-input *ngIf="showInputFilter" (change)="onFilterInputChange($event)"></adf-select-filter-input>
+                <mat-option *ngIf="displayNoneOption">{{ 'CORE.CARDVIEW.NONE' | translate }}</mat-option>
+                <mat-option
+                    *ngFor="let option of list$ | async"
+                    [value]="option.key">
+                    {{ option.label | translate }}
+                </mat-option>
+            </mat-select>
+        </mat-form-field>
     </div>
 </ng-container>
diff --git 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
index 0c53a6f0471..b5f4c7b7393 100644
--- 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
@@ -24,17 +24,6 @@
         #{$mat-form-field-wrapper} {
             background-color: initial;
         }
-
-        /* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version. */
-        mat-select {
-            padding: 6px 0 8px 12px;
-            margin-top: 0;
-            border-radius: 6px;
-
-            #{$mat-select-value} {
-                color: var(--adf-metadata-action-button-clear-color);
-            }
-        }
     }
 
     #{$mat-form-field-subscript-wrapper} {
@@ -42,9 +31,19 @@
     }
 
     .adf-property-read-only {
-        padding: 6px 0;
         border-bottom: 1px solid var(--adf-metadata-property-panel-border-color);
         color: var(--adf-metadata-property-panel-title-color);
+
+        #{$mat-text-field-disabled}:not(:has(.adf-property-readonly-value)) {
+            #{$mat-notched-outline-leading}, #{$mat-notched-outline-trailing}, #{$mat-notched-outline-notch} {
+                border: none;
+                background-color: inherit;
+            }
+
+            #{$mat-select-arrow-wrapper} {
+                display: none;
+            }
+        }
     }
 
     .mdc-line-ripple {
diff --git a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.html b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.html
index 90d368cc1ce..ccd3ca6c958 100644
--- a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.html
+++ b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.html
@@ -5,7 +5,6 @@
             [ngClass]="{
                 'adf-property-read-only': !isEditable
             }"
-            [floatLabel]="'always'"
         >
             <mat-label
                 *ngIf="showProperty || isEditable"
diff --git 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
index de645e85466..8976db42684 100644
--- 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
@@ -55,8 +55,17 @@
         color: var(--adf-theme-foreground-text-color-054);
     }
 
-    .adf-property-read-only:not(:has(.adf-property-readonly-value)) {
-        border-bottom: 1px solid var(--adf-metadata-property-panel-border-color);
+    .adf-property-read-only {
+        &:not(:has(.adf-property-readonly-value)) {
+            border-bottom: 1px solid var(--adf-metadata-property-panel-border-color);
+        }
+
+        #{$mat-text-field-disabled}:not(:has(.adf-property-readonly-value)) {
+            #{$mat-notched-outline-leading}, #{$mat-notched-outline-trailing}, #{$mat-notched-outline-notch} {
+                border: none;
+                background-color: inherit;
+            }
+        }
     }
 
     .adf-property-readonly-value {
diff --git 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
index f5c463f67bc..2b4810ba582 100644
--- 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
@@ -6,32 +6,11 @@
     border-color: var(--adf-card-view-border-color);
     border-radius: var(--adf-card-view-border-radius);
 
-    .adf-property-label {
-        color: var(--adf-metadata-property-panel-text-color);
-        display: flex;
-        padding: 3px 0;
-        line-height: 20px;
-
-        &.adf-property-value-editable {
-            color: var(--adf-metadata-property-panel-title-color);
-        }
-
-        &.adf-property-readonly-value {
-            color: var(--adf-metadata-property-panel-label-color);
-        }
-    }
-
     .adf-property-container {
         margin-bottom: 12px;
     }
 
     .adf-property {
-        .adf-card-view-textitem {
-            .adf-property-field {
-                padding-top: 0;
-            }
-        }
-
         .adf-property-field {
             width: 100%;
 
@@ -41,7 +20,6 @@
 
             #{mat-input-element} {
                 text-overflow: ellipsis;
-                color: var(--adf-metadata-property-panel-title-color);
                 padding: 6px 0;
                 line-height: 20px;
             }
@@ -60,59 +38,11 @@
             #{$mat-form-field-flex} {
                 padding-top: 0;
             }
-
-            #{$mat-form-field-wrapper} {
-                background-color: inherit;
-                padding-bottom: 0;
-                padding-left: 0;
-                padding-right: 0;
-            }
-
-            #{$mat-form-field-label} {
-                padding: 0;
-                justify-content: center;
-                display: flex;
-                flex-direction: column;
-                height: 20px;
-
-                &.adf-property-field-label--empty {
-                    transform: translateY(-1.3437em) scale(1);
-             }
-            }
         }
     }
 
     .adf-property-value {
-        color: var(--adf-metadata-property-panel-title-color);
-
-        &.adf-property-value-editable {
-            color: var(--adf-metadata-property-panel-title-color);
-            background-color: var(--adf-metadata-buttons-background-color);
-            border-radius: 6px;
-            height: 32px;
-            padding-left: 10px;
-
-            #{$mat-input-element} {
-                color: var(--adf-metadata-action-button-clear-color);
-                padding: 5px 0 6px 12px;
-                margin: 5px 0 0;
-            }
-        }
-
-        &.adf-property-readonly-value {
-            color: var(--adf-metadata-property-panel-label-color);
-
-            #{$mat-input-element} {
-                color: var(--adf-metadata-property-panel-label-color);
-            }
-        }
-
-        &-has-error {
-            border: 1px solid var(--theme-warn-color);
-        }
-
         &-input {
-            background-color: var(--adf-metadata-buttons-background-color);
             border-radius: 6px;
             padding: 6px 0;
             margin: 0;
diff --git a/lib/core/src/lib/comments/comments.component.scss b/lib/core/src/lib/comments/comments.component.scss
index 789edbe4ba8..74a897e9aef 100644
--- a/lib/core/src/lib/comments/comments.component.scss
+++ b/lib/core/src/lib/comments/comments.component.scss
@@ -9,6 +9,7 @@ adf-comments {
         .adf-comments-input-container {
             width: 100%;
             padding-bottom: 8px;
+            padding-top: 8px;
 
             textarea {
                 resize: vertical;
diff --git a/lib/core/src/lib/login/components/login/login.component.scss b/lib/core/src/lib/login/components/login/login.component.scss
index d3093ea47f7..2eb9da6f22d 100644
--- a/lib/core/src/lib/login/components/login/login.component.scss
+++ b/lib/core/src/lib/login/components/login/login.component.scss
@@ -183,10 +183,6 @@
 
     .adf-login-form-field .adf-login-password-icon.adf-login-form-password-icon {
         color: var(--adf-theme-foreground-text-color);
-        font-size: var(--theme-subheading-2-font-size);
-        top: 9px;
-        position: relative;
-        left: 7px;
     }
 
     .adf-login-controls:has(div) {
@@ -204,26 +200,6 @@
             padding-bottom: 16px;
             font-size: var(--theme-subheading-2-font-size);
 
-            #{$mat-form-field-infix} {
-                min-height: 0;
-                padding-bottom: 3px;
-                padding-top: 20px;
-
-                .adf-login-form-input-label {
-                    font-size: var(--theme-subheading-2-font-size);
-                }
-
-                #{$mat-floating-label-float-above} {
-                    padding-bottom: 6px;
-                }
-
-                #{$mat-floating-label--required} {
-                    &::after {
-                        font-size: var(--theme-subheading-2-font-size);
-                    }
-                }
-            }
-
             & input:-webkit-autofill {
                 /* stylelint-disable */
                 -webkit-box-shadow: 0 0 0 1000px var(--adf-theme-background-dialog-color) inset;
@@ -235,16 +211,17 @@
 
     .adf-login-validation {
         background-color: transparent;
-        color: var(--theme-warn-color);
+        color: var(--adf-error-input-color);
         font-size: var(--theme-caption-font-size);
     }
 
     .adf-login-error {
-        color: var(--theme-warn-color);
+        color: var(--adf-error-input-color);
         position: absolute;
         font-size: var(--theme-caption-font-size);
         margin-top: -12px;
         display: block;
+        padding-left: 12px;
     }
 
     .adf-full-width {
diff --git a/lib/core/src/lib/styles/_components-variables.scss b/lib/core/src/lib/styles/_components-variables.scss
index 06e7cc9ec54..e61fa9e33fc 100644
--- a/lib/core/src/lib/styles/_components-variables.scss
+++ b/lib/core/src/lib/styles/_components-variables.scss
@@ -89,6 +89,13 @@
         --adf-danger-button-background: $adf-danger-button-background,
         --adf-secondary-button-background: $adf-secondary-button-background,
 
+        --adf-input-text-color: $adf-input-text-color,
+        --adf-input-border-color: $adf-input-border-color,
+        --adf-focused-input-color: $adf-focused-input-color,
+        --adf-error-input-color: $adf-error-input-color,
+        --adf-hint-input-color: $adf-hint-input-color,
+        --adf-disabled-input-color: $adf-disabled-input-color,
+
         --adf-display-external-property-widget-preview-selection-color: mat.get-color-from-palette($foreground, secondary-text)
     );
 
diff --git a/lib/core/src/lib/styles/_mat-selectors.scss b/lib/core/src/lib/styles/_mat-selectors.scss
index edf6467b46d..78645df52c3 100644
--- a/lib/core/src/lib/styles/_mat-selectors.scss
+++ b/lib/core/src/lib/styles/_mat-selectors.scss
@@ -51,7 +51,12 @@ $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-form-field-label-always-float: '.mat-mdc-form-field-label-always-float';
+$mat-form-field-input-control: '.mat-mdc-form-field-input-control';
 $mat-text-field-outlined: '.mdc-text-field--outlined';
+$mat-text-field-disabled: '.mdc-text-field--disabled';
+$mat-text-field-focused: '.mdc-text-field--focused';
+$mat-text-field-invalid: '.mdc-text-field--invalid';
 $mat-text-field-outlined-thick: '.mdc-text-field--outlined-thick';
 $mat-dialog-actions: '.mat-mdc-dialog-actions';
 $mat-dialog-container: '.mdc-dialog__container';
@@ -74,6 +79,7 @@ $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-invalid: '.mat-mdc-select-invalid';
 $mat-select-value-text: '.mat-mdc-select-value-text';
 $mat-select-panel: '.mat-mdc-select-panel';
 $mat-grid-tile: '.mat-grid-tile';
@@ -113,6 +119,10 @@ $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-notched-outline-notched: '.mdc-notched-outline--notched';
+$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-icon-suffix: '.mat-mdc-form-field-icon-suffix';
 $mat-evolution-chip-graphic: '.mdc-evolution-chip__graphic';
 $mat-select-trigger: '.mat-mdc-select-trigger';
 $mat-select-arrow: '.mat-mdc-select-arrow';
@@ -126,3 +136,4 @@ $cdk-overlay-pane: '.cdk-overlay-pane';
 $mat-snackbar: '.mdc-snackbar';
 $mat-snack-bar-container: '.mat-mdc-snack-bar-container';
 $mat-snackbar-label: '.mdc-snackbar__label';
+$mat-date-range-input-container: '.mat-date-range-input-container';
diff --git a/lib/core/src/lib/styles/_reference-variables.scss b/lib/core/src/lib/styles/_reference-variables.scss
index 6f72688cbeb..85c8501cbab 100644
--- a/lib/core/src/lib/styles/_reference-variables.scss
+++ b/lib/core/src/lib/styles/_reference-variables.scss
@@ -27,3 +27,9 @@ $adf-ref-header-icon-color: inherit;
 $adf-ref-header-icon-border-radius: 50%;
 $adf-danger-button-background: #ba1b1b;
 $adf-secondary-button-background: #2121210d;
+$adf-input-text-color: rgb(33, 33, 33);
+$adf-input-border-color: rgba(33, 33, 33, 0.24);
+$adf-focused-input-color: rgb(0, 133, 53);
+$adf-error-input-color: rgb(186, 27, 27);
+$adf-hint-input-color: rgba(33, 33, 33, 0.7);
+$adf-disabled-input-color: rgba(33, 33, 33, 0.12);
diff --git a/lib/core/src/lib/styles/_typography.scss b/lib/core/src/lib/styles/_typography.scss
index e7d2ceb4ec9..5a8c11b494a 100644
--- a/lib/core/src/lib/styles/_typography.scss
+++ b/lib/core/src/lib/styles/_typography.scss
@@ -2,17 +2,17 @@
 
 $alfresco-typography: mat.define-typography-config(
     $font-family: 'Muli, Roboto, "Helvetica Neue", sans-serif',
-    $headline-1:     mat.define-typography-level(112px, 112px, 300),
-    $headline-2:     mat.define-typography-level(56px, 56px, 400),
-    $headline-3:     mat.define-typography-level(45px, 48px, 400),
-    $headline-4:     mat.define-typography-level(34px, 40px, 400),
-    $headline-5:      mat.define-typography-level(24px, 32px, 400),
-    $headline-6:         mat.define-typography-level(20px, 32px, 500),
-    $subtitle-1:  mat.define-typography-level(16px, 28px, 400),
-    $body-1:  mat.define-typography-level(15px, 24px, 400),
-    $subtitle-2:        mat.define-typography-level(14px, 24px, 500),
-    $body-2:        mat.define-typography-level(14px, 20px, 400),
-    $caption:       mat.define-typography-level(12px, 20px, 400),
-    $button:        mat.define-typography-level(14px, 14px, 500),
+    $headline-1: mat.define-typography-level(112px, 112px, 300),
+    $headline-2: mat.define-typography-level(56px, 56px, 400),
+    $headline-3: mat.define-typography-level(45px, 48px, 400),
+    $headline-4: mat.define-typography-level(34px, 40px, 400),
+    $headline-5: mat.define-typography-level(24px, 32px, 400),
+    $headline-6: mat.define-typography-level(20px, 32px, 500),
+    $subtitle-1: mat.define-typography-level(16px, 28px, 400),
+    $body-1: mat.define-typography-level(15px, 24px, 400),
+    $subtitle-2: mat.define-typography-level(14px, 24px, 500),
+    $body-2: mat.define-typography-level(14px, 20px, 400),
+    $caption: mat.define-typography-level(12px, 20px, 400),
+    $button: mat.define-typography-level(14px, 14px, 500),
     // Line-height must be unit-less fraction of the font-size.
 );
diff --git a/lib/core/src/lib/styles/material.theme.scss b/lib/core/src/lib/styles/material.theme.scss
index c6ecb06ddbe..a2428ada41e 100644
--- a/lib/core/src/lib/styles/material.theme.scss
+++ b/lib/core/src/lib/styles/material.theme.scss
@@ -68,4 +68,159 @@
             }
         }
     }
+
+    #{$mat-form-field-appearance-outline} {
+        #{$mat-text-field-outlined} {
+            padding-top: 14px;
+            padding-left: 12px;
+
+            &#{$mat-text-field--no-label} {
+                #{$mat-form-field-infix} {
+                    top: -9px;
+                }
+
+                #{$mat-form-field-icon-suffix} {
+                    #{$mat-icon} {
+                        padding-top: 12px;
+                    }
+                }
+            }
+
+            #{$mat-notched-outline} {
+                padding-bottom: 2px;
+
+                &#{$mat-notched-outline-notched} {
+                    #{$mat-notched-outline-notch} {
+                        top: 15px;
+                        position: absolute;
+                        border: none;
+                        left: 9px
+                    }
+                }
+
+                &:not(#{$mat-notched-outline-notched}) {
+                    #{$mat-notched-outline-notch} {
+
+                        #{$mat-form-field-label} {
+                            top: 30px;
+                            left: -5px;
+                            padding-left: 5px;
+                        }
+                    }
+                }
+
+
+                #{$mat-form-field-label} {
+                    color: var(--adf-input-text-color);
+                }
+            }
+
+            #{$mat-form-field-icon-suffix} {
+                #{$mat-icon} {
+                    padding-top: 0;
+                }
+            }
+
+            #{$mat-notched-outline-leading}, #{$mat-notched-outline-trailing}, #{$mat-notched-outline-notch} {
+                border-color: var(--adf-input-border-color);
+            }
+
+            &:not(#{$mat-text-field-disabled}) {
+                &:hover, &#{$mat-text-field-focused}, &#{$mat-text-field-invalid} {
+                    #{$mat-notched-outline-leading}, #{$mat-notched-outline-trailing}, #{$mat-notched-outline-notch} {
+                        border-width: 2px;
+                    }
+                }
+
+                &#{$mat-text-field-focused} {
+                    #{$mat-notched-outline-leading}, #{$mat-notched-outline-trailing} {
+                        border-color: var(--adf-focused-input-color);
+                    }
+                }
+
+                &:hover {
+                    #{$mat-notched-outline} {
+                        &:not(#{$mat-notched-outline-notched}) {
+                            #{$mat-notched-outline-notch} {
+                                #{$mat-form-field-label} {
+                                    top: 29px;
+                                }
+                            }
+                        }
+                    }
+                }
+
+                &#{$mat-text-field-invalid} {
+                    #{$mat-notched-outline-leading}, #{$mat-notched-outline-trailing}, #{$mat-notched-outline-notch} {
+                        border-color: var(--adf-error-input-color);
+                    }
+                }
+            }
+
+            &#{$mat-text-field-disabled} {
+                #{$mat-notched-outline-leading}, #{$mat-notched-outline-trailing} {
+                    background-color: var(--adf-disabled-input-color);
+                }
+
+                #{$mat-notched-outline}:not(#{$mat-notched-outline-notched}) {
+                    #{$mat-notched-outline-notch} {
+                        background-color: var(--adf-disabled-input-color);
+                    }
+                }
+
+                #{$mat-text-filed-input} {
+                    color: var(--adf-input-text-color);
+                }
+
+                #{$mat-select-value-text} {
+                    color: var(--adf-input-text-color);
+                }
+            }
+
+            #{$mat-select} {
+
+                #{$mat-select-arrow-wrapper} {
+                    height: 0;
+                }
+            }
+
+            &:not(#{$mat-text-field--no-label}) {
+                #{$mat-select} {
+                    #{$mat-select-arrow-wrapper} {
+                        margin-top: -6px;
+                        align-items: end;
+                    }
+                }
+            }
+        }
+
+        #{$mat-form-field-hint-wrapper}, #{$mat-form-field-error-wrapper} {
+            padding-left: 9px;
+            margin-top: -5px;
+        }
+
+        #{$mat-form-field-hint-wrapper} {
+            color: var(--adf-hint-input-color);
+        }
+
+        #{$mat-form-field-error-wrapper} {
+            color: var(--adf-error-input-color);
+        }
+
+        &#{$mat-focused} {
+            #{$mat-select} {
+                #{$mat-select-arrow} {
+                    color: var(--adf-focused-input-color);
+                }
+            }
+        }
+
+        &#{$mat-focused}#{$mat-select}, #{$mat-select} {
+            &#{$mat-select-invalid} {
+                #{$mat-select-arrow} {
+                    color: var(--adf-error-input-color);
+                }
+            }
+        }
+    }
 }