@import "colors";

.mat-slider{
    &.qms-range-slider{
        &:not(.mat-slider-disabled){
            .mat-slider-track-background{
                background-color: $slider-background;
            }

            .mat-slider-track-fill{
                background: $active;
            }

            .mat-slider-thumb{
                right: -6px;
                bottom: -6px;
                width: 12px;
                height: 12px;
                background-color: $active;
                border-color: $active;
                box-sizing: border-box;
                border: 3px solid transparent;
                border-radius: 50%;
            }

            .mat-slider-thumb:after {
                content: "";
                background-color: $slider-hover-border;
                background-size: 0%;
                background-position: center;
                display: block;
                position: absolute;
                border-radius: 50%;
                left: -21px;
                right: -21px;
                top: 0;
                bottom: 0;
                width: 0px;
                height: 0px;
                margin: auto;
                opacity: 1;
                transition: background 1s;
            }

            &.mat-slider-min-value:not(.mat-slider-thumb-label-showing){
                .mat-slider-thumb {
                    background-color: $active;
                    border-color: $slider-focus-border;
                }
            }
            
            &.mat-slider-has-ticks .mat-slider-wrapper::after{
                border-color: $slider-tick-color;
            }

            &.mat-slider-min-value:not(.mat-slider-thumb-label-showing):hover{
                border-color: $slider-hover-border;
            }

            &:focus-visible{
                border-color: $slider-focus-border;
            }

            &.cdk-mouse-focused, &.cdk-touch-focused, &.cdk-program-focused{
                .mat-slider-thumb {
                    border-width: 18px;
                    border-color: $slider-focus-border;
                    transform: scale(0.7);
                }
            }

            &.qms-range-slider-active {
                .mat-slider-thumb:after {
                    width: 48px;
                    height: 48px;
                    background-size: 100%;
                    background-position: center;
                    transition: all 500ms;
                }
            }
        }
        
        &.mat-slider-disabled{
            .mat-slider-thumb{
                background-color: black(0.26);
                border-color: transparent;
            }
        }

        .mat-slider-ticks{
            background-image: repeating-linear-gradient(to right, $slider-tick-color, $slider-tick-color 2px, transparent 0, transparent);
            opacity: 1;
        }
        .mat-slider-focus-ring{
           background-color: transparent; 
        }
    }
}


.mat-slider{
    &.qms-range-slider-lockup{
        &:not(.mat-slider-disabled){
            &:focus-visible{
                .mat-slider-thumb {
                    border-width: 18px;
                    border-color: $slider-focus-border;
                    transform: scale(0.7);
                }
            }

            &.cdk-focused.mat-slider-thumb-label-showing {
                .mat-slider-thumb-label {
                    border-radius: 10%;
                    transform: rotate(0deg);
                    background: $default-color;
                }

                .mat-slider-thumb {
                    border-width: 18px;
                    border-color: $slider-pressed;
                    transform: scale(0.7);
                }
              
                .mat-slider-thumb-label-text {
                    transform: rotate(0deg);
                }

                .mat-slider-thumb-label::after {
                    position: absolute;
                    left: calc(50% - 8px);
                    top: 28px;
                    width: 0; 
                    height: 0; 
                    content: '';
                    margin: 0 auto;
                    transform: rotate(0deg);
                    border-left: 8px solid transparent;
                    border-right: 8px solid transparent;
                    border-top: 6px solid $default-color;
                }
            }
        }
    }
}

.mat-slider:hover{
    &.qms-range-slider{
        &:not(.mat-slider-disabled){
            &.mat-slider-min-value:not(.mat-slider-thumb-label-showing):hover{
                .mat-slider-thumb{
                    border-color: $slider-hover-border;
                }
                
            }
            .mat-slider-thumb {
                height: 48px;
                width: 48px;
                border-color: $slider-hover-border;
                border: solid 18px $slider-hover-border;
                bottom: -24px;
                right: -24px;
                background-clip: padding-box;   
            }
        }

        &.mat-slider-disabled{
            .mat-slider-thumb{
                border-color: transparent;
            }
        }
    }
}

.mat-slider{
    &.qms-range-slider{ 
        &.cdk-focused, &.cdk-keyboard-focused, &.cdk-mouse-focused, &.cdk-touch-focused, &.cdk-program-focused{
            &:not(.mat-slider-disabled){
                .mat-slider-thumb {
                    transform: scale(0.7);
                    height: 48px;
                    width: 48px;
                    border-color: $slider-focus-border;
                    border: solid 18px $slider-focus-border;
                    bottom: -24px;
                    right: -24px;
                    background-clip: padding-box;   
                }
            }

            &.mat-slider-disabled{
                .mat-slider-thumb{
                    border-color: transparent;
                }
            }
        }
        
    }
}

