@use '../src/core/style/abstracts/variables';
@use '../src/core/style/abstracts/functions';

.pep-slider-container {
    ::ng-deep.mat-slider {
        background: functions.get-pep-color(color-system-primary, color-tran-30);

        &.mat-slider-horizontal {
            height: 1rem;
            width: 100%;
            padding: 0.5rem 0.25rem;
            border-radius: variables.$border-radius-lg;
        }

        .mat-slider-wrapper {
            $wrapperHeight: 0.375rem;
            height: $wrapperHeight;
            position: relative;
            top: calc(#{$wrapperHeight} / 2 * -1);
            left: unset;
            right: unset;
            border-radius: variables.$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: calc(#{$sliderSize / 2} * -1);
                    bottom: calc(#{$sliderSize / 2} * -1);
                    transform: scale(.7) !important;
                    border-color: functions.get-pep-color(color-system-primary-invert, color-base); //functions.get-pep-color(color-system-primary, color-tran-50);
                    border-width: 5px;
                    background-color: transparent !important;
                    box-shadow: 0 0 0 variables.$spacing-2xs functions.get-pep-color(color-text, color-link-focus);
                    // .default-theme .mat-slider-min-value:not(.mat-slider-thumb-label-showing) .mat-slider-thumb
                }
            }
        }
    }
}