@recursyve/nice-ui-kit.v2 14.0.0-beta.99 → 15.0.0-beta.119

package/styles/overrides/angular-material.scss

@@ -9,9 +9,19 @@
     @apply bg-black bg-opacity-60 sm:bg-transparent #{'!important'};
 }
 
-/* ----------------------------------------------------------------------------------------------------- */
-/*  @ Angular Material helpers & overrides
-/* ----------------------------------------------------------------------------------------------------- */
+/* -------------------------------------------------------------------------- */
+/*  @ Font smoothing
+/* -------------------------------------------------------------------------- */
+*[class*=mat-],
+*[class*=mat-mdc-] {
+    -webkit-font-smoothing: auto !important;
+    -moz-osx-font-smoothing: auto !important;
+
+    * {
+        -webkit-font-smoothing: auto !important;
+        -moz-osx-font-smoothing: auto !important;
+    }
+}
 
 /* ----------------------------------------------------------------------------------------------------- */
 /*  @ Accordion
@@ -82,35 +92,18 @@
 /* ----------------------------------------------------------------------------------------------------- */
 /*  @ Buttons
 /* ----------------------------------------------------------------------------------------------------- */
-.mat-button,
-.mat-fab,
-.mat-flat-button,
-.mat-icon-button,
-.mat-mini-fab,
-.mat-raised-button,
-.mat-stroked-button {
-    display: inline-flex !important;
-    align-items: center;
-    justify-content: center;
+.mat-mdc-button,
+.mat-mdc-raised-button,
+.mat-mdc-outlined-button,
+.mat-mdc-unelevated-button,
+.mat-mdc-icon-button,
+.mat-mdc-fab,
+.mat-mdc-mini-fab {
     height: 40px;
     min-height: 40px;
     max-height: 40px;
     line-height: 1 !important;
 
-    .mat-button-wrapper {
-        position: relative;
-        display: inline-flex !important;
-        align-items: center;
-        justify-content: center;
-        height: 100%;
-        z-index: 2; /* Move mat-button-wrapper above the ripple and focus overlay */
-    }
-
-    .mat-button-focus-overlay,
-    .mat-button-ripple {
-        z-index: 1;
-    }
-
     /* Large button */
     &.nice-mat-button-large {
         height: 48px;
@@ -119,7 +112,7 @@
     }
 
     /* Lower the icon opacity on disabled buttons */
-    &.mat-button-disabled {
+    &[disabled=true] {
 
         .mat-icon {
             opacity: 0.38 !important;
@@ -127,204 +120,134 @@
     }
 }
 
-.mat-fab {
-    max-height: 56px;
-}
+/* Icon buttons */
+.mat-mdc-icon-button {
+    display: inline-flex !important;
+    align-items: center;
+    justify-content: center;
+    width: 40px !important;
+    padding: 0 !important;
 
-/* Rounded design */
-.mat-button,
-.mat-flat-button,
-.mat-raised-button,
-.mat-stroked-button {
-    .-mat-rounded & {
-        padding: 0 20px;
-        border-radius: 9999px;
+    svg,
+    img {
+        height: auto !important;
     }
 }
 
-/* Target all buttons */
-.mat-button,
-.mat-fab,
-.mat-flat-button,
-.mat-icon-button,
-.mat-fab,
-.mat-mini-fab,
-.mat-raised-button,
-.mat-stroked-button {
-
-    /* mat-progress-spinner inside buttons */
-    .mat-progress-spinner {
-
-        &.mat-progress-spinner-indeterminate-animation[mode=indeterminate] {
+/* FAB buttons */
+.mat-mdc-fab {
+    max-height: 56px;
+    border-radius: 16px !important;
 
-            circle {
-                animation-duration: 6000ms;
-            }
-        }
+    &:not(.mdc-fab--extended) .mdc-fab__ripple {
+        border-radius: 16px !important;
     }
 }
 
-/* Colored background buttons */
-.mat-flat-button,
-.mat-raised-button,
-.mat-fab,
-.mat-mini-fab {
-
-    .mat-icon {
-        color: currentColor !important;
-    }
+/* Mini FAB buttons */
+.mat-mdc-mini-fab {
+    border-radius: 12px !important;
 
-    /* Add hover and focus style on all buttons */
-    .mat-button-focus-overlay {
-        @apply bg-gray-400 bg-opacity-20 dark:bg-black dark:bg-opacity-5 #{'!important'};
+    &:not(.mdc-fab--extended) .mdc-fab__ripple {
+        border-radius: 12px !important;
     }
+}
 
-    /* On palette colored buttons, use a darker color */
-    &.mat-primary,
-    &.mat-accent,
-    &.mat-warn {
+/* Fix the alignment of icons when used within buttons */
+.mat-mdc-button,
+.mat-mdc-raised-button,
+.mat-mdc-outlined-button,
+.mat-mdc-unelevated-button {
 
-        .mat-button-focus-overlay {
-            background-color: rgba(0, 0, 0, 0.1) !important;
-        }
+    & > .mat-icon {
+        margin-left: 0 !important;
+        margin-right: 0 !important;
     }
+}
 
-    &:hover,
-    &.cdk-keyboard-focused,
-    &.cdk-program-focused {
-
-        .mat-button-focus-overlay {
-            opacity: 1 !important;
-        }
-    }
+/* Adjust the color of mat-progress-spinner when used within buttons */
+.mat-mdc-button,
+.mat-mdc-raised-button,
+.mat-mdc-outlined-button,
+.mat-mdc-unelevated-button,
+.mat-mdc-icon-button,
+.mat-mdc-fab,
+.mat-mdc-mini-fab {
 
-    @media (hover: none) {
+    .mat-mdc-progress-spinner {
 
-        &:hover {
+        .mdc-circular-progress__indeterminate-container {
 
-            .mat-button-focus-overlay {
-                opacity: 0 !important;
+            circle {
+                stroke: currentColor !important;
+                animation-duration: 6000ms;
             }
         }
     }
-
-    &.mat-button-disabled {
-
-        .mat-button-focus-overlay {
-            opacity: 0 !important;
-        }
-    }
 }
 
-/* Transparent background buttons */
-.mat-button,
-.mat-icon-button,
-.mat-stroked-button {
+/* Adjust the focus, ripple and icon colors of colored background buttons */
+.mat-mdc-raised-button,
+.mat-mdc-unelevated-button,
+.mat-mdc-fab,
+.mat-mdc-mini-fab {
 
-    /* Apply primary color */
-    &.mat-primary:not(.mat-button-disabled) {
+    --mat-mdc-button-persistent-ripple-color: theme('colors.gray[400]') !important;
+    --mat-mdc-button-ripple-color: rgba(0, 0, 0, 0.1) !important;
 
-        .mat-icon {
-            @apply text-primary #{'!important'};
-        }
+    .dark & {
+        --mat-mdc-button-persistent-ripple-color: theme('colors.black') !important;
+        --mat-mdc-button-ripple-color: rgba(0, 0, 0, 0.1) !important;
     }
 
-    /* Apply accent color */
-    &.mat-accent:not(.mat-button-disabled) {
-
-        .mat-icon {
-            @apply text-accent #{'!important'};
-        }
-    }
-
-    /* Apply warn color */
-    &.mat-warn:not(.mat-button-disabled) {
-
-        .mat-icon {
-            @apply text-warn #{'!important'};
-        }
-    }
-
-    /* Add hover and focus styles */
-    .mat-button-focus-overlay {
-        @apply bg-gray-400 bg-opacity-20 dark:bg-black dark:bg-opacity-5 #{'!important'};
-    }
-
-    /* On primary colored buttons, use the primary color as focus overlay */
-    &.mat-primary:not(.mat-button-disabled) {
-
-        .mat-button-focus-overlay {
-            @apply bg-primary #{'!important'};
-        }
+    .mat-icon {
+        color: currentColor !important;
     }
 
-    /* On accent colored buttons, use the accent color as focus overlay */
-    &.mat-accent:not(.mat-button-disabled) {
-
-        .mat-button-focus-overlay {
-            @apply bg-accent #{'!important'};
-        }
+    .mat-ripple-element {
+        @apply bg-black/10 #{'!important'};
     }
+}
 
-    /* On warn colored buttons, use the warn color as focus overlay */
-    &.mat-warn:not(.mat-button-disabled) {
 
-        .mat-button-focus-overlay {
-            @apply bg-warn #{'!important'};
-        }
-    }
+/* Color the icons of transparent background buttons */
+.mat-mdc-button,
+.mat-mdc-icon-button,
+.mat-mdc-outlined-button {
 
-    &.mat-primary:not(.mat-button-disabled),
-    &.mat-accent:not(.mat-button-disabled),
-    &.mat-warn:not(.mat-button-disabled) {
+    &:not([disabled=true]) {
 
-        &:hover,
-        &.cdk-keyboard-focused,
-        &.cdk-program-focused {
+        /* Apply primary color */
+        &.mat-primary {
 
-            .mat-button-focus-overlay {
-                opacity: 0.1 !important;
+            .mat-icon {
+                @apply text-primary #{'!important'};
             }
         }
-    }
 
-    &:hover,
-    &.cdk-keyboard-focused,
-    &.cdk-program-focused {
+        /* Apply accent color */
+        &.mat-accent {
 
-        .mat-button-focus-overlay {
-            opacity: 1 !important;
-        }
-    }
-
-    @media (hover: none) {
-
-        &:hover {
-
-            .mat-button-focus-overlay {
-                opacity: 0 !important;
+            .mat-icon {
+                @apply text-accent #{'!important'};
             }
         }
-    }
 
-    &.mat-button-disabled {
+        /* Apply warn color */
+        &.mat-warn {
 
-        .mat-button-focus-overlay {
-            opacity: 0 !important;
+            .mat-icon {
+                @apply text-warn #{'!important'};
+            }
         }
     }
 }
 
-/* Stroked buttons */
-.mat-stroked-button {
+/* Don't wrap the button label text */
+.mdc-button {
 
-    /* Border color */
-    &:not(.mat-button-disabled) {
-        @apply border-gray-300 dark:border-gray-500;
-    }
-
-    &.mat-button-disabled {
-        @apply border-gray-200 dark:border-gray-600;
+    .mdc-button__label {
+        white-space: nowrap;
     }
 }
 
@@ -357,43 +280,28 @@
 
         .mat-button-toggle-label-content {
             padding: 0 20px;
+            line-height: 40px !important;
             @apply text-secondary;
         }
-
-        .mat-ripple {
-            border-radius: 9999px;
-        }
     }
 }
 
+
 /* ----------------------------------------------------------------------------------------------------- */
 /*  @ Checkbox
 /* ----------------------------------------------------------------------------------------------------- */
-.mat-checkbox {
-    display: inline-flex;
-
-    /* Allow multiline text */
-    .mat-checkbox-layout {
-        white-space: normal;
-
-        .mat-checkbox-inner-container {
-            display: inline-flex;
-            align-items: center;
-            margin: 0 8px 0 0;
-
-            /* Add a zero-width space character to trick the container */
-            /* into being the same height as a single line of the label */
-            &:after {
-                content: '\200b';
-            }
-        }
+.mat-mdc-checkbox {
+    display: inline-flex !important;
 
-        .mat-checkbox-label {
-            line-height: inherit;
-        }
+    .mdc-form-field {
+        padding-right: 12px;
     }
 }
 
+.mdc-checkbox__native-control {
+    opacity: 0 !important;
+}
+
 /* ----------------------------------------------------------------------------------------------------- */
 /*  @ Chip
 /* ----------------------------------------------------------------------------------------------------- */
@@ -404,8 +312,12 @@
 /* ----------------------------------------------------------------------------------------------------- */
 /*  @ Dialog
 /* ----------------------------------------------------------------------------------------------------- */
-.mat-dialog-container {
-    border-radius: 16px !important;
+.mat-mdc-dialog-container {
+
+    .mdc-dialog__surface {
+        border-radius: 16px !important;
+        padding: 24px;
+    }
 }
 
 /* ----------------------------------------------------------------------------------------------------- */
@@ -419,9 +331,8 @@
 /*  @ Form fields
 /* ----------------------------------------------------------------------------------------------------- */
 
-/* Fuse only uses 'fill' style form fields and therefore */
-/* only provides fixes and tweaks for that style */
-.mat-form-field.mat-form-field-appearance-fill:not(.keep-material-style) {
+/* "fill" appearance */
+.mat-mdc-form-field.mat-form-field-appearance-fill:not(.keep-material-style) {
 
     /* Disabled */
     &.mat-form-field-disabled {
@@ -431,55 +342,58 @@
     /* Invalid */
     &.mat-form-field-invalid {
 
-        .mat-form-field-wrapper {
+        /* Border color */
+        .mat-mdc-text-field-wrapper {
+            @apply border-warn dark:border-warn #{'!important'};
+        }
+
+        /* Select */
+        .mat-mdc-select {
 
-            /* Border color */
-            .mat-form-field-flex {
-                @apply border-warn #{'!important'};
+            /* Placeholder color */
+            .mat-mdc-select-placeholder {
+                @apply text-warn #{'!important'};
             }
         }
+
+        .mat-mdc-form-field-required-marker {
+            @apply text-warn;
+        }
+    }
+
+    /* Hover */
+    &:hover {
+
+        .mat-mdc-form-field-focus-overlay {
+            opacity: 0 !important;
+        }
     }
 
     /* Focused */
     &.mat-focused {
 
-        .mat-form-field-wrapper {
-
-            /* Background color */
-            .mat-form-field-flex {
-                @apply bg-card #{'!important'};
-            }
+        .mat-mdc-form-field-focus-overlay {
+            opacity: 0 !important;
         }
     }
 
     /* Focused and valid fields */
     &.mat-focused:not(.mat-form-field-invalid) {
 
-        .mat-form-field-wrapper {
-
-            /* Border color */
-            .mat-form-field-flex {
-                @apply border-primary #{'!important'};
-            }
+        /* Border color */
+        .mat-mdc-text-field-wrapper {
+            @apply border-primary dark:border-primary #{'!important'};
         }
-    }
-
-    /* Disable floating mat-label */
-    &.mat-form-field-has-label.mat-form-field-can-float.mat-form-field-should-float {
-
-        .mat-form-field-label-wrapper {
 
-            .mat-form-field-label {
-                width: 100% !important;
-                transform: none !important;
-            }
+        .mat-mdc-form-field-required-marker {
+            @apply text-accent;
         }
     }
 
     /* Remove the default arrow for native select */
-    &.mat-form-field-type-mat-native-select {
+    &.mat-mdc-form-field-type-mat-native-select {
 
-        .mat-form-field-infix {
+        .mat-mdc-form-field-infix {
 
             select {
                 top: auto;
@@ -503,64 +417,69 @@
         }
     }
 
-    /* Adjustments for mat-label */
-    &.mat-form-field-has-label {
+    /* Default style tweaks and enhancements */
+    .mat-mdc-text-field-wrapper {
+        padding: 0;
+        border-radius: 6px;
+        border-width: 1px;
+        border-style: solid;
+        @apply bg-card;
+        @apply shadow-sm #{'!important'};
 
-        .mat-form-field-wrapper {
+        /* Adjust the top spacing and overflow when mat-label present */
+        &:not(.mdc-text-field--no-label) {
             margin-top: 24px;
+            overflow: visible;
         }
-    }
 
-    /* Default style tweaks and enhancements */
-    .mat-form-field-wrapper {
-        margin-bottom: 16px;
-        padding-bottom: 0;
+        .mat-mdc-form-field-focus-overlay {
+            border-radius: 6px;
+        }
 
-        .mat-form-field-flex {
+        /* Form field */
+        .mat-mdc-form-field-flex {
             position: relative;
             display: flex;
             align-items: stretch;
-            min-height: 48px;
             border-radius: 6px;
             padding: 0 16px;
-            border-width: 1px;
-            @apply bg-card;
-            @apply shadow-sm #{'!important'};
 
-            .mat-form-field-prefix {
+            .mat-mdc-form-field-icon-prefix,
+            .mat-mdc-form-field-text-prefix {
+                padding: 0 !important;
 
                 > .mat-icon {
                     margin-right: 12px;
+                    padding: 0 !important;
                 }
 
-                > .mat-icon-button {
+                > .mat-mdc-icon-button {
                     margin: 0 4px 0 -10px;
                 }
 
-                > .mat-select {
+                > .mat-mdc-select {
                     margin-right: 10px;
                 }
 
                 > .mat-datepicker-toggle {
                     margin-left: -8px;
                 }
-
-                > *:not(.mat-icon):not(.mat-icon-button):not(.mat-select):not(.mat-datepicker-toggle) {
-                    margin-right: 12px;
-                }
             }
 
-            .mat-form-field-suffix {
+            .mat-mdc-form-field-icon-suffix,
+            .mat-mdc-form-field-text-suffix {
+                padding: 0 !important;
 
                 > .mat-icon {
                     margin-left: 12px;
+                    padding: 0 !important;
                 }
 
-                > .mat-icon-button {
+                > .mat-mdc-icon-button {
                     margin: 0 -10px 0 4px;
                 }
 
-                > .mat-select {
+                > .mat-mdc-select {
                     margin-left: 10px;
                 }
 
@@ -569,14 +488,16 @@
                 }
             }
 
-            .mat-form-field-prefix,
-            .mat-form-field-suffix {
+            .mat-mdc-form-field-icon-prefix,
+            .mat-mdc-form-field-text-prefix,
+            .mat-mdc-form-field-icon-suffix,
+            .mat-mdc-form-field-text-suffix {
                 display: inline-flex;
                 align-items: center;
                 justify-content: center;
                 @apply text-hint #{'!important'};
 
-                .mat-icon-button {
+                .mat-mdc-icon-button {
                     width: 40px;
                     min-width: 40px;
                     height: 40px;
@@ -584,63 +505,47 @@
                 }
 
                 .mat-icon,
-                .mat-icon-button:not(.mat-button-disabled),
-                .mat-select-value {
+                .mat-mdc-icon-button:not([disabled]),
+                .mat-mdc-select-value {
                     @apply text-hint;
                 }
 
-                /* Remove the margins from the mat-icon if it's inside a button */
-                /* Force the icon size to 24 */
-                .mat-button,
-                .mat-raised-button,
-                .mat-icon-button,
-                .mat-stroked-button,
-                .mat-flat-button,
-                .mat-fab,
-                .mat-mini-fab {
-
-                    .mat-icon {
-                        margin: 0 !important;
-                        @apply icon-size-6;
-                    }
-                }
-
                 /* Datepicker default icon size */
                 .mat-datepicker-toggle-default-icon {
                     @apply icon-size-6;
                 }
 
                 /* Make mat-select usable as prefix and suffix */
-                .mat-select {
+                .mat-mdc-select {
                     display: flex;
                     align-items: center;
 
                     &:focus {
 
-                        .mat-select-trigger {
+                        .mat-mdc-select-trigger {
 
-                            .mat-select-value {
+                            .mat-mdc-select-value {
                                 @apply text-primary #{'!important'};
                             }
 
-                            .mat-select-arrow-wrapper {
+                            .mat-mdc-select-arrow-wrapper {
 
-                                .mat-select-arrow {
+                                .mat-mdc-select-arrow {
                                     border-top-color: var(--nice-primary) !important;
                                 }
                             }
                         }
                     }
 
-                    .mat-select-trigger {
+                    .mat-mdc-select-trigger {
                         display: flex;
                         align-items: center;
 
-                        .mat-select-value {
+                        .mat-mdc-select-value {
                             display: flex;
                             max-width: none;
 
-                            mat-select-trigger {
+                            mat-mdc-select-trigger {
 
                                 .mat-icon {
                                     margin: 0 !important;
@@ -648,13 +553,13 @@
                             }
                         }
 
-                        .mat-select-arrow-wrapper {
+                        .mat-mdc-select-arrow-wrapper {
                             display: flex;
                             align-items: center;
                             transform: none;
                             margin-left: 4px;
 
-                            .mat-select-arrow {
+                            .mat-mdc-select-arrow {
                                 min-height: 0;
                                 @apply text-gray-500 dark:text-gray-400 #{'!important'};
                             }
@@ -663,192 +568,112 @@
                 }
             }
 
-            .mat-form-field-infix {
+            /* Infix */
+            .mat-mdc-form-field-infix {
                 position: static;
                 display: flex;
                 align-items: center;
                 width: 88px;
+                min-height: 48px;
                 padding: 0;
                 border: 0;
 
-                .mat-input-element {
+                /* Floating label - disable floating action */
+                .mat-mdc-floating-label {
+                    top: -25px !important;
+                    left: 0 !important;
+                    width: 100% !important;
+                    transform: none !important;
+                    pointer-events: auto;
+                    font-weight: 500;
+                    @apply text-default #{'!important'};
+                }
+
+                .mat-mdc-input-element, .mat-mdc-select {
                     padding: 14px 0;
                     margin-top: 0;
                 }
 
                 /* Textarea */
-                textarea.mat-input-element {
-                    display: flex;
-                    align-self: stretch;
-                    min-height: 36px;
-                    height: auto;
-                    margin: 14px 0;
+                textarea.mat-mdc-input-element {
+                    margin: 12px 0;
                     padding: 0 6px 0 0;
-                    transform: none;
-                }
-
-                /* Select */
-                .mat-select {
-                    display: inline-flex;
-
-                    .mat-select-trigger {
-                        display: inline-flex;
-                        align-items: center;
-                        width: 100%;
-
-                        .mat-select-value {
-                            display: flex;
-                            position: relative;
-                            max-width: none;
-
-                            .mat-select-value-text {
-                                display: inline-flex;
-
-                                > * {
-                                    overflow: hidden;
-                                    white-space: nowrap;
-                                    text-overflow: ellipsis;
-                                }
-                            }
-                        }
-                    }
-
-                    .mat-select-arrow-wrapper {
-                        transform: translateY(0);
-
-                        .mat-select-arrow {
-                            margin: 0 0 0 8px;
-                        }
-                    }
                 }
 
                 /* Chips */
-                .mat-chip-list {
+                .mat-mdc-chip-set {
                     width: 100%;
                     margin: 0 -8px;
-
-                    .mat-chip-input {
-                        margin: 0 0 0 8px;
-                    }
-                }
-
-                .mat-form-field-label-wrapper {
-                    top: -25px;
-                    height: auto;
-                    padding-top: 0;
-                    overflow: visible;
-                    pointer-events: auto;
-
-                    .mat-form-field-label {
-                        position: relative;
-                        top: 0;
-                        margin-top: 0;
-                        backface-visibility: hidden;
-                        transition: none;
-                        font-weight: 500;
-                        @apply text-default #{'!important'};
-                    }
                 }
             }
         }
 
         /* Remove the underline */
-        .mat-form-field-underline {
+        .mdc-line-ripple {
             display: none;
         }
+    }
 
-        /* Subscript tweaks */
-        .mat-form-field-subscript-wrapper {
-            position: relative;
-            top: auto;
-            padding: 0;
-            margin-top: 0;
-            font-size: 12px;
-            font-weight: 500;
-            line-height: 1;
-
-            > div {
-                display: contents; /* Remove the div from flow to stop the subscript animation */
-            }
+    /* Subscript tweaks */
+    .mat-mdc-form-field-subscript-wrapper {
+        font-size: 12px;
+        font-weight: 500;
 
-            .mat-error,
-            .mat-hint {
-                display: block;
-                margin-top: 4px;
-            }
+        .mat-mdc-form-field-hint-wrapper,
+        .mat-mdc-form-field-error-wrapper {
+            padding: 0;
+        }
 
-            .mat-hint {
-                @apply text-hint #{'!important'};
-            }
+        .mat-mdc-form-field-hint {
+            @apply text-hint #{'!important'};
         }
     }
 
     /* Adds better alignment for textarea inputs */
-    &.nice-mat-textarea {
-
-        .mat-form-field-wrapper {
+    &:has(textarea.mat-mdc-input-element) {
 
-            .mat-form-field-flex {
+        .mat-mdc-text-field-wrapper {
 
-                .mat-form-field-prefix,
-                .mat-form-field-suffix {
-                    align-items: flex-start;
-                }
-
-                .mat-form-field-prefix {
-                    padding-top: 12px;
-                }
+            .mat-mdc-form-field-flex {
 
-                .mat-form-field-suffix {
-                    padding-top: 12px;
+                .mat-mdc-form-field-icon-prefix,
+                .mat-mdc-form-field-text-prefix,
+                .mat-mdc-form-field-icon-suffix,
+                .mat-mdc-form-field-text-suffix {
+                    align-self: flex-start;
+                    padding-top: 14px !important;
                 }
             }
         }
     }
 
-    /* Removes subscript space */
-    &.nice-mat-no-subscript {
-
-        .mat-form-field-wrapper {
-            padding-bottom: 0;
-            margin-bottom: 0;
-
-            .mat-form-field-subscript-wrapper {
-                display: none !important;
-                height: 0 !important;
-            }
-        }
-    }
-
     /* Rounded */
     &.nice-mat-rounded {
 
-        .mat-form-field-wrapper {
-
-            .mat-form-field-flex {
-                border-radius: 24px;
-            }
+        .mat-mdc-text-field-wrapper {
+            border-radius: 24px;
         }
 
         /* Emphasized affix */
         &.nice-mat-emphasized-affix {
 
-            .mat-form-field-wrapper {
+            .mat-mdc-text-field-wrapper {
 
-                .mat-form-field-flex {
+                .mat-mdc-form-field-flex {
 
-                    .mat-form-field-prefix {
+                    .mat-mdc-form-field-icon-prefix,
+                    .mat-mdc-form-field-text-prefix {
                         border-radius: 24px 0 0 24px;
 
                         > .mat-icon {
                             margin-right: 12px;
                         }
 
-                        > .mat-icon-button {
-                            margin-right: 2px;
+                        > .mat-mdc-icon-button {
+                            margin: 0 2px 0 -10px !important;
                         }
 
-                        > .mat-select {
+                        > .mat-mdc-select {
                             margin-right: 8px;
                         }
 
@@ -856,23 +681,24 @@
                             margin-right: 4px;
                         }
 
-                        > *:not(.mat-icon):not(.mat-icon-button):not(.mat-select):not(.mat-datepicker-toggle) {
+                        > *:not(.mat-icon):not(.mat-mdc-icon-button):not(.mat-mdc-select):not(.mat-datepicker-toggle) {
                             margin-right: 12px;
                         }
                     }
 
-                    .mat-form-field-suffix {
+                    .mat-mdc-form-field-icon-suffix,
+                    .mat-mdc-form-field-text-suffix {
                         border-radius: 0 24px 24px 0;
 
                         > .mat-icon {
                             margin-left: 12px !important;
                         }
 
-                        > .mat-icon-button {
-                            margin-left: 2px !important;
+                        > .mat-mdc-icon-button {
+                            margin: 0 -10px 0 2px !important;
                         }
 
-                        > .mat-select {
+                        > .mat-mdc-select {
                             margin-left: 12px !important;
                         }
 
@@ -880,7 +706,7 @@
                             margin-left: 4px !important;
                         }
 
-                        > *:not(.mat-icon):not(.mat-icon-button):not(.mat-select):not(.mat-datepicker-toggle) {
+                        > *:not(.mat-icon):not(.mat-mdc-icon-button):not(.mat-mdc-select):not(.mat-datepicker-toggle) {
                             margin-left: 12px !important;
                         }
                     }
@@ -892,69 +718,90 @@
     /* Dense */
     &.nice-mat-dense {
 
-        .mat-form-field-wrapper {
+        .mat-mdc-text-field-wrapper {
 
-            .mat-form-field-flex {
-                min-height: 40px;
+            .mat-mdc-form-field-flex {
 
-                .mat-form-field-prefix,
-                .mat-form-field-suffix {
+                .mat-mdc-form-field-icon-prefix,
+                .mat-mdc-form-field-text-prefix,
+                .mat-mdc-form-field-icon-suffix,
+                .mat-mdc-form-field-text-suffix {
 
-                    .mat-icon-button {
-                        width: 32px;
+                    .mat-mdc-icon-button {
+                        width: 32px !important;
                         min-width: 32px;
                         height: 32px;
                         min-height: 32px;
                     }
                 }
 
-                .mat-form-field-prefix {
+                .mat-mdc-form-field-icon-prefix,
+                .mat-mdc-form-field-text-prefix {
 
-                    > .mat-icon-button {
+                    > .mat-mdc-icon-button {
                         margin-left: -6px;
                         margin-right: 12px;
                     }
                 }
 
-                .mat-form-field-suffix {
+                .mat-mdc-form-field-icon-suffix,
+                .mat-mdc-form-field-text-suffix {
 
-                    > .mat-icon-button {
+                    > .mat-mdc-icon-button {
                         margin-left: 12px;
                         margin-right: -6px;
                     }
                 }
 
-                .mat-form-field-infix {
+                .mat-mdc-form-field-infix {
+                    min-height: 40px;
 
-                    .mat-input-element {
-                        padding: 11px 0;
+                    /* Textarea */
+                    textarea.mat-mdc-input-element {
+                        margin: 8px 0;
                     }
                 }
             }
         }
 
-        /* Rounded */
-        &.nice-mat-rounded {
+        /* Adds better alignment for textarea inputs */
+        &:has(textarea.mat-mdc-input-element) {
 
-            .mat-form-field-wrapper {
+            .mat-mdc-text-field-wrapper {
 
-                .mat-form-field-flex {
-                    border-radius: 20px;
+                .mat-mdc-form-field-flex {
+
+                    .mat-mdc-form-field-icon-prefix,
+                    .mat-mdc-form-field-text-prefix,
+                    .mat-mdc-form-field-icon-suffix,
+                    .mat-mdc-form-field-text-suffix {
+                        padding-top: 10px !important;
+                    }
                 }
             }
+        }
+
+        /* Rounded */
+        &.nice-mat-rounded {
+
+            .mat-mdc-text-field-wrapper {
+                border-radius: 20px;
+            }
 
             /* Emphasized affix */
             &.nice-mat-emphasized-affix {
 
-                .mat-form-field-wrapper {
+                .mat-mdc-text-field-wrapper {
 
-                    .mat-form-field-flex {
+                    .mat-mdc-form-field-flex {
 
-                        .mat-form-field-prefix {
+                        .mat-mdc-form-field-icon-prefix,
+                        .mat-mdc-form-field-text-prefix {
                             border-radius: 20px 0 0 20px !important;
                         }
 
-                        .mat-form-field-suffix {
+                        .mat-mdc-form-field-icon-suffix,
+                        .mat-mdc-form-field-text-suffix {
                             border-radius: 0 20px 20px 0 !important;
                         }
                     }
@@ -966,282 +813,162 @@
     /* Emphasized affix */
     &.nice-mat-emphasized-affix {
 
-        .mat-form-field-wrapper {
+        .mat-mdc-text-field-wrapper {
 
-            .mat-form-field-flex {
+            .mat-mdc-form-field-flex {
 
-                .mat-form-field-prefix {
-                    margin: 0 16px 0 -16px;
-                    padding-left: 16px;
+                .mat-mdc-form-field-icon-prefix,
+                .mat-mdc-form-field-text-prefix {
+                    align-self: stretch !important;
+                    margin: 0 16px 0 -16px !important;
+                    padding-left: 16px !important;
                     border-radius: 6px 0 0 6px;
                     border-right-width: 1px;
+                    border-style: solid;
 
                     > .mat-icon {
                         margin-right: 16px;
                     }
 
-                    > .mat-icon-button {
-                        margin: 0 6px 0 -10px;
+                    > .mat-mdc-icon-button {
+                        margin: 0 6px 0 -10px !important;
                     }
 
-                    > .mat-select {
-                        margin-right: 12px;
+                    > .mat-mdc-select {
+                        margin-right: 12px !important;
                     }
 
                     > .mat-datepicker-toggle {
                         margin-right: 8px;
                     }
 
-                    > *:not(.mat-icon):not(.mat-icon-button):not(.mat-select):not(.mat-datepicker-toggle) {
+                    > *:not(.mat-icon):not(.mat-mdc-icon-button):not(.mat-mdc-select):not(.mat-datepicker-toggle) {
                         margin-right: 16px;
                     }
                 }
 
-                .mat-form-field-suffix {
-                    margin: 0 -16px 0 16px;
-                    padding-right: 16px;
+                .mat-mdc-form-field-icon-suffix,
+                .mat-mdc-form-field-text-suffix {
+                    align-self: stretch !important;
+                    margin: 0 -16px 0 16px !important;
+                    padding-right: 16px !important;
                     border-radius: 0 6px 6px 0;
                     border-left-width: 1px;
+                    border-style: solid;
 
                     > .mat-icon {
                         margin-left: 16px;
                     }
 
-                    > .mat-icon-button {
-                        margin: 0 -10px 0 6px;
+                    > .mat-mdc-icon-button {
+                        margin: 0 -10px 0 6px !important;
                     }
 
-                    > .mat-select {
-                        margin: 0 -4px 0 16px;
+                    > .mat-mdc-select {
+                        margin: 0 -4px 0 16px !important;
                     }
 
                     > .mat-datepicker-toggle {
                         margin-left: 8px;
                     }
 
-                    > *:not(.mat-icon):not(.mat-icon-button):not(.mat-select):not(.mat-datepicker-toggle) {
+                    > *:not(.mat-icon):not(.mat-mdc-icon-button):not(.mat-mdc-select):not(.mat-datepicker-toggle) {
                         margin-left: 16px;
                     }
                 }
 
-                .mat-form-field-prefix,
-                .mat-form-field-suffix {
+                .mat-mdc-form-field-icon-prefix,
+                .mat-mdc-form-field-text-prefix,
+                .mat-mdc-form-field-icon-suffix,
+                .mat-mdc-form-field-text-suffix {
                     @apply bg-default border-gray-300 dark:border-gray-500 #{'!important'};
                 }
             }
         }
-    }
-
-    /* Bolder border width */
-    &.nice-mat-bold {
-
-        .mat-form-field-wrapper {
-
-            .mat-form-field-flex {
-                border-width: 2px !important;
-            }
-        }
-    }
-}
 
-/* Fix the outline appearance */
-.mat-form-field.mat-form-field-appearance-outline:not(.keep-material-style) {
-    &.mat-form-field-invalid {
-        .mat-form-field-wrapper {
+        /* with Textarea */
+        &:has(textarea.mat-mdc-input-element) {
 
-            /* Border color */
-            .mat-form-field-flex {
-                .mat-form-field-outline {
-                    @apply text-warn #{'!important'};
-                }
-            }
-        }
-    }
+            .mat-mdc-text-field-wrapper {
 
-    /* Focused and valid fields */
-    &.mat-accent.mat-focused:not(.mat-form-field-invalid) {
-        .mat-form-field-wrapper {
+                .mat-mdc-form-field-flex {
 
-            /* Border color */
-            .mat-form-field-flex {
-                .mat-form-field-outline {
-                    @apply text-accent #{'!important'};
+                    .mat-mdc-form-field-icon-prefix,
+                    .mat-mdc-form-field-text-prefix,
+                    .mat-mdc-form-field-icon-suffix,
+                    .mat-mdc-form-field-text-suffix {
+                        align-items: flex-start;
+                    }
                 }
             }
         }
     }
 
-    &.mat-primary.mat-focused:not(.mat-form-field-invalid) {
-        .mat-form-field-wrapper {
+    /* Bolder border width */
+    &.nice-mat-bold {
 
-            /* Border color */
-            .mat-form-field-flex {
-                .mat-form-field-outline {
-                    @apply text-primary #{'!important'};
-                }
-            }
+        .mat-mdc-text-field-wrapper {
+            border-width: 2px !important;
         }
     }
 }
 
-.mat-form-field.mat-form-field-appearance-standard:not(.keep-material-style) {
-    width: 100%;
-    padding-bottom: 24px;
-
-    .mat-form-field-underline {
-        .mat-form-field-ripple {
-            height: 0 !important;
-        }
-
-        height: 0 !important;
-    }
-
-    &.mat-form-field .mat-form-field-label {
-        font-weight: 600;
-        height: 100%;
-    }
-
-    &.mat-form-field:not(.mat-form-field-should-float) .mat-form-field-label {
-        margin-top: 14px;
-        margin-left: 16px;
-    }
-
-    .mat-form-field-prefix + .mat-form-field-infix .mat-form-field-label-wrapper {
-        margin-top: 0;
-        margin-left: -46px;
-    }
-
-    .mat-form-field-flex {
-        @apply bg-card;
-
-        padding-top: .25em !important;
-        align-items: center !important;
-        box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.06);
-        border: solid 1.5px transparent;
-        border-radius: 12px;
-    }
-
-    .mat-select-trigger {
-        height: 100%;
-        padding-bottom: 8px;
-    }
-
-    .mat-select-arrow-wrapper {
-        font-size: 26px;
-        margin-right: 30px;
-        margin-bottom: 15px;
-
-        .mat-select-arrow {
-            font-family: 'Font Awesome 5 Pro';
-            font-weight: 300;
+/* "outline" appearance */
+.mat-mdc-form-field.mat-form-field-appearance-outline:not(.keep-material-style) {
 
-            border: none;
-            margin: 0;
+    /* Invalid */
+    &.mat-form-field-invalid {
 
-            &:before {
-                content: "\f107";
-            }
+        .mdc-notched-outline__leading,
+        .mdc-notched-outline__notch,
+        .mdc-notched-outline__trailing {
+            border-color: var(--nice-warn) !important;
         }
     }
 
-    .mat-input-element, .mat-select, .stripe-element {
-        &:not(textarea) {
-            height: 40px;
-        }
-
-        // font-size: 20px;
-        width: 90%;
-        padding-left: 12px;
-        padding-right: 12px;
-        padding-top: 4px;
-        font-weight: 300;
-
-        border: 1.5px solid transparent;
-        border-top-right-radius: 12px;
-        border-bottom-right-radius: 12px;
+    /* Focused */
+    &.mat-focused:not(.mat-form-field-invalid) {
 
-        // color: mat-color($default-primary-palette);
+        /* Primary */
+        &.mat-primary {
 
-        &::placeholder {
-            color: #b3b3b3;
+            .mdc-notched-outline__leading,
+            .mdc-notched-outline__notch,
+            .mdc-notched-outline__trailing {
+                border-color: var(--nice-primary) !important;
+            }
         }
 
-        .mat-select-placeholder,
-        .mat-select-value-text {
-            margin-top: 8px;
-            padding-top: 8px;
-            padding-bottom: 8px;
+        /* Accent */
+        &.mat-accent {
 
-            opacity: 1;
+            .mdc-notched-outline__leading,
+            .mdc-notched-outline__notch,
+            .mdc-notched-outline__trailing {
+                border-color: var(--nice-accent) !important;
+            }
         }
     }
 
-    .mat-form-field-prefix {
-        padding-left: 16px;
-        padding-right: 4px;
-    }
-
-    .mat-form-field-infix {
-        padding-bottom: 4px;
-        border: none;
-        padding-top: 0;
-    }
-
-    &.mat-form-field-should-float {
-        .mat-form-field-label-wrapper {
-            font-size: 16px;
-            top: -24px;
-        }
-    }
+    /* Remove the extra border on the right side of the notch */
+    /* Tailwind's global border setter causes this issue */
+    .mat-mdc-text-field-wrapper {
 
-    .mat-form-field-label-wrapper {
-        top: -20px;
+        .mat-mdc-form-field-flex {
 
-        label {
-            // color: mat-color($default-primary-palette);
-        }
+            .mdc-notched-outline {
 
-        .mat-form-field-label {
-            height: 20px;
+                .mdc-notched-outline__notch {
+                    border-right-style: none !important;
+                }
+            }
         }
     }
-
-    /* Change autocomplete styles in WebKit */
-    input:-webkit-autofill,
-    input:-webkit-autofill:hover,
-    input:-webkit-autofill:focus,
-    textarea:-webkit-autofill,
-    textarea:-webkit-autofill:hover,
-    textarea:-webkit-autofill:focus,
-    select:-webkit-autofill,
-    select:-webkit-autofill:hover,
-    select:-webkit-autofill:focus {
-        border: 1px solid transparent;
-        -webkit-text-fill-color: #000;
-        -webkit-box-shadow: 0 0 0 1000px transparent inset;
-        transition: background-color 5000s ease-in-out 0s;
-    }
 }
 
 /* ----------------------------------------------------------------------------------------------------- */
 /*  @ Datepicker
 /* ----------------------------------------------------------------------------------------------------- */
-/* Hover and active cell content background opacity */
-.mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover,
-.cdk-keyboard-focused .mat-calendar-body-active,
-.cdk-program-focused .mat-calendar-body-active {
-    & > .mat-calendar-body-cell-content {
-        &:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
-            @apply bg-primary bg-opacity-30 #{'!important'};
-        }
-    }
-}
-
-.mat-datepicker-content {
-    .mat-calendar-body-in-range::before {
-        @apply opacity-20;
-    }
-}
 
 /* ----------------------------------------------------------------------------------------------------- */
 /*  @ Icon
@@ -1262,7 +989,7 @@
 /* ----------------------------------------------------------------------------------------------------- */
 /*  @ Inputs
 /* ----------------------------------------------------------------------------------------------------- */
-.mat-input-element {
+.mat-mdc-input-element {
 
     &::placeholder {
         transition: none !important;
@@ -1288,7 +1015,7 @@
 /* Invalid */
 .mat-form-field-invalid {
 
-    .mat-input-element {
+    .mat-mdc-input-element {
 
         /* Placeholder color */
         &::placeholder {
@@ -1312,22 +1039,32 @@
 /* ----------------------------------------------------------------------------------------------------- */
 /*  @ Menu
 /* ----------------------------------------------------------------------------------------------------- */
-.mat-menu-panel {
+.mat-mdc-menu-panel {
     min-width: 144px !important;
 
-    .mat-menu-content {
+    .mat-mdc-menu-content {
 
-        .mat-menu-item {
+        .mat-mdc-menu-item {
             display: flex;
             align-items: center;
 
-            &.mat-menu-item-submenu-trigger {
+            > span {
+                display: inline-flex;
+                align-items: center;
+            }
+
+            &.mat-mdc-menu-item-submenu-trigger {
                 padding-right: 40px;
             }
 
             .mat-icon {
                 margin-right: 12px;
             }
+
+            .mat-icon-no-color {
+                --tw-text-opacity: 1;
+                color: rgba(var(--nice-mat-icon-rgb), var(--tw-text-opacity));
+            }
         }
 
         /* Divider within mat-menu */
@@ -1340,18 +1077,18 @@
 /* ----------------------------------------------------------------------------------------------------- */
 /*  @ Paginator
 /* ----------------------------------------------------------------------------------------------------- */
-.mat-paginator {
+.mat-mdc-paginator {
 
-    .mat-paginator-container {
+    .mat-mdc-paginator-container {
         padding: 8px 16px;
 
         /* Page size select */
-        .mat-paginator-page-size {
+        .mat-mdc-paginator-page-size {
             align-items: center;
             min-height: 40px;
             margin: 8px;
 
-            .mat-paginator-page-size-label {
+            .mat-mdc-paginator-page-size-label {
                 display: none;
                 margin-right: 12px;
 
@@ -1360,25 +1097,24 @@
                 }
             }
 
-            .mat-paginator-page-size-select {
+            .mat-mdc-paginator-page-size-select {
                 margin: 0;
 
-                .mat-form-field-wrapper {
-                    margin-bottom: 0;
+                .mat-mdc-text-field-wrapper {
+                    padding: 0 10px;
 
                     .mat-form-field-flex {
                         min-height: 32px;
-                        padding: 0 10px;
                     }
                 }
             }
         }
 
         /* Range actions */
-        .mat-paginator-range-actions {
+        .mat-mdc-paginator-range-actions {
             margin: 8px 0;
 
-            .mat-paginator-range-label {
+            .mat-mdc-paginator-range-label {
                 margin-right: 16px;
             }
         }
@@ -1388,26 +1124,22 @@
 /* ----------------------------------------------------------------------------------------------------- */
 /*  @ Select
 /* ----------------------------------------------------------------------------------------------------- */
-.mat-select {
-    display: inline-flex;
+.mat-mdc-select {
+    display: inline-flex !important;
 
-    .mat-select-placeholder {
+    .mat-mdc-select-placeholder {
         transition: none !important;
         @apply text-hint #{'!important'};
     }
 
-    .mat-select-trigger {
-        display: inline-flex;
-        align-items: center;
-        width: 100%;
-        height: auto;
+    .mat-mdc-select-trigger {
 
-        .mat-select-value {
-            display: flex;
+        .mat-mdc-select-value {
             position: relative;
+            display: flex;
             max-width: none;
 
-            .mat-select-value-text {
+            .mat-mdc-select-value-text {
                 display: inline-flex;
 
                 > * {
@@ -1419,23 +1151,11 @@
         }
     }
 
-    .mat-select-arrow-wrapper {
-        transform: translateY(0);
+    .mat-mdc-select-arrow-wrapper {
+        transform: translateY(0) !important;
 
-        .mat-select-arrow {
-            margin: 0 4px 0 2px;
-        }
-    }
-}
-
-/* Invalid */
-.mat-form-field-invalid {
-
-    .mat-select {
-
-        /* Placeholder color */
-        .mat-select-placeholder {
-            @apply text-warn #{'!important'};
+        .mat-mdc-select-arrow {
+            margin: 0 0 0 8px;
         }
     }
 }
@@ -1443,17 +1163,6 @@
 /* ----------------------------------------------------------------------------------------------------- */
 /*  @ Slide Toggle
 /* ----------------------------------------------------------------------------------------------------- */
-.mat-slide-toggle.mat-checked .mat-slide-toggle-bar {
-    background-color: rgba(var(--nice-accent-500-rgb), 0.54) !important;
-}
-
-.mat-slide-toggle.mat-primary.mat-checked .mat-slide-toggle-bar {
-    background-color: rgba(var(--nice-primary-500-rgb), 0.54) !important;
-}
-
-.mat-slide-toggle.mat-warn.mat-checked .mat-slide-toggle-bar {
-    background-color: rgba(var(--nice-warn-500-rgb), 0.54) !important;
-}
 
 /* ----------------------------------------------------------------------------------------------------- */
 /*  @ Stepper
@@ -1471,80 +1180,32 @@
     font-weight: 500 !important;
 }
 
-/* ----------------------------------------------------------------------------------------------------- */
-/*  @ Tabs
-/* ----------------------------------------------------------------------------------------------------- */
-.mat-tab-group.nice-rounded-style {
-
-    /* No header */
-    &.nice-mat-no-header {
+/* -------------------------------------------------------------------------- */
+/*  @ Table
+/* -------------------------------------------------------------------------- */
+.mat-mdc-table {
 
-        .mat-tab-header {
-            height: 0 !important;
-            max-height: 0 !important;
-            border: none !important;
-            visibility: hidden !important;
-            opacity: 0 !important;
-        }
-    }
-
-    .mat-tab-header {
-        border-bottom: none !important;
-
-        .mat-tab-label-container {
-            padding: 0 24px;
-
-            .mat-tab-list {
-
-                .mat-tab-labels {
-
-                    .mat-tab-label {
-                        min-width: 0 !important;
-                        height: 40px !important;
-                        padding: 0 20px !important;
-                        border-radius: 9999px !important;
-                        @apply text-secondary;
-
-                        &.mat-tab-label-active {
-                            @apply bg-gray-700 bg-opacity-10 dark:bg-gray-50 dark:bg-opacity-10 #{'!important'};
-                            @apply text-default #{'!important'};
-                        }
-
-                        + .mat-tab-label {
-                            margin-left: 4px;
-                        }
-
-                        .mat-tab-label-content {
-                            line-height: 20px;
-                        }
-                    }
-                }
-
-                .mat-ink-bar {
-                    display: none !important;
-                }
-            }
-        }
-    }
-
-    .mat-tab-body-content {
-        padding: 24px;
+    .mdc-data-table__row:not(.mdc-data-table__row--selected):hover {
+        background: none !important;
     }
 }
 
-.mat-tab-group:not(.keep-material-style, .nice-rounded-style) {
-    .mat-tab-label-active {
+/* ----------------------------------------------------------------------------------------------------- */
+/*  @ Tabs
+/* ----------------------------------------------------------------------------------------------------- */
+.mat-mdc-tab-group:not(.keep-material-style) {
+    .mat-mdc-tab-label-active {
         opacity: 1 !important;
     }
 
-    .mat-tab-header {
+    .mat-mdc-tab-header {
         border-bottom: none !important;
     }
 
     /* No header */
     &.nice-mat-no-header {
 
-        .mat-tab-header {
+        .mat-mdc-tab-header {
             height: 0 !important;
             max-height: 0 !important;
             border: none !important;
@@ -1553,14 +1214,14 @@
         }
     }
 
-    .mat-tab-list {
-        .mat-tab-label {
+    .mat-mdc-tab-list {
+        .mat-mdc-tab {
             height: 36px;
             padding: 0;
             margin-right: 48px;
             justify-content: flex-start;
 
-            .mat-tab-label-content {
+            .mdc-tab__content {
                 font-size: 16px;
             }
 
@@ -1569,16 +1230,12 @@
             }
         }
 
-        .mat-ink-bar {
+        .mdc-tab-indicator {
             width: 45px !important;
         }
     }
 }
 
-.mat-tab-label {
-    opacity: 1 !important;
-}
-
 /* ----------------------------------------------------------------------------------------------------- */
 /*  @ Textarea
 /* ----------------------------------------------------------------------------------------------------- */
@@ -1731,6 +1388,21 @@ table {
     }
 }
 
+/* -------------------------------------------------------------------------- */
+/*  @ Tooltip
+/* -------------------------------------------------------------------------- */
+
+.mat-mdc-tooltip .mdc-tooltip__surface {
+    background-color: var(--nice-text-default) !important;
+    color: white;
+
+    .dark & {
+        background-color: var(--nice-text-secondary) !important;
+        color: var(--nice-bg-default) !important;
+    }
+}
+
+
 // -----------------------------------------------------------------------------------------------------
 // Avatar
 // -----------------------------------------------------------------------------------------------------
@@ -1745,3 +1417,70 @@ table {
     font-weight: 600;
     text-align: center;
 }
+
+// -----------------------------------------------------------------------------------------------------
+// Chips
+// -----------------------------------------------------------------------------------------------------
+.mat-mdc-chip-set {
+    .mat-mdc-chip-row {
+        @apply bg-default #{!important};
+    }
+
+    .mdc-evolution-chip-set__chips {
+        @apply items-center;
+    }
+}
+
+// FIX FOR VAR
+
+.mat-mdc-progress-bar {
+    &.mat-accent {
+        .mdc-linear-progress__buffer-bar {
+            @apply bg-accent/25 #{!important};
+        }
+    }
+
+    &.mat-primary {
+        .mdc-linear-progress__buffer-bar {
+            @apply bg-primary/25 #{!important};
+        }
+    }
+
+    &.mat-warn {
+        .mdc-linear-progress__buffer-bar {
+            @apply bg-warn/25 #{!important};
+        }
+    }
+}
+
+.mat-mdc-checkbox {
+    &.mat-accent {
+        .mdc-checkbox__checkmark {
+            @apply text-on-accent #{!important};
+        }
+    }
+
+    &.mat-primary {
+        .mdc-checkbox__checkmark {
+            @apply text-on-primary #{!important};
+        }
+    }
+
+    &.mat-warn {
+        .mdc-checkbox__checkmark {
+            @apply text-on-warn #{!important};
+        }
+    }
+}
+
+.mdc-list-item__accent-text {
+    @apply text-accent #{!important};
+}
+
+.mdc-list-item__primary-text {
+    @apply text-primary #{!important};
+}
+
+.mdc-list-item__warn-text {
+    @apply text-warn #{!important};
+}