@gipisistemas/ngx-core 1.0.1

package/theming/_utils.scss

@@ -0,0 +1,1424 @@
+@use 'sass:map';
+@use 'sass:string';
+@use './palettes' as gipi-palettes;
+
+// Get the color by passing the theme, palette name and shade
+@function get-color($theme, $palette-name, $shade: 500) {
+    $palettes: map.get($theme, palettes);
+    $palette: map.get($palettes, $palette-name);
+
+    @if $palette == null {
+        @warn "A paleta `#{$palette-name}` não foi encontrada no tema. Tema atual tem as paletas: #{map.keys($palettes)}";
+        @return null;
+    }
+
+    $color: map.get($palette, $shade);
+
+    @if $color == null {
+        @warn "A tonalidade `#{$shade}` não foi encontrada na paleta `#{$palette-name}`. Paleta disponível: #{map.keys($palette)}";
+    }
+
+    @return $color;
+}
+
+@function get-font-family($theme) {
+    @if map.has-key($theme, typography) {
+        $typography: map.get($theme, typography);
+
+        @if map.has-key($typography, font-family) {
+            @return string.unquote(map.get($typography, font-family));
+        }
+    }
+    @return string.unquote('Roboto, sans-serif');
+}
+
+@function get-font-size($theme) {
+    @if map.has-key($theme, typography) {
+        $typography: map.get($theme, typography);
+
+        @if map.has-key($typography, font-size) {
+            @return map.get($typography, font-size);
+        }
+    }
+    @return 1.4rem;
+}
+
+@function get-font-color($theme) {
+    @if map.has-key($theme, typography) {
+        $typography: map.get($theme, typography);
+
+        @if map.has-key($typography, color) {
+            @return map.get($typography, color);
+        }
+    }
+    @return map.get(gipi-palettes.$palette-black, 200);
+}
+
+@function get-shadow($shade) {
+    @if map-has-key(gipi-palettes.$palette-shadows, $shade) {
+        @return map-get(gipi-palettes.$palette-shadows, $shade);
+    }
+    @return null;
+}
+
+@mixin host() {
+    :host {
+        display: block;
+        width: 100%;
+        min-width: 0;
+        max-width: 100%;
+        flex: 1;
+    }
+}
+
+@mixin truncate-line($important: null) {
+    $important-flag: if($important == '!important' or $important == true, ' !important', '');
+    display: -webkit-box#{$important-flag};
+    -webkit-box-orient: vertical#{$important-flag};
+    overflow: hidden#{$important-flag};
+    text-overflow: ellipsis#{$important-flag};
+    line-clamp: 1#{$important-flag};
+    -webkit-line-clamp: 1#{$important-flag};
+}
+
+@mixin user-select($value) {
+    -webkit-user-select: $value;
+    user-select: $value;
+}
+
+@mixin input-placeholder {
+    &::placeholder {
+        @content;
+    }
+
+    &::-moz-placeholder {
+        @content;
+    }
+
+    &::-webkit-input-placeholder {
+        @content;
+    }
+}
+
+@mixin smooth-font {
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+}
+
+@mixin background-image($url-webp, $url-fallback) {
+    background-image: url(#{$url-fallback});
+
+    @supports (background-image: url(#{$url-webp})) {
+        background-image: url(#{$url-webp});
+    }
+}
+
+@mixin novelties($theme: ()) {
+    $font-family: get-font-family($theme);
+    $primary-500: get-color($theme, primary, 500);
+    $z-index: 1002;
+
+    position: relative;
+
+    &::before {
+        content: 'Novo';
+        position: absolute;
+        top: 120%;
+        left: 50%;
+        transform: translateX(-50%);
+        z-index: $z-index;
+        padding: 2px 8px;
+        border-radius: 4px;
+        text-align: center;
+        font-family: $font-family;
+        font-size: 10px;
+        line-height: 12px;
+        color: #{get-color($theme, white, 100)};
+        background-color: $primary-500;
+    }
+
+    &::after {
+        content: '';
+        position: absolute;
+        top: calc(120% - 10px);
+        left: 50%;
+        z-index: $z-index;
+        transform: translateX(-50%);
+        border-width: 5px;
+        border-style: solid;
+        border-color: transparent transparent $primary-500;
+    }
+}
+
+@mixin tooltip($theme: ()) {
+    $font-family: get-font-family($theme);
+
+    .mat-mdc-tooltip-panel {
+        z-index: 9999 !important;
+    }
+
+    .mat-mdc-tooltip-surface {
+        line-height: unset !important;
+        white-space: pre-wrap !important;
+    }
+
+    :root {
+        --mdc-plain-tooltip-container-color: #2f3033;
+        --mdc-plain-tooltip-supporting-text-color: #f2f0f4;
+        --mdc-plain-tooltip-container-shape: 4px;
+        --mdc-plain-tooltip-supporting-text-font: $font-family;
+        --mdc-plain-tooltip-supporting-text-size: 1.2rem;
+        --mdc-plain-tooltip-supporting-text-weight: 500;
+        --mdc-plain-tooltip-supporting-text-line-height: unset !important;
+        --mdc-plain-tooltip-supporting-text-tracking: normal;
+    }
+}
+
+@mixin divider($theme: ()) {
+    .mat-divider {
+        --mat-divider-color: #{get-color($theme, black, 300)} !important;
+        --mat-divider-width: 1px !important;
+
+        &.mat-divider-vertical {
+            height: 65% !important;
+            margin: 0 0.4rem !important;
+        }
+    }
+}
+
+@mixin select-panel($theme: ()) {
+    $font-family: get-font-family($theme);
+    $font-size: get-font-size($theme);
+    $font-color: get-font-color($theme);
+    $white-100: get-color($theme, white, 100);
+
+    .mat-mdc-select-panel {
+        @include overlay();
+
+        padding: 0 !important;
+        margin-top: 4px !important;
+    }
+
+    .mat-mdc-option:not(:disabled),
+    .mat-mdc-option:not(.mdc-list-item--disabled) {
+        font-family: $font-family !important;
+        font-size: $font-size !important;
+        color: $font-color !important;
+        transition: all 0.2s !important;
+        min-height: 3.6rem !important;
+        padding: 0 0.8rem !important;
+        border-left: 4px solid transparent !important;
+
+        .mdc-list-item__primary-text {
+            font-family: $font-family !important;
+            font-size: $font-size !important;
+            color: $font-color !important;
+            line-height: 2rem !important;
+
+            @include truncate-line(!important);
+        }
+
+        &:hover:not(.mdc-list-item--disabled):not(.mat-mdc-option-active):not(
+                .mdc-list-item--selected
+            ) {
+            background: #{get-color($theme, secondary, 50)} !important;
+        }
+
+        &:not(.mat-mdc-option-multiple) {
+            &.mdc-list-item--selected,
+            &.mat-mdc-option-active {
+                border-left-color: #{get-color($theme, primary, 500)} !important;
+                background-color: #{get-color($theme, primary, 50)} !important;
+            }
+
+            .mat-pseudo-checkbox-minimal.mat-pseudo-checkbox-checked::after {
+                border-left-color: #{get-color($theme, primary, 500)} !important;
+                border-bottom-color: #{get-color($theme, primary, 500)} !important;
+            }
+        }
+
+        &.mat-mdc-option-multiple {
+            .mat-pseudo-checkbox:not(.mat-pseudo-checkbox-checked) {
+                border-color: #{get-color($theme, black, 300)} !important;
+            }
+
+            &.mdc-list-item--selected {
+                // background-color: #{get-color($theme, primary, 50)} !important;
+                // background-color: #{get-color($theme, white, 100)} !important;
+            }
+
+            &:focus:not(:hover),
+            &.mat-mdc-option-active:not(:hover) {
+                background-color: unset !important;
+            }
+
+            &:focus:hover,
+            &.mat-mdc-option-active:hover {
+                background-color: #{get-color($theme, secondary, 50)} !important;
+            }
+
+            .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked,
+            .mat-pseudo-checkbox-full.mat-pseudo-checkbox-indeterminate {
+                --mat-full-pseudo-checkbox-selected-icon-color: #{get-color($theme, primary, 500)} !important;
+                background-color: #{get-color($theme, primary, 500)} !important;
+            }
+
+            .mat-pseudo-checkbox.mat-pseudo-checkbox-checked::after {
+                --mat-full-pseudo-checkbox-selected-checkmark-color: #{get-color(
+                        $theme,
+                        white,
+                        100
+                    )} !important;
+                border-left-color: #{get-color($theme, white, 100)} !important;
+                border-bottom-color: #{get-color($theme, white, 100)} !important;
+            }
+        }
+    }
+
+    :root {
+        --mat-select-panel-background-color: #ffffff;
+        --mat-option-selected-state-layer-color: #e4e4e7;
+        --mat-option-hover-state-layer-color: #f5f5f6;
+    }
+}
+
+@mixin autofill($font-color, $background-color: #ffffff) {
+    &:is(:-webkit-autofill, :autofill),
+    &:is(:-webkit-autofill, :autofill):hover,
+    &:is(:-webkit-autofill, :autofill):focus,
+    &:is(:-webkit-autofill, :autofill):active {
+        -webkit-text-fill-color: $font-color;
+        -webkit-box-shadow: 0 0 0 1000px $background-color inset;
+    }
+}
+
+@mixin overlay {
+    background: #ffffff !important;
+    border: 1px solid #e4e4e7 !important;
+    box-shadow:
+        0 0 #0000,
+        0 0 #0000,
+        0 4px 6px -1px rgba(0, 0, 0, 0.1),
+        0 2px 4px -2px rgba(0, 0, 0, 0.1) !important;
+}
+
+@mixin button-reset($theme: ()) {
+    cursor: pointer;
+    outline: none;
+    border: none;
+    overflow: hidden;
+    white-space: nowrap;
+    text-decoration: none;
+    -webkit-tap-highlight-color: transparent;
+
+    &[disabled],
+    &:disabled,
+    &.disabled {
+        @include button-disabled($theme);
+    }
+
+    &:not([disabled]):active,
+    &:not(:disabled):active,
+    &:not(.disabled):active {
+        opacity: 0.8;
+    }
+
+    &::-moz-focus-inner {
+        border: 0;
+    }
+}
+
+@mixin button-disabled($theme: ()) {
+    $secondary-200: get-color($theme, secondary, 200);
+    $secondary-500: get-color($theme, secondary, 500);
+
+    cursor: not-allowed !important;
+    box-shadow: none !important;
+    background-color: $secondary-200 !important;
+    border-color: $secondary-200 !important;
+    color: $secondary-500 !important;
+    opacity: 1 !important;
+
+    .material-symbols-sharp,
+    .material-symbols-outlined,
+    .material-symbols-rounded,
+    .g-icon,
+    .g-icon > mat-icon,
+    > mat-icon {
+        color: $secondary-500 !important;
+
+        svg,
+        svg path,
+        svg g path {
+            color: $secondary-500 !important;
+            fill: $secondary-500 !important;
+        }
+    }
+}
+
+@mixin dialog($theme: ()) {
+    .mat-mdc-dialog-container {
+        max-width: 100% !important;
+        max-height: 100% !important;
+    }
+
+    .mat-mdc-dialog-surface {
+        border-radius: 10px !important;
+        overflow-y: hidden !important;
+    }
+}
+
+@mixin mat-paginator($theme: ()) {
+    $font-family: get-font-family($theme);
+    $font-size: get-font-size($theme);
+    $font-color: get-font-color($theme);
+    $mat-form-field-height: 3.6rem;
+    $white-100: get-color($theme, white, 100);
+    $black-300: get-color($theme, black, 300);
+    $black-400: get-color($theme, black, 400);
+    $secondary-50: get-color($theme, secondary, 50);
+    $secondary-100: get-color($theme, secondary, 100);
+    $secondary-200: get-color($theme, secondary, 200);
+    $secondary-300: get-color($theme, secondary, 300);
+    $secondary-500: get-color($theme, secondary, 500);
+
+    .mat-mdc-paginator {
+        display: block !important;
+        background-color: $white-100 !important;
+        font-family: $font-family !important;
+        font-size: 1.2rem !important;
+        line-height: 1.6rem !important;
+        font-weight: 600 !important;
+        color: $black-300 !important;
+        letter-spacing: normal !important;
+        --mat-form-field-container-height: $mat-form-field-height;
+        --mat-form-field-container-vertical-padding: 1rem;
+
+        .mat-mdc-paginator-container {
+            padding: 0 1.6rem !important;
+            min-height: 4.4rem !important;
+            align-items: center !important;
+            justify-content: center !important;
+        }
+
+        .mat-mdc-paginator-range-actions {
+            gap: 1rem !important;
+        }
+
+        .mat-mdc-paginator-range-label {
+            font-weight: 600 !important;
+            line-height: 4rem !important;
+            margin: 0 !important;
+            margin-inline: 1rem !important;
+            min-width: 10rem !important;
+            text-align: center !important;
+        }
+
+        .mat-mdc-paginator-navigation-first,
+        .mat-mdc-paginator-navigation-previous,
+        .mat-mdc-paginator-navigation-next,
+        .mat-mdc-paginator-navigation-last {
+            width: 2.8rem !important;
+            height: 2.8rem !important;
+            padding: 0 !important;
+            font-size: 2rem !important;
+            border-radius: 0.4rem !important;
+            display: flex !important;
+            align-items: center !important;
+            justify-content: center !important;
+            border: 1px solid $black-300 !important;
+
+            &:hover {
+                background-color: $secondary-100 !important;
+            }
+
+            > svg {
+                width: 2.2rem !important;
+                height: 2.2rem !important;
+                color: $black-300 !important;
+                fill: $black-300 !important;
+            }
+
+            &.mat-mdc-button-disabled {
+                cursor: not-allowed !important;
+                box-shadow: none !important;
+                background-color: $white-100 !important;
+                border-color: transparent !important;
+                color: $secondary-100 !important;
+                opacity: 1 !important;
+
+                svg,
+                svg path,
+                svg g path {
+                    color: $secondary-100 !important;
+                    fill: $secondary-100 !important;
+                }
+            }
+
+            .mat-mdc-button-persistent-ripple {
+                border-radius: 0.4rem !important;
+            }
+        }
+
+        .mat-mdc-paginator-navigation-first {
+            order: 1 !important;
+        }
+        .mat-mdc-paginator-navigation-previous {
+            order: 2 !important;
+        }
+        .mat-mdc-paginator-range-label {
+            order: 3 !important;
+        }
+        .mat-mdc-paginator-navigation-next {
+            order: 4 !important;
+        }
+        .mat-mdc-paginator-navigation-last {
+            order: 6 !important;
+        }
+
+        .mat-mdc-paginator-page-size {
+            position: absolute !important;
+            right: 1.6rem !important;
+
+            display: flex !important;
+            align-items: center !important;
+            gap: 1rem !important;
+            margin: 0 !important;
+
+            .mat-mdc-paginator-page-size-label {
+                margin: 0 !important;
+            }
+
+            .mat-mdc-paginator-page-size-select {
+                margin: 0 !important;
+
+                font-family: $font-family !important;
+                font-size: 1.2rem !important;
+                font-weight: 400 !important;
+                line-height: 100% !important;
+                color: $font-color !important;
+                letter-spacing: normal !important;
+                min-height: 2.8rem !important;
+                height: 2.8rem !important;
+                max-height: 2.8rem !important;
+                background-color: #{$white-100} !important;
+
+                .mat-mdc-text-field-wrapper,
+                .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex {
+                    min-height: 2.8rem !important;
+                    height: 2.8rem !important;
+                    max-height: 2.8rem !important;
+                    padding: 0 !important;
+
+                    .mat-mdc-form-field-infix {
+                        width: auto !important;
+                        min-height: 2.8rem !important;
+                        height: 2.8rem !important;
+                        max-height: 2.8rem !important;
+                        padding: 0 0.8rem !important;
+                    }
+                }
+
+                &:not(.mat-form-field-disabled) {
+                    // Bordas do input no mat-form-field
+                    .mat-mdc-text-field-wrapper
+                        .mat-mdc-form-field-flex
+                        .mdc-notched-outline
+                        .mat-mdc-notch-piece {
+                        transition:
+                            border-color ease-in-out 0.15s,
+                            box-shadow ease-in-out 0.15s;
+
+                        border-width: 1px !important;
+                        border-color: $black-400;
+                    }
+
+                    &:hover
+                        .mat-mdc-text-field-wrapper
+                        .mat-mdc-form-field-flex
+                        .mdc-notched-outline
+                        .mat-mdc-notch-piece {
+                        border-color: $black-300;
+                    }
+
+                    &:focus,
+                    &:focus-within,
+                    &.mat-focused,
+                    &.mdc-text-field--focused {
+                        box-shadow:
+                            inset 0 1px 1px rgba(0, 0, 0, 0.075),
+                            0 0 8px rgba(101, 101, 101, 0.6);
+
+                        .mat-mdc-text-field-wrapper
+                            .mat-mdc-form-field-flex
+                            .mdc-notched-outline
+                            .mat-mdc-notch-piece {
+                            border-color: $black-300;
+                        }
+                    }
+                }
+
+                &.mat-form-field-disabled {
+                    @include user-select(none);
+
+                    cursor: not-allowed;
+                    background-color: $secondary-50 !important;
+                    color: $secondary-300 !important;
+
+                    // Bordas do input no mat-form-field
+                    .mat-mdc-text-field-wrapper
+                        .mat-mdc-form-field-flex
+                        .mdc-notched-outline
+                        .mat-mdc-notch-piece {
+                        border-width: 1px;
+                        border-color: $secondary-200 !important;
+                    }
+                }
+
+                .mat-mdc-form-field-subscript-wrapper {
+                    display: none !important;
+                }
+
+                .mat-mdc-select,
+                .mat-mdc-select .mat-mdc-select-trigger {
+                    min-height: 2.8rem !important;
+                    height: 2.8rem !important;
+                    max-height: 2.8rem !important;
+                }
+
+                .mat-mdc-select-arrow {
+                    color: $font-color !important;
+                }
+
+                .mat-mdc-select-value {
+                    color: $font-color !important;
+                    font-size: 1.2rem !important;
+                    line-height: 2.8rem !important;
+
+                    .mat-mdc-select-placeholder {
+                        @include input-placeholder {
+                            color: $secondary-500 !important;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+@mixin mat-form-field-reset($theme: (), $isTextarea: false) {
+    $font-family: get-font-family($theme);
+    $font-size: get-font-size($theme);
+    $font-color: get-font-color($theme);
+    $mat-form-field-height: 3.6rem;
+
+    --mdc-outlined-text-field-container-shape: 0.4rem;
+
+    $white-100: get-color($theme, white, 100);
+
+    // Not disabled
+    $black-300: get-color($theme, black, 300);
+    $black-400: get-color($theme, black, 400);
+
+    // Disabled
+    $secondary-50: get-color($theme, secondary, 50);
+    $secondary-200: get-color($theme, secondary, 200);
+    $secondary-300: get-color($theme, secondary, 300);
+    $secondary-500: get-color($theme, secondary, 500);
+
+    .mat-mdc-form-field {
+        font-family: $font-family !important;
+        font-size: $font-size !important;
+        font-weight: 400 !important;
+        line-height: 100% !important;
+        color: $font-color !important;
+        letter-spacing: normal !important;
+        background-color: $white-100 !important;
+
+        @if not $isTextarea {
+            min-height: $mat-form-field-height !important;
+            height: $mat-form-field-height !important;
+            max-height: $mat-form-field-height !important;
+        }
+
+        .mat-mdc-text-field-wrapper {
+            border-radius: 0rem !important;
+            padding: 0 !important;
+
+            @if not $isTextarea {
+                overflow: hidden !important;
+                min-height: $mat-form-field-height !important;
+                height: $mat-form-field-height !important;
+                max-height: $mat-form-field-height !important;
+            } @else {
+                overflow: visible !important;
+            }
+
+            @if $isTextarea {
+                .mat-mdc-form-field-infix {
+                    padding: 1rem !important;
+                }
+            }
+
+            .mat-mdc-form-field-flex,
+            .mat-mdc-form-field-flex .mat-mdc-form-field-infix {
+                border-radius: 0rem !important;
+
+                @if not $isTextarea {
+                    padding: 0 !important;
+                    overflow: hidden !important;
+                    min-height: $mat-form-field-height !important;
+                    height: $mat-form-field-height !important;
+                    max-height: $mat-form-field-height !important;
+                } @else {
+                    overflow: visible !important;
+                    height: auto !important;
+                    min-height: auto !important;
+                    max-height: none !important;
+                }
+            }
+        }
+
+        &:not(.mat-form-field-disabled) {
+            // Bordas do input no mat-form-field
+            .mat-mdc-text-field-wrapper
+                .mat-mdc-form-field-flex
+                .mdc-notched-outline
+                .mat-mdc-notch-piece {
+                transition:
+                    border-color ease-in-out 0.15s,
+                    box-shadow ease-in-out 0.15s;
+
+                border-width: 1px !important;
+                border-color: $black-400;
+            }
+
+            &:hover
+                .mat-mdc-text-field-wrapper
+                .mat-mdc-form-field-flex
+                .mdc-notched-outline
+                .mat-mdc-notch-piece {
+                border-color: $black-300;
+            }
+
+            &:focus,
+            &:focus-within,
+            &.mat-focused {
+                box-shadow:
+                    inset 0 1px 1px rgba(0, 0, 0, 0.075),
+                    0 0 8px rgba(101, 101, 101, 0.6);
+
+                .mat-mdc-text-field-wrapper
+                    .mat-mdc-form-field-flex
+                    .mdc-notched-outline
+                    .mat-mdc-notch-piece {
+                    border-color: $black-300;
+                }
+            }
+        }
+
+        &.mat-form-field-disabled {
+            @include user-select(none);
+
+            cursor: not-allowed;
+            background-color: $secondary-50 !important;
+            color: $secondary-300 !important;
+
+            // Bordas do input no mat-form-field
+            .mat-mdc-text-field-wrapper
+                .mat-mdc-form-field-flex
+                .mdc-notched-outline
+                .mat-mdc-notch-piece {
+                border-width: 1px;
+                border-color: $secondary-200 !important;
+            }
+        }
+
+        .mat-mdc-form-field-subscript-wrapper {
+            display: none !important;
+        }
+
+        .mat-mdc-form-field-input-control {
+            font-family: $font-family !important;
+            font-size: $font-size !important;
+            caret-color: $font-color !important;
+
+            @if not $isTextarea {
+                padding-inline: 1rem !important;
+                height: 100% !important;
+            } @else {
+                max-height: 12rem !important;
+                min-height: 6rem !important;
+                padding: 0 !important;
+            }
+
+            @include input-placeholder {
+                color: $secondary-500 !important;
+            }
+
+            &:not(:disabled) {
+                color: $font-color !important;
+            }
+
+            &:disabled {
+                @include user-select(none);
+
+                cursor: not-allowed !important;
+                background-color: $secondary-50 !important;
+                color: $secondary-300 !important;
+            }
+        }
+
+        .mat-mdc-select {
+            font-family: $font-family !important;
+            font-size: $font-size !important;
+            font-weight: 400 !important;
+            line-height: 100% !important;
+            letter-spacing: normal !important;
+            padding-inline: 1rem !important;
+            min-height: $mat-form-field-height !important;
+            height: $mat-form-field-height !important;
+            max-height: $mat-form-field-height !important;
+
+            .mat-mdc-select-trigger {
+                min-height: $mat-form-field-height !important;
+                height: $mat-form-field-height !important;
+                max-height: $mat-form-field-height !important;
+            }
+
+            &:not(.mat-mdc-select-disabled) {
+                color: $font-color !important;
+
+                .mat-mdc-select-arrow {
+                    color: $font-color !important;
+                }
+            }
+
+            &.mat-mdc-select-disabled {
+                @include user-select(none);
+
+                cursor: not-allowed;
+                background-color: $secondary-50 !important;
+                color: $secondary-300 !important;
+
+                .mat-mdc-select-arrow {
+                    color: $secondary-300 !important;
+                }
+            }
+        }
+
+        .mat-mdc-form-field-icon-prefix,
+        .mat-mdc-form-field-icon-suffix {
+            padding: 0 0.4rem !important;
+            min-width: 3.6rem !important;
+            height: 3.6rem !important;
+            display: flex !important;
+            align-items: center !important;
+            justify-content: center !important;
+
+            .mat-datepicker-toggle,
+            .mat-datepicker-toggle .mdc-icon-button {
+                display: flex !important;
+                align-items: center !important;
+                justify-content: center !important;
+                width: 3.6rem !important;
+                height: 3.6rem !important;
+
+                > svg {
+                    width: 2rem !important;
+                    height: 2rem !important;
+                    font-size: 2rem !important;
+                }
+
+                .mat-mdc-button-touch-target {
+                    display: none !important;
+                }
+            }
+        }
+
+        &:not(.mat-form-field-disabled) {
+            .mat-mdc-form-field-icon-prefix,
+            .mat-mdc-form-field-icon-suffix {
+                .material-symbols-rounded,
+                .g-icon {
+                    color: $font-color !important;
+                }
+
+                .mat-datepicker-toggle,
+                .mat-datepicker-toggle .mdc-icon-button {
+                    color: $font-color !important;
+
+                    > svg {
+                        color: $font-color !important;
+                    }
+                }
+            }
+        }
+
+        .mat-form-field-disabled {
+            .mat-mdc-form-field-icon-prefix,
+            .mat-mdc-form-field-icon-suffix {
+                @include user-select(none);
+
+                cursor: not-allowed;
+                background-color: $secondary-50 !important;
+                color: $secondary-300 !important;
+
+                &:hover {
+                    background-color: transparent !important;
+                }
+            }
+        }
+
+        // .mdc-notched-outline__leading {
+        //     border-top-left-radius: 0.4rem !important;
+        //     border-bottom-left-radius: 0.4rem !important;
+        // }
+
+        // .mdc-notched-outline__trailing {
+        //     border-top-right-radius: 0.4rem !important;
+        //     border-bottom-right-radius: 0.4rem !important;
+        // }
+    }
+}
+
+@mixin mat-date-picker-reset($theme: ()) {
+    $font-family: get-font-family($theme);
+    $font-size: get-font-size($theme);
+    $font-color: get-font-color($theme);
+
+    .mat-datepicker-content {
+        border-radius: 4px !important;
+        background-color: #{get-color($theme, white, 100)} !important;
+        color: $font-color !important;
+
+        @include overlay();
+    }
+
+    .mat-datepicker-content-container {
+        display: flex !important;
+        flex-direction: row-reverse !important;
+        justify-content: space-between !important;
+    }
+
+    .mat-datepicker-actions {
+        padding: 0 !important;
+    }
+
+    .mat-date-range-input-container {
+        height: 100%;
+    }
+
+    .mat-date-range-input-wrapper {
+        width: 100%;
+    }
+
+    .mat-calendar-controls {
+        gap: 1rem !important;
+        margin: 0 0 10% 0 !important;
+    }
+
+    .mat-calendar-period-button {
+        padding: 0 1.2rem !important;
+        margin-inline: 0 !important;
+        height: 3.6rem !important;
+        font-family: $font-family !important;
+        color: $font-color !important;
+        font-size: 1.2rem !important;
+        font-weight: 700 !important;
+        background-color: transparent !important;
+        border-radius: 0.4rem !important;
+
+        .mat-calendar-arrow {
+            margin-top: -2.3px !important;
+        }
+
+        &:hover {
+            background-color: #{get-color($theme, secondary, 100)} !important;
+        }
+    }
+
+    .mat-calendar-previous-button,
+    .mat-calendar-next-button {
+        display: flex !important;
+        align-items: center !important;
+        justify-content: center !important;
+        padding: 0 !important;
+        width: 3.6rem !important;
+        height: 3.6rem !important;
+        font-family: $font-family !important;
+        color: $font-color !important;
+        background-color: transparent !important;
+        border-radius: 0.4rem !important;
+
+        background-color: #{get-color($theme, primary, 500)} !important;
+        color: #{get-color($theme, white, 100)} !important;
+
+        &:hover,
+        &:active {
+            background-color: #{get-color($theme, primary, 600)} !important;
+        }
+
+        &:disabled {
+            background-color: #{get-color($theme, secondary, 200)} !important;
+            color: #{get-color($theme, secondary, 500)} !important;
+        }
+    }
+
+    .mat-mdc-button-ripple,
+    .mat-mdc-button-persistent-ripple {
+        display: none !important;
+    }
+
+    .mat-calendar-table-header {
+        .mat-calendar-table-header-divider::after {
+            left: 4px !important;
+            right: 4px !important;
+            background: $font-color !important;
+        }
+
+        th {
+            color: $font-color !important;
+            font-size: 1.2rem !important;
+            font-weight: 700 !important;
+        }
+    }
+
+    .mat-calendar-body-cell {
+        @include user-select(none);
+
+        font-family: $font-family !important;
+        font-size: 1.2rem !important;
+        color: $font-color !important;
+
+        .mat-calendar-body-cell-content {
+            border-radius: 0.4rem !important;
+            --mat-datepicker-calendar-date-outline-color: transparent;
+            // --mat-datepicker-calendar-date-hover-state-background-color: #{get-color($theme, white, 100)};
+
+            &.mat-calendar-body-selected {
+                // --mat-datepicker-calendar-date-hover-state-background-color: #{get-color($theme, white, 100)};
+                --mat-datepicker-calendar-date-selected-state-background-color: #{get-color(
+                        $theme,
+                        primary,
+                        500
+                    )};
+                --mat-datepicker-calendar-date-selected-state-text-color: #{get-color(
+                        $theme,
+                        white,
+                        100
+                    )};
+                --mat-datepicker-calendar-date-today-outline-color: #{get-color($theme, white, 100)};
+                --mat-datepicker-calendar-date-today-selected-state-outline-color: #{get-color(
+                        $theme,
+                        white,
+                        100
+                    )};
+                --mat-datepicker-calendar-date-text-color: #{get-color($theme, white, 100)};
+
+                &.mat-calendar-body-today {
+                    box-shadow: inset 0 0 0 1px #{get-color($theme, white, 100)} !important;
+                }
+            }
+
+            &:not(.mat-calendar-body-selected) {
+                --mat-datepicker-calendar-date-selected-state-background-color: #{get-color(
+                        $theme,
+                        white,
+                        400
+                    )};
+                --mat-datepicker-calendar-date-selected-state-text-color: #{$font-color};
+                --mat-datepicker-calendar-date-today-outline-color: #{get-color(
+                        $theme,
+                        primary,
+                        500
+                    )};
+                --mat-datepicker-calendar-date-today-selected-state-outline-color: #{get-color(
+                        $theme,
+                        primary,
+                        500
+                    )};
+                --mat-datepicker-calendar-date-text-color: #{$font-color};
+
+                &.mat-calendar-body-today {
+                    --mat-datepicker-calendar-date-hover-state-background-color: #{get-color(
+                            $theme,
+                            primary,
+                            500
+                        )};
+                    --mat-datepicker-calendar-date-today-outline-color: #{get-color(
+                            $theme,
+                            primary,
+                            500
+                        )};
+                    --mat-datepicker-calendar-date-text-color: #{get-color($theme, primary, 500)};
+
+                    &:hover {
+                        --mat-datepicker-calendar-date-today-outline-color: #{get-color(
+                                $theme,
+                                primary,
+                                500
+                            )};
+                        --mat-datepicker-calendar-date-hover-state-background-color: #{get-color(
+                                $theme,
+                                white,
+                                100
+                            )};
+                        --mat-datepicker-calendar-date-text-color: #{get-color($theme, white, 100)} !important;
+                    }
+                }
+            }
+        }
+
+        // &:not(.mat-calendar-body-in-range) .mat-calendar-body-cell-content {
+        //     background-color: #{get-color($theme, white, 400)} !important;
+        // }
+
+        &.mat-calendar-body-in-preview.mat-calendar-body-in-preview-start,
+        &.mat-calendar-body-in-preview.mat-calendar-body-in-preview-end {
+            .mat-calendar-body-cell-content {
+                --mat-datepicker-calendar-date-text-color: #{get-color($theme, white, 100)} !important;
+
+                background-color: #{get-color($theme, primary, 500)} !important;
+                color: #{get-color($theme, white, 100)} !important;
+            }
+        }
+
+        &.mat-calendar-body-in-range {
+            &::before {
+                background-color: #{get-color($theme, pastels, primary)} !important;
+            }
+
+            .mat-calendar-body-cell-content:not(.mat-calendar-body-selected) {
+                background-color: transparent !important;
+            }
+        }
+
+        // &.mat-calendar-body-in-range {
+        //     &.mat-calendar-body-active.mat-calendar-body-range-start,
+        //     &.mat-calendar-body-active.mat-calendar-body-range-end {
+        //         .mat-calendar-body-cell-content {
+        //             background-color: #{get-color($theme, primary, 500)} !important;
+        //             color: #{get-color($theme, white, 100)} !important;
+        //         }
+        //     }
+        // }
+    }
+
+    // .mat-calendar-body-cell.mat-calendar-body-in-range {
+    //     &.mat-calendar-body-active {
+    //         &::before {
+    //             background: #{get-color($theme, pastels, primary)} !important;
+    //         }
+
+    //         .mat-calendar-body-cell-content {
+    //             background-color: transparent !important;
+    //             color: $font-color !important;
+    //         }
+    //     }
+
+    //     &.mat-calendar-body-selected .mat-calendar-body-cell-content {
+    //         background-color: #{get-color($theme, primary, 500)} !important;
+    //         color: #{get-color($theme, white, 100)} !important;
+    //     }
+    // }
+
+    // .mat-calendar-body-cell:not(.mat-calendar-body-in-range) {
+    //     .mat-calendar-body-cell-content {
+    //         color: $font-color !important;
+    //         border-radius: 0.4rem !important;
+    //         background-color: #{get-color($theme, white, 400)} !important;
+
+    //         &.mat-calendar-body-selected {
+    //             background-color: #{get-color($theme, primary, 500)} !important;
+    //             color: #{get-color($theme, white, 100)} !important;
+    //         }
+
+    //         &.mat-calendar-body-today:not(.mat-calendar-body-selected) {
+    //             background-color: #{get-color($theme, primary, 50)} !important;
+    //             border-color: #{get-color($theme, primary, 500)} !important;
+    //             color: #{get-color($theme, primary, 500)} !important;
+    //         }
+
+    //         &.mat-calendar-body-selected.mat-calendar-body-today {
+    //             box-shadow: inset 0 0 0 1px #{get-color($theme, white, 100)} !important;
+    //         }
+    //     }
+
+    //     &:not(.mat-calendar-body-disabled):hover {
+    //         .mat-calendar-body-cell-content:not(.mat-calendar-body-selected),
+    //         .mat-calendar-body-cell-content:not(.mat-calendar-body-today) {
+    //             background-color: #{get-color($theme, secondary, 100)} !important;
+    //         }
+
+    //         .mat-calendar-body-cell-content.mat-calendar-body-today {
+    //             background-color: #{get-color($theme, primary, 100)} !important;
+    //         }
+
+    //         .mat-calendar-body-cell-content.mat-calendar-body-selected {
+    //             background-color: #{get-color($theme, primary, 600)} !important;
+    //         }
+    //     }
+    // }
+
+    .mat-calendar-body-label {
+        font-size: 1.2rem !important;
+        font-weight: 400 !important;
+        padding-inline: 0.4rem !important;
+        color: $font-color !important;
+        text-transform: capitalize !important;
+    }
+}
+
+@mixin mat-radio-button-reset($theme: ()) {
+    $font-family: get-font-family($theme);
+    $font-size: get-font-size($theme);
+    $font-color: get-font-color($theme);
+    $secondary-300: get-color($theme, secondary, 300);
+    $primary-500: get-color($theme, primary, 500);
+
+    .mat-mdc-radio-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .mat-mdc-radio-button .mat-internal-form-field,
+    .mat-mdc-radio-button .mdc-form-field {
+        .mdc-label,
+        .mdc-form-field {
+            color: $font-color !important;
+            font-family: $font-family !important;
+            font-size: $font-size !important;
+            line-height: 1.8rem !important;
+            letter-spacing: normal !important;
+            font-weight: 400 !important;
+            cursor: pointer !important;
+        }
+
+        .mdc-label {
+            padding-left: 0 !important;
+        }
+
+        .mdc-radio {
+            width: 1.8rem !important;
+            height: 1.8rem !important;
+            padding: 0 !important;
+            padding-right: 1rem !important;
+
+            .mat-mdc-radio-touch-target {
+                display: none !important;
+            }
+
+            .mdc-radio__native-control {
+                width: 1.8rem !important;
+                height: 1.8rem !important;
+            }
+
+            .mdc-radio__background {
+                width: 1.8rem !important;
+                height: 1.8rem !important;
+                color: transparent !important;
+
+                &::before {
+                    display: none !important;
+                }
+            }
+
+            .mat-ripple {
+                display: none !important;
+            }
+        }
+    }
+
+    .mat-mdc-radio-button .mdc-radio__inner-circle {
+        top: -1px !important;
+        left: -1px !important;
+    }
+
+    .mat-mdc-radio-button
+        .mdc-radio__native-control:enabled:not(:checked)
+        + .mdc-radio__background
+        > .mdc-radio__outer-circle {
+        border-color: $secondary-300 !important;
+    }
+
+    .mat-mdc-radio-button
+        .mdc-radio__native-control:enabled:checked
+        + .mdc-radio__background
+        > .mdc-radio__outer-circle,
+    .mat-mdc-radio-button
+        .mdc-radio__native-control:enabled:checked
+        + .mdc-radio__background
+        > .mdc-radio__inner-circle {
+        border-color: $primary-500 !important;
+    }
+}
+
+@mixin mat-badge-reset($theme: ()) {
+    $font-family: get-font-family($theme);
+    $font-size: get-font-size($theme);
+    $white-100: get-color($theme, white, 100);
+    $primary-500: get-color($theme, primary, 500);
+
+    .mat-badge-content {
+        background-color: $primary-500 !important;
+        color: $white-100 !important;
+        font-family: $font-family !important;
+        font-weight: 700 !important;
+        font-size: 1.2rem !important;
+        padding: 0 4px !important;
+    }
+
+    .mat-badge-small .mat-badge-content {
+        &.mat-badge-overlap .mat-badge-content {
+            margin: -0.5rem !important;
+        }
+
+        width: 1rem !important;
+        height: 1rem !important;
+        min-width: 1rem !important;
+        min-height: 1rem !important;
+        line-height: 1rem !important;
+    }
+
+    .mat-badge-medium {
+        &.mat-badge-overlap .mat-badge-content {
+            margin: -0.8rem !important;
+        }
+
+        .mat-badge-content {
+            width: 1.4rem !important;
+            height: 1.4rem !important;
+            min-width: 1.4rem !important;
+            min-height: 1.4rem !important;
+            line-height: 1.4rem !important;
+        }
+    }
+
+    .mat-badge-large .mat-badge-content {
+        &.mat-badge-overlap .mat-badge-content {
+            margin: -1rem !important;
+        }
+
+        width: 1.8rem !important;
+        height: 1.8rem !important;
+        min-width: 1.8rem !important;
+        min-height: 1.8rem !important;
+        line-height: 1.8rem !important;
+    }
+}
+
+@mixin field-label($theme: ()) {
+    $font-family: get-font-family($theme);
+    $font-size: get-font-size($theme);
+    $font-color: get-font-color($theme);
+
+    $black-300: get-color($theme, black, 300);
+    $danger-500: get-color($theme, danger, 500);
+
+    font-family: $font-family;
+    font-size: $font-size;
+    line-height: $font-size;
+    color: $font-color;
+
+    display: flex;
+    align-items: flex-start;
+    gap: 0.2rem;
+
+    > span {
+        color: $danger-500;
+    }
+}
+
+// ---------------------------------------------------------------------------------------------------------------
+// | Classe       | Significado                           | Muda Quando?                                         |
+// ---------------------------------------------------------------------------------------------------------------
+// | ng-untouched | O usuário ainda não tocou o campo.	  | Quando o usuário clica no campo e sai.               |
+// | ng-touched	  | O usuário tocou e saiu do campo.	  | Assim que o usuário sair do campo.                   |
+// | ng-pristine  | O campo não foi modificado.	          | Assim que o usuário alterar o valor.                 |
+// | ng-dirty 	  | O campo foi modificado.		          | Assim que o usuário digita algo.                     |
+// | ng-valid	  | O campo passou nas validações.	      | Quando todas as regras de validação forem atendidas. |
+// | ng-invalid	  | O campo falhou em alguma validação.   | Quando alguma regra de validação falha.              |
+// ---------------------------------------------------------------------------------------------------------------
+@mixin input-base($theme: ()) {
+    $font-family: get-font-family($theme);
+    $font-size: get-font-size($theme);
+    $font-color: get-font-color($theme);
+    $input-field-height: 3.6rem;
+
+    $white-100: get-color($theme, white, 100);
+
+    // Not disabled
+    $black-300: get-color($theme, black, 300);
+    $black-400: get-color($theme, black, 400);
+
+    // Disabled
+    $secondary-50: get-color($theme, secondary, 50);
+    $secondary-200: get-color($theme, secondary, 200);
+    $secondary-300: get-color($theme, secondary, 300);
+
+    flex: 1 1 100%;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 0 1rem;
+    width: 100%;
+    height: $input-field-height;
+    font-family: $font-family;
+    font-size: $font-size;
+    line-height: 130%;
+    color: $font-color;
+    background-color: $white-100;
+    background-image: none;
+    vertical-align: middle;
+    border: 1px solid $black-400;
+    border-radius: 4px;
+    outline: 0;
+    overflow: hidden;
+    transition:
+        border-color ease-in-out 0.15s,
+        box-shadow ease-in-out 0.15s;
+
+    // Para quando o próprio input usa o mixin
+    &:not(:disabled):hover {
+        border-color: $black-300;
+    }
+
+    &:not(:disabled):focus-within,
+    &:not(:disabled):focus {
+        border-color: $black-300;
+        box-shadow:
+            inset 0 1px 1px rgba(0, 0, 0, 0.075),
+            0 0 8px rgba(101, 101, 101, 0.6);
+    }
+
+    &:disabled {
+        @include user-select(none);
+        cursor: not-allowed !important;
+        background-color: $secondary-50 !important;
+        color: $secondary-300 !important;
+        border-color: $secondary-200 !important;
+    }
+
+    // Para elementos que CONTÊM um input
+    &:has(input:not(:disabled)):hover {
+        border-color: $black-300;
+    }
+
+    &:has(input:not(:disabled)):focus-within,
+    &:has(input:not(:disabled)):focus {
+        border-color: $black-300;
+        box-shadow:
+            inset 0 1px 1px rgba(0, 0, 0, 0.075),
+            0 0 6px rgba(150, 150, 150, 0.6);
+    }
+
+    &:has(input:disabled) {
+        @include user-select(none);
+        cursor: not-allowed !important;
+        background-color: $secondary-50 !important;
+        color: $secondary-300 !important;
+        border-color: $secondary-200 !important;
+    }
+}