@pepperi-addons/ngx-lib 0.2.59-query-builder.13 → 0.2.61-beta.2

package/src/core/style/components/checkbox.scss

@@ -1,473 +1,476 @@
-@import '../abstracts/mixins';
-// -----------------------------------------------------
-//  Checkbox
-// -----------------------------------------------------
-@mixin pep-checkbox-size($size) {
-    $checkbox-width: 1.5rem;
-    $checkbox-height: 1.5rem;
-
-    @if $size == 'xs' {
-        $checkbox-width: 0.75rem;
-        $checkbox-height: 0.75rem;
-    }
-    @else if $size == 'sm' {
-        $checkbox-width: 1rem;
-        $checkbox-height: 1rem;
-    }
-    @else if $size == 'md' {
-        $checkbox-width: 1.25rem;
-        $checkbox-height: 1.25rem;
-    }
-    @else if $size == 'lg' {
-        $checkbox-width: 1.5rem;
-        $checkbox-height: 1.5rem;
-    }
-
-    width: $checkbox-width;
-    height: $checkbox-height;
-}
-
-// -----------------------------------------------------
-//  Override material style
-// -----------------------------------------------------
-.mat-checkbox-anim-checked-unchecked .mat-checkbox-background {
-    display: none;
-}
-
-.mat-checkbox-disabled,
-.mat-checkbox-indeterminate,
-.mat-checkbox-checked {
-    .mat-checkbox-layout {
-        .mat-checkbox-background {
-            border-radius: $border-radius-md;
-        }
-    }
-}
-
-.mat-checkbox-checked {
-    .mat-checkbox-layout {
-        .mat-checkbox-background {
-            content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNy41MTExNjM5LDcuMDAwNjI5NjggQzE3LjEzNTI3Myw3LjAxMDk5Mjg1IDE2Ljc3OTE1ODIsNy4xNjgzMTkwOSAxNi41MTYzMjg4LDcuNDM3NzU0MjEgQzE0LjIyNjEzMzksOS43MzI2NTE5MiAxMi4xMzU2Nzc4LDExLjk4MjQwMjIgOS45MzY5MTEzNSwxNC4yMjgxOTczIEw3LjM1MTc4NzA4LDEyLjE1NTYxMiBDNy4wNTIyMDMwMywxMS45MTUzODI5IDYuNjY5NzI4MTIsMTEuODA0MjI0MiA2LjI4ODE2OTY2LDExLjg0NjYyMjMgQzUuOTA1Njk0NzUsMTEuODg5MDE1NSA1LjU1NzEyODY0LDEyLjA4MTIwMDggNS4zMTY4OTcwNiwxMi4zODE3MzUxIEM1LjA3NzYwODQ2LDEyLjY4MTMxOTEgNC45NjY0NDk4MSwxMy4wNjM3OTQgNS4wMDg4NDc4NywxMy40NDUzNTI1IEM1LjA1MTI0MTExLDEzLjgyNzgyNzQgNS4yNDM0MjYzOCwxNC4xNzYzOTM1IDUuNTQyOTk1OTUsMTQuNDE2NjI1MSBMOS4xNjA1NzgyLDE3LjMxMDY5MDkgQzkuNzM5MDA1NDksMTcuNzcwNDEzMiAxMC41Njk5NCwxNy43MjIzNzE3IDExLjA4OTk1NTQsMTcuMTk3NjQxNCBDMTMuNjkxOTYxNywxNC41OTAwODgxIDE2LjAyMzYxNDEsMTIuMDI4MzU3NiAxOC41NjYyOTIxLDkuNDgwMTMyNjIgQzE4Ljk5MTE2NSw5LjA2Mjc4NDIxIDE5LjExNzQxODcsOC40Mjc4MjYxOCAxOC44ODQ3MTE2LDcuODgwNDg1OTggQzE4LjY1MTA3NjEsNy4zMzIyMDUyMSAxOC4xMDY1NDU2LDYuOTgzNjE0OTkgMTcuNTExMTYzOSw3LjAwMDU5MzUxIEwxNy41MTExNjM5LDcuMDAwNjI5NjggWiIvPgogIDwvc3ZnPg==");
-            width: inherit;
-            height: inherit;
-
-            .mat-checkbox-checkmark-path {
-                display: none;
-            }
-        }
-    }
-}
-
-.mat-checkbox-indeterminate {
-    .mat-checkbox-layout {
-        .mat-checkbox-background {
-            content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+Cgk8cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iNCIgeD0iNCIgeT0iMTAiIGZpbGwtcnVsZT0iZXZlbm9kZCIgcng9IjIiLz4KICAgPCEtLSA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNy41MTExNjM5LDcuMDAwNjI5NjggQzE3LjEzNTI3Myw3LjAxMDk5Mjg1IDE2Ljc3OTE1ODIsNy4xNjgzMTkwOSAxNi41MTYzMjg4LDcuNDM3NzU0MjEgQzE0LjIyNjEzMzksOS43MzI2NTE5MiAxMi4xMzU2Nzc4LDExLjk4MjQwMjIgOS45MzY5MTEzNSwxNC4yMjgxOTczIEw3LjM1MTc4NzA4LDEyLjE1NTYxMiBDNy4wNTIyMDMwMywxMS45MTUzODI5IDYuNjY5NzI4MTIsMTEuODA0MjI0MiA2LjI4ODE2OTY2LDExLjg0NjYyMjMgQzUuOTA1Njk0NzUsMTEuODg5MDE1NSA1LjU1NzEyODY0LDEyLjA4MTIwMDggNS4zMTY4OTcwNiwxMi4zODE3MzUxIEM1LjA3NzYwODQ2LDEyLjY4MTMxOTEgNC45NjY0NDk4MSwxMy4wNjM3OTQgNS4wMDg4NDc4NywxMy40NDUzNTI1IEM1LjA1MTI0MTExLDEzLjgyNzgyNzQgNS4yNDM0MjYzOCwxNC4xNzYzOTM1IDUuNTQyOTk1OTUsMTQuNDE2NjI1MSBMOS4xNjA1NzgyLDE3LjMxMDY5MDkgQzkuNzM5MDA1NDksMTcuNzcwNDEzMiAxMC41Njk5NCwxNy43MjIzNzE3IDExLjA4OTk1NTQsMTcuMTk3NjQxNCBDMTMuNjkxOTYxNywxNC41OTAwODgxIDE2LjAyMzYxNDEsMTIuMDI4MzU3NiAxOC41NjYyOTIxLDkuNDgwMTMyNjIgQzE4Ljk5MTE2NSw5LjA2Mjc4NDIxIDE5LjExNzQxODcsOC40Mjc4MjYxOCAxOC44ODQ3MTE2LDcuODgwNDg1OTggQzE4LjY1MTA3NjEsNy4zMzIyMDUyMSAxOC4xMDY1NDU2LDYuOTgzNjE0OTkgMTcuNTExMTYzOSw3LjAwMDU5MzUxIEwxNy41MTExNjM5LDcuMDAwNjI5NjggWiIgLz4gLS0+CiAgPC9zdmc+");
-            width: inherit;
-            height: inherit;
-
-            .mat-checkbox-checkmark-path {
-                display: none;
-            }
-        }
-    }
-}
-
-.pepperi-checkbox-container, .pep-checkbox-container {
-    z-index: 0;
-    // width: inherit !important;
-    display: grid;
-    align-items: center;
-
-    .mat-checkbox {
-        @include fix-inline-z-index();
-        height: inherit;
-        display: flex;
-        align-items: center;
-        cursor: default;
-    }
-
-    .mat-checkbox-layout {
-        cursor: pointer;
-    }
-
-    .mat-checkbox-inner-container {
-        // margin: auto 0rem auto 0.5rem !important; // override default auto margin.
-        // margin: auto 0.5rem auto 0.5rem !important; // override default auto margin.
-        margin: auto 0 !important; // override default auto margin.
-        margin-left: 0.25rem !important
-    }
-
-    .emoji-icon {
-        line-height: 1rem;
-        border-radius: $border-radius-md;
-        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-        padding: 0;
-        background: transparent;
-
-        @include pep-checkbox-size('lg');
-    }
-
-    .emoji-title {
-        margin: 0 0.25rem;
-    }
-
-    &.right-alignment {
-        .mat-checkbox-inner-container {
-            // margin: auto 0.5rem auto 0rem !important;
-            // margin: auto 0.5rem auto 0.5rem !important;
-            margin-left: 0 !important;
-            margin-right: 0.25rem !important;
-        }
-
-        .emoji-icon {
-            margin-left: 0 !important;
-            margin-right: 0.25rem;
-        }
-    }
-
-    &.center-alignment {
-        .mat-checkbox-inner-container {
-            // margin: auto 0 auto 0 !important;
-            margin-left: 0 !important;
-            margin-right: 0 !important;
-        }
-
-        .mat-checkbox-layout {
-            width: 100% !important;
-            justify-content: center !important;
-
-            .mat-checkbox-label {
-                // margin-left: 0.25rem;
-            }
-        }
-
-        // .emoji-icon {
-        //     margin-left: 0 !important;
-        // }
-    }
-
-    &.pepperi-input, &.pep-input {
-        padding-left: 0.5rem;
-        padding-right: 0.5rem;
-    }
-
-}
-
-.pepperi-report-checkbox, .pep-report-checkbox {
-    background: transparent !important;
-}
-
-.pepperi-card-checkbox, .pep-card-checkbox {
-    display: flex;
-    padding-top: 0 !important;
-    padding-bottom: 0 !important;
-
-    &.right-alignment {
-        justify-self: flex-end;
-    }
-
-    &.center-alignment {
-        justify-self: center;
-    }
-
-    &.no-title {
-        width: 2.5rem !important;
-    }
-
-    .mat-checkbox-layout {
-        width: 100% !important;
-        height: auto;
-        align-items: center !important;
-        vertical-align: unset; // override default auto margin.
-    }
-
-    .mat-checkbox-inner-container {
-        margin: auto 0.25rem;
-    }
-
-    &.pepperi-input, &.pep-input {
-        padding-left: 0.25rem;
-        padding-right: 0.25rem;
-    }
-
-    &.one-row {
-        // padding: 0 0.25rem;
-        // padding: 0;
-        padding-top: 0;
-        height: $card-field-height; // 1.5rem;
-        line-height: 1rem;
-
-        &.no-title {
-            width: $card-field-height !important; // 1.5rem !important;
-
-            .mat-checkbox-inner-container {
-                // margin: auto 0.5rem auto 0rem !important;
-                // margin: auto 0.5rem auto 0.5rem !important;
-                margin-left: 0 !important;
-                margin-right: 0 !important;
-            }
-
-            .emoji-icon {
-                margin-left: 0 !important;
-                margin-right: 0 !important;
-            }
-        }
-
-        .emoji-icon {
-            // margin-top: 0.25rem;
-            // margin-left: 0.25rem;
-            height: 1rem;
-            width: 1rem;
-            @include font-size($fs-xs);
-        }
-
-        .mat-checkbox-layout {
-            height: 1.5rem;
-        }
-
-        .mat-checkbox-inner-container {
-            border-radius: $border-radius-md;
-
-            @include pep-checkbox-size('sm');
-        }
-    }
-
-    &.disable {
-        background: transparent !important;
-        padding: 0 !important;
-
-        .mat-checkbox-inner-container {
-            //margin-left: 0;
-        }
-    }
-}
-
-.mat-checkbox-layout {
-    @include fix-inline-z-index();
-    // height: inherit;
-    margin-bottom: unset; // Cancel bootstrap defaults for Label.
-    width: fit-content;
-    font-weight: inherit;
-    align-items: unset !important;
-    vertical-align: unset !important;
-    // display: flex;
-    display: grid !important;
-    grid-auto-flow: column;
-
-    .mat-checkbox-inner-container {
-        border-radius: $border-radius-md;
-
-        @include pep-checkbox-size('lg');
-
-        .mat-checkbox-ripple {
-            display: none;
-        }
-    }
-
-    .mat-checkbox-label {
-        display: block;
-        @include ellipsis();
-        span {
-            margin: 0 0.25rem;
-        }
-    }
-
-    .mat-checkbox-frame {
-        height: inherit;
-        width: inherit;
-        display: flex;
-        border-radius: $border-radius-md;
-    }
-}
-
-// disabled
-.mat-checkbox-disabled {
-    cursor: auto;
-
-    .mat-checkbox-layout {
-        cursor: auto;
-    }
-}
-
-// Sizes
-.mat-checkbox {
-
-    &.lg {
-        .mat-checkbox-inner-container {
-            @include pep-checkbox-size('lg');
-        }
-    }
-    &.md {
-        .mat-checkbox-inner-container {
-            @include pep-checkbox-size('md');
-        }
-    }
-    &.sm {
-        .mat-checkbox-inner-container {
-            @include pep-checkbox-size('sm');
-        }
-    }
-    &.xs {
-        .mat-checkbox-inner-container {
-            @include pep-checkbox-size('xs');
-        }
-    }
-}
-
-@mixin pep-checkbox-theme($pepperi-theme) {
-    .pepperi-checkbox-container, .pep-checkbox-container {
-        @include state-weak-default($pepperi-theme);
-        &.no-default-background {
-            background: unset;
-        }
-        
-        &:hover:not(.disable) {
-            @include state-weak-hover($pepperi-theme);
-        }
-        &:focus:not(.disable) {
-            @include state-weak-focus($pepperi-theme);
-        }
-        // &:active {
-        //     @include state-weak-active($pepperi-theme);
-        // }
-        &.disable,
-        &:disabled {
-            @include state-weak-disable($pepperi-theme);
-        }
-
-        .emoji-icon {
-            border: unset;
-        }
-        &:not(.disable) {
-            .emoji-icon {
-                &:focus {
-                    @include focus($pepperi-theme);
-                }
-            }
-        }
-
-        &.pepperi-card-checkbox, &.pep-card-checkbox {
-            background: get-pep-color($pepperi-theme, color-weak, color-tran-10);
-        }
-
-    }
-
-    .has-active-campaign {
-        width: 100%;
-        justify-content: center;
-
-        .svg-icon {
-            fill: get-pep-color($pepperi-theme, color-system-caution, color-base);
-        }
-    }
-
-    // -----------------------------------------------------
-    //  Override material style
-    // -----------------------------------------------------
-    .mat-checkbox-layout {
-        &:hover {
-            .mat-checkbox-frame {
-                @include state-regular-hover($pepperi-theme, true);
-            }
-        }
-
-        &:active {
-            .mat-checkbox-frame {
-                @include state-regular-active($pepperi-theme, true);
-            }
-        }
-
-        .mat-checkbox-frame {
-            // border: unset;
-            @include state-regular-default($pepperi-theme, true);
-        }
-    }
-
-    // checked
-    .mat-checkbox-indeterminate,
-    .mat-checkbox-checked {
-        .mat-checkbox-layout {
-            &:hover {
-                .mat-checkbox-background {
-                    @include state-regular-hover($pepperi-theme, true);
-                    opacity: 0.7;
-                }
-            }
-
-            &:active {
-                .mat-checkbox-background {
-                    @include state-regular-active($pepperi-theme, true);
-                }
-            }
-
-            .mat-checkbox-background {
-                @include state-regular-default($pepperi-theme, true);
-            }
-        }
-    }
-
-    .mat-checkbox-indeterminate {
-        .mat-checkbox-mixedmark {
-            background: get-pep-color($pepperi-theme, color-text, color-dimmed) !important;
-        }
-    }
-
-    // focused
-    .cdk-focused {
-        .mat-checkbox-layout {
-            &:hover {
-                .mat-checkbox-frame {
-                    @include state-regular-hover($pepperi-theme, true);
-                    @include focus($pepperi-theme);
-                }
-            }
-
-            &:active {
-                .mat-checkbox-frame {
-                    @include state-regular-active($pepperi-theme, true);
-                    @include focus($pepperi-theme);
-                }
-            }
-
-            .mat-checkbox-frame {
-                @include state-regular-focus($pepperi-theme, true);
-            }
-        }
-    }
-
-    // disabled
-    .mat-checkbox-disabled {
-        .mat-checkbox-layout {
-            &:hover {
-                .mat-checkbox-background {
-                    @include state-regular-disable($pepperi-theme, true);
-                    box-shadow: unset;
-                    opacity: 0.35;
-                }
-            }
-
-            &:active {
-                .mat-checkbox-background {
-                    @include state-regular-disable($pepperi-theme, true);
-                    box-shadow: unset;
-                    opacity: 0.35;
-                }
-            }
-
-            .mat-checkbox-frame {
-                @include state-regular-disable($pepperi-theme, true);
-                box-shadow: unset;
-            }
-
-            .mat-checkbox-background {
-                @include state-regular-disable($pepperi-theme, true);
-                box-shadow: unset;
-                opacity: 0.35;
-            }
-
-            .mat-checkbox-label {
-                color: get-pep-color($pepperi-theme, color-text, color-dimmed);
-            }
-        }
-    }
-}
+@use '../abstracts/variables';
+@use '../abstracts/mixins';
+@use '../abstracts/functions';
+
+// -----------------------------------------------------
+//  Checkbox
+// -----------------------------------------------------
+@mixin pep-checkbox-size($size) {
+    $checkbox-width: 1.5rem;
+    $checkbox-height: 1.5rem;
+
+    @if $size == 'xs' {
+        $checkbox-width: 0.75rem;
+        $checkbox-height: 0.75rem;
+    }
+    @else if $size == 'sm' {
+        $checkbox-width: 1rem;
+        $checkbox-height: 1rem;
+    }
+    @else if $size == 'md' {
+        $checkbox-width: 1.25rem;
+        $checkbox-height: 1.25rem;
+    }
+    @else if $size == 'lg' {
+        $checkbox-width: 1.5rem;
+        $checkbox-height: 1.5rem;
+    }
+
+    width: $checkbox-width;
+    height: $checkbox-height;
+}
+
+// -----------------------------------------------------
+//  Override material style
+// -----------------------------------------------------
+.mat-checkbox-anim-checked-unchecked .mat-checkbox-background {
+    display: none;
+}
+
+.mat-checkbox-disabled,
+.mat-checkbox-indeterminate,
+.mat-checkbox-checked {
+    .mat-checkbox-layout {
+        .mat-checkbox-background {
+            border-radius: variables.$border-radius-md;
+        }
+    }
+}
+
+.mat-checkbox-checked {
+    .mat-checkbox-layout {
+        .mat-checkbox-background {
+            content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNy41MTExNjM5LDcuMDAwNjI5NjggQzE3LjEzNTI3Myw3LjAxMDk5Mjg1IDE2Ljc3OTE1ODIsNy4xNjgzMTkwOSAxNi41MTYzMjg4LDcuNDM3NzU0MjEgQzE0LjIyNjEzMzksOS43MzI2NTE5MiAxMi4xMzU2Nzc4LDExLjk4MjQwMjIgOS45MzY5MTEzNSwxNC4yMjgxOTczIEw3LjM1MTc4NzA4LDEyLjE1NTYxMiBDNy4wNTIyMDMwMywxMS45MTUzODI5IDYuNjY5NzI4MTIsMTEuODA0MjI0MiA2LjI4ODE2OTY2LDExLjg0NjYyMjMgQzUuOTA1Njk0NzUsMTEuODg5MDE1NSA1LjU1NzEyODY0LDEyLjA4MTIwMDggNS4zMTY4OTcwNiwxMi4zODE3MzUxIEM1LjA3NzYwODQ2LDEyLjY4MTMxOTEgNC45NjY0NDk4MSwxMy4wNjM3OTQgNS4wMDg4NDc4NywxMy40NDUzNTI1IEM1LjA1MTI0MTExLDEzLjgyNzgyNzQgNS4yNDM0MjYzOCwxNC4xNzYzOTM1IDUuNTQyOTk1OTUsMTQuNDE2NjI1MSBMOS4xNjA1NzgyLDE3LjMxMDY5MDkgQzkuNzM5MDA1NDksMTcuNzcwNDEzMiAxMC41Njk5NCwxNy43MjIzNzE3IDExLjA4OTk1NTQsMTcuMTk3NjQxNCBDMTMuNjkxOTYxNywxNC41OTAwODgxIDE2LjAyMzYxNDEsMTIuMDI4MzU3NiAxOC41NjYyOTIxLDkuNDgwMTMyNjIgQzE4Ljk5MTE2NSw5LjA2Mjc4NDIxIDE5LjExNzQxODcsOC40Mjc4MjYxOCAxOC44ODQ3MTE2LDcuODgwNDg1OTggQzE4LjY1MTA3NjEsNy4zMzIyMDUyMSAxOC4xMDY1NDU2LDYuOTgzNjE0OTkgMTcuNTExMTYzOSw3LjAwMDU5MzUxIEwxNy41MTExNjM5LDcuMDAwNjI5NjggWiIvPgogIDwvc3ZnPg==");
+            width: inherit;
+            height: inherit;
+
+            .mat-checkbox-checkmark-path {
+                display: none;
+            }
+        }
+    }
+}
+
+.mat-checkbox-indeterminate {
+    .mat-checkbox-layout {
+        .mat-checkbox-background {
+            content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+Cgk8cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iNCIgeD0iNCIgeT0iMTAiIGZpbGwtcnVsZT0iZXZlbm9kZCIgcng9IjIiLz4KICAgPCEtLSA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNy41MTExNjM5LDcuMDAwNjI5NjggQzE3LjEzNTI3Myw3LjAxMDk5Mjg1IDE2Ljc3OTE1ODIsNy4xNjgzMTkwOSAxNi41MTYzMjg4LDcuNDM3NzU0MjEgQzE0LjIyNjEzMzksOS43MzI2NTE5MiAxMi4xMzU2Nzc4LDExLjk4MjQwMjIgOS45MzY5MTEzNSwxNC4yMjgxOTczIEw3LjM1MTc4NzA4LDEyLjE1NTYxMiBDNy4wNTIyMDMwMywxMS45MTUzODI5IDYuNjY5NzI4MTIsMTEuODA0MjI0MiA2LjI4ODE2OTY2LDExLjg0NjYyMjMgQzUuOTA1Njk0NzUsMTEuODg5MDE1NSA1LjU1NzEyODY0LDEyLjA4MTIwMDggNS4zMTY4OTcwNiwxMi4zODE3MzUxIEM1LjA3NzYwODQ2LDEyLjY4MTMxOTEgNC45NjY0NDk4MSwxMy4wNjM3OTQgNS4wMDg4NDc4NywxMy40NDUzNTI1IEM1LjA1MTI0MTExLDEzLjgyNzgyNzQgNS4yNDM0MjYzOCwxNC4xNzYzOTM1IDUuNTQyOTk1OTUsMTQuNDE2NjI1MSBMOS4xNjA1NzgyLDE3LjMxMDY5MDkgQzkuNzM5MDA1NDksMTcuNzcwNDEzMiAxMC41Njk5NCwxNy43MjIzNzE3IDExLjA4OTk1NTQsMTcuMTk3NjQxNCBDMTMuNjkxOTYxNywxNC41OTAwODgxIDE2LjAyMzYxNDEsMTIuMDI4MzU3NiAxOC41NjYyOTIxLDkuNDgwMTMyNjIgQzE4Ljk5MTE2NSw5LjA2Mjc4NDIxIDE5LjExNzQxODcsOC40Mjc4MjYxOCAxOC44ODQ3MTE2LDcuODgwNDg1OTggQzE4LjY1MTA3NjEsNy4zMzIyMDUyMSAxOC4xMDY1NDU2LDYuOTgzNjE0OTkgMTcuNTExMTYzOSw3LjAwMDU5MzUxIEwxNy41MTExNjM5LDcuMDAwNjI5NjggWiIgLz4gLS0+CiAgPC9zdmc+");
+            width: inherit;
+            height: inherit;
+
+            .mat-checkbox-checkmark-path {
+                display: none;
+            }
+        }
+    }
+}
+
+.pepperi-checkbox-container, .pep-checkbox-container {
+    z-index: 0;
+    // width: inherit !important;
+    display: grid;
+    align-items: center;
+
+    .mat-checkbox {
+        @include mixins.fix-inline-z-index();
+        height: inherit;
+        display: flex;
+        align-items: center;
+        cursor: default;
+    }
+
+    .mat-checkbox-layout {
+        cursor: pointer;
+    }
+
+    .mat-checkbox-inner-container {
+        // margin: auto 0rem auto 0.5rem !important; // override default auto margin.
+        // margin: auto 0.5rem auto 0.5rem !important; // override default auto margin.
+        margin: auto 0 !important; // override default auto margin.
+        margin-left: 0.25rem !important
+    }
+
+    .emoji-icon {
+        line-height: 1rem;
+        border-radius: variables.$border-radius-md;
+        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        padding: 0;
+        background: transparent;
+
+        @include pep-checkbox-size('lg');
+    }
+
+    .emoji-title {
+        margin: 0 0.25rem;
+    }
+
+    &.right-alignment {
+        .mat-checkbox-inner-container {
+            // margin: auto 0.5rem auto 0rem !important;
+            // margin: auto 0.5rem auto 0.5rem !important;
+            margin-left: 0 !important;
+            margin-right: 0.25rem !important;
+        }
+
+        .emoji-icon {
+            margin-left: 0 !important;
+            margin-right: 0.25rem;
+        }
+    }
+
+    &.center-alignment {
+        .mat-checkbox-inner-container {
+            // margin: auto 0 auto 0 !important;
+            margin-left: 0 !important;
+            margin-right: 0 !important;
+        }
+
+        .mat-checkbox-layout {
+            width: 100% !important;
+            justify-content: center !important;
+
+            .mat-checkbox-label {
+                // margin-left: 0.25rem;
+            }
+        }
+
+        // .emoji-icon {
+        //     margin-left: 0 !important;
+        // }
+    }
+
+    &.pepperi-input, &.pep-input {
+        padding-left: 0.5rem;
+        padding-right: 0.5rem;
+    }
+
+}
+
+.pepperi-report-checkbox, .pep-report-checkbox {
+    background: transparent !important;
+}
+
+.pepperi-card-checkbox, .pep-card-checkbox {
+    display: flex;
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+
+    &.right-alignment {
+        justify-self: flex-end;
+    }
+
+    &.center-alignment {
+        justify-self: center;
+    }
+
+    &.no-title {
+        width: 2.5rem !important;
+    }
+
+    .mat-checkbox-layout {
+        width: 100% !important;
+        height: auto;
+        align-items: center !important;
+        vertical-align: unset; // override default auto margin.
+    }
+
+    .mat-checkbox-inner-container {
+        margin: auto 0.25rem;
+    }
+
+    &.pepperi-input, &.pep-input {
+        padding-left: 0.25rem;
+        padding-right: 0.25rem;
+    }
+
+    &.one-row {
+        // padding: 0 0.25rem;
+        // padding: 0;
+        padding-top: 0;
+        height: variables.$card-field-height; // 1.5rem;
+        line-height: 1rem;
+
+        &.no-title {
+            width: variables.$card-field-height !important; // 1.5rem !important;
+
+            .mat-checkbox-inner-container {
+                // margin: auto 0.5rem auto 0rem !important;
+                // margin: auto 0.5rem auto 0.5rem !important;
+                margin-left: 0 !important;
+                margin-right: 0 !important;
+            }
+
+            .emoji-icon {
+                margin-left: 0 !important;
+                margin-right: 0 !important;
+            }
+        }
+
+        .emoji-icon {
+            // margin-top: 0.25rem;
+            // margin-left: 0.25rem;
+            height: 1rem;
+            width: 1rem;
+            @include mixins.font-size(variables.$fs-xs);
+        }
+
+        .mat-checkbox-layout {
+            height: 1.5rem;
+        }
+
+        .mat-checkbox-inner-container {
+            border-radius: variables.$border-radius-md;
+
+            @include pep-checkbox-size('sm');
+        }
+    }
+
+    &.disable {
+        background: transparent !important;
+        padding: 0 !important;
+
+        .mat-checkbox-inner-container {
+            //margin-left: 0;
+        }
+    }
+}
+
+.mat-checkbox-layout {
+    @include mixins.fix-inline-z-index();
+    // height: inherit;
+    margin-bottom: unset; // Cancel bootstrap defaults for Label.
+    width: fit-content;
+    font-weight: inherit;
+    align-items: unset !important;
+    vertical-align: unset !important;
+    // display: flex;
+    display: grid !important;
+    grid-auto-flow: column;
+
+    .mat-checkbox-inner-container {
+        border-radius: variables.$border-radius-md;
+
+        @include pep-checkbox-size('lg');
+
+        .mat-checkbox-ripple {
+            display: none;
+        }
+    }
+
+    .mat-checkbox-label {
+        display: block;
+        @include mixins.ellipsis();
+        span {
+            margin: 0 0.25rem;
+        }
+    }
+
+    .mat-checkbox-frame {
+        height: inherit;
+        width: inherit;
+        display: flex;
+        border-radius: variables.$border-radius-md;
+    }
+}
+
+// disabled
+.mat-checkbox-disabled {
+    cursor: auto;
+
+    .mat-checkbox-layout {
+        cursor: auto;
+    }
+}
+
+// Sizes
+.mat-checkbox {
+
+    &.lg {
+        .mat-checkbox-inner-container {
+            @include pep-checkbox-size('lg');
+        }
+    }
+    &.md {
+        .mat-checkbox-inner-container {
+            @include pep-checkbox-size('md');
+        }
+    }
+    &.sm {
+        .mat-checkbox-inner-container {
+            @include pep-checkbox-size('sm');
+        }
+    }
+    &.xs {
+        .mat-checkbox-inner-container {
+            @include pep-checkbox-size('xs');
+        }
+    }
+}
+
+@mixin pep-checkbox-theme() {
+    .pepperi-checkbox-container, .pep-checkbox-container {
+        @include mixins.state-weak-default();
+        &.no-default-background {
+            background: unset;
+        }
+        
+        &:hover:not(.disable) {
+            @include mixins.state-weak-hover();
+        }
+        &:focus:not(.disable) {
+            @include mixins.state-weak-focus();
+        }
+        // &:active {
+        //     @include mixins.state-weak-active();
+        // }
+        &.disable,
+        &:disabled {
+            @include mixins.state-weak-disable();
+        }
+
+        .emoji-icon {
+            border: unset;
+        }
+        &:not(.disable) {
+            .emoji-icon {
+                &:focus {
+                    @include mixins.focus();
+                }
+            }
+        }
+
+        &.pepperi-card-checkbox, &.pep-card-checkbox {
+            background: functions.get-pep-color(color-weak, color-tran-10);
+        }
+
+    }
+
+    .has-active-campaign {
+        width: 100%;
+        justify-content: center;
+
+        .svg-icon {
+            fill: functions.get-pep-color(color-system-caution, color-base);
+        }
+    }
+
+    // -----------------------------------------------------
+    //  Override material style
+    // -----------------------------------------------------
+    .mat-checkbox-layout {
+        &:hover {
+            .mat-checkbox-frame {
+                @include mixins.state-regular-hover(true);
+            }
+        }
+
+        &:active {
+            .mat-checkbox-frame {
+                @include mixins.state-regular-active(true);
+            }
+        }
+
+        .mat-checkbox-frame {
+            // border: unset;
+            @include mixins.state-regular-default(true);
+        }
+    }
+
+    // checked
+    .mat-checkbox-indeterminate,
+    .mat-checkbox-checked {
+        .mat-checkbox-layout {
+            &:hover {
+                .mat-checkbox-background {
+                    @include mixins.state-regular-hover(true);
+                    opacity: 0.7;
+                }
+            }
+
+            &:active {
+                .mat-checkbox-background {
+                    @include mixins.state-regular-active(true);
+                }
+            }
+
+            .mat-checkbox-background {
+                @include mixins.state-regular-default(true);
+            }
+        }
+    }
+
+    .mat-checkbox-indeterminate {
+        .mat-checkbox-mixedmark {
+            background: functions.get-pep-color(color-text, color-dimmed) !important;
+        }
+    }
+
+    // focused
+    .cdk-focused {
+        .mat-checkbox-layout {
+            &:hover {
+                .mat-checkbox-frame {
+                    @include mixins.state-regular-hover(true);
+                    @include mixins.focus();
+                }
+            }
+
+            &:active {
+                .mat-checkbox-frame {
+                    @include mixins.state-regular-active(true);
+                    @include mixins.focus();
+                }
+            }
+
+            .mat-checkbox-frame {
+                @include mixins.state-regular-focus(true);
+            }
+        }
+    }
+
+    // disabled
+    .mat-checkbox-disabled {
+        .mat-checkbox-layout {
+            &:hover {
+                .mat-checkbox-background {
+                    @include mixins.state-regular-disable(true);
+                    box-shadow: unset;
+                    opacity: 0.35;
+                }
+            }
+
+            &:active {
+                .mat-checkbox-background {
+                    @include mixins.state-regular-disable(true);
+                    box-shadow: unset;
+                    opacity: 0.35;
+                }
+            }
+
+            .mat-checkbox-frame {
+                @include mixins.state-regular-disable(true);
+                box-shadow: unset;
+            }
+
+            .mat-checkbox-background {
+                @include mixins.state-regular-disable(true);
+                box-shadow: unset;
+                opacity: 0.35;
+            }
+
+            .mat-checkbox-label {
+                color: functions.get-pep-color(color-text, color-dimmed);
+            }
+        }
+    }
+}