@use "bulma/sass/utilities/css-variables" as cv;
@use "bulma/sass/utilities/initial-variables" as iv;
@use "bulma/sass/utilities/derived-variables" as dv;
@use "bulma/sass/utilities/mixins" as mixins;

$slider-radius: cv.getVar("radius") !default;
$slider-track-background: cv.getVar("grey-lighter") !default;
$slider-track-radius: cv.getVar("radius") !default;
$slider-track-border: 0px solid cv.getVar("grey") !default;
$slider-track-shadow: 0px 0px 0px cv.getVar("grey") !default;
$slider-thumb-background: cv.getVar("scheme-main") !default;
$slider-thumb-radius: cv.getVar("radius") !default;
$slider-thumb-border: 1px solid cv.getVar("grey-light") !default;
$slider-thumb-shadow: none !default;
$slider-thumb-to-track-ratio: 2 !default;
$slider-tick-to-track-ratio: 0.5 !default;
$slider-tick-width: 3px !default;
$slider-tick-radius: cv.getVar("radius") !default;
$slider-tick-background: cv.getVar("grey-light") !default;
$slider-mark-size: 0.75rem !default;
$slider-colors: dv.$colors !default;

.#{iv.$class-prefix}b-slider  {
    @include cv.register-vars((
        "slider-radius": #{$slider-radius},
        "slider-track-background": #{$slider-track-background},
        "slider-fill-background": #{$slider-track-background},
        "slider-track-radius": #{$slider-track-radius},
        "slider-track-border": #{$slider-track-border},
        "slider-track-shadow": #{$slider-track-shadow},
        "slider-thumb-background": #{$slider-thumb-background},
        "slider-thumb-radius": #{$slider-thumb-radius},
        "slider-thumb-border": #{$slider-thumb-border},
        "slider-thumb-shadow": #{$slider-thumb-shadow},
        "slider-thumb-to-track-ratio": #{$slider-thumb-to-track-ratio},
        "slider-tick-to-track-ratio": #{$slider-tick-to-track-ratio},
        "slider-tick-width": #{$slider-tick-width},
        "slider-tick-radius": #{$slider-tick-radius},
        "slider-tick-background": #{$slider-tick-background},
        "slider-mark-size": #{$slider-mark-size}
    ));

    @each $name, $pair in $slider-colors {
        &.is-#{$name} {
            @include cv.register-vars((
                "slider-fill-background": #{cv.getVar($name)}
            ));
        }
    }

    @include cv.register-vars((
        "track-height": calc(#{cv.getVar('size-normal')} / #{cv.getVar('slider-thumb-to-track-ratio')}),
        "tick-height": calc(#{cv.getVar('track-height')} * #{cv.getVar('slider-thumb-to-track-ratio')}),
        "thumb-size": cv.getVar('size-normal')
    ));

    &.is-small {
        @include cv.register-vars((
            "track-height": calc(#{cv.getVar('size-small')} / #{cv.getVar('slider-thumb-to-track-ratio')}),
            "thumb-size": cv.getVar('size-small')
        ));
    }
    &.is-medium {
        @include cv.register-vars((
            "track-height": calc(#{cv.getVar('size-medium')} / #{cv.getVar('slider-thumb-to-track-ratio')}),
            "thumb-size": cv.getVar('size-medium')
        ));
    }
    &.is-large {
        @include cv.register-vars((
            "track-height": calc(#{cv.getVar('size-large')} / #{cv.getVar('slider-thumb-to-track-ratio')}),
            "thumb-size": cv.getVar('size-large')
        ));
    }

}

.b-slider {
    margin: 1em 0;
    background: transparent;
    width: 100%;

    .b-slider-track {
        display: flex;
        align-items: center;
        position: relative;
        cursor: pointer;
        background: cv.getVar('slider-track-background');
        border-radius: cv.getVar('slider-radius');
        height: cv.getVar("track-height");
    }
    .b-slider-fill {
        position: absolute;
        height: 100%;
        box-shadow: cv.getVar('slider-track-shadow');
        background: cv.getVar('slider-fill-background');
        border-radius: cv.getVar('slider-track-radius');
        border: cv.getVar('slider-track-border');
        // Fix alignment in IE 11. Cancel out for others
        top: 50%;
        transform: translateY(-50%);
    }
    .b-slider-thumb-wrapper {
        display: inline-flex;
        align-items: center;
        position: absolute;
        cursor: grab;
        transform: translate(-50%, -50%);
        top: 50%;
        flex-direction: column; // Fix shrinked thumb at the end in IE 11

        .b-slider-thumb {
            box-shadow: cv.getVar('slider-thumb-shadow');
            border: cv.getVar('slider-thumb-border');
            border-radius: cv.getVar('slider-thumb-radius');
            background: cv.getVar('slider-thumb-background');
            height:  cv.getVar("thumb-size");
            width:  cv.getVar("thumb-size");
            &:focus {
                transform: scale(1.25);
            }
        }

        &.is-dragging {
            cursor: grabbing;
            .b-slider-thumb {
                transform: scale(1.25);
            }
        }

        &.has-indicator {
            .b-slider-thumb {
                padding: 16px 10px;
                display: flex;
                align-items: center;
                width: auto;
            }
        }
    }

    &.slider-focus{
        padding-top: 20px;
        padding-bottom: 20px;
        margin-top: -20px;
        margin-bottom: -20px;
        cursor: pointer;
    }

    &.is-rounded {
        .b-slider-thumb {
            border-radius: cv.getVar('radius-rounded');
        }
    }
    &.is-disabled {
        .b-slider-track {
            cursor: not-allowed;
            opacity: 0.5;
        }
        .b-slider-thumb-wrapper {
            cursor: not-allowed;
            .b-slider-thumb {
                transform: scale(1);
            }
        }
    }

    .b-slider-tick-label {
        font-size: cv.getVar('slider-mark-size');
        position: absolute;
        top: calc(cv.getVar("track-height") + 10px);
        left: 50%;
        transform: translateX(-50%);
    }

    .b-slider-tick {
        position: absolute;
		width: cv.getVar('slider-tick-width');
        height: cv.getVar("tick-height");
        transform: translate(-50%, -50%);
        top: 50%;
        background: cv.getVar('slider-tick-background');
        border-radius: cv.getVar('slider-tick-radius');
        &.is-tick-hidden {
            background: transparent;
        }
    }
}