@softheon/armature 15.1.1 → 15.7.0

package/assets/styles/sof-styles.scss

@@ -8,28 +8,24 @@
 @include mat.core();
 $main-theme: mat.define-light-theme((
   color: (
-    primary: $arm-primary,
-    accent: $arm-accent,
-    error: $arm-error
-  ),
-  typography: mat.define-typography-config(),
-  density: 0,
-));
+    primary: mat.define-palette($arm-primary),
+    accent: mat.define-palette($arm-accent)),
+    typography: mat.define-typography-config(),
+    density: 0,
+    ));
 $main-theme-dark: mat.define-dark-theme((
   color: (
-    primary: $arm-primary,
-    accent: $arm-accent,
-    error: $arm-error
-  ),
-  typography: mat.define-typography-config(),
-  density: 0,
-));
+    primary: mat.define-palette($arm-primary),
+    accent: mat.define-palette($arm-accent)),
+    typography: mat.define-typography-config(),
+    density: 0,
+    ));
 
 body {
   letter-spacing: 0px;
   font-family: "Poppins", sans-serif !important;
   font-size: 14px;
-  @include mat.core-theme($main-theme);
+  @include mat.all-component-themes($main-theme);
   margin: 0 !important;
 }
 
@@ -52,6 +48,7 @@ h1 {
   letter-spacing: normal;
   margin: 0px;
   padding: 0px;
+
   @media only screen and (max-width: $screen-sm-end) {
     font-size: 28px;
   }
@@ -68,6 +65,7 @@ h2 {
   letter-spacing: normal;
   margin: 0px;
   padding: 0px;
+
   @media only screen and (max-width: $screen-sm-end) {
     font-size: 24px;
   }
@@ -84,6 +82,7 @@ h3 {
   letter-spacing: normal;
   margin: 0px;
   padding: 0px;
+
   @media only screen and (max-width: $screen-sm-end) {
     font-size: 20px;
   }
@@ -100,6 +99,7 @@ h4 {
   letter-spacing: normal;
   margin: 0px;
   padding: 0px;
+
   @media only screen and (max-width: $screen-sm-end) {
     font-size: 18px;
   }
@@ -112,6 +112,7 @@ h4 {
   font-size: 16px;
   line-height: 24px;
   letter-spacing: normal;
+
   @media only screen and (max-width: $screen-sm-end) {
     font-size: 16px;
   }
@@ -124,6 +125,7 @@ h4 {
   font-size: 14px;
   line-height: 21px;
   letter-spacing: normal;
+
   @media only screen and (max-width: $screen-sm-end) {
     font-size: 16px;
   }
@@ -137,10 +139,12 @@ mat-form-field {
     font-size: 16px !important;
     line-height: 24px !important;
     letter-spacing: normal !important;
+
     @media only screen and (max-width: $screen-sm-end) {
       font-size: 16px !important;
     }
   }
+
   &.body2 {
     font-family: "Poppins", sans-serif;
     font-style: normal;
@@ -148,6 +152,7 @@ mat-form-field {
     font-size: 14px;
     line-height: 21px;
     letter-spacing: normal;
+
     @media only screen and (max-width: $screen-sm-end) {
       font-size: 16px;
     }
@@ -227,21 +232,26 @@ mat-form-field {
 ::ng-deep mat-button-toggle-group {
   &.sof-toggle-group {
     height: 48px !important;
+
     &.mat-button-toggle-group.mat-button-toggle-group-appearance-standard {
       border: none !important;
       border-radius: 0px !important;
     }
+
     &.full-width {
       .toggle-left {
         width: 100% !important;
       }
+
       .toggle-middle {
         width: 100% !important;
       }
+
       .toggle-right {
         width: 100% !important;
       }
     }
+
     .mat-button-toggle-label-content {
       text-transform: uppercase !important;
       font-family: "Poppins" !important;
@@ -253,12 +263,15 @@ mat-form-field {
       text-align: center !important;
       color: black !important;
     }
+
     .mat-button-toggle-button {
       height: 100% !important;
     }
+
     .mat-button-toggle-checked {
       background-color: mat.get-color-from-palette($arm-primary, 100) !important;
     }
+
     .toggle-left {
       border-top: 2px solid mat.get-color-from-palette($arm-primary, 500) !important;
       border-bottom: 2px solid mat.get-color-from-palette($arm-primary, 500) !important;
@@ -267,6 +280,7 @@ mat-form-field {
       border-radius: 6px 0px 0px 6px !important;
       width: 120px !important;
     }
+
     .toggle-middle {
       border-top: 2px solid mat.get-color-from-palette($arm-primary, 500) !important;
       border-bottom: 2px solid mat.get-color-from-palette($arm-primary, 500) !important;
@@ -275,6 +289,7 @@ mat-form-field {
       border-radius: 0px 0px 0px 0px !important;
       width: 120px !important;
     }
+
     .toggle-right {
       border-top: 2px solid mat.get-color-from-palette($arm-primary, 500) !important;
       border-bottom: 2px solid mat.get-color-from-palette($arm-primary, 500) !important;
@@ -283,10 +298,12 @@ mat-form-field {
       border-radius: 0px 6px 6px 0px !important;
       width: 120px !important;
     }
+
     .mat-button-toggle-disabled {
       &.mat-button-toggle-checked {
         background-color: mat.get-color-from-palette($arm-neutral, 200) !important;
       }
+
       &.toggle-left {
         border-top: 2px solid mat.get-color-from-palette($arm-neutral, 400) !important;
         border-bottom: 2px solid mat.get-color-from-palette($arm-neutral, 400) !important;
@@ -295,6 +312,7 @@ mat-form-field {
         border-radius: 6px 0px 0px 6px !important;
         width: 120px !important;
       }
+
       &.toggle-middle {
         border-top: 2px solid mat.get-color-from-palette($arm-neutral, 400) !important;
         border-bottom: 2px solid mat.get-color-from-palette($arm-neutral, 400) !important;
@@ -303,6 +321,7 @@ mat-form-field {
         border-radius: 0px 0px 0px 0px !important;
         width: 120px !important;
       }
+
       &.toggle-right {
         border-top: 2px solid mat.get-color-from-palette($arm-neutral, 400) !important;
         border-bottom: 2px solid mat.get-color-from-palette($arm-neutral, 400) !important;
@@ -317,9 +336,11 @@ mat-form-field {
   &.sof-toggle-group[size="small"] {
     height: 36px !important;
   }
+
   &.sof-toggle-group[size="medium"] {
     height: 48px !important;
   }
+
   &.sof-toggle-group[size="large"] {
     height: 56px !important;
   }
@@ -351,63 +372,83 @@ button.mat-mdc-button {
     &:enabled {
       &.mat-primary {
         color: mat.get-color-from-palette($arm-primary, 500) !important;
+
         &:hover {
           background-color: mat.get-color-from-palette($arm-primary, 50);
         }
+
         &:focus {
           background-color: mat.get-color-from-palette($arm-primary, 100);
         }
       }
+
       &.mat-accent {
         color: mat.get-color-from-palette($arm-accent, 500) !important;
+
         &:hover {
           background-color: mat.get-color-from-palette($arm-accent, 50);
         }
+
         &:focus {
           background-color: mat.get-color-from-palette($arm-accent, 100);
         }
       }
+
       &.mat-warn {
         color: mat.get-color-from-palette($arm-warn, 500) !important;
+
         &:hover {
           background-color: mat.get-color-from-palette($arm-warn, 50);
         }
+
         &:focus {
           background-color: mat.get-color-from-palette($arm-warn, 100);
         }
       }
+
       &.mat-success {
         color: mat.get-color-from-palette($arm-success, 500) !important;
+
         &:hover {
           background-color: mat.get-color-from-palette($arm-success, 50);
         }
+
         &:focus {
           background-color: mat.get-color-from-palette($arm-success, 100);
         }
       }
+
       &.mat-error {
         color: mat.get-color-from-palette($arm-error, 500) !important;
+
         &:hover {
           background-color: mat.get-color-from-palette($arm-error, 50);
         }
+
         &:focus {
           background-color: mat.get-color-from-palette($arm-error, 100);
         }
       }
+
       &.mat-info {
         color: mat.get-color-from-palette($arm-info, 500) !important;
+
         &:hover {
           background-color: mat.get-color-from-palette($arm-info, 50);
         }
+
         &:focus {
           background-color: mat.get-color-from-palette($arm-info, 100);
         }
       }
+
       &.mat-neutral {
         color: #000000de !important;
+
         &:hover {
           background-color: mat.get-color-from-palette($arm-neutral, 50);
         }
+
         &:focus {
           background-color: mat.get-color-from-palette($arm-neutral, 100);
         }
@@ -424,20 +465,26 @@ button.mat-mdc-button {
       margin-right: 4px !important;
     }
   }
+
   &.sof-button[size="small"] {
     height: 36px !important;
+
     i {
       font-size: 1em !important;
     }
   }
+
   &.sof-button[size="medium"] {
     height: 48px !important;
+
     i {
       font-size: 1em !important;
     }
   }
+
   &.sof-button[size="large"] {
     height: 56px !important;
+
     i {
       font-size: 1.15em !important;
     }
@@ -450,63 +497,83 @@ button.mat-mdc-button {
     &:enabled {
       &.mat-primary {
         color: mat.get-color-from-palette($arm-primary, 500) !important;
+
         &:hover {
           background-color: mat.get-color-from-palette($arm-primary, 50);
         }
+
         &:focus {
           background-color: mat.get-color-from-palette($arm-primary, 100);
         }
       }
+
       &.mat-accent {
         color: mat.get-color-from-palette($arm-accent, 500) !important;
+
         &:hover {
           background-color: mat.get-color-from-palette($arm-accent, 50);
         }
+
         &:focus {
           background-color: mat.get-color-from-palette($arm-accent, 100);
         }
       }
+
       &.mat-warn {
         color: mat.get-color-from-palette($arm-warn, 500) !important;
+
         &:hover {
           background-color: mat.get-color-from-palette($arm-warn, 50);
         }
+
         &:focus {
           background-color: mat.get-color-from-palette($arm-warn, 100);
         }
       }
+
       &.mat-success {
         color: mat.get-color-from-palette($arm-success, 500) !important;
+
         &:hover {
           background-color: mat.get-color-from-palette($arm-success, 50);
         }
+
         &:focus {
           background-color: mat.get-color-from-palette($arm-success, 100);
         }
       }
+
       &.mat-error {
         color: mat.get-color-from-palette($arm-error, 500) !important;
+
         &:hover {
           background-color: mat.get-color-from-palette($arm-error, 50);
         }
+
         &:focus {
           background-color: mat.get-color-from-palette($arm-error, 100);
         }
       }
+
       &.mat-info {
         color: mat.get-color-from-palette($arm-info, 500) !important;
+
         &:hover {
           background-color: mat.get-color-from-palette($arm-info, 50);
         }
+
         &:focus {
           background-color: mat.get-color-from-palette($arm-info, 100);
         }
       }
+
       &.mat-neutral {
         color: #000000de !important;
+
         &:hover {
           background-color: mat.get-color-from-palette($arm-neutral, 50);
         }
+
         &:focus {
           background-color: mat.get-color-from-palette($arm-neutral, 100);
         }
@@ -518,18 +585,21 @@ button.mat-mdc-button {
       opacity: 1 !important;
     }
   }
+
   &.sof-icon-button[size="small"] {
     height: 36px !important;
     width: 36px !important;
     min-width: 36px !important;
     font-size: 19px !important;
   }
+
   &.sof-icon-button[size="medium"] {
     height: 48px !important;
     width: 48px !important;
     min-width: 48px !important;
     font-size: 26px !important;
   }
+
   &.sof-icon-button[size="large"] {
     height: 56px !important;
     width: 56px !important;
@@ -561,69 +631,91 @@ button.mat-mdc-unelevated-button {
 
     &:enabled {
       color: #ffffff !important;
+
       &.mat-primary {
         background: mat.get-color-from-palette($arm-primary, 500);
+
         &:hover {
           background-color: mat.get-color-from-palette($arm-primary, 700);
         }
+
         &:focus {
           background-color: mat.get-color-from-palette($arm-primary, 900);
         }
       }
+
       &.mat-accent {
         background: mat.get-color-from-palette($arm-accent, 500);
+
         &:hover {
           background-color: mat.get-color-from-palette($arm-accent, 700);
         }
+
         &:focus {
           background-color: mat.get-color-from-palette($arm-accent, 900);
         }
       }
+
       &.mat-warn {
         background: mat.get-color-from-palette($arm-warn, 500);
+
         &:hover {
           background-color: mat.get-color-from-palette($arm-warn, 700);
         }
+
         &:focus {
           background-color: mat.get-color-from-palette($arm-warn, 900);
         }
       }
+
       &.mat-success {
         background: mat.get-color-from-palette($arm-success, 500);
+
         &:hover {
           background-color: mat.get-color-from-palette($arm-success, 700);
         }
+
         &:focus {
           background-color: mat.get-color-from-palette($arm-success, 900);
         }
       }
+
       &.mat-error {
         background: mat.get-color-from-palette($arm-error, 500);
+
         &:hover {
           background-color: mat.get-color-from-palette($arm-error, 700);
         }
+
         &:focus {
           background-color: mat.get-color-from-palette($arm-error, 900);
         }
       }
+
       &.mat-info {
         background: mat.get-color-from-palette($arm-info, 500);
+
         &:hover {
           background-color: mat.get-color-from-palette($arm-info, 700);
         }
+
         &:focus {
           background-color: mat.get-color-from-palette($arm-info, 900);
         }
       }
+
       &.mat-neutral {
         background: #000000de;
+
         &:hover {
           background-color: mat.get-color-from-palette($arm-neutral, 700);
         }
+
         &:focus {
           background-color: mat.get-color-from-palette($arm-neutral, 900);
         }
       }
+
       i {
         color: #ffffff !important;
       }
@@ -640,20 +732,26 @@ button.mat-mdc-unelevated-button {
       margin-right: 4px !important;
     }
   }
+
   &.sof-flat-button[size="small"] {
     height: 36px !important;
+
     i {
       font-size: 1em !important;
     }
   }
+
   &.sof-flat-button[size="medium"] {
     height: 48px !important;
+
     i {
       font-size: 1em !important;
     }
   }
+
   &.sof-flat-button[size="large"] {
     height: 56px !important;
+
     i {
       font-size: 1.15em !important;
     }
@@ -665,69 +763,91 @@ button.mat-mdc-unelevated-button {
 
     &:enabled {
       color: #ffffff !important;
+
       &.mat-primary {
         background: mat.get-color-from-palette($arm-primary, 500);
+
         &:hover {
           background-color: mat.get-color-from-palette($arm-primary, 700);
         }
+
         &:focus {
           background-color: mat.get-color-from-palette($arm-primary, 900);
         }
       }
+
       &.mat-accent {
         background: mat.get-color-from-palette($arm-accent, 500);
+
         &:hover {
           background-color: mat.get-color-from-palette($arm-accent, 700);
         }
+
         &:focus {
           background-color: mat.get-color-from-palette($arm-accent, 900);
         }
       }
+
       &.mat-warn {
         background: mat.get-color-from-palette($arm-warn, 500);
+
         &:hover {
           background-color: mat.get-color-from-palette($arm-warn, 700);
         }
+
         &:focus {
           background-color: mat.get-color-from-palette($arm-warn, 900);
         }
       }
+
       &.mat-success {
         background: mat.get-color-from-palette($arm-success, 500);
+
         &:hover {
           background-color: mat.get-color-from-palette($arm-success, 700);
         }
+
         &:focus {
           background-color: mat.get-color-from-palette($arm-success, 900);
         }
       }
+
       &.mat-error {
         background: mat.get-color-from-palette($arm-error, 500);
+
         &:hover {
           background-color: mat.get-color-from-palette($arm-error, 700);
         }
+
         &:focus {
           background-color: mat.get-color-from-palette($arm-error, 900);
         }
       }
+
       &.mat-info {
         background: mat.get-color-from-palette($arm-info, 500);
+
         &:hover {
           background-color: mat.get-color-from-palette($arm-info, 700);
         }
+
         &:focus {
           background-color: mat.get-color-from-palette($arm-info, 900);
         }
       }
+
       &.mat-neutral {
         background: #000000de;
+
         &:hover {
           background-color: mat.get-color-from-palette($arm-neutral, 700);
         }
+
         &:focus {
           background-color: mat.get-color-from-palette($arm-neutral, 900);
         }
       }
+
       i {
         color: #ffffff !important;
       }
@@ -739,18 +859,21 @@ button.mat-mdc-unelevated-button {
       opacity: 1 !important;
     }
   }
+
   &.sof-flat-icon-button[size="small"] {
     height: 36px !important;
     width: 36px !important;
     min-width: 36px !important;
     font-size: 19px !important;
   }
+
   &.sof-flat-icon-button[size="medium"] {
     height: 48px !important;
     width: 48px !important;
     min-width: 48px !important;
     font-size: 26px !important;
   }
+
   &.sof-flat-icon-button[size="large"] {
     height: 56px !important;
     width: 56px !important;
@@ -785,138 +908,177 @@ button.mat-mdc-outlined-button {
       &.mat-primary {
         background-color: mat.get-color-from-palette($arm-primary, 50) !important;
         color: mat.get-color-from-palette($arm-primary, 500) !important;
+
         i {
           color: mat.get-color-from-palette($arm-primary, 500) !important;
         }
+
         &:hover {
           background-color: mat.get-color-from-palette($arm-primary, 100) !important;
           color: white !important;
+
           i {
             color: white !important;
           }
         }
+
         &:focus {
           background-color: mat.get-color-from-palette($arm-primary, 200) !important;
           color: white !important;
+
           i {
             color: white !important;
           }
         }
       }
+
       &.mat-accent {
         background-color: mat.get-color-from-palette($arm-accent, 50) !important;
         color: mat.get-color-from-palette($arm-accent, 500) !important;
+
         i {
           color: mat.get-color-from-palette($arm-accent, 500) !important;
         }
+
         &:hover {
           background-color: mat.get-color-from-palette($arm-accent, 100) !important;
           color: white !important;
+
           i {
             color: white !important;
           }
         }
+
         &:focus {
           background-color: mat.get-color-from-palette($arm-accent, 200) !important;
           color: white !important;
+
           i {
             color: white !important;
           }
         }
       }
+
       &.mat-warn {
         background-color: mat.get-color-from-palette($arm-warn, 50) !important;
         color: mat.get-color-from-palette($arm-warn, 500) !important;
+
         i {
           color: mat.get-color-from-palette($arm-warn, 500) !important;
         }
+
         &:hover {
           background-color: mat.get-color-from-palette($arm-warn, 100) !important;
           color: white !important;
+
           i {
             color: white !important;
           }
         }
+
         &:focus {
           background-color: mat.get-color-from-palette($arm-warn, 200) !important;
           color: white !important;
+
           i {
             color: white !important;
           }
         }
       }
+
       &.mat-success {
         background-color: mat.get-color-from-palette($arm-success, 50) !important;
         color: mat.get-color-from-palette($arm-success, 500) !important;
+
         i {
           color: mat.get-color-from-palette($arm-success, 500) !important;
         }
+
         &:hover {
           background-color: mat.get-color-from-palette($arm-success, 100) !important;
           color: white !important;
+
           i {
             color: white !important;
           }
         }
+
         &:focus {
           background-color: mat.get-color-from-palette($arm-success, 200) !important;
           color: white !important;
+
           i {
             color: white !important;
           }
         }
       }
+
       &.mat-info {
         background-color: mat.get-color-from-palette($arm-info, 50) !important;
         color: mat.get-color-from-palette($arm-info, 500) !important;
+
         i {
           color: mat.get-color-from-palette($arm-info, 500) !important;
         }
+
         &:hover {
           background-color: mat.get-color-from-palette($arm-info, 100) !important;
           color: white !important;
+
           i {
             color: white !important;
           }
         }
+
         &:focus {
           background-color: mat.get-color-from-palette($arm-info, 200) !important;
           color: white !important;
+
           i {
             color: white !important;
           }
         }
       }
+
       &.mat-error {
         background-color: mat.get-color-from-palette($arm-error, 50) !important;
         color: mat.get-color-from-palette($arm-error, 500) !important;
+
         i {
           color: mat.get-color-from-palette($arm-error, 500) !important;
         }
+
         &:hover {
           background-color: mat.get-color-from-palette($arm-error, 100) !important;
           color: white !important;
+
           i {
             color: white !important;
           }
         }
+
         &:focus {
           background-color: mat.get-color-from-palette($arm-error, 200) !important;
           color: white !important;
+
           i {
             color: white !important;
           }
         }
       }
+
       &.mat-neutral {
         background-color: mat.get-color-from-palette($arm-neutral, 50) !important;
         color: #000000de !important;
+
         i {
           color: #000000de !important;
         }
+
         &:hover {
           background-color: mat.get-color-from-palette($arm-neutral, 100) !important;
         }
+
         &:focus {
           background-color: mat.get-color-from-palette($arm-neutral, 200) !important;
         }
@@ -934,6 +1096,7 @@ button.mat-mdc-outlined-button {
       margin-right: 4px !important;
     }
   }
+
   &.sof-stroked-button-outline {
     padding: 0px 24px !important;
     height: 48px !important;
@@ -959,90 +1122,117 @@ button.mat-mdc-outlined-button {
       &.mat-primary {
         border: 2px solid mat.get-color-from-palette($arm-primary, 500) !important;
         color: mat.get-color-from-palette($arm-primary, 500) !important;
+
         i {
           color: mat.get-color-from-palette($arm-primary, 500) !important;
         }
+
         &:hover {
           background-color: mat.get-color-from-palette($arm-primary, 100) !important;
         }
+
         &:focus {
           background-color: mat.get-color-from-palette($arm-primary, 200) !important;
         }
       }
+
       &.mat-accent {
         border: 2px solid mat.get-color-from-palette($arm-accent, 500) !important;
         color: mat.get-color-from-palette($arm-accent, 500) !important;
+
         i {
           color: mat.get-color-from-palette($arm-accent, 500) !important;
         }
+
         &:hover {
           background-color: mat.get-color-from-palette($arm-accent, 100) !important;
         }
+
         &:focus {
           background-color: mat.get-color-from-palette($arm-accent, 200) !important;
         }
       }
+
       &.mat-warn {
         border: 2px solid mat.get-color-from-palette($arm-warn, 500) !important;
         color: mat.get-color-from-palette($arm-warn, 500) !important;
+
         i {
           color: mat.get-color-from-palette($arm-warn, 500) !important;
         }
+
         &:hover {
           background-color: mat.get-color-from-palette($arm-warn, 100) !important;
         }
+
         &:focus {
           background-color: mat.get-color-from-palette($arm-warn, 200) !important;
         }
       }
+
       &.mat-success {
         border: 2px solid mat.get-color-from-palette($arm-success, 500) !important;
         color: mat.get-color-from-palette($arm-success, 500) !important;
+
         i {
           color: mat.get-color-from-palette($arm-success, 500) !important;
         }
+
         &:hover {
           background-color: mat.get-color-from-palette($arm-success, 100) !important;
         }
+
         &:focus {
           background-color: mat.get-color-from-palette($arm-success, 200) !important;
         }
       }
+
       &.mat-error {
         border: 2px solid mat.get-color-from-palette($arm-error, 500) !important;
         color: mat.get-color-from-palette($arm-error, 500) !important;
+
         i {
           color: mat.get-color-from-palette($arm-error, 500) !important;
         }
+
         &:hover {
           background-color: mat.get-color-from-palette($arm-error, 100) !important;
         }
+
         &:focus {
           background-color: mat.get-color-from-palette($arm-error, 200) !important;
         }
       }
+
       &.mat-info {
         border: 2px solid mat.get-color-from-palette($arm-info, 500) !important;
         color: mat.get-color-from-palette($arm-info, 500) !important;
+
         i {
           color: mat.get-color-from-palette($arm-info, 500) !important;
         }
+
         &:hover {
           background-color: mat.get-color-from-palette($arm-info, 100) !important;
         }
+
         &:focus {
           background-color: mat.get-color-from-palette($arm-info, 200) !important;
         }
       }
+
       &.mat-neutral {
         border: 2px solid #000000de !important;
         color: #000000de !important;
+
         i {
           color: 000000de !important;
         }
+
         &:hover {
           background-color: mat.get-color-from-palette($arm-neutral, 100) !important;
         }
+
         &:focus {
           background-color: mat.get-color-from-palette($arm-neutral, 200) !important;
         }
@@ -1061,23 +1251,29 @@ button.mat-mdc-outlined-button {
       margin-right: 4px !important;
     }
   }
+
   &.sof-stroked-button[size="small"],
   &.sof-stroked-button-outline[size="small"] {
     height: 36px !important;
+
     i {
       font-size: 1em !important;
     }
   }
+
   &.sof-stroked-button[size="medium"],
   &.sof-stroked-button-outline[size="medium"] {
     height: 48px !important;
+
     i {
       font-size: 1em !important;
     }
   }
+
   &.sof-stroked-button[size="large"],
   &.sof-stroked-button-outline[size="large"] {
     height: 56px !important;
+
     i {
       font-size: 1.15em !important;
     }
@@ -1092,138 +1288,177 @@ button.mat-mdc-outlined-button {
       &.mat-primary {
         background-color: mat.get-color-from-palette($arm-primary, 50) !important;
         color: mat.get-color-from-palette($arm-primary, 500) !important;
+
         i {
           color: mat.get-color-from-palette($arm-primary, 500) !important;
         }
+
         &:hover {
           background-color: mat.get-color-from-palette($arm-primary, 100) !important;
           color: white !important;
+
           i {
             color: white !important;
           }
         }
+
         &:focus {
           background-color: mat.get-color-from-palette($arm-primary, 200) !important;
           color: white !important;
+
           i {
             color: white !important;
           }
         }
       }
+
       &.mat-accent {
         background-color: mat.get-color-from-palette($arm-accent, 50) !important;
         color: mat.get-color-from-palette($arm-accent, 500) !important;
+
         i {
           color: mat.get-color-from-palette($arm-accent, 500) !important;
         }
+
         &:hover {
           background-color: mat.get-color-from-palette($arm-accent, 100) !important;
           color: white !important;
+
           i {
             color: white !important;
           }
         }
+
         &:focus {
           background-color: mat.get-color-from-palette($arm-accent, 200) !important;
           color: white !important;
+
           i {
             color: white !important;
           }
         }
       }
+
       &.mat-warn {
         background-color: mat.get-color-from-palette($arm-warn, 50) !important;
         color: mat.get-color-from-palette($arm-warn, 500) !important;
+
         i {
           color: mat.get-color-from-palette($arm-warn, 500) !important;
         }
+
         &:hover {
           background-color: mat.get-color-from-palette($arm-warn, 100) !important;
           color: white !important;
+
           i {
             color: white !important;
           }
         }
+
         &:focus {
           background-color: mat.get-color-from-palette($arm-warn, 200) !important;
           color: white !important;
+
           i {
             color: white !important;
           }
         }
       }
+
       &.mat-success {
         background-color: mat.get-color-from-palette($arm-success, 50) !important;
         color: mat.get-color-from-palette($arm-success, 500) !important;
+
         i {
           color: mat.get-color-from-palette($arm-success, 500) !important;
         }
+
         &:hover {
           background-color: mat.get-color-from-palette($arm-success, 100) !important;
           color: white !important;
+
           i {
             color: white !important;
           }
         }
+
         &:focus {
           background-color: mat.get-color-from-palette($arm-success, 200) !important;
           color: white !important;
+
           i {
             color: white !important;
           }
         }
       }
+
       &.mat-info {
         background-color: mat.get-color-from-palette($arm-info, 50) !important;
         color: mat.get-color-from-palette($arm-info, 500) !important;
+
         i {
           color: mat.get-color-from-palette($arm-info, 500) !important;
         }
+
         &:hover {
           background-color: mat.get-color-from-palette($arm-info, 100) !important;
           color: white !important;
+
           i {
             color: white !important;
           }
         }
+
         &:focus {
           background-color: mat.get-color-from-palette($arm-info, 200) !important;
           color: white !important;
+
           i {
             color: white !important;
           }
         }
       }
+
       &.mat-error {
         background-color: mat.get-color-from-palette($arm-error, 50) !important;
         color: mat.get-color-from-palette($arm-error, 500) !important;
+
         i {
           color: mat.get-color-from-palette($arm-error, 500) !important;
         }
+
         &:hover {
           background-color: mat.get-color-from-palette($arm-error, 100) !important;
           color: white !important;
+
           i {
             color: white !important;
           }
         }
+
         &:focus {
           background-color: mat.get-color-from-palette($arm-error, 200) !important;
           color: white !important;
+
           i {
             color: white !important;
           }
         }
       }
+
       &.mat-neutral {
         background-color: mat.get-color-from-palette($arm-neutral, 50) !important;
         color: #000000de !important;
+
         i {
           color: #000000de !important;
         }
+
         &:hover {
           background-color: mat.get-color-from-palette($arm-neutral, 100) !important;
         }
+
         &:focus {
           background-color: mat.get-color-from-palette($arm-neutral, 200) !important;
         }
@@ -1236,6 +1471,7 @@ button.mat-mdc-outlined-button {
       opacity: 1 !important;
     }
   }
+
   &.sof-stroked-icon-button-outline {
     background: #ffffff !important;
     border-radius: 6px !important;
@@ -1245,90 +1481,117 @@ button.mat-mdc-outlined-button {
       &.mat-primary {
         border: 2px solid mat.get-color-from-palette($arm-primary, 500) !important;
         color: mat.get-color-from-palette($arm-primary, 500) !important;
+
         i {
           color: mat.get-color-from-palette($arm-primary, 500) !important;
         }
+
         &:hover {
           background-color: mat.get-color-from-palette($arm-primary, 100) !important;
         }
+
         &:focus {
           background-color: mat.get-color-from-palette($arm-primary, 200) !important;
         }
       }
+
       &.mat-accent {
         border: 2px solid mat.get-color-from-palette($arm-accent, 500) !important;
         color: mat.get-color-from-palette($arm-accent, 500) !important;
+
         i {
           color: mat.get-color-from-palette($arm-accent, 500) !important;
         }
+
         &:hover {
           background-color: mat.get-color-from-palette($arm-accent, 100) !important;
         }
+
         &:focus {
           background-color: mat.get-color-from-palette($arm-accent, 200) !important;
         }
       }
+
       &.mat-warn {
         border: 2px solid mat.get-color-from-palette($arm-warn, 500) !important;
         color: mat.get-color-from-palette($arm-warn, 500) !important;
+
         i {
           color: mat.get-color-from-palette($arm-warn, 500) !important;
         }
+
         &:hover {
           background-color: mat.get-color-from-palette($arm-warn, 100) !important;
         }
+
         &:focus {
           background-color: mat.get-color-from-palette($arm-warn, 200) !important;
         }
       }
+
       &.mat-success {
         border: 2px solid mat.get-color-from-palette($arm-success, 500) !important;
         color: mat.get-color-from-palette($arm-success, 500) !important;
+
         i {
           color: mat.get-color-from-palette($arm-success, 500) !important;
         }
+
         &:hover {
           background-color: mat.get-color-from-palette($arm-success, 100) !important;
         }
+
         &:focus {
           background-color: mat.get-color-from-palette($arm-success, 200) !important;
         }
       }
+
       &.mat-error {
         border: 2px solid mat.get-color-from-palette($arm-error, 500) !important;
         color: mat.get-color-from-palette($arm-error, 500) !important;
+
         i {
           color: mat.get-color-from-palette($arm-error, 500) !important;
         }
+
         &:hover {
           background-color: mat.get-color-from-palette($arm-error, 100) !important;
         }
+
         &:focus {
           background-color: mat.get-color-from-palette($arm-error, 200) !important;
         }
       }
+
       &.mat-info {
         border: 2px solid mat.get-color-from-palette($arm-info, 500) !important;
         color: mat.get-color-from-palette($arm-info, 500) !important;
+
         i {
           color: mat.get-color-from-palette($arm-info, 500) !important;
         }
+
         &:hover {
           background-color: mat.get-color-from-palette($arm-info, 100) !important;
         }
+
         &:focus {
           background-color: mat.get-color-from-palette($arm-info, 200) !important;
         }
       }
+
       &.mat-neutral {
         border: 2px solid #000000de !important;
         color: #000000de !important;
+
         i {
           color: 000000de !important;
         }
+
         &:hover {
           background-color: mat.get-color-from-palette($arm-neutral, 100) !important;
         }
+
         &:focus {
           background-color: mat.get-color-from-palette($arm-neutral, 200) !important;
         }
@@ -1342,6 +1605,7 @@ button.mat-mdc-outlined-button {
       opacity: 1 !important;
     }
   }
+
   &.sof-stroked-icon-button[size="small"],
   &.sof-stroked-icon-button-outline[size="small"] {
     height: 36px !important;
@@ -1349,6 +1613,7 @@ button.mat-mdc-outlined-button {
     min-width: 36px !important;
     font-size: 19px !important;
   }
+
   &.sof-stroked-icon-button[size="medium"],
   &.sof-stroked-icon-button-outline[size="medium"] {
     height: 48px !important;
@@ -1356,6 +1621,7 @@ button.mat-mdc-outlined-button {
     min-width: 48px !important;
     font-size: 26px !important;
   }
+
   &.sof-stroked-icon-button[size="large"],
   &.sof-stroked-icon-button-outline[size="large"] {
     height: 56px !important;
@@ -1436,86 +1702,105 @@ mat-card {
 
 ::ng-deep mat-form-field.sof-form-field {
   font-family: "Poppins" !important;
+
   &.mat-form-field-invalid {
-    .mat-mdc-form-field-flex > div.mdc-notched-outline > * {
+    .mat-mdc-form-field-flex>div.mdc-notched-outline>* {
       border-color: mat.get-color-from-palette($arm-error, 900) !important;
     }
+
     .mdc-notched-outline__notch {
       border-left: none !important;
     }
+
     .mat-mdc-floating-label {
       color: mat.get-color-from-palette($arm-error, 900) !important;
     }
   }
+
   &.mat-focused {
-    font-weight: 600 !important; // Should be 500, but 400/500 are the same.
+    font-weight: 400 !important;
+
     input,
     span.mat-mdc-select-value-text {
       font-weight: 400 !important;
     }
   }
+
   &.mat-form-field-disabled .mdc-text-field--outlined {
     background-color: #F7F7F7 !important;
   }
-  .mat-mdc-form-field-flex > div.mdc-notched-outline {
+
+  .mat-mdc-form-field-flex>div.mdc-notched-outline {
     color: mat.get-color-from-palette($arm-primary, 500) !important;
   }
+
   .mat-mdc-text-field-wrapper {
     padding: 0px !important;
   }
+
   .mat-mdc-form-field-flex {
     padding: 0 16px 0 16px !important;
   }
+
   .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-prefix {
     top: 0em !important;
     color: mat.get-color-from-palette($arm-neutral, 300) !important;
     padding-right: 0.5em !important;
     font-size: 1.5em !important;
   }
+
   .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-suffix {
     top: 0em !important;
     font-size: 1.5em !important;
     color: mat.get-color-from-palette($arm-neutral, 300) !important;
+
     .error {
       color: mat.get-color-from-palette($arm-error, 500) !important;
     }
   }
+
   .mat-mdc-form-field-flex div.mdc-notched-outline__leading {
     border-radius: 6px 0 0 6px !important;
     min-width: 6px !important;
   }
+
   .mat-mdc-form-field-flex div.mdc-notched-outline__trailing {
     border-radius: 0 6px 6px 0 !important;
   }
+
   mat-error {
     font-family: "Poppins" !important;
     font-style: normal !important;
-    font-weight: 600 !important; // Should be 500, but 400/500 are the same.
+    font-weight: 500 !important;
     font-size: 12px !important;
     line-height: 18px !important;
     color: mat.get-color-from-palette($arm-error, 900) !important;
   }
+
   mat-hint {
     font-family: "Poppins" !important;
     font-style: normal !important;
-    font-weight: 600 !important; // Should be 500, but 400/500 are the same.
+    font-weight: 400 !important;
     font-size: 12px !important;
     line-height: 18px !important;
   }
+
   &.mat-focused .mdc-floating-label {
     color: mat.get-color-from-palette($arm-primary, 500) !important;
   }
-  .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading, 
-  .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch, 
+
+  .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,
+  .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,
   .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing {
     border-color: mat.get-color-from-palette($arm-primary, 500);
   }
+
   .mat-mdc-text-field-wrapper {
     --mat-mdc-form-field-label-offset-x: 0px;
   }
 }
 
-::ng-deep .mat-primary .mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option.mdc-list-item--disabled){
+::ng-deep .mat-primary .mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option.mdc-list-item--disabled) {
   color: mat.get-color-from-palette($arm-primary, 500) !important;
 }
 
@@ -1530,26 +1815,641 @@ mat-optgroup mat-option {
   }
 }
 
+// MatRadio Overrides [START]
+// Color Styles [START]
+mat-radio-button.sof-radio-button.mat-mdc-radio-checked {
+
+  &.mat-primary,
+  &[color="primary"] {
+    --mdc-radio-selected-focus-icon-color: #{mat.get-color-from-palette($arm-primary, 500)};
+    --mdc-radio-selected-hover-icon-color: #{mat.get-color-from-palette($arm-primary, 500)};
+    --mdc-radio-selected-icon-color: #{mat.get-color-from-palette($arm-primary, 500)};
+    --mdc-radio-selected-pressed-icon-color: #{mat.get-color-from-palette($arm-primary, 500)};
+    --mat-mdc-radio-checked-ripple-color: #{mat.get-color-from-palette($arm-primary, 500)};
+  }
+
+  &.mat-accent,
+  &[color="accent"] {
+    --mdc-radio-selected-focus-icon-color: #{mat.get-color-from-palette($arm-accent, 500)};
+    --mdc-radio-selected-hover-icon-color: #{mat.get-color-from-palette($arm-accent, 500)};
+    --mdc-radio-selected-icon-color: #{mat.get-color-from-palette($arm-accent, 500)};
+    --mdc-radio-selected-pressed-icon-color: #{mat.get-color-from-palette($arm-accent, 500)};
+    --mat-mdc-radio-checked-ripple-color: #{mat.get-color-from-palette($arm-accent, 500)};
+  }
+
+  &.mat-warn,
+  &[color="warn"] {
+    --mdc-radio-selected-focus-icon-color: #{mat.get-color-from-palette($arm-warn, 500)};
+    --mdc-radio-selected-hover-icon-color: #{mat.get-color-from-palette($arm-warn, 500)};
+    --mdc-radio-selected-icon-color: #{mat.get-color-from-palette($arm-warn, 500)};
+    --mdc-radio-selected-pressed-icon-color: #{mat.get-color-from-palette($arm-warn, 500)};
+    --mat-mdc-radio-checked-ripple-color: #{mat.get-color-from-palette($arm-warn, 500)};
+  }
+
+  &.mat-success,
+  &[color="success"] {
+    --mdc-radio-selected-focus-icon-color: #{mat.get-color-from-palette($arm-success, 500)};
+    --mdc-radio-selected-hover-icon-color: #{mat.get-color-from-palette($arm-success, 500)};
+    --mdc-radio-selected-icon-color: #{mat.get-color-from-palette($arm-success, 500)};
+    --mdc-radio-selected-pressed-icon-color: #{mat.get-color-from-palette($arm-success, 500)};
+    --mat-mdc-radio-checked-ripple-color: #{mat.get-color-from-palette($arm-success, 500)};
+  }
+
+  &.mat-info,
+  &[color="info"] {
+    --mdc-radio-selected-focus-icon-color: #{mat.get-color-from-palette($arm-info, 500)};
+    --mdc-radio-selected-hover-icon-color: #{mat.get-color-from-palette($arm-info, 500)};
+    --mdc-radio-selected-icon-color: #{mat.get-color-from-palette($arm-info, 500)};
+    --mdc-radio-selected-pressed-icon-color: #{mat.get-color-from-palette($arm-info, 500)};
+    --mat-mdc-radio-checked-ripple-color: #{mat.get-color-from-palette($arm-info, 500)};
+  }
+
+  &.mat-error,
+  &[color="error"] {
+    --mdc-radio-selected-focus-icon-color: #{mat.get-color-from-palette($arm-error, 500)};
+    --mdc-radio-selected-hover-icon-color: #{mat.get-color-from-palette($arm-error, 500)};
+    --mdc-radio-selected-icon-color: #{mat.get-color-from-palette($arm-error, 500)};
+    --mdc-radio-selected-pressed-icon-color: #{mat.get-color-from-palette($arm-error, 500)};
+    --mat-mdc-radio-checked-ripple-color: #{mat.get-color-from-palette($arm-error, 500)};
+  }
+
+  &.mat-neutral,
+  &[color="neutral"] {
+    --mdc-radio-selected-focus-icon-color: #{mat.get-color-from-palette($arm-neutral, 500)};
+    --mdc-radio-selected-hover-icon-color: #{mat.get-color-from-palette($arm-neutral, 500)};
+    --mdc-radio-selected-icon-color: #{mat.get-color-from-palette($arm-neutral, 500)};
+    --mdc-radio-selected-pressed-icon-color: #{mat.get-color-from-palette($arm-neutral, 500)};
+    --mat-mdc-radio-checked-ripple-color: #{mat.get-color-from-palette($arm-neutral, 500)};
+  }
+}
+
+// Color Styles [END]
+
+::ng-deep mat-radio-button.sof-radio-button {
+  .mdc-radio__background {
+    border-width: 3px !important;
+  }
+
+  // Styles that vary by size [START]
+  .mdc-radio__background,
+  .mdc-radio {
+    width: 20px !important;
+    height: 20px !important;
+  }
+
+  .mdc-radio__native-control {
+    width: 24px !important;
+    height: 24px !important;
+    transform: translate(0.7em, 9.5px);
+  }
+
+  .mat-mdc-radio-touch-target {
+    transform: translate(-48%, -50%) !important;
+  }
+
+  .mat-radio-ripple,
+  .mdc-radio:hover .mdc-radio__native-control:not([disabled])~.mdc-radio-ripple {
+    width: 40px;
+    height: 40px;
+    transform: translate(1px, 1px) !important;
+  }
+
+  label {
+    @extend .body2;
+  }
+
+  // Styles that vary by size [END]
+}
+
+// MatRadio Overrides [END]
+
+// MatSlider Overrides [START]
+
+::ng-deep mat-slider.sof-slider {
+
+  // Color Styles [START]
+  &.mat-primary {
+    --mdc-slider-handle-color: #{mat.get-color-from-palette($arm-primary, 500)};
+    --mdc-slider-focus-handle-color: #{mat.get-color-from-palette($arm-primary, 500)};
+    --mdc-slider-hover-handle-color: #{mat.get-color-from-palette($arm-primary, 500)};
+    --mdc-slider-active-track-color: #{mat.get-color-from-palette($arm-primary, 500)};
+    --mdc-slider-inactive-track-color: #{mat.get-color-from-palette($arm-neutral, 500)};
+    --mdc-slider-with-tick-marks-inactive-container-color: #{mat.get-color-from-palette($arm-primary, 500)};
+    --mat-mdc-slider-ripple-color: #{mat.get-color-from-palette($arm-primary, 500)};
+    --mat-mdc-slider-hover-ripple-color: rgba(var(--primary-color-500-parts-rgb), 0.05);
+    --mat-mdc-slider-focus-ripple-color: rgba(var(--primary-color-500-parts-rgb), 0.2);
+  }
+
+  &.mat-accent {
+    --mdc-slider-handle-color: #{mat.get-color-from-palette($arm-accent, 500)};
+    --mdc-slider-focus-handle-color: #{mat.get-color-from-palette($arm-accent, 500)};
+    --mdc-slider-hover-handle-color: #{mat.get-color-from-palette($arm-accent, 500)};
+    --mdc-slider-active-track-color: #{mat.get-color-from-palette($arm-accent, 500)};
+    --mdc-slider-inactive-track-color: #{mat.get-color-from-palette($arm-neutral, 500)};
+    --mdc-slider-with-tick-marks-inactive-container-color: #{mat.get-color-from-palette($arm-accent, 500)};
+    --mat-mdc-slider-ripple-color: #{mat.get-color-from-palette($arm-accent, 500)};
+    --mat-mdc-slider-hover-ripple-color: rgba(var(--accent-color-500-parts-rgb), 0.05);
+    --mat-mdc-slider-focus-ripple-color: rgba(var(--accent-color-500-parts-rgb), 0.2);
+  }
+
+  &.mat-warn {
+    --mdc-slider-handle-color: #{mat.get-color-from-palette($arm-warn, 500)};
+    --mdc-slider-focus-handle-color: #{mat.get-color-from-palette($arm-warn, 500)};
+    --mdc-slider-hover-handle-color: #{mat.get-color-from-palette($arm-warn, 500)};
+    --mdc-slider-active-track-color: #{mat.get-color-from-palette($arm-warn, 500)};
+    --mdc-slider-inactive-track-color: #{mat.get-color-from-palette($arm-neutral, 500)};
+    --mdc-slider-with-tick-marks-inactive-container-color: #{mat.get-color-from-palette($arm-warn, 500)};
+    --mat-mdc-slider-ripple-color: #{mat.get-color-from-palette($arm-warn, 500)};
+    --mat-mdc-slider-hover-ripple-color: rgba(var(--warn-color-500-parts-rgb), 0.05);
+    --mat-mdc-slider-focus-ripple-color: rgba(var(--warn-color-500-parts-rgb), 0.2);
+  }
+
+  &.mat-success {
+    --mdc-slider-handle-color: #{mat.get-color-from-palette($arm-success, 500)};
+    --mdc-slider-focus-handle-color: #{mat.get-color-from-palette($arm-success, 500)};
+    --mdc-slider-hover-handle-color: #{mat.get-color-from-palette($arm-success, 500)};
+    --mdc-slider-active-track-color: #{mat.get-color-from-palette($arm-success, 500)};
+    --mdc-slider-inactive-track-color: #{mat.get-color-from-palette($arm-neutral, 500)};
+    --mdc-slider-with-tick-marks-inactive-container-color: #{mat.get-color-from-palette($arm-success, 500)};
+    --mat-mdc-slider-ripple-color: #{mat.get-color-from-palette($arm-success, 500)};
+    --mat-mdc-slider-hover-ripple-color: rgba(var(--success-color-500-parts-rgb), 0.05);
+    --mat-mdc-slider-focus-ripple-color: rgba(var(--success-color-500-parts-rgb), 0.2);
+  }
+
+  &.mat-info {
+    --mdc-slider-handle-color: #{mat.get-color-from-palette($arm-info, 500)};
+    --mdc-slider-focus-handle-color: #{mat.get-color-from-palette($arm-info, 500)};
+    --mdc-slider-hover-handle-color: #{mat.get-color-from-palette($arm-info, 500)};
+    --mdc-slider-active-track-color: #{mat.get-color-from-palette($arm-info, 500)};
+    --mdc-slider-inactive-track-color: #{mat.get-color-from-palette($arm-neutral, 500)};
+    --mdc-slider-with-tick-marks-inactive-container-color: #{mat.get-color-from-palette($arm-info, 500)};
+    --mat-mdc-slider-ripple-color: #{mat.get-color-from-palette($arm-info, 500)};
+    --mat-mdc-slider-hover-ripple-color: rgba(var(--info-color-500-parts-rgb), 0.05);
+    --mat-mdc-slider-focus-ripple-color: rgba(var(--info-color-500-parts-rgb), 0.2);
+  }
+
+  &.mat-error {
+    --mdc-slider-handle-color: #{mat.get-color-from-palette($arm-error, 500)};
+    --mdc-slider-focus-handle-color: #{mat.get-color-from-palette($arm-error, 500)};
+    --mdc-slider-hover-handle-color: #{mat.get-color-from-palette($arm-error, 500)};
+    --mdc-slider-active-track-color: #{mat.get-color-from-palette($arm-error, 500)};
+    --mdc-slider-inactive-track-color: #{mat.get-color-from-palette($arm-neutral, 500)};
+    --mdc-slider-with-tick-marks-inactive-container-color: #{mat.get-color-from-palette($arm-error, 500)};
+    --mat-mdc-slider-ripple-color: #{mat.get-color-from-palette($arm-error, 500)};
+    --mat-mdc-slider-hover-ripple-color: rgba(var(--error-color-500-parts-rgb), 0.05);
+    --mat-mdc-slider-focus-ripple-color: rgba(var(--error-color-500-parts-rgb), 0.2);
+  }
+
+  &.mat-neutral {
+    --mdc-slider-handle-color: #{mat.get-color-from-palette($arm-neutral, 500)};
+    --mdc-slider-focus-handle-color: #{mat.get-color-from-palette($arm-neutral, 500)};
+    --mdc-slider-hover-handle-color: #{mat.get-color-from-palette($arm-neutral, 500)};
+    --mdc-slider-active-track-color: #{mat.get-color-from-palette($arm-neutral, 500)};
+    --mdc-slider-inactive-track-color: #{mat.get-color-from-palette($arm-neutral, 500)};
+    --mdc-slider-with-tick-marks-inactive-container-color: #{mat.get-color-from-palette($arm-neutral, 500)};
+    --mat-mdc-slider-ripple-color: #{mat.get-color-from-palette($arm-neutral, 500)};
+    --mat-mdc-slider-hover-ripple-color: rgba(var(--neutral-color-500-parts-rgb), 0.05);
+    --mat-mdc-slider-focus-ripple-color: rgba(var(--neutral-color-500-parts-rgb), 0.2);
+  }
+
+  // Color Styles [END]
+
+  // Size Styles [START]
+  --mdc-slider-active-track-height: 10px;
+  --mdc-slider-inactive-track-height: 10px;
+
+  &.mat-mdc-slider {
+    max-width: 300px;
+    width: 100%;
+  }
+
+  .mdc-slider__thumb-knob {
+    border-width: 2px !important;
+    background-color: white !important;
+  }
+
+  // Size Styles [END]
+}
+
+// MatSlider Overrides [END]
+
+// MatCheckbox Overrides [START]
+
+::ng-deep mat-checkbox.sof-checkbox {
+  .mdc-checkbox {
+    --mdc-checkbox-selected-checkmark-color: #fff;
+  }
+
+  .mdc-checkbox__native-control:disabled~.mdc-checkbox__background .mdc-checkbox__checkmark {
+    --mdc-checkbox-disabled-selected-checkmark-color: rgba(0, 0, 0, 0.38);
+  }
+
+  .mdc-checkbox__native-control[disabled]:not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background {
+    background-color: #F7F7F7 !important;
+    border: 2px solid rgba(0, 0, 0, 0.38);
+  }
+
+  .mdc-checkbox__background {
+    border-width: 3px !important;
+  }
+
+  // Color Styles [START]
+  &.mat-warn .mdc-checkbox {
+    --mdc-checkbox-selected-focus-icon-color: #{mat.get-color-from-palette($arm-warn, 500)};
+    --mdc-checkbox-selected-hover-icon-color: #{mat.get-color-from-palette($arm-warn, 500)};
+    --mdc-checkbox-selected-icon-color: #{mat.get-color-from-palette($arm-warn, 500)};
+    --mdc-checkbox-selected-pressed-icon-color: #{mat.get-color-from-palette($arm-warn, 500)};
+
+    .mdc-checkbox--selected~.mdc-checkbox__ripple {
+      background: mat.get-color-from-palette($arm-warn, 500);
+    }
+  }
+
+  &.mat-success .mdc-checkbox {
+    --mdc-checkbox-selected-focus-icon-color: #{mat.get-color-from-palette($arm-success, 500)};
+    --mdc-checkbox-selected-hover-icon-color: #{mat.get-color-from-palette($arm-success, 500)};
+    --mdc-checkbox-selected-icon-color: #{mat.get-color-from-palette($arm-success, 500)};
+    --mdc-checkbox-selected-pressed-icon-color: #{mat.get-color-from-palette($arm-success, 500)};
+
+    .mdc-checkbox--selected~.mdc-checkbox__ripple {
+      background: mat.get-color-from-palette($arm-success, 500);
+    }
+  }
+
+  &.mat-info .mdc-checkbox {
+    --mdc-checkbox-selected-focus-icon-color: #{mat.get-color-from-palette($arm-info, 500)};
+    --mdc-checkbox-selected-hover-icon-color: #{mat.get-color-from-palette($arm-info, 500)};
+    --mdc-checkbox-selected-icon-color: #{mat.get-color-from-palette($arm-info, 500)};
+    --mdc-checkbox-selected-pressed-icon-color: #{mat.get-color-from-palette($arm-info, 500)};
+
+    .mdc-checkbox--selected~.mdc-checkbox__ripple {
+      background: mat.get-color-from-palette($arm-info, 500);
+    }
+  }
+
+  &.mat-error .mdc-checkbox {
+    --mdc-checkbox-selected-focus-icon-color: #{mat.get-color-from-palette($arm-error, 500)};
+    --mdc-checkbox-selected-hover-icon-color: #{mat.get-color-from-palette($arm-error, 500)};
+    --mdc-checkbox-selected-icon-color: #{mat.get-color-from-palette($arm-error, 500)};
+    --mdc-checkbox-selected-pressed-icon-color: #{mat.get-color-from-palette($arm-error, 500)};
+
+    .mdc-checkbox--selected~.mdc-checkbox__ripple {
+      background: mat.get-color-from-palette($arm-error, 500);
+    }
+  }
+
+  &.mat-neutral .mdc-checkbox {
+    --mdc-checkbox-selected-focus-icon-color: #{mat.get-color-from-palette($arm-neutral, 500)};
+    --mdc-checkbox-selected-hover-icon-color: #{mat.get-color-from-palette($arm-neutral, 500)};
+    --mdc-checkbox-selected-icon-color: #{mat.get-color-from-palette($arm-neutral, 500)};
+    --mdc-checkbox-selected-pressed-icon-color: #{mat.get-color-from-palette($arm-neutral, 500)};
+
+    .mdc-checkbox--selected~.mdc-checkbox__ripple {
+      background: mat.get-color-from-palette($arm-neutral, 500);
+    }
+  }
+
+  // Color Styles [END]
+
+  // Styles that vary by size [START]
+  .mdc-checkbox__background,
+  .mdc-checkbox {
+    width: 20px !important;
+    height: 20px !important;
+  }
+
+  .mdc-checkbox__native-control {
+    width: 24px !important;
+    height: 24px !important;
+    transform: translate(0.7em, 9.5px);
+  }
+
+  .mat-mdc-checkbox-touch-target {
+    transform: translate(-48%, -50%) !important;
+  }
+
+  .mdc-checkbox__ripple,
+  .mat-mdc-checkbox-ripple,
+  .mdc-checkbox:hover .mdc-checkbox__native-control:not([disabled])~.mdc-checkbox__ripple {
+    width: 40px;
+    height: 40px;
+    transform: translate(1px, 1px) !important;
+  }
+
+  label {
+    @extend .body2;
+  }
+
+  // Styles that vary by size [END]
+}
+
+// MatCheckbox Overrides [END]
+
+// MatChip class overrides [START]
+// https://material.angular.io/components/chips/api
+::ng-deep .mat-mdc-chip.sof-chip {
+  font-family: "Poppins" !important;
+  font-size: 14px !important;
+  height: 32px !important;
+  font-style: normal !important;
+
+  i {
+    padding-right: 8px !important;
+    padding-left: 8px !important;
+  }
+}
+
+::ng-deep .mat-mdc-chip.mdc-evolution-chip--disabled.sof-chip {
+  background: #F7F7F7 !important;
+  color: rgba(0, 0, 0, 0.6) !important;
+
+  i {
+    color: #000000 !important;
+  }
+}
+
+::ng-deep .mat-mdc-chip.sof-chip {
+
+  &.mat-primary {
+    background-color: #{mat.get-color-from-palette($arm-primary, 50)};
+
+    i {
+      color:#{mat.get-color-from-palette($arm-primary, 500)};
+    }
+
+    &:hover {
+      background-color: #{mat.get-color-from-palette($arm-primary, 100)};
+      color: #000000;
+    }
+
+    &:focus {
+      background-color: #{mat.get-color-from-palette($arm-primary, 200)};
+      color: #000000;
+    }
+  }
+
+  &.mat-accent {
+    background-color: #{mat.get-color-from-palette($arm-accent, 50)};
+
+    i {
+      color:#{mat.get-color-from-palette($arm-accent, 500)};
+    }
+
+    &:hover {
+      background-color: #{mat.get-color-from-palette($arm-accent, 100)};
+      color: #000000;
+    }
+
+    &:focus {
+      background-color: #{mat.get-color-from-palette($arm-accent, 200)};
+      color: #000000;
+    }
+  }
+
+  &.mat-info {
+    background-color: #{mat.get-color-from-palette($arm-info, 50)};
+
+    i {
+      color:#{mat.get-color-from-palette($arm-info, 500)};
+    }
+
+    &:hover {
+      background-color: #{mat.get-color-from-palette($arm-info, 100)};
+      color: #000000;
+    }
+
+    &:focus {
+      background-color: #{mat.get-color-from-palette($arm-info, 200)};
+      color: #000000;
+    }
+  }
+
+  &.mat-error {
+    background-color: #{mat.get-color-from-palette($arm-error, 50)};
+
+    i {
+      color:#{mat.get-color-from-palette($arm-error, 500)};
+    }
+
+    &:hover {
+      background-color: #{mat.get-color-from-palette($arm-error, 100)};
+      color: #000000;
+    }
+
+    &:focus {
+      background-color: #{mat.get-color-from-palette($arm-error, 200)};
+      color: #000000;
+    }
+  }
+
+  &.mat-neutral {
+    background-color: #{mat.get-color-from-palette($arm-neutral, 50)};
+
+    i {
+      color:#{mat.get-color-from-palette($arm-neutral, 500)} ;
+    }
+
+    &:hover {
+      background-color: #{mat.get-color-from-palette($arm-neutral, 100)};
+      color: #000000;
+    }
+
+    &:focus {
+      background-color: #{mat.get-color-from-palette($arm-neutral, 200)};
+      color: #000000;
+    }
+  }
+
+  &.mat-success {
+    background-color: #{mat.get-color-from-palette($arm-success, 50)};
+
+    i {
+      color:#{mat.get-color-from-palette($arm-success, 500)};
+    }
+
+    &:hover {
+      background-color: #{mat.get-color-from-palette($arm-success, 100)};
+      color: #000000;
+    }
+
+    &:focus {
+      background-color: #{mat.get-color-from-palette($arm-success, 200)};
+      color: #000000;
+    }
+  }
+
+  &.mat-warn {
+    background-color: #{mat.get-color-from-palette($arm-warn, 50)};
+
+    i {
+      color:#{mat.get-color-from-palette($arm-warn, 500)};
+    }
+
+    &:hover {
+      background-color: #{mat.get-color-from-palette($arm-warn, 100)};
+      color: #000000;
+    }
+
+    &:focus {
+      background-color: #{mat.get-color-from-palette($arm-warn, 200)};
+      color: #000000;
+    }
+  }
+}
+
+::ng-deep .mat-mdc-chip-selected.sof-chip {
+  &.mat-primary {
+    background-color: #{mat.get-color-from-palette($arm-primary, 500)} !important;
+
+    i {
+      color:#{mat.get-color-from-palette($arm-primary, 500)} !important;
+    }
+
+    &:hover {
+      background-color: #{mat.get-color-from-palette($arm-primary, 500)} !important;
+      color: #000000;
+    }
+
+    &:focus {
+      background-color: #{mat.get-color-from-palette($arm-primary, 500)} !important;
+      color: #000000;
+    }
+  }
+
+  &.mat-neutral {
+    background-color: #{mat.get-color-from-palette($arm-neutral, 500)} !important;
+
+    i {
+      color:#{mat.get-color-from-palette($arm-neutral, 500)} !important;
+    }
+
+    &:hover {
+      background-color: #{mat.get-color-from-palette($arm-neutral, 500)} !important;
+      color: #000000;
+    }
+
+    &:focus {
+      background-color: #{mat.get-color-from-palette($arm-neutral, 500)} !important;
+      color: #000000;
+    }
+  }
+
+  &.mat-accent {
+    background-color: #{mat.get-color-from-palette($arm-accent, 500)} !important;
+
+    i {
+      color:#{mat.get-color-from-palette($arm-accent, 500)} !important;
+    }
+
+    &:hover {
+      background-color: #{mat.get-color-from-palette($arm-accent, 500)} !important;
+      color: #000000;
+    }
+
+    &:focus {
+      background-color: #{mat.get-color-from-palette($arm-accent, 500)} !important;
+      color: #000000;
+    }
+  }
+
+  &.mat-info {
+    background-color: #{mat.get-color-from-palette($arm-info, 500)} !important;
+
+    i {
+      color:#{mat.get-color-from-palette($arm-info, 500)} !important;
+    }
+
+    &:hover {
+      background-color: #{mat.get-color-from-palette($arm-info, 500)} !important;
+      color: #000000;
+    }
+
+    &:focus {
+      background-color: #{mat.get-color-from-palette($arm-info, 500)} !important;
+      color: #000000;
+    }
+  }
+
+  &.mat-error {
+    background-color: #{mat.get-color-from-palette($arm-error, 500)} !important;
+
+    i {
+      color:#{mat.get-color-from-palette($arm-error, 500)} !important;
+    }
+
+    &:hover {
+      background-color: #{mat.get-color-from-palette($arm-error, 500)} !important;
+      color: #000000;
+    }
+
+    &:focus {
+      background-color: #{mat.get-color-from-palette($arm-error, 500)} !important;
+      color: #000000;
+    }
+  }
+
+  &.mat-success {
+    background-color: #{mat.get-color-from-palette($arm-success, 500)} !important;
+
+    i {
+      color:#{mat.get-color-from-palette($arm-success, 500)} !important;
+    }
+
+    &:hover {
+      background-color: #{mat.get-color-from-palette($arm-success, 500)} !important;
+      color: #000000;
+    }
+
+    &:focus {
+      background-color: #{mat.get-color-from-palette($arm-success, 500)} !important;
+      color: #000000;
+    }
+  }
+
+  &.mat-warn {
+    background-color: #{mat.get-color-from-palette($arm-warn, 500)} !important;
+
+    i {
+      color:#{mat.get-color-from-palette($arm-warn, 500)} !important;
+    }
+
+    &:hover {
+      background-color: #{mat.get-color-from-palette($arm-warn, 500)} !important;
+      color: #000000;
+    }
+
+    &:focus {
+      background-color: #{mat.get-color-from-palette($arm-warn, 500)} !important;
+      color: #000000;
+    }
+  }
+}
+
+// MatChip class overrides [END]
+
 // MatSlideToggle class overrides [START]
 // https://material.angular.io/components/slide-toggle/api
 ::ng-deep mat-slide-toggle {
   &.sof-slide-toggle {
     height: auto;
+
     .mdc-switch__track {
       height: 22px !important;
       width: 32px !important;
       border-radius: 24px !important;
     }
+
     .mdc-switch__handle {
       height: 20px !important;
       width: 20px !important;
       border-radius: 24px !important;
       left: -3px !important;
-      
+
       .mdc-switch__shadow {
         background: #fff !important;
       }
     }
+
     label {
       font-family: "Poppins" !important;
       font-style: normal !important;
@@ -1587,12 +2487,14 @@ mat-optgroup mat-option {
     --mdc-switch-selected-hover-track-color: var(--primary-color-500-parts);
     --mdc-switch-selected-pressed-track-color: var(--primary-color-500-parts);
     --mdc-switch-selected-track-color: var(--primary-color-500-parts);
+
     .mdc-switch.mdc-switch--selected:not(.mdc-switch.mdc-switch--disabled) {
       .mdc-switch__handle {
         border: 1px solid mat.get-color-from-palette($arm-primary, 500) !important;
       }
     }
   }
+
   &.mat-accent {
     --mdc-switch-selected-focus-state-layer-color: var(--accent-color-300-parts);
     --mdc-switch-selected-handle-color: var(--accent-color-300-parts);
@@ -1605,12 +2507,14 @@ mat-optgroup mat-option {
     --mdc-switch-selected-hover-track-color: var(--accent-color-500-parts);
     --mdc-switch-selected-pressed-track-color: var(--accent-color-500-parts);
     --mdc-switch-selected-track-color: var(--accent-color-500-parts);
+
     .mdc-switch.mdc-switch--selected:not(.mdc-switch.mdc-switch--disabled) {
       .mdc-switch__handle {
         border: 1px solid mat.get-color-from-palette($arm-accent, 500) !important;
       }
     }
   }
+
   &.mat-warn {
     --mdc-switch-selected-focus-state-layer-color: var(--warn-color-300-parts);
     --mdc-switch-selected-handle-color: var(--warn-color-300-parts);
@@ -1623,12 +2527,14 @@ mat-optgroup mat-option {
     --mdc-switch-selected-hover-track-color: var(--warn-color-500-parts);
     --mdc-switch-selected-pressed-track-color: var(--warn-color-500-parts);
     --mdc-switch-selected-track-color: var(--warn-color-500-parts);
+
     .mdc-switch.mdc-switch--selected:not(.mdc-switch.mdc-switch--disabled) {
       .mdc-switch__handle {
         border: 1px solid mat.get-color-from-palette($arm-warn, 500) !important;
       }
     }
   }
+
   &.mat-success {
     --mdc-switch-selected-focus-state-layer-color: var(--success-color-300-parts);
     --mdc-switch-selected-handle-color: var(--success-color-300-parts);
@@ -1641,12 +2547,14 @@ mat-optgroup mat-option {
     --mdc-switch-selected-hover-track-color: var(--success-color-500-parts);
     --mdc-switch-selected-pressed-track-color: var(--success-color-500-parts);
     --mdc-switch-selected-track-color: var(--success-color-500-parts);
+
     .mdc-switch.mdc-switch--selected:not(.mdc-switch.mdc-switch--disabled) {
       .mdc-switch__handle {
         border: 1px solid mat.get-color-from-palette($arm-success, 500) !important;
       }
     }
   }
+
   &.mat-error {
     --mdc-switch-selected-focus-state-layer-color: var(--error-color-300-parts);
     --mdc-switch-selected-handle-color: var(--error-color-300-parts);
@@ -1659,12 +2567,14 @@ mat-optgroup mat-option {
     --mdc-switch-selected-hover-track-color: var(--error-color-500-parts);
     --mdc-switch-selected-pressed-track-color: var(--error-color-500-parts);
     --mdc-switch-selected-track-color: var(--error-color-500-parts);
+
     .mdc-switch.mdc-switch--selected:not(.mdc-switch.mdc-switch--disabled) {
       .mdc-switch__handle {
         border: 1px solid mat.get-color-from-palette($arm-error, 500) !important;
       }
     }
   }
+
   &.mat-info {
     --mdc-switch-selected-focus-state-layer-color: var(--info-color-300-parts);
     --mdc-switch-selected-handle-color: var(--info-color-300-parts);
@@ -1677,12 +2587,14 @@ mat-optgroup mat-option {
     --mdc-switch-selected-hover-track-color: var(--info-color-500-parts);
     --mdc-switch-selected-pressed-track-color: var(--info-color-500-parts);
     --mdc-switch-selected-track-color: var(--info-color-500-parts);
+
     .mdc-switch.mdc-switch--selected:not(.mdc-switch.mdc-switch--disabled) {
       .mdc-switch__handle {
         border: 1px solid mat.get-color-from-palette($arm-info, 500) !important;
       }
     }
   }
+
   &.mat-neutral {
     --mdc-switch-selected-focus-state-layer-color: var(--neutral-color-300-parts);
     --mdc-switch-selected-handle-color: var(--neutral-color-300-parts);
@@ -1695,6 +2607,7 @@ mat-optgroup mat-option {
     --mdc-switch-selected-hover-track-color: var(--neutral-color-500-parts);
     --mdc-switch-selected-pressed-track-color: var(--neutral-color-500-parts);
     --mdc-switch-selected-track-color: var(--neutral-color-500-parts);
+
     .mdc-switch.mdc-switch--selected:not(.mdc-switch.mdc-switch--disabled) {
       .mdc-switch__handle {
         border: 1px solid #000000de !important;
@@ -1726,6 +2639,7 @@ mat-optgroup mat-option {
 
 .mobile-no-card {
   padding: 36px 30px !important;
+
   @media only screen and (max-width: $mat-lt-sm) {
     background: transparent !important;
     box-shadow: none !important;
@@ -1735,6 +2649,7 @@ mat-optgroup mat-option {
 
 .sm-screen-no-card {
   padding: 36px 30px !important;
+
   @media only screen and (max-width: $mat-lt-md) {
     background: transparent !important;
     box-shadow: none !important;
@@ -1795,6 +2710,7 @@ mat-optgroup mat-option {
 
 .word-wrap-checkboxes-override label {
   white-space: initial !important;
+
   @media only screen and (max-width: $mat-lt-md) {
     white-space: initial;
   }
@@ -1803,8 +2719,9 @@ mat-optgroup mat-option {
 .sm-full-width-datepicker {
   @media only screen and (max-width: $mat-lt-md) {
     width: 100%;
+
     .mat-mdc-form-field-infix,
-    .mat-mdc-form-field-infix > input {
+    .mat-mdc-form-field-infix>input {
       width: 100% !important;
     }
   }
@@ -2056,3 +2973,63 @@ mat-optgroup mat-option {
     @include mobile-responsive-table;
   }
 }
+
+/** Calendar Settings */
+::ng-deep {
+  .mat-calendar-body-disabled>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
+    color: rgba(0, 0, 0, 0.38) !important;
+  }
+
+  .mat-calendar-previous-button,
+  .mat-calendar-next-button,
+  .mat-calendar-period-button {
+    color: #000000 !important;
+    font-weight: 600 !important;
+    font-size: 14px !important;
+    letter-spacing: 0px !important;
+  }
+
+  .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
+    background-color: mat.get-color-from-palette($arm-primary, 500) !important;
+    color: white;
+  }
+
+  .mat-calendar-body-today:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
+    border: none;
+  }
+
+  .mat-calendar-body-today.mat-calendar-body-selected {
+    box-shadow: none;
+  }
+
+  .mat-calendar-body-in-range::before {
+    background: mat.get-color-from-palette($arm-primary, 50) !important;
+  }
+
+  .mat-calendar-body-selected {
+    background-color: mat.get-color-from-palette($arm-primary, 500) !important;
+    border: none;
+  }
+
+  .mat-datepicker-content {
+    border-radius: 10px !important;
+  }
+
+  .mat-calendar-previous-button.mat-button-disabled,
+  .mat-calendar-next-button.mat-button-disabled {
+    color: rgba(0, 0, 0, 0.54) !important;
+  }
+
+  .mat-calendar-table-header th {
+    font-size: 14px !important;
+    line-height: 30px;
+    color: rgba(0, 0, 0, 0.6) !important;
+  }
+
+  .mat-calendar-table-header-divider {
+    position: absolute !important;
+    left: 20px;
+    width: -webkit-fill-available;
+    right: 20px;
+  }
+}