@softheon/armature 15.6.0 → 15.7.0

package/assets/styles/sof-styles.scss

@@ -9,19 +9,17 @@
 $main-theme: mat.define-light-theme((
   color: (
     primary: mat.define-palette($arm-primary),
-    accent: mat.define-palette($arm-accent)
-  ),
-  typography: mat.define-typography-config(),
-  density: 0,
-));
+    accent: mat.define-palette($arm-accent)),
+    typography: mat.define-typography-config(),
+    density: 0,
+    ));
 $main-theme-dark: mat.define-dark-theme((
   color: (
     primary: mat.define-palette($arm-primary),
-    accent: mat.define-palette($arm-accent)
-  ),
-  typography: mat.define-typography-config(),
-  density: 0,
-));
+    accent: mat.define-palette($arm-accent)),
+    typography: mat.define-typography-config(),
+    density: 0,
+    ));
 
 body {
   letter-spacing: 0px;
@@ -50,6 +48,7 @@ h1 {
   letter-spacing: normal;
   margin: 0px;
   padding: 0px;
+
   @media only screen and (max-width: $screen-sm-end) {
     font-size: 28px;
   }
@@ -66,6 +65,7 @@ h2 {
   letter-spacing: normal;
   margin: 0px;
   padding: 0px;
+
   @media only screen and (max-width: $screen-sm-end) {
     font-size: 24px;
   }
@@ -82,6 +82,7 @@ h3 {
   letter-spacing: normal;
   margin: 0px;
   padding: 0px;
+
   @media only screen and (max-width: $screen-sm-end) {
     font-size: 20px;
   }
@@ -98,6 +99,7 @@ h4 {
   letter-spacing: normal;
   margin: 0px;
   padding: 0px;
+
   @media only screen and (max-width: $screen-sm-end) {
     font-size: 18px;
   }
@@ -110,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;
   }
@@ -122,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;
   }
@@ -135,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;
@@ -146,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;
     }
@@ -225,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;
@@ -251,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;
@@ -265,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;
@@ -273,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;
@@ -281,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;
@@ -293,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;
@@ -301,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;
@@ -315,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;
   }
@@ -349,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);
         }
@@ -422,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;
     }
@@ -448,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);
         }
@@ -516,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;
@@ -559,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;
       }
@@ -638,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;
     }
@@ -663,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;
       }
@@ -737,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;
@@ -783,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;
         }
@@ -932,6 +1096,7 @@ button.mat-mdc-outlined-button {
       margin-right: 4px !important;
     }
   }
+
   &.sof-stroked-button-outline {
     padding: 0px 24px !important;
     height: 48px !important;
@@ -957,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;
         }
@@ -1059,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;
     }
@@ -1090,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;
         }
@@ -1234,6 +1471,7 @@ button.mat-mdc-outlined-button {
       opacity: 1 !important;
     }
   }
+
   &.sof-stroked-icon-button-outline {
     background: #ffffff !important;
     border-radius: 6px !important;
@@ -1243,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;
         }
@@ -1340,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;
@@ -1347,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;
@@ -1354,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;
@@ -1434,57 +1702,72 @@ 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: 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;
@@ -1493,27 +1776,31 @@ mat-card {
     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: 400 !important; 
+    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;
 }
 
@@ -1531,49 +1818,63 @@ mat-optgroup mat-option {
 // MatRadio Overrides [START]
 // Color Styles [START]
 mat-radio-button.sof-radio-button.mat-mdc-radio-checked {
-  &.mat-primary, &[color="primary"] {
+
+  &.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"] {
+
+  &.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"] {
+
+  &.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"] {
+
+  &.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"] {
+
+  &.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"] {
+
+  &.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"] {
+
+  &.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)};
@@ -1581,44 +1882,51 @@ mat-radio-button.sof-radio-button.mat-mdc-radio-checked {
     --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);
+    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 {
+  .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)};
@@ -1631,6 +1939,7 @@ mat-radio-button.sof-radio-button.mat-mdc-radio-checked {
     --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)};
@@ -1642,6 +1951,7 @@ mat-radio-button.sof-radio-button.mat-mdc-radio-checked {
     --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)};
@@ -1653,6 +1963,7 @@ mat-radio-button.sof-radio-button.mat-mdc-radio-checked {
     --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)};
@@ -1664,6 +1975,7 @@ mat-radio-button.sof-radio-button.mat-mdc-radio-checked {
     --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)};
@@ -1675,6 +1987,7 @@ mat-radio-button.sof-radio-button.mat-mdc-radio-checked {
     --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)};
@@ -1686,6 +1999,7 @@ mat-radio-button.sof-radio-button.mat-mdc-radio-checked {
     --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)};
@@ -1697,21 +2011,26 @@ mat-radio-button.sof-radio-button.mat-mdc-radio-checked {
     --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]
@@ -1720,62 +2039,76 @@ mat-radio-button.sof-radio-button.mat-mdc-radio-checked {
   .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 {
+
+    .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 {
+
+    .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 {
+
+    .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 {
+
+    .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 {
+
+    .mdc-checkbox--selected~.mdc-checkbox__ripple {
       background: mat.get-color-from-palette($arm-neutral, 500);
     }
   }
+
   // Color Styles [END]
 
   // Styles that vary by size [START]
@@ -1784,51 +2117,339 @@ mat-radio-button.sof-radio-button.mat-mdc-radio-checked {
     width: 20px !important;
     height: 20px !important;
   }
+
   .mdc-checkbox__native-control {
     width: 24px !important;
     height: 24px !important;
-    transform: translate(0.7em,9.5px);
+    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 {
+  .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;
@@ -1866,12 +2487,14 @@ mat-radio-button.sof-radio-button.mat-mdc-radio-checked {
     --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);
@@ -1884,12 +2507,14 @@ mat-radio-button.sof-radio-button.mat-mdc-radio-checked {
     --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);
@@ -1902,12 +2527,14 @@ mat-radio-button.sof-radio-button.mat-mdc-radio-checked {
     --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);
@@ -1920,12 +2547,14 @@ mat-radio-button.sof-radio-button.mat-mdc-radio-checked {
     --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);
@@ -1938,12 +2567,14 @@ mat-radio-button.sof-radio-button.mat-mdc-radio-checked {
     --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);
@@ -1956,12 +2587,14 @@ mat-radio-button.sof-radio-button.mat-mdc-radio-checked {
     --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);
@@ -1974,6 +2607,7 @@ mat-radio-button.sof-radio-button.mat-mdc-radio-checked {
     --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;
@@ -2005,6 +2639,7 @@ mat-radio-button.sof-radio-button.mat-mdc-radio-checked {
 
 .mobile-no-card {
   padding: 36px 30px !important;
+
   @media only screen and (max-width: $mat-lt-sm) {
     background: transparent !important;
     box-shadow: none !important;
@@ -2014,6 +2649,7 @@ mat-radio-button.sof-radio-button.mat-mdc-radio-checked {
 
 .sm-screen-no-card {
   padding: 36px 30px !important;
+
   @media only screen and (max-width: $mat-lt-md) {
     background: transparent !important;
     box-shadow: none !important;
@@ -2074,6 +2710,7 @@ mat-radio-button.sof-radio-button.mat-mdc-radio-checked {
 
 .word-wrap-checkboxes-override label {
   white-space: initial !important;
+
   @media only screen and (max-width: $mat-lt-md) {
     white-space: initial;
   }
@@ -2082,8 +2719,9 @@ mat-radio-button.sof-radio-button.mat-mdc-radio-checked {
 .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;
     }
   }
@@ -2336,52 +2974,62 @@ mat-radio-button.sof-radio-button.mat-mdc-radio-checked {
   }
 }
 
-/** Calendar Settings */ 
+/** 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-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-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;
+    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) {
+
+  .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;
+    border-radius: 10px !important;
   }
-  .mat-calendar-previous-button.mat-button-disabled, 
+
+  .mat-calendar-previous-button.mat-button-disabled,
   .mat-calendar-next-button.mat-button-disabled {
-      color: rgba(0, 0, 0, 0.54) !important;
+    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;
+    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;
+    position: absolute !important;
+    left: 20px;
+    width: -webkit-fill-available;
+    right: 20px;
   }
 }