@use "sass:list";
@use "../utils/helpers" as h;
@use "../utils/variables" as vars;

/* @docs */
$slider-padding: 1em 0 !default;
$slider-disabled-opacity: h.useVar("control-disabled-opacity") !default;
$slider-font-size: h.useVar("font-size") !default;

$slider-track-to-thumb-ratio: 2 !default;
$slider-track-height: calc(
    h.useVar("slider-thumb-size") / $slider-track-to-thumb-ratio
);

$slider-track-box-shadow: h.useVar("control-box-shadow") !default;
$slider-track-border-width: 0px !default;
$slider-track-border-style: solid !default;
$slider-track-border-color: h.useVar("grey") !default;
$slider-track-border-radius: h.useVar("border-radius") !default;
$slider-track-background-color: h.useVar("grey-lighter") !default;

$slider-fill-box-shadow: h.useVar("control-box-shadow") !default;
$slider-fill-background-color: h.useVar("primary") !default;

$slider-thumb-size: h.useVar("slider-font-size");
$slider-thumb-font-size: calc(0.85 * h.useVar("slider-font-size")) !default;
$slider-thumb-font-weight: h.useVar("font-weight") !default;
$slider-thumb-line-height: h.useVar("line-height") !default;

$slider-thumb-box-shadow: none !default;
$slider-thumb-border-width: 1px !default;
$slider-thumb-border-style: solid !default;
$slider-thumb-border-color: h.useVar("grey-light") !default;
$slider-thumb-border-radius: h.useVar("border-radius") !default;
$slider-thumb-border-radius-rounded: h.useVar("border-radius-rounded") !default;
$slider-thumb-background-color: h.useVar("control-background-color") !default;
$slider-thumb-transform: scale(1.25) !default;

$slider-tick-to-track-ratio: 0.5 !default;
$slider-tick-size: calc(
    h.useVar("slider-track-height") * $slider-tick-to-track-ratio
);

$slider-tick-color: h.useVar("font-color") !default;
$slider-tick-font-size: 0.75em !default;
$slider-tick-font-weight: h.useVar("font-weight") !default;
$slider-tick-line-height: h.useVar("line-height") !default;

$slider-tick-background-color: h.useVar("primary") !default;
$slider-tick-radius: h.useVar("border-radius") !default;

/* @docs */

.o-slider {
    @include h.defineVar("slider-padding", $slider-padding);
    @include h.defineVar("slider-disabled-opacity", $slider-disabled-opacity);
    @include h.defineVar("slider-font-size", $slider-font-size);

    @include h.defineVar("slider-track-height", $slider-track-height);
    @include h.defineVar("slider-track-box-shadow", $slider-track-box-shadow);
    @include h.defineVar(
        "slider-track-background-color",
        $slider-track-background-color
    );
    @include h.defineVar(
        "slider-track-border-color",
        $slider-track-border-color
    );
    @include h.defineVar(
        "slider-track-border-width",
        $slider-track-border-width
    );
    @include h.defineVar(
        "slider-track-border-style",
        $slider-track-border-style
    );
    @include h.defineVar(
        "slider-track-border-radius",
        $slider-track-border-radius
    );

    @include h.defineVar("slider-fill-box-shadow", $slider-fill-box-shadow);
    @include h.defineVar(
        "slider-fill-background-color",
        $slider-fill-background-color
    );

    @include h.defineVar("slider-thumb-size", $slider-thumb-size);
    @include h.defineVar("slider-thumb-font-size", $slider-thumb-font-size);
    @include h.defineVar("slider-thumb-font-weight", $slider-thumb-font-weight);
    @include h.defineVar("slider-thumb-line-height", $slider-thumb-line-height);

    @include h.defineVar(
        "slider-thumb-background-color",
        $slider-thumb-background-color
    );
    @include h.defineVar("slider-thumb-box-shadow", $slider-thumb-box-shadow);
    @include h.defineVar(
        "slider-thumb-border-width",
        $slider-thumb-border-width
    );
    @include h.defineVar(
        "slider-thumb-border-style",
        $slider-thumb-border-style
    );
    @include h.defineVar(
        "slider-thumb-border-color",
        $slider-thumb-border-color
    );
    @include h.defineVar(
        "slider-thumb-border-radius",
        $slider-thumb-border-radius
    );
    @include h.defineVar(
        "slider-thumb-border-radius-rounded",
        $slider-thumb-border-radius-rounded
    );
    @include h.defineVar("slider-thumb-transform", $slider-thumb-transform);

    @include h.defineVar("slider-tick-size", $slider-tick-size);
    @include h.defineVar("slider-tick-color", $slider-tick-color);
    @include h.defineVar("slider-tick-font-size", $slider-tick-font-size);
    @include h.defineVar("slider-tick-font-weight", $slider-tick-font-weight);
    @include h.defineVar("slider-tick-line-height", $slider-tick-line-height);
    @include h.defineVar(
        "slider-tick-background-color",
        $slider-tick-background-color
    );
    @include h.defineVar("slider-tick-radius", $slider-tick-radius);

    width: 100%;
    padding: h.useVar("slider-padding");

    // define focus shadow effect
    @include h.focusable(".o-slider__thumb");

    // size variants
    @each $name, $value in vars.$sizes {
        &--#{$name} {
            @include h.defineVar("slider-font-size", h.useVar("size-#{$name}"));
        }
    }

    &__track {
        // add clickable cursor
        @include h.clickable;

        display: flex;
        align-items: center;
        position: relative;

        height: h.useVar("slider-track-height");

        box-shadow: h.useVar("slider-track-box-shadow");
        background-color: h.useVar("slider-track-background-color");

        border-color: h.useVar("slider-track-border-color");
        border-style: h.useVar("slider-track-border-style");
        border-width: h.useVar("slider-track-border-width");
        border-radius: h.useVar("slider-track-border-radius");
    }

    &__fill {
        position: absolute;
        height: 100%;

        box-shadow: h.useVar("slider-fill-box-shadow");
        background-color: h.useVar("slider-fill-background-color");

        border-color: h.useVar("slider-track-border-color");
        border-style: h.useVar("slider-track-border-style");
        border-width: h.useVar("slider-track-border-width");
        border-radius: h.useVar("slider-track-border-radius");

        // Fix alignment in IE 11. Cancel out for others
        top: 50%;
        transform: translateY(-50%);

        @each $name, $pair in vars.$colors {
            &--#{$name} {
                @include h.defineVar(
                    "slider-fill-background-color",
                    h.useVar($name)
                );
            }
        }
    }

    &__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

        // override tooltip styling
        > .o-tooltip {
            @include h.defineVar(
                "tooltip-content-font-size",
                h.useVar("slider-thumb-font-size")
            );
            @include h.defineVar(
                "tooltip-content-font-weight",
                h.useVar("slider-thumb-font-weight")
            );
            @include h.defineVar(
                "tooltip-content-line-height",
                h.useVar("slider-thumb-line-height")
            );
        }
    }

    &__thumb {
        height: h.useVar("slider-thumb-size");
        width: h.useVar("slider-thumb-size");

        box-shadow: h.useVar("slider-thumb-box-shadow");
        background-color: h.useVar("slider-thumb-background-color");

        border-color: h.useVar("slider-thumb-border-color");
        border-style: h.useVar("slider-thumb-border-style");
        border-width: h.useVar("slider-thumb-border-width");
        border-radius: h.useVar("slider-thumb-border-radius");

        &:focus {
            transform: h.useVar("slider-thumb-transform");
        }

        &--rounded {
            @include h.defineVar(
                "slider-thumb-border-radius",
                h.useVar("slider-thumb-border-radius-rounded")
            );
        }

        &--dragging {
            cursor: grabbing;
            filter: brightness(0.8);
        }
    }

    &__tick {
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);

        height: h.useVar("slider-tick-size");
        width: h.useVar("slider-tick-size");
        background: h.useVar("slider-tick-background-color");
        border-radius: h.useVar("slider-tick-radius");

        &--hidden {
            background: transparent;
        }
    }

    &__tick-label {
        position: absolute;
        left: 50%;
        top: calc(h.useVar("slider-track-height") * 0.5 + 2px);
        transform: translateX(-50%);

        color: h.useVar("slider-tick-color");
        font-size: h.useVar("slider-tick-font-size");
        font-weight: h.useVar("slider-tick-font-weight");
        line-height: h.useVar("slider-tick-line-height");
    }

    &--disabled {
        .o-slider__track {
            @include h.disabled(h.useVar("slider-disabled-opacity"));
        }
    }
}