@import '../src/core/style/abstracts/variables';

@mixin pepperi-color-picker-component-theme($pepperi-theme) {
    .pepperi-color-picker-container {

        .mat-dialog-content {
        }

        .color-chooser-content {
            
            .current-color {
                
            }

            .current-hue {
                .mat-slider {
                    .mat-slider-wrapper {
                        background: linear-gradient(to right, 
                            hsl(0, 100%, 50%) 0%, 
                            hsl(60, 100%, 50%) 17%, 
                            hsl(120, 100%, 50%) 33%, 
                            hsl(180, 100%, 50%) 50%, 
                            hsl(240, 100%, 50%) 67%, 
                            hsl(300, 100%, 50%) 83%, 
                            hsl(360, 100%, 50%) 100%);
                    }
                }

                &.main {
                }
                &.success {
                    .mat-slider {
                        .mat-slider-wrapper {
                            background: linear-gradient(to right, 
                                hsl(70, 100%, 50%) 0%, 
                                hsl(150, 100%, 50%) 100%);
                        }
                    }
                }
                &.caution {
                    .mat-slider {
                        .mat-slider-wrapper {
                            background: linear-gradient(to right, 
                                hsl(340, 100%, 50%) 0%, 
                                hsl(20, 100%, 50%) 100%);
                        }
                    }
                }
            }

            .current-saturation {
                .mat-slider {
                    .mat-slider-wrapper {
                        background: linear-gradient(to right, 
                            hsl(var(--pep-color-picker-current-hue), 0.01%, 50%) 0%, 
                            hsl(var(--pep-color-picker-current-hue), 100%, 50%) 100%);
                    }
                }

                &.main {
                }
                &.success {
                    .mat-slider {
                        .mat-slider-wrapper {
                            background: linear-gradient(to right, 
                                hsl(var(--pep-color-picker-current-hue), 50%, 50%) 50%, 
                                hsl(var(--pep-color-picker-current-hue), 100%, 50%) 100%);
                        }
                    }
                }
                &.caution {
                       .mat-slider {
                        .mat-slider-wrapper {
                            background: linear-gradient(to right, 
                                hsl(var(--pep-color-picker-current-hue), 75%, 50%) 75%, 
                                hsl(var(--pep-color-picker-current-hue), 100%, 50%) 100%);
                        }
                    }
                }
            }

            .current-lightness {
                .mat-slider {
                    .mat-slider-wrapper {
                        background: linear-gradient(to right, 
                            hsl(var(--pep-color-picker-current-hue), 100%, 100%) 0%, 
                            hsl(var(--pep-color-picker-current-hue), 100%, 50%) 50%, 
                            hsl(var(--pep-color-picker-current-hue), 100%, 0.01%) 100%);
                    }
                }

                &.main {
                    .mat-slider {
                        .mat-slider-wrapper {
                            background: linear-gradient(to right, 
                                hsl(var(--pep-color-picker-current-hue), 100%, 10%) 0%, 
                                hsl(var(--pep-color-picker-current-hue), 100%, 5%) 5%, 
                                hsl(var(--pep-color-picker-current-hue), 100%, 0.01%) 10%);
                        }
                    }
                }
                &.success {
                    .mat-slider {
                        .mat-slider-wrapper {
                            background: linear-gradient(to right, 
                                hsl(var(--pep-color-picker-current-hue), 100%, 65%) 10%, 
                                hsl(var(--pep-color-picker-current-hue), 100%, 35%) 35%, 
                                hsl(var(--pep-color-picker-current-hue), 100%, 10%) 65%);
                        }
                    }
                }
                &.caution {
                    .mat-slider {
                        .mat-slider-wrapper {
                            background: linear-gradient(to right, 
                                hsl(var(--pep-color-picker-current-hue), 100%, 75%) 25%, 
                                hsl(var(--pep-color-picker-current-hue), 100%, 50%) 50%, 
                                hsl(var(--pep-color-picker-current-hue), 100%, 25%) 75%);
                        }
                    }
                }
            }
        }

        .color-value-content {
            .color-complient-container {
                .color-complient {
                    .mat-icon {
                        .svg-icon {
                            fill: get-pepperi-color($pepperi-theme, color-text, color-invert);
                        }
                    }
                }
            }
        }

        .mat-slider {
            background: get-pepperi-color($pepperi-theme, color-system-primary, color-tran-30);
            
            &.mat-slider-horizontal {
                height: 1rem;
                width: 100%;
                padding: 0.5rem 0.25rem;
                border-radius: $border-radius-lg;
            }

            .mat-slider-wrapper {
                $wrapperHeight: 0.375rem;
                height: $wrapperHeight;
                position: relative;
                top: $wrapperHeight / 2 * -1;
                left: unset;
                right: unset;
                border-radius: $border-radius-md;

                .mat-slider-track-wrapper {
                    display: none;
                }
                
                .mat-slider-ticks-container {
                    // Not in use.
                }

                .mat-slider-thumb-container {
                    width: 94%;
                    left: 3%;

                    .mat-slider-thumb {
                        // position: absolute;
                        $sliderSize: 18px;
                        width: $sliderSize;
                        height: $sliderSize;
                        right: $sliderSize / 2 * -1;
                        bottom: $sliderSize / 2 * -1;
                        transform: scale(.7) !important;
                        border-color: get-pepperi-color($pepperi-theme, color-system-primary-invert, color-base); //get-pepperi-color($pepperi-theme, color-system-primary, color-tran-50);
                        border-width: 5px;
                        background-color: transparent !important;
                        box-shadow: 0 0 0 $spacing-2xs get-pepperi-color($pepperi-theme, color-text, color-link-focus);
                        // .default-theme .mat-slider-min-value:not(.mat-slider-thumb-label-showing) .mat-slider-thumb
                    }
                }
            }
        }
    }
}