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

package/src/core/style/base/base.scss

@@ -1,873 +1,874 @@
-@import '../abstracts/variables';
-
-//  Spacing
-// ------------------------
-.pep-spacing-element-negative {
-    @include pep-spacing-element-negative();
-}
-
-.pep-spacing-element {
-    @include pep-spacing-element();
-}
-//  Floating alignment
-// ------------------------
-.pull-right {
-    float: right !important;
-}
-
-.pull-left {
-    float: left !important;
-}
-
-[dir='rtl'] {
-    .pull-right {
-        float: left !important;
-    }
-
-    .pull-left {
-        float: right !important;
-    }
-}
-
-
-//  Text alignment
-// ------------------------
-.text-align-center,
-.text-align-3 {
-    text-align: center !important;
-    justify-self: center !important;
-    justify-content: center !important;
-}
-.text-align-right,
-.text-align-2 {
-    text-align: right !important;
-    justify-self: right !important;
-    justify-content: right !important;
-}
-.text-align-left,
-.text-align-0,
-.text-align-1 {
-    text-align: left !important;
-    justify-self: left !important;
-    justify-content: left !important;
-}
-
-//  Roundness
-// ------------------------
-.roundness-sm {
-    border-radius: $border-radius-sm;
-}
-
-.roundness-md {
-    border-radius: $border-radius-md;
-}
-
-.roundness-lg {
-    border-radius: $border-radius-lg;
-}
-
-//  Modal - General
-// -----------------------------------------------------
-.modal-footer {
-    .pepperi-button, .pep-button {
-        margin: 0 $spacing-xs;
-    }
-}
-
-// -----------------------------------------------------
-//  Override material style
-// -----------------------------------------------------
-// remove the circle when checkbox clicked
-.mat-ripple-element {
-    display: none;
-}
-
-//  Tabs.
-// -----------------------------------------------------
-.mat-tab-group {
-    .mat-tab-header {
-        .mat-tab-labels {
-            height: $tabs-labels-height;
-            box-sizing: content-box;
-
-            .mat-tab-label {
-                height: inherit;
-                opacity: unset;
-                min-width: unset;
-                padding: 0 $spacing-2xl;
-
-                &.mat-tab-label-active {
-                    font-weight: $font-weight-bold;
-                }
-            }
-        }
-    }
-
-    $tabs-z-index: $z-index-lowest;
-
-    .mat-tab-body-wrapper {
-        // margin: 0 calc(#{$content-margin} * -1);
-
-        .mat-tab-body {
-            z-index: $tabs-z-index - 1;
-            padding-top: $content-padding;
-
-            &:not(.mat-tab-body-active) {
-                .mat-tab-body-content {
-                    overflow: hidden;
-                }
-            }
-
-            &.mat-tab-body-active {
-                z-index: $tabs-z-index;
-
-                .mat-tab-body-content {
-                    padding: 0 $content-padding $content-padding;
-                    line-height: normal;
-                }
-            }
-        }
-    }
-
-    &.fixed-header {
-        .mat-tab-header {
-            // position: fixed;
-            position: unset;
-            z-index: $tabs-z-index + 1;
-            width: 100%;
-            // @include mat-tabs-fixed-header-width($side-bar-width);
-        }
-
-        .mat-tab-body-wrapper {
-            // margin-top: $tabs-labels-height;
-            margin-top: unset;
-        }
-    }
-}
-
-//  Accordion.
-// -----------------------------------------------------
-.mat-accordion .mat-expansion-panel {
-    mat-expansion-panel-header:focus {
-        outline-width: 0;
-    }
-}
-
-.pepperi-accordion, .pep-accordion {
-    &.mat-accordion .mat-expansion-panel {
-        padding: 0 $content-padding;
-        margin: 0 calc(#{$content-padding} * -1);
-
-        &:first-child {
-            .mat-expansion-panel-header {
-                border-radius: $spacing-xs $spacing-xs 0 0;
-            }
-        }
-
-        .mat-expansion-panel-header {
-            flex-flow: row-reverse;
-            height: $spacing-5xl;
-            padding: $spacing-lg $spacing-sm $spacing-sm;
-
-            .mat-expansion-panel-header-title {
-                display: flex;
-                align-items: center;
-                margin: 0;
-                padding: $spacing-xs $spacing-lg;
-            }
-
-            .mat-expansion-indicator {
-                // height: 1.5rem;
-                display: flex;
-                transform: scale(1.25) !important;
-
-                &:after {
-                    @include select-arrow();
-                    border-style: unset;
-                    display: unset;
-                    border-width: unset;
-                    transform: unset;
-                    padding: unset;
-                    padding-top: $spacing-xs;
-                }
-            }
-
-            &.mat-expanded {
-                .mat-expansion-indicator {
-                    transform: rotate(180deg) scale(1.25) !important;
-                }
-
-                .mat-expansion-panel-header-title {
-                    font-weight: $font-weight-bold;
-                }
-            }
-        }
-
-        .mat-expansion-panel-content {
-            .mat-expansion-panel-body {
-                padding: $content-padding 0;
-            }
-        }
-
-        &:first-of-type,
-        &:last-of-type {
-            border-radius: 0;
-        }
-    }
-}
-
-.pepperi-accordion2, .pep-accordion2 {
-    &.mat-accordion .mat-expansion-panel {
-        // padding: 0 $content-padding;
-        // margin: 0 calc(#{$content-padding} * -1);
-
-        .mat-expansion-panel-header {
-            flex-flow: row-reverse;
-            height: $spacing-4xl;
-            // padding: $spacing-lg 0 $spacing-sm;
-            padding: 0;
-
-            .mat-expansion-panel-header-title {
-                display: flex;
-                align-items: center;
-                margin: 0;
-                padding: $spacing-xs 0;
-
-                .mat-icon {
-                    height: 1rem;
-                    width: 1rem;
-                    @include align-center();
-                }
-            }
-
-            // &.mat-expanded {
-            //     .mat-expansion-panel-header-title {
-            //         font-weight: $font-weight-bold;
-            //     }
-            // }
-        }
-
-        .mat-expansion-panel-content {
-            .mat-expansion-panel-body {
-                padding: $spacing-sm $spacing-xs;
-            }
-        }
-
-        &:first-of-type,
-        &:last-of-type {
-            border-radius: 0;
-        }
-    }
-}
-
-.pepperi-chips, .pep-chips {
-    &.mat-accordion .mat-expansion-panel {
-        $shadow-bottom: $spacing-xl;
-
-        margin: calc(#{$spacing-sm} * -1) calc(#{$spacing-lg} * -1) $spacing-md !important;
-        // margin-bottom: $spacing-md;
-        border-radius: unset;
-
-        &.mat-expansion-panel-spacing {
-            margin: 0;
-        }
-
-        .mat-expansion-panel-header {
-            padding: 0;
-
-            .mat-content {
-                overflow: inherit;
-            }
-
-            .mat-expansion-panel-header-title {
-                flex-grow: 0;
-                width: fit-content;
-                height: $spacing-3xl;
-                border-radius: 1.5rem; // $border-radius-md;
-                padding: 0 $spacing-xl;
-                margin: $spacing-sm $spacing-lg 0; // For the shadow
-                display: grid;
-                align-items: center;
-                // margin-bottom: $shadow-bottom;
-            }
-
-            &.mat-expanded {
-                .mat-expansion-panel-header-title {
-                    position: absolute;
-                    font-weight: $font-weight-bold;
-                }
-            }
-
-            &.separator {
-                height: $spacing-sm;
-
-                .mat-expansion-panel-header-title {
-                    width: 100%;
-                    height: 1px;
-                }
-            }
-        }
-
-        .mat-expansion-panel-content {
-            .mat-expansion-panel-body {
-                padding: 0 calc(#{$content-padding} + #{$spacing-md});
-
-                .expansion-content {
-                    padding: 0;
-                    margin-top: $spacing-md;
-                    margin-bottom: 0;
-                    list-style-type: disc;
-                    list-style-position: inside;
-
-                    li {
-                        margin-bottom: $spacing-sm;
-
-                        &:hover,
-                        &.active {
-                            cursor: pointer;
-                            font-weight: $font-weight-bold;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-
-// Auto complete.
-// -----------------------------------------------------
-.mat-autocomplete-panel {
-    margin-top: $spacing-sm;
-    border-radius: $border-radius-md;
-
-    .mat-option:active {
-        transition: 0.3ms;
-    }
-}
-
-//  Menu.
-// -----------------------------------------------------
-.mat-menu-panel {
-    box-sizing: content-box;
-
-    .mat-menu-content {
-        padding: 0 !important;
-
-        .mat-menu-item {
-            padding: 0 $content-padding;
-            display: flex;
-            align-items: center;
-        }
-    }
-
-    &.pep-select-menu {
-        .mat-menu-content {
-            padding: 0 !important;
-
-            .mat-menu-item {
-                height: $spacing-4xl;
-                padding: 0 $spacing-md;
-                border-radius: unset;
-            }
-        }    
-    }
-
-    &.pep-action-menu,
-    &.pep-action-select-menu {
-        .mat-menu-content {
-            padding: $spacing-sm !important;
-            
-            .mat-menu-item {
-                height: $spacing-3xl;
-                padding: 0 $spacing-sm;
-                border-radius: $border-radius-md;
-            }
-        }
-    }
-}
-
-//  Dialog
-// -------------------------------------------------
-.mat-dialog-container {
-    border-radius: 0.25rem !important; // $border-radius-md
-}
-
-.pepperi-dialog, .pep-dialog {
-    max-width: 90vw;
-    min-width: 18rem;
-
-    $dialog-content-padding: $content-padding;
-
-    .mat-dialog-container {
-        border-radius: 0.25rem !important; // $border-radius-md
-        padding: $content-padding;
-
-        .dialog-header-container {
-            height: $dialog-header-height;
-            margin-bottom: 0;
-            display: grid;
-            grid-template-columns: 1fr auto;
-            grid-template-areas: "title close";
-
-            .dialog-title {
-                @include ellipsis();
-                grid-area: title;
-
-                &:after {
-                    content: ' ';
-                    display: block;
-                    width: $spacing-sm;
-                }
-            }
-
-            .dialog-close {
-                grid-area: close;
-            }
-        }
-
-        .mat-dialog-content {
-            padding: $dialog-content-padding $spacing-sm;
-            margin: 0 calc(#{$spacing-sm} * -1);
-            // margin: 0;
-            border: none;
-            display: grid;
-            overflow: auto;
-            -webkit-overflow-scrolling: touch;
-            min-height: 5rem;
-            max-height: 65vh;
-            // @include box-sizing(border-box);
-            box-sizing: border-box;
-            // grid-row: mat-dialog-content;
-            // max-height: unset; // This is cause a bug in the email dialog that the actions buttons are not displayed.
-        }
-
-        .mat-dialog-actions {
-            justify-content: flex-end;
-            grid-row: mat-dialog-actions;
-            margin-bottom: 0;
-            padding: $spacing-md 0 0; // override material padding.
-            min-height: unset;
-        }
-
-    }
-
-    &.small {
-        max-width: 10rem !important;
-        height: auto;
-    }
-
-    &.regular {
-        max-width: 34rem !important;
-        height: auto;
-    }
-
-    &.large {
-        max-width: 40rem !important;
-        width: 90vw;
-        height: auto;
-        max-height: 90vh;
-
-        .mat-dialog-container {
-            .mat-dialog-content {
-                $border-size: 1px;
-                max-height: calc(90vh - (#{$dialog-header-height} + (#{$content-padding} * 2) + (#{$border-size} * 2))); 
-            }
-        }
-    }
-
-    &.full-screen {
-        $dialog-height: 95vh;
-
-        max-width: 95vw !important;
-        width: 95vw !important;
-        max-height: $dialog-height !important;
-        height: $dialog-height !important;
-
-        .mat-dialog-container {
-            .mat-dialog-content {
-                // $height: calc(100vh - (#{$dialog-header-height} + (#{$dialog-padding} * 2) + #{$dialog-actions-height}));
-                $height: calc(100% - ((#{$dialog-content-padding} * 2)));
-                height: $height;
-                max-height: $height;
-            }
-        }
-    }
-
-    &.inline {
-        .mat-dialog-container {
-            overflow: hidden;
-
-            .gallery-dialog {
-                .mat-dialog-content {
-                    $height: calc(100% - ((#{$dialog-content-padding} * 2)));
-                    height: $height;
-                    max-height: $height;
-                }
-            }
-
-            .iframe-container {
-                height: 100%;
-
-                .mat-dialog-content {
-                    $border-size: 1px;
-                    max-height: calc(100% - ((#{$dialog-content-padding} * 2) + (#{$border-size} * 2)));
-                    height: inherit;
-                }
-            }
-        }
-    }
-}
-
-// -----------------------------------------------------
-// Override bootstrap css.
-// -----------------------------------------------------
-.modal {
-    z-index: $z-index-high;
-}
-.modal-backdrop {
-    z-index: $z-index-high - 2;
-}
-
-@mixin declare-system-base-theme($pepperi-theme) {
-    .header-content {
-        background: get-pep-color($pepperi-theme, color-system-primary-invert, color-base);
-    }
-
-    .settings-bar-container {
-        background: get-pep-color($pepperi-theme, color-system-primary-invert, color-base);
-    }
-
-    .splitter {
-        height: 1px;
-        @include pep-border(border-bottom, $pepperi-theme);
-    }
-
-    .pepperi-border-top, .pep-border-top {
-        @include pep-border(border-top, $pepperi-theme);
-    }
-
-    .pepperi-border-bottom, .pep-border-bottom {
-        @include pep-border(border-bottom, $pepperi-theme);
-    }
-
-    .pepperi-loading-spinner, .pep-loading-spinner {
-        background-color: get-pep-color($pepperi-theme, color-top-header, color-base);
-    }
-
-    //  Tabs.
-    // -------------------------------------------------
-    .mat-tab-group {
-        .mat-tab-header,
-        .mat-tab-header:focus {
-            border-bottom: unset !important;
-        }
-
-        .mat-tab-header {
-            .mat-tab-labels {
-                @include pep-border(border-bottom, $pepperi-theme);
-
-                .mat-tab-label {
-                    color: get-pep-color($pepperi-theme, color-text, color-dimmed);
-
-                    &:hover {
-                        @include state-weak-hover($pepperi-theme);
-                    }
-
-                    // Focused
-                    &.cdk-focused {
-                        background-color: unset;
-                        @include state-weak-active($pepperi-theme);
-                    }
-
-                    &.mat-tab-label-active {
-                        @include state-weak-default($pepperi-theme);
-                        color: get-pep-color($pepperi-theme, color-text, color-main);
-
-                        &:hover {
-                            @include state-weak-hover($pepperi-theme);
-                        }
-                    }
-
-                    &.mat-tab-disabled {
-                        @include state-weak-disable($pepperi-theme);
-                    }
-                }
-            }
-
-            .mat-ink-bar {
-                display: none;
-            }
-
-            // .mat-ink-bar:before { }
-            // .mat-ink-bar:after { }
-        }
-
-        // .mat-tab-body-wrapper {
-        //     .mat-tab-body-content {
-        //     }
-        // }
-
-        &.fixed-header {
-            .mat-tab-header {
-                background: get-pep-color($pepperi-theme, color-system-primary-invert, color-base);
-            }
-        }
-    }
-
-    //  Accordion.
-    // -----------------------------------------------------
-    .pepperi-accordion, .pep-accordion {
-        &.mat-accordion .mat-expansion-panel {
-            box-shadow: unset;
-
-            .mat-expansion-panel-header {
-                @include pep-border(border-top, $pepperi-theme);
-
-                &.mat-expanded {
-                    @include pep-border(border-bottom, $pepperi-theme);
-
-                    .mat-expansion-panel-header-title {
-                        color: get-pep-color($pepperi-theme, color-text, color-main);
-                    }
-                }
-
-                .mat-expansion-panel-header-title {
-                    color: get-pep-color($pepperi-theme, color-text, color-dimmed);
-                }
-            }
-
-            .mat-expansion-panel-header.cdk-keyboard-focused,
-            .mat-expansion-panel-header.cdk-program-focused,
-            .mat-expansion-panel-header:hover {
-                @include state-weak-hover($pepperi-theme);
-            }
-
-            &:first-child {
-                .mat-expansion-panel-header {
-                    border-top: unset;
-                }
-            }
-
-            &:last-child {
-                .mat-expansion-panel-header {
-                    @include pep-border(border-bottom, $pepperi-theme);
-                }
-            }
-        }
-    }
-
-    .pepperi-accordion2, .pep-accordion2 {
-        &.mat-accordion .mat-expansion-panel {
-            box-shadow: unset;
-
-            .mat-expansion-panel-header {
-                @include pep-border(border-top, $pepperi-theme);
-
-                .mat-expansion-panel-header-title {
-                    color: get-pep-color($pepperi-theme, color-text, color-main);
-                }
-            }
-
-            .mat-expansion-panel-header.cdk-keyboard-focused,
-            .mat-expansion-panel-header.cdk-program-focused,
-            .mat-expansion-panel-header:hover {
-                @include state-weak-hover($pepperi-theme);
-            }
-
-            &:last-child {
-                @include pep-border(border-bottom, $pepperi-theme);
-            }
-        }
-    }
-
-    //  Accordion - chips.
-    // -----------------------------------------------------
-    .pepperi-chips, .pep-chips {
-        &.mat-accordion .mat-expansion-panel {
-            box-shadow: unset;
-
-            .mat-expansion-panel-header:not(.separator) {
-                &:hover {
-                    background: unset;
-                }
-
-                &.mat-expanded {
-                    .mat-expansion-panel-header-title {
-                        @include state-weak-active($pepperi-theme);
-                        background: get-pep-color($pepperi-theme, color-system-primary-invert, color-base);
-                        @include inline(get-pep-color($pepperi-theme, color-text, color-main));
-                        box-shadow: get-pep-shadow($pepperi-theme, shadow-md, soft);
-
-                        &:hover {
-                            @include state-weak-hover($pepperi-theme);
-                        }
-
-                        &:after {
-                            z-index: $z-index-lowest !important;
-                        }
-                    }
-                }
-
-                .mat-expansion-panel-header-title {
-                    @include state-weak-default($pepperi-theme);
-
-                    &:hover {
-                        @include state-weak-hover($pepperi-theme);
-                    }
-                }
-            }
-
-            .mat-expansion-panel-body {
-                .expansion-content {
-                    li {
-                        color: get-pep-color($pepperi-theme, color-text, color-dimmed);
-
-                        &:hover,
-                        &.active {
-                            color: get-pep-color($pepperi-theme, color-text, color-main);
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-    // Auto complete.
-    // -------------------------------------------------
-    .mat-autocomplete-panel {
-        @include pep-border(border, $pepperi-theme);
-
-        .mat-option:active {
-            background: get-pep-color($pepperi-theme, color-system-primary, color-tran-40) !important;
-        }
-    }
-
-    // Modals overlay pane
-    // -------------------------------------------------
-    // .cdk-overlay-pane {
-    //     // box-shadow: get-pep-shadow($pepperi-theme, shadow-sm, hard);
-    // }
-
-    //  Menu
-    // -------------------------------------------------
-    .mat-menu-panel {
-        box-shadow: get-pep-shadow($pepperi-theme, shadow-sm, hard);
-        border: 1px solid get-pep-color($pepperi-theme, color-system-primary, color-base);
-        
-        max-width: 30rem;
-        min-height: unset;
-        
-        .mat-menu-item {
-            background: get-pep-color($pepperi-theme, color-system-primary-invert, color-base);
-
-            &:hover {
-                @include state-weak-hover($pepperi-theme);
-            }
-            &:active {
-                @include state-weak-active($pepperi-theme, color-weak, false);
-                background: get-pep-color($pepperi-theme, color-weak, color-tran-50) !important;
-            }
-            &:disabled {
-                @include state-weak-disable($pepperi-theme);
-                background: unset !important;
-            }
-
-            &.selected {
-                background: get-pep-color($pepperi-theme, color-system-success, color-tran-20);
-            }
-        }
-    }
-
-    //  Dialog
-    // -------------------------------------------------
-    .mat-dialog-container {
-        box-shadow: unset;
-        // box-shadow: get-pep-shadow($pepperi-theme, shadow-sm, hard);
-        border: 1px solid get-pep-color($pepperi-theme, color-system-primary, color-base);
-
-        .dialog-header-container {
-            @include pep-border(border-bottom, $pepperi-theme);
-        }
-    }
-
-    /*----------------- ngx Overrides ---------------------*/
-    // Temporary until we'll write it again.
-    #cartSummary {
-        $border-color: get-pep-color($pepperi-theme, color-system-primary, color-tran-50);
-
-        .carousel-indicators {
-            margin-bottom: 0px;
-            bottom: 0px;
-
-            li {
-                background-color: $border-color;
-                height: 0.75rem;
-                width: 0.75rem;
-                margin: 0 0.25rem;
-
-                &.active {
-                    background-color: get-pep-color($pepperi-theme, color-system-primary, color-tran-60);
-                }
-            }
-        }
-
-        .carousel-control {
-            width: 100%;
-            background: none;
-            bottom: 15px;
-            top: unset;
-
-            .icon-next {
-                background-color: $border-color;
-                height: 1.5rem;
-                width: 1.5rem;
-                border-radius: 1rem;
-                right: 25px;
-                cursor: pointer !important;
-
-                &:before {
-                    content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDI0IDI0Ij4NCiAgPHBhdGggZmlsbC1vcGFjaXR5PSIuNSIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOS4yODY3NDM1NCw0LjMwODg4NjMzIEM5LjY2OTA2ODI2LDMuODk3MDM3ODkgMTAuMjg4OTM5MSwzLjg5NzAzNzg5IDEwLjY3MTI2MzgsNC4zMDg4ODYzMyBMMTYuNDI2NTEyOSwxMC41MDg1NjQ5IEMxNy4xOTExNjI0LDExLjMzMjI2MTcgMTcuMTkxMTYyNCwxMi42Njc3MzgzIDE2LjQyNjUxMjksMTMuNDkxNDM1MSBMMTAuNjcxMjYzOCwxOS42OTExMTM3IEMxMC4yODg5MzkxLDIwLjEwMjk2MjEgOS42NjkwNjgyNiwyMC4xMDI5NjIxIDkuMjg2NzQzNTQsMTkuNjkxMTEzNyBDOC45MDQ0MTg4MiwxOS4yNzkyNjUyIDguOTA0NDE4ODIsMTguNjExNTI3IDkuMjg2NzQzNTQsMTguMTk5Njc4NSBMMTMuMjAyNzU4MywxMi43NDU3MTc2IEMxMy41ODUwODMsMTIuMzMzODY5MSAxMy41ODUwODMsMTEuNjY2MTMwOSAxMy4yMDI3NTgzLDExLjI1NDI4MjQgTDkuMjg2NzQzNTQsNS44MDAzMjE0OCBDOC45MDQ0MTg4Miw1LjM4ODQ3MzAzIDguOTA0NDE4ODIsNC43MjA3MzQ3OCA5LjI4Njc0MzU0LDQuMzA4ODg2MzMgWiIvPg0KPC9zdmc+DQo=');
-                    position: relative;
-                    top: -6px;
-                }
-            }
-
-            .icon-prev {
-                background-color: $border-color;
-                height: 1.5rem;
-                width: 1.5rem;
-                border-radius: 1rem;
-                left: 25px;
-                cursor: pointer !important;
-
-                &:before {
-                    content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDI0IDI0Ij4NCiAgPHBhdGggZmlsbC1vcGFjaXR5PSIuNSIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTQuNzEzMjU2NSw1LjgwMDMyMTQ4IEwxMC43OTcyNDE3LDExLjI1NDI4MjQgQzEwLjQxNDkxNywxMS42NjYxMzA5IDEwLjQxNDkxNywxMi4zMzM4NjkxIDEwLjc5NzI0MTcsMTIuNzQ1NzE3NiBMMTQuNzEzMjU2NSwxOC4xOTk2Nzg1IEMxNS4wOTU1ODEyLDE4LjYxMTUyNyAxNS4wOTU1ODEyLDE5LjI3OTI2NTIgMTQuNzEzMjU2NSwxOS42OTExMTM3IEMxNC4zMzA5MzE3LDIwLjEwMjk2MjEgMTMuNzExMDYwOSwyMC4xMDI5NjIxIDEzLjMyODczNjIsMTkuNjkxMTEzNyBMNy41NzM0ODcwOCwxMy40OTE0MzUxIEM2LjgwODgzNzY0LDEyLjY2NzczODMgNi44MDg4Mzc2NCwxMS4zMzIyNjE3IDcuNTczNDg3MDgsMTAuNTA4NTY0OSBMMTMuMzI4NzM2Miw0LjMwODg4NjMzIEMxMy43MTEwNjA5LDMuODk3MDM3ODkgMTQuMzMwOTMxNywzLjg5NzAzNzg5IDE0LjcxMzI1NjUsNC4zMDg4ODYzMyBDMTUuMDk1NTgxMiw0LjcyMDczNDc4IDE1LjA5NTU4MTIsNS4zODg0NzMwMyAxNC43MTMyNTY1LDUuODAwMzIxNDggWiIvPg0KPC9zdmc+DQo=');
-                    position: relative;
-                    top: -6px;
-                }
-            }
-        }
-
-        &.rtl {
-            .carousel-control {
-                .icon-next {
-                    right: auto;
-                    left: 25px;
-
-                    &:before {
-                        content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDI0IDI0Ij4NCiAgPHBhdGggZmlsbC1vcGFjaXR5PSIuNSIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTQuNzEzMjU2NSw1LjgwMDMyMTQ4IEwxMC43OTcyNDE3LDExLjI1NDI4MjQgQzEwLjQxNDkxNywxMS42NjYxMzA5IDEwLjQxNDkxNywxMi4zMzM4NjkxIDEwLjc5NzI0MTcsMTIuNzQ1NzE3NiBMMTQuNzEzMjU2NSwxOC4xOTk2Nzg1IEMxNS4wOTU1ODEyLDE4LjYxMTUyNyAxNS4wOTU1ODEyLDE5LjI3OTI2NTIgMTQuNzEzMjU2NSwxOS42OTExMTM3IEMxNC4zMzA5MzE3LDIwLjEwMjk2MjEgMTMuNzExMDYwOSwyMC4xMDI5NjIxIDEzLjMyODczNjIsMTkuNjkxMTEzNyBMNy41NzM0ODcwOCwxMy40OTE0MzUxIEM2LjgwODgzNzY0LDEyLjY2NzczODMgNi44MDg4Mzc2NCwxMS4zMzIyNjE3IDcuNTczNDg3MDgsMTAuNTA4NTY0OSBMMTMuMzI4NzM2Miw0LjMwODg4NjMzIEMxMy43MTEwNjA5LDMuODk3MDM3ODkgMTQuMzMwOTMxNywzLjg5NzAzNzg5IDE0LjcxMzI1NjUsNC4zMDg4ODYzMyBDMTUuMDk1NTgxMiw0LjcyMDczNDc4IDE1LjA5NTU4MTIsNS4zODg0NzMwMyAxNC43MTMyNTY1LDUuODAwMzIxNDggWiIvPg0KPC9zdmc+DQo=');
-                    }
-                }
-
-                .icon-prev {
-                    left: auto;
-                    right: 25px;
-
-                    &:before {
-                        content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDI0IDI0Ij4NCiAgPHBhdGggZmlsbC1vcGFjaXR5PSIuNSIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOS4yODY3NDM1NCw0LjMwODg4NjMzIEM5LjY2OTA2ODI2LDMuODk3MDM3ODkgMTAuMjg4OTM5MSwzLjg5NzAzNzg5IDEwLjY3MTI2MzgsNC4zMDg4ODYzMyBMMTYuNDI2NTEyOSwxMC41MDg1NjQ5IEMxNy4xOTExNjI0LDExLjMzMjI2MTcgMTcuMTkxMTYyNCwxMi42Njc3MzgzIDE2LjQyNjUxMjksMTMuNDkxNDM1MSBMMTAuNjcxMjYzOCwxOS42OTExMTM3IEMxMC4yODg5MzkxLDIwLjEwMjk2MjEgOS42NjkwNjgyNiwyMC4xMDI5NjIxIDkuMjg2NzQzNTQsMTkuNjkxMTEzNyBDOC45MDQ0MTg4MiwxOS4yNzkyNjUyIDguOTA0NDE4ODIsMTguNjExNTI3IDkuMjg2NzQzNTQsMTguMTk5Njc4NSBMMTMuMjAyNzU4MywxMi43NDU3MTc2IEMxMy41ODUwODMsMTIuMzMzODY5MSAxMy41ODUwODMsMTEuNjY2MTMwOSAxMy4yMDI3NTgzLDExLjI1NDI4MjQgTDkuMjg2NzQzNTQsNS44MDAzMjE0OCBDOC45MDQ0MTg4Miw1LjM4ODQ3MzAzIDguOTA0NDE4ODIsNC43MjA3MzQ3OCA5LjI4Njc0MzU0LDQuMzA4ODg2MzMgWiIvPg0KPC9zdmc+DQo=');
-                    }
-                }
-            }
-        }
-    }
-}
+@use '../abstracts/variables';
+@use '../abstracts/mixins';
+@use '../abstracts/functions';
+
+//  Spacing
+// ------------------------
+.pep-spacing-element-negative {
+    @include mixins.pep-spacing-element-negative();
+}
+
+.pep-spacing-element {
+    @include mixins.pep-spacing-element();
+}
+//  Floating alignment
+// ------------------------
+.pull-right {
+    float: right !important;
+}
+
+.pull-left {
+    float: left !important;
+}
+
+[dir='rtl'] {
+    .pull-right {
+        float: left !important;
+    }
+
+    .pull-left {
+        float: right !important;
+    }
+}
+
+
+//  Text alignment
+// ------------------------
+.text-align-center,
+.text-align-3 {
+    text-align: center !important;
+    justify-self: center !important;
+    justify-content: center !important;
+}
+.text-align-right,
+.text-align-2 {
+    text-align: right !important;
+    justify-self: right !important;
+    justify-content: right !important;
+}
+.text-align-left,
+.text-align-0,
+.text-align-1 {
+    text-align: left !important;
+    justify-self: left !important;
+    justify-content: left !important;
+}
+
+//  Roundness
+// ------------------------
+.roundness-sm {
+    border-radius: variables.$border-radius-sm;
+}
+
+.roundness-md {
+    border-radius: variables.$border-radius-md;
+}
+
+.roundness-lg {
+    border-radius: variables.$border-radius-lg;
+}
+
+//  Modal - General
+// -----------------------------------------------------
+.modal-footer {
+    .pepperi-button, .pep-button {
+        margin: 0 variables.$spacing-xs;
+    }
+}
+
+// -----------------------------------------------------
+//  Override material style
+// -----------------------------------------------------
+// remove the circle when checkbox clicked
+.mat-ripple-element {
+    display: none;
+}
+
+//  Tabs.
+// -----------------------------------------------------
+.mat-tab-group {
+    .mat-tab-header {
+        .mat-tab-labels {
+            height: variables.$tabs-labels-height;
+            box-sizing: content-box;
+
+            .mat-tab-label {
+                height: inherit;
+                opacity: unset;
+                min-width: unset;
+                padding: 0 variables.$spacing-2xl;
+
+                &.mat-tab-label-active {
+                    font-weight: variables.$font-weight-bold;
+                }
+            }
+        }
+    }
+
+    $tabs-z-index: variables.$z-index-lowest;
+
+    .mat-tab-body-wrapper {
+        // margin: 0 calc(#{variables.$content-margin} * -1);
+
+        .mat-tab-body {
+            z-index: $tabs-z-index - 1;
+            padding-top: variables.$content-padding;
+
+            &:not(.mat-tab-body-active) {
+                .mat-tab-body-content {
+                    overflow: hidden;
+                }
+            }
+
+            &.mat-tab-body-active {
+                z-index: $tabs-z-index;
+
+                .mat-tab-body-content {
+                    padding: 0 variables.$content-padding variables.$content-padding;
+                    line-height: normal;
+                }
+            }
+        }
+    }
+
+    &.fixed-header {
+        .mat-tab-header {
+            // position: fixed;
+            position: unset;
+            z-index: $tabs-z-index + 1;
+            width: 100%;
+            // @include mixins.mat-tabs-fixed-header-width(variables.$side-bar-width);
+        }
+
+        .mat-tab-body-wrapper {
+            // margin-top: variables.$tabs-labels-height;
+            margin-top: unset;
+        }
+    }
+}
+
+//  Accordion.
+// -----------------------------------------------------
+.mat-accordion .mat-expansion-panel {
+    mat-expansion-panel-header:focus {
+        outline-width: 0;
+    }
+}
+
+.pepperi-accordion, .pep-accordion {
+    &.mat-accordion .mat-expansion-panel {
+        padding: 0 variables.$content-padding;
+        margin: 0 calc(#{variables.$content-padding} * -1);
+
+        &:first-child {
+            .mat-expansion-panel-header {
+                border-radius: variables.$spacing-xs variables.$spacing-xs 0 0;
+            }
+        }
+
+        .mat-expansion-panel-header {
+            flex-flow: row-reverse;
+            height: variables.$spacing-5xl;
+            padding: variables.$spacing-lg variables.$spacing-sm variables.$spacing-sm;
+
+            .mat-expansion-panel-header-title {
+                display: flex;
+                align-items: center;
+                margin: 0;
+                padding: variables.$spacing-xs variables.$spacing-lg;
+            }
+
+            .mat-expansion-indicator {
+                // height: 1.5rem;
+                display: flex;
+                transform: scale(1.25) !important;
+
+                &:after {
+                    @include mixins.select-arrow();
+                    border-style: unset;
+                    display: unset;
+                    border-width: unset;
+                    transform: unset;
+                    padding: unset;
+                    padding-top: variables.$spacing-xs;
+                }
+            }
+
+            &.mat-expanded {
+                .mat-expansion-indicator {
+                    transform: rotate(180deg) scale(1.25) !important;
+                }
+
+                .mat-expansion-panel-header-title {
+                    font-weight: variables.$font-weight-bold;
+                }
+            }
+        }
+
+        .mat-expansion-panel-content {
+            .mat-expansion-panel-body {
+                padding: variables.$content-padding 0;
+            }
+        }
+
+        &:first-of-type,
+        &:last-of-type {
+            border-radius: 0;
+        }
+    }
+}
+
+.pepperi-accordion2, .pep-accordion2 {
+    &.mat-accordion .mat-expansion-panel {
+        // padding: 0 variables.$content-padding;
+        // margin: 0 calc(#{variables.$content-padding} * -1);
+
+        .mat-expansion-panel-header {
+            flex-flow: row-reverse;
+            height: variables.$spacing-4xl;
+            // padding: variables.$spacing-lg 0 variables.$spacing-sm;
+            padding: 0;
+
+            .mat-expansion-panel-header-title {
+                display: flex;
+                align-items: center;
+                margin: 0;
+                padding: variables.$spacing-xs 0;
+
+                .mat-icon {
+                    height: 1rem;
+                    width: 1rem;
+                    @include mixins.align-center();
+                }
+            }
+
+            // &.mat-expanded {
+            //     .mat-expansion-panel-header-title {
+            //         font-weight: variables.$font-weight-bold;
+            //     }
+            // }
+        }
+
+        .mat-expansion-panel-content {
+            .mat-expansion-panel-body {
+                padding: variables.$spacing-sm variables.$spacing-xs;
+            }
+        }
+
+        &:first-of-type,
+        &:last-of-type {
+            border-radius: 0;
+        }
+    }
+}
+
+.pepperi-chips, .pep-chips {
+    &.mat-accordion .mat-expansion-panel {
+        $shadow-bottom: variables.$spacing-xl;
+
+        margin: calc(#{variables.$spacing-sm} * -1) calc(#{variables.$spacing-lg} * -1) variables.$spacing-md !important;
+        // margin-bottom: variables.$spacing-md;
+        border-radius: unset;
+
+        &.mat-expansion-panel-spacing {
+            margin: 0;
+        }
+
+        .mat-expansion-panel-header {
+            padding: 0;
+
+            .mat-content {
+                overflow: inherit;
+            }
+
+            .mat-expansion-panel-header-title {
+                flex-grow: 0;
+                width: fit-content;
+                height: variables.$spacing-3xl;
+                border-radius: 1.5rem; // variables.$border-radius-md;
+                padding: 0 variables.$spacing-xl;
+                margin: variables.$spacing-sm variables.$spacing-lg 0; // For the shadow
+                display: grid;
+                align-items: center;
+                // margin-bottom: variables.$shadow-bottom;
+            }
+
+            &.mat-expanded {
+                .mat-expansion-panel-header-title {
+                    position: absolute;
+                    font-weight: variables.$font-weight-bold;
+                }
+            }
+
+            &.separator {
+                height: variables.$spacing-sm;
+
+                .mat-expansion-panel-header-title {
+                    width: 100%;
+                    height: 1px;
+                }
+            }
+        }
+
+        .mat-expansion-panel-content {
+            .mat-expansion-panel-body {
+                padding: 0 calc(#{variables.$content-padding} + #{variables.$spacing-md});
+
+                .expansion-content {
+                    padding: 0;
+                    margin-top: variables.$spacing-md;
+                    margin-bottom: 0;
+                    list-style-type: disc;
+                    list-style-position: inside;
+
+                    li {
+                        margin-bottom: variables.$spacing-sm;
+
+                        &:hover,
+                        &.active {
+                            cursor: pointer;
+                            font-weight: variables.$font-weight-bold;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+// Auto complete.
+// -----------------------------------------------------
+.mat-autocomplete-panel {
+    margin-top: variables.$spacing-sm;
+    border-radius: variables.$border-radius-md;
+
+    .mat-option:active {
+        transition: 0.3ms;
+    }
+}
+
+//  Menu.
+// -----------------------------------------------------
+.mat-menu-panel {
+    box-sizing: content-box;
+
+    .mat-menu-content {
+        padding: 0 !important;
+
+        .mat-menu-item {
+            padding: 0 variables.$content-padding;
+            display: flex;
+            align-items: center;
+        }
+    }
+
+    &.pep-select-menu {
+        .mat-menu-content {
+            padding: 0 !important;
+
+            .mat-menu-item {
+                height: variables.$spacing-4xl;
+                padding: 0 variables.$spacing-md;
+                border-radius: unset;
+            }
+        }    
+    }
+
+    &.pep-action-menu,
+    &.pep-action-select-menu {
+        .mat-menu-content {
+            padding: variables.$spacing-sm !important;
+            
+            .mat-menu-item {
+                height: variables.$spacing-3xl;
+                padding: 0 variables.$spacing-sm;
+                border-radius: variables.$border-radius-md;
+            }
+        }
+    }
+}
+
+//  Dialog
+// -------------------------------------------------
+.mat-dialog-container {
+    border-radius: 0.25rem !important; // variables.$border-radius-md
+}
+
+.pepperi-dialog, .pep-dialog {
+    max-width: 90vw;
+    min-width: 18rem;
+
+    $dialog-content-padding: variables.$content-padding;
+
+    .mat-dialog-container {
+        border-radius: 0.25rem !important;
+        padding: variables.$content-padding;
+
+        .dialog-header-container {
+            height: variables.$dialog-header-height;
+            margin-bottom: 0;
+            display: grid;
+            grid-template-columns: 1fr auto;
+            grid-template-areas: "title close";
+
+            .dialog-title {
+                @include mixins.ellipsis();
+                grid-area: title;
+
+                &:after {
+                    content: ' ';
+                    display: block;
+                    width: variables.$spacing-sm;
+                }
+            }
+
+            .dialog-close {
+                grid-area: close;
+            }
+        }
+
+        .mat-dialog-content {
+            padding: $dialog-content-padding variables.$spacing-sm;
+            margin: 0 calc(#{variables.$spacing-sm} * -1);
+            // margin: 0;
+            border: none;
+            display: grid;
+            overflow: auto;
+            -webkit-overflow-scrolling: touch;
+            min-height: 5rem;
+            max-height: 65vh;
+            // @include mixins.box-sizing(border-box);
+            box-sizing: border-box;
+            // grid-row: mat-dialog-content;
+            // max-height: unset; // This is cause a bug in the email dialog that the actions buttons are not displayed.
+        }
+
+        .mat-dialog-actions {
+            justify-content: flex-end;
+            grid-row: mat-dialog-actions;
+            margin-bottom: 0;
+            padding: variables.$spacing-md 0 0; // override material padding.
+            min-height: unset;
+        }
+
+    }
+
+    &.small {
+        max-width: 10rem !important;
+        height: auto;
+    }
+
+    &.regular {
+        max-width: 34rem !important;
+        height: auto;
+    }
+
+    &.large {
+        max-width: 40rem !important;
+        width: 90vw;
+        height: auto;
+        max-height: 90vh;
+
+        .mat-dialog-container {
+            .mat-dialog-content {
+                $border-size: 1px;
+                max-height: calc(90vh - (#{variables.$dialog-header-height} + (#{variables.$content-padding} * 2) + (#{$border-size} * 2))); 
+            }
+        }
+    }
+
+    &.full-screen {
+        $dialog-height: 95vh;
+
+        max-width: 95vw !important;
+        width: 95vw !important;
+        max-height: $dialog-height !important;
+        height: $dialog-height !important;
+
+        .mat-dialog-container {
+            .mat-dialog-content {
+                $height: calc(100% - ((#{$dialog-content-padding} * 2)));
+                height: $height;
+                max-height: $height;
+            }
+        }
+    }
+
+    &.inline {
+        .mat-dialog-container {
+            overflow: hidden;
+
+            .gallery-dialog {
+                .mat-dialog-content {
+                    $height: calc(100% - ((#{$dialog-content-padding} * 2)));
+                    height: $height;
+                    max-height: $height;
+                }
+            }
+
+            .iframe-container {
+                height: 100%;
+
+                .mat-dialog-content {
+                    $border-size: 1px;
+                    max-height: calc(100% - ((#{$dialog-content-padding} * 2) + (#{$border-size} * 2)));
+                    height: inherit;
+                }
+            }
+        }
+    }
+}
+
+// -----------------------------------------------------
+// Override bootstrap css.
+// -----------------------------------------------------
+.modal {
+    z-index: variables.$z-index-high;
+}
+.modal-backdrop {
+    z-index: variables.$z-index-high - 2;
+}
+
+@mixin declare-system-base-theme() {
+    .header-content {
+        background: functions.get-pep-color(color-system-primary-invert, color-base);
+    }
+
+    .settings-bar-container {
+        background: functions.get-pep-color(color-system-primary-invert, color-base);
+    }
+
+    .splitter {
+        height: 1px;
+        @include mixins.pep-border(border-bottom);
+    }
+
+    .pepperi-border-top, .pep-border-top {
+        @include mixins.pep-border(border-top);
+    }
+
+    .pepperi-border-bottom, .pep-border-bottom {
+        @include mixins.pep-border(border-bottom);
+    }
+
+    .pepperi-loading-spinner, .pep-loading-spinner {
+        background-color: functions.get-pep-color(color-top-header, color-base);
+    }
+
+    //  Tabs.
+    // -------------------------------------------------
+    .mat-tab-group {
+        .mat-tab-header,
+        .mat-tab-header:focus {
+            border-bottom: unset !important;
+        }
+
+        .mat-tab-header {
+            .mat-tab-labels {
+                @include mixins.pep-border(border-bottom);
+
+                .mat-tab-label {
+                    color: functions.get-pep-color(color-text, color-dimmed);
+
+                    &:hover {
+                        @include mixins.state-weak-hover();
+                    }
+
+                    // Focused
+                    &.cdk-focused {
+                        background-color: unset;
+                        @include mixins.state-weak-active();
+                    }
+
+                    &.mat-tab-label-active {
+                        @include mixins.state-weak-default();
+                        color: functions.get-pep-color(color-text, color-main);
+
+                        &:hover {
+                            @include mixins.state-weak-hover();
+                        }
+                    }
+
+                    &.mat-tab-disabled {
+                        @include mixins.state-weak-disable();
+                    }
+                }
+            }
+
+            .mat-ink-bar {
+                display: none;
+            }
+
+            // .mat-ink-bar:before { }
+            // .mat-ink-bar:after { }
+        }
+
+        // .mat-tab-body-wrapper {
+        //     .mat-tab-body-content {
+        //     }
+        // }
+
+        &.fixed-header {
+            .mat-tab-header {
+                background: functions.get-pep-color(color-system-primary-invert, color-base);
+            }
+        }
+    }
+
+    //  Accordion.
+    // -----------------------------------------------------
+    .pepperi-accordion, .pep-accordion {
+        &.mat-accordion .mat-expansion-panel {
+            box-shadow: unset;
+
+            .mat-expansion-panel-header {
+                @include mixins.pep-border(border-top);
+
+                &.mat-expanded {
+                    @include mixins.pep-border(border-bottom);
+
+                    .mat-expansion-panel-header-title {
+                        color: functions.get-pep-color(color-text, color-main);
+                    }
+                }
+
+                .mat-expansion-panel-header-title {
+                    color: functions.get-pep-color(color-text, color-dimmed);
+                }
+            }
+
+            .mat-expansion-panel-header.cdk-keyboard-focused,
+            .mat-expansion-panel-header.cdk-program-focused,
+            .mat-expansion-panel-header:hover {
+                @include mixins.state-weak-hover();
+            }
+
+            &:first-child {
+                .mat-expansion-panel-header {
+                    border-top: unset;
+                }
+            }
+
+            &:last-child {
+                .mat-expansion-panel-header {
+                    @include mixins.pep-border(border-bottom);
+                }
+            }
+        }
+    }
+
+    .pepperi-accordion2, .pep-accordion2 {
+        &.mat-accordion .mat-expansion-panel {
+            box-shadow: unset;
+
+            .mat-expansion-panel-header {
+                @include mixins.pep-border(border-top);
+
+                .mat-expansion-panel-header-title {
+                    color: functions.get-pep-color(color-text, color-main);
+                }
+            }
+
+            .mat-expansion-panel-header.cdk-keyboard-focused,
+            .mat-expansion-panel-header.cdk-program-focused,
+            .mat-expansion-panel-header:hover {
+                @include mixins.state-weak-hover();
+            }
+
+            &:last-child {
+                @include mixins.pep-border(border-bottom);
+            }
+        }
+    }
+
+    //  Accordion - chips.
+    // -----------------------------------------------------
+    .pepperi-chips, .pep-chips {
+        &.mat-accordion .mat-expansion-panel {
+            box-shadow: unset;
+
+            .mat-expansion-panel-header:not(.separator) {
+                &:hover {
+                    background: unset;
+                }
+
+                &.mat-expanded {
+                    .mat-expansion-panel-header-title {
+                        @include mixins.state-weak-active();
+                        background: functions.get-pep-color(color-system-primary-invert, color-base);
+                        @include mixins.inline(functions.get-pep-color(color-text, color-main));
+                        box-shadow: functions.get-pep-shadow(shadow-md, soft);
+
+                        &:hover {
+                            @include mixins.state-weak-hover();
+                        }
+
+                        &:after {
+                            z-index: variables.$z-index-lowest !important;
+                        }
+                    }
+                }
+
+                .mat-expansion-panel-header-title {
+                    @include mixins.state-weak-default();
+
+                    &:hover {
+                        @include mixins.state-weak-hover();
+                    }
+                }
+            }
+
+            .mat-expansion-panel-body {
+                .expansion-content {
+                    li {
+                        color: functions.get-pep-color(color-text, color-dimmed);
+
+                        &:hover,
+                        &.active {
+                            color: functions.get-pep-color(color-text, color-main);
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    // Auto complete.
+    // -------------------------------------------------
+    .mat-autocomplete-panel {
+        @include mixins.pep-border(border);
+
+        .mat-option:active {
+            background: functions.get-pep-color(color-system-primary, color-tran-40) !important;
+        }
+    }
+
+    // Modals overlay pane
+    // -------------------------------------------------
+    // .cdk-overlay-pane {
+    //     // box-shadow: functions.get-pep-shadow(shadow-sm, hard);
+    // }
+
+    //  Menu
+    // -------------------------------------------------
+    .mat-menu-panel {
+        box-shadow: functions.get-pep-shadow(shadow-sm, hard);
+        border: 1px solid functions.get-pep-color(color-system-primary, color-base);
+        
+        max-width: 30rem;
+        min-height: unset;
+        
+        .mat-menu-item {
+            background: functions.get-pep-color(color-system-primary-invert, color-base);
+
+            &:hover {
+                @include mixins.state-weak-hover();
+            }
+            &:active {
+                @include mixins.state-weak-active(color-weak, false);
+                background: functions.get-pep-color(color-weak, color-tran-50) !important;
+            }
+            &:disabled {
+                @include mixins.state-weak-disable();
+                background: unset !important;
+            }
+
+            &.selected {
+                background: functions.get-pep-color(color-system-success, color-tran-20);
+            }
+        }
+    }
+
+    //  Dialog
+    // -------------------------------------------------
+    .mat-dialog-container {
+        box-shadow: unset;
+        // box-shadow: functions.get-pep-shadow(shadow-sm, hard);
+        border: 1px solid functions.get-pep-color(color-system-primary, color-base);
+
+        .dialog-header-container {
+            @include mixins.pep-border(border-bottom);
+        }
+    }
+
+    /*----------------- ngx Overrides ---------------------*/
+    // Temporary until we'll write it again.
+    #cartSummary {
+        $border-color: functions.get-pep-color(color-system-primary, color-tran-50);
+
+        .carousel-indicators {
+            margin-bottom: 0px;
+            bottom: 0px;
+
+            li {
+                background-color: $border-color;
+                height: 0.75rem;
+                width: 0.75rem;
+                margin: 0 0.25rem;
+
+                &.active {
+                    background-color: functions.get-pep-color(color-system-primary, color-tran-60);
+                }
+            }
+        }
+
+        .carousel-control {
+            width: 100%;
+            background: none;
+            bottom: 15px;
+            top: unset;
+
+            .icon-next {
+                background-color: $border-color;
+                height: 1.5rem;
+                width: 1.5rem;
+                border-radius: 1rem;
+                right: 25px;
+                cursor: pointer !important;
+
+                &:before {
+                    content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDI0IDI0Ij4NCiAgPHBhdGggZmlsbC1vcGFjaXR5PSIuNSIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOS4yODY3NDM1NCw0LjMwODg4NjMzIEM5LjY2OTA2ODI2LDMuODk3MDM3ODkgMTAuMjg4OTM5MSwzLjg5NzAzNzg5IDEwLjY3MTI2MzgsNC4zMDg4ODYzMyBMMTYuNDI2NTEyOSwxMC41MDg1NjQ5IEMxNy4xOTExNjI0LDExLjMzMjI2MTcgMTcuMTkxMTYyNCwxMi42Njc3MzgzIDE2LjQyNjUxMjksMTMuNDkxNDM1MSBMMTAuNjcxMjYzOCwxOS42OTExMTM3IEMxMC4yODg5MzkxLDIwLjEwMjk2MjEgOS42NjkwNjgyNiwyMC4xMDI5NjIxIDkuMjg2NzQzNTQsMTkuNjkxMTEzNyBDOC45MDQ0MTg4MiwxOS4yNzkyNjUyIDguOTA0NDE4ODIsMTguNjExNTI3IDkuMjg2NzQzNTQsMTguMTk5Njc4NSBMMTMuMjAyNzU4MywxMi43NDU3MTc2IEMxMy41ODUwODMsMTIuMzMzODY5MSAxMy41ODUwODMsMTEuNjY2MTMwOSAxMy4yMDI3NTgzLDExLjI1NDI4MjQgTDkuMjg2NzQzNTQsNS44MDAzMjE0OCBDOC45MDQ0MTg4Miw1LjM4ODQ3MzAzIDguOTA0NDE4ODIsNC43MjA3MzQ3OCA5LjI4Njc0MzU0LDQuMzA4ODg2MzMgWiIvPg0KPC9zdmc+DQo=');
+                    position: relative;
+                    top: -6px;
+                }
+            }
+
+            .icon-prev {
+                background-color: $border-color;
+                height: 1.5rem;
+                width: 1.5rem;
+                border-radius: 1rem;
+                left: 25px;
+                cursor: pointer !important;
+
+                &:before {
+                    content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDI0IDI0Ij4NCiAgPHBhdGggZmlsbC1vcGFjaXR5PSIuNSIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTQuNzEzMjU2NSw1LjgwMDMyMTQ4IEwxMC43OTcyNDE3LDExLjI1NDI4MjQgQzEwLjQxNDkxNywxMS42NjYxMzA5IDEwLjQxNDkxNywxMi4zMzM4NjkxIDEwLjc5NzI0MTcsMTIuNzQ1NzE3NiBMMTQuNzEzMjU2NSwxOC4xOTk2Nzg1IEMxNS4wOTU1ODEyLDE4LjYxMTUyNyAxNS4wOTU1ODEyLDE5LjI3OTI2NTIgMTQuNzEzMjU2NSwxOS42OTExMTM3IEMxNC4zMzA5MzE3LDIwLjEwMjk2MjEgMTMuNzExMDYwOSwyMC4xMDI5NjIxIDEzLjMyODczNjIsMTkuNjkxMTEzNyBMNy41NzM0ODcwOCwxMy40OTE0MzUxIEM2LjgwODgzNzY0LDEyLjY2NzczODMgNi44MDg4Mzc2NCwxMS4zMzIyNjE3IDcuNTczNDg3MDgsMTAuNTA4NTY0OSBMMTMuMzI4NzM2Miw0LjMwODg4NjMzIEMxMy43MTEwNjA5LDMuODk3MDM3ODkgMTQuMzMwOTMxNywzLjg5NzAzNzg5IDE0LjcxMzI1NjUsNC4zMDg4ODYzMyBDMTUuMDk1NTgxMiw0LjcyMDczNDc4IDE1LjA5NTU4MTIsNS4zODg0NzMwMyAxNC43MTMyNTY1LDUuODAwMzIxNDggWiIvPg0KPC9zdmc+DQo=');
+                    position: relative;
+                    top: -6px;
+                }
+            }
+        }
+
+        &.rtl {
+            .carousel-control {
+                .icon-next {
+                    right: auto;
+                    left: 25px;
+
+                    &:before {
+                        content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDI0IDI0Ij4NCiAgPHBhdGggZmlsbC1vcGFjaXR5PSIuNSIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTQuNzEzMjU2NSw1LjgwMDMyMTQ4IEwxMC43OTcyNDE3LDExLjI1NDI4MjQgQzEwLjQxNDkxNywxMS42NjYxMzA5IDEwLjQxNDkxNywxMi4zMzM4NjkxIDEwLjc5NzI0MTcsMTIuNzQ1NzE3NiBMMTQuNzEzMjU2NSwxOC4xOTk2Nzg1IEMxNS4wOTU1ODEyLDE4LjYxMTUyNyAxNS4wOTU1ODEyLDE5LjI3OTI2NTIgMTQuNzEzMjU2NSwxOS42OTExMTM3IEMxNC4zMzA5MzE3LDIwLjEwMjk2MjEgMTMuNzExMDYwOSwyMC4xMDI5NjIxIDEzLjMyODczNjIsMTkuNjkxMTEzNyBMNy41NzM0ODcwOCwxMy40OTE0MzUxIEM2LjgwODgzNzY0LDEyLjY2NzczODMgNi44MDg4Mzc2NCwxMS4zMzIyNjE3IDcuNTczNDg3MDgsMTAuNTA4NTY0OSBMMTMuMzI4NzM2Miw0LjMwODg4NjMzIEMxMy43MTEwNjA5LDMuODk3MDM3ODkgMTQuMzMwOTMxNywzLjg5NzAzNzg5IDE0LjcxMzI1NjUsNC4zMDg4ODYzMyBDMTUuMDk1NTgxMiw0LjcyMDczNDc4IDE1LjA5NTU4MTIsNS4zODg0NzMwMyAxNC43MTMyNTY1LDUuODAwMzIxNDggWiIvPg0KPC9zdmc+DQo=');
+                    }
+                }
+
+                .icon-prev {
+                    left: auto;
+                    right: 25px;
+
+                    &:before {
+                        content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDI0IDI0Ij4NCiAgPHBhdGggZmlsbC1vcGFjaXR5PSIuNSIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOS4yODY3NDM1NCw0LjMwODg4NjMzIEM5LjY2OTA2ODI2LDMuODk3MDM3ODkgMTAuMjg4OTM5MSwzLjg5NzAzNzg5IDEwLjY3MTI2MzgsNC4zMDg4ODYzMyBMMTYuNDI2NTEyOSwxMC41MDg1NjQ5IEMxNy4xOTExNjI0LDExLjMzMjI2MTcgMTcuMTkxMTYyNCwxMi42Njc3MzgzIDE2LjQyNjUxMjksMTMuNDkxNDM1MSBMMTAuNjcxMjYzOCwxOS42OTExMTM3IEMxMC4yODg5MzkxLDIwLjEwMjk2MjEgOS42NjkwNjgyNiwyMC4xMDI5NjIxIDkuMjg2NzQzNTQsMTkuNjkxMTEzNyBDOC45MDQ0MTg4MiwxOS4yNzkyNjUyIDguOTA0NDE4ODIsMTguNjExNTI3IDkuMjg2NzQzNTQsMTguMTk5Njc4NSBMMTMuMjAyNzU4MywxMi43NDU3MTc2IEMxMy41ODUwODMsMTIuMzMzODY5MSAxMy41ODUwODMsMTEuNjY2MTMwOSAxMy4yMDI3NTgzLDExLjI1NDI4MjQgTDkuMjg2NzQzNTQsNS44MDAzMjE0OCBDOC45MDQ0MTg4Miw1LjM4ODQ3MzAzIDguOTA0NDE4ODIsNC43MjA3MzQ3OCA5LjI4Njc0MzU0LDQuMzA4ODg2MzMgWiIvPg0KPC9zdmc+DQo=');
+                    }
+                }
+            }
+        }
+    }
+}