@import '../abstracts/mixins';

// -----------------------------------------------------
//  Override material style
// -----------------------------------------------------
mat-select {

    .mat-select-trigger {
        display: flex;
        align-content: center;
        height: inherit;
    }

    .mat-select-value {
        max-width: inherit; // Default is 0
        display: flex;
        align-self: center;
    }

    .mat-select-arrow {
        width: 1rem;
        height: inherit;
        margin: 0 0.25rem;
        margin-top: 0.125rem;
        float: right;

        &:after {
            @include select-arrow();
            cursor: pointer;
        }
    }
    
    &.mat-select-disabled {
        .mat-select-arrow {
            &:after {
                content: none;
            }
        }
    }
    
    &.right-alignment {
        direction: rtl;
        
    }
}

.mat-select-disabled {
    pointer-events: none;
}

.mat-select-panel {
    &.ng-animating {
        /* display: none;*/
    }

    .mat-pseudo-checkbox {
        width: 1rem;
        height: 1rem;
        border-radius: $border-radius-md;
    }

    .mat-pseudo-checkbox::after {
        width: 0;
        height: 0;
        // @include box-sizing(border-box);
        // top: 0.3rem;
        // left: 0.2rem;
        // width: 0.5rem;
        // height: 0.2rem;
    }

    .mat-pseudo-checkbox.mat-pseudo-checkbox-checked {
        content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNy41MTExNjM5LDcuMDAwNjI5NjggQzE3LjEzNTI3Myw3LjAxMDk5Mjg1IDE2Ljc3OTE1ODIsNy4xNjgzMTkwOSAxNi41MTYzMjg4LDcuNDM3NzU0MjEgQzE0LjIyNjEzMzksOS43MzI2NTE5MiAxMi4xMzU2Nzc4LDExLjk4MjQwMjIgOS45MzY5MTEzNSwxNC4yMjgxOTczIEw3LjM1MTc4NzA4LDEyLjE1NTYxMiBDNy4wNTIyMDMwMywxMS45MTUzODI5IDYuNjY5NzI4MTIsMTEuODA0MjI0MiA2LjI4ODE2OTY2LDExLjg0NjYyMjMgQzUuOTA1Njk0NzUsMTEuODg5MDE1NSA1LjU1NzEyODY0LDEyLjA4MTIwMDggNS4zMTY4OTcwNiwxMi4zODE3MzUxIEM1LjA3NzYwODQ2LDEyLjY4MTMxOTEgNC45NjY0NDk4MSwxMy4wNjM3OTQgNS4wMDg4NDc4NywxMy40NDUzNTI1IEM1LjA1MTI0MTExLDEzLjgyNzgyNzQgNS4yNDM0MjYzOCwxNC4xNzYzOTM1IDUuNTQyOTk1OTUsMTQuNDE2NjI1MSBMOS4xNjA1NzgyLDE3LjMxMDY5MDkgQzkuNzM5MDA1NDksMTcuNzcwNDEzMiAxMC41Njk5NCwxNy43MjIzNzE3IDExLjA4OTk1NTQsMTcuMTk3NjQxNCBDMTMuNjkxOTYxNywxNC41OTAwODgxIDE2LjAyMzYxNDEsMTIuMDI4MzU3NiAxOC41NjYyOTIxLDkuNDgwMTMyNjIgQzE4Ljk5MTE2NSw5LjA2Mjc4NDIxIDE5LjExNzQxODcsOC40Mjc4MjYxOCAxOC44ODQ3MTE2LDcuODgwNDg1OTggQzE4LjY1MTA3NjEsNy4zMzIyMDUyMSAxOC4xMDY1NDU2LDYuOTgzNjE0OTkgMTcuNTExMTYzOSw3LjAwMDU5MzUxIEwxNy41MTExNjM5LDcuMDAwNjI5NjggWiIvPgogIDwvc3ZnPg==");
    }
}


@mixin pepperi-select-theme($pepperi-theme) {
    // -----------------------------------------------------
    //  Override material style
    // -----------------------------------------------------
    mat-select {
        outline: none;

        &.mat-select-disabled {
            .mat-select-value {
                color: get-pepperi-color($pepperi-theme, color-text, color-dimmed);
            }
        }
    }

    .mat-select-arrow-wrapper {
        // @include flexbox;
        transform: unset !important;
        vertical-align: unset;

        .mat-select-arrow {
            background: url(#../../../assets/symbol-defs.svg) no-repeat center center fixed;
            border-left: 1px solid Transparent;
            border-right: 0px solid Transparent;
            border-top: 0px solid Transparent;

            &:after {
                color: get-pepperi-color($pepperi-theme, color-system-primary, color-base);
            }
        }
    }

    .mat-select-panel {
        &.ng-animating {
            /* display: none;*/
        }

        .mat-option {
            background: get-pepperi-color($pepperi-theme, color-system-primary-invert, color-base);

            //&.mat-active,
            &:hover {
                @include state-weak-hover($pepperi-theme);
            }
            &:active {
                @include state-weak-active($pepperi-theme, color-weak, false);
                background: get-pepperi-color($pepperi-theme, color-weak, color-tran-50) !important;
            }
            &:disabled {
                @include state-weak-disable($pepperi-theme);
            }
        }
        .mat-option.mat-selected {
            @include state-weak-default($pepperi-theme);
            // box-shadow: get-pepperi-shadow($pepperi-theme, shadow-xs, soft);

            //&.mat-active,
            &:hover {
                @include state-weak-hover($pepperi-theme);
            }
            &:active {
                @include state-weak-active($pepperi-theme, color-weak, false);
                background: get-pepperi-color($pepperi-theme, color-weak, color-tran-50) !important;
            }
            &:disabled {
                @include state-weak-disable($pepperi-theme);
            }
        }

        .mat-pseudo-checkbox {
            @include state-regular-default($pepperi-theme, true);

            &:hover {
                @include state-regular-hover($pepperi-theme, true);
            }
            &:active {
                @include state-regular-active($pepperi-theme, true);
            }
            &:disabled {
                @include state-regular-disable($pepperi-theme, true);
            }
        }

        .mat-pseudo-checkbox.mat-pseudo-checkbox-checked,
        .mat-pseudo-checkbox.mat-pseudo-checkbox-indeterminate {
            @include state-regular-default($pepperi-theme, true);
            @include inline(get-pepperi-color($pepperi-theme, color-system-primary, color-flat-r-10), 1px, solid, true);

            &:hover {
                @include state-regular-hover($pepperi-theme, true);
            }
            &:active {
                @include state-regular-active($pepperi-theme, true);
            }
            &:disabled {
                @include state-regular-disable($pepperi-theme, true);
            }
        }

        .mat-pseudo-checkbox::after {
            color: get-pepperi-color($pepperi-theme, color-text, color-main) !important;
        }
    }
}