////
/// @group themes
/// @access public
/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
////

/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.
/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.
///
/// @param {Color} $track-color [null] - The color of the track.
/// @param {Color} $thumb-color [null] - The color of the thumb.
/// @param {Color} $label-background-color [null] - The background color of the bubble label.
/// @param {Color} $label-text-color [null] - The text color of the bubble label.
///
/// @param {Color} $disabled-thumb-color [null] - The thumb color when its disabled.
/// @param {Color} $base-track-color [null] - The base background color of the track.
/// @param {Color} $disabled-base-track-color [null] - The base background color of the track when is disabled.
///
/// @param {Color} $tick-label-color [null] - The color of the tick label.
/// @param {Color} $tick-label-color--tall [null] - The color of the tall tick label .
/// @param {Color} $tick-color [null] - The background-color of the tick.
/// @param {Color} $tick-color--tall [null] - The background-color of the tall tick.
///
/// @requires $default-palette
/// @requires $light-schema
/// @requires apply-palette
/// @requires extend
/// @requires text-contrast
///
/// @example scss Set custom track and thumb on colors
///   $my-slider-theme: igx-slider-theme($thumb-on-color: black, $track-on-color: yellow);
///   // Pass the theme to the igx-slider component mixin
///   @include igx-slider($my-slider-theme);
@function igx-slider-theme(
    $palette: $default-palette,
    $schema: $light-schema,

    $track-color: null,
    $thumb-color: null,

    $label-background-color: null,
    $label-text-color: null,

    $disabled-thumb-color: null,
    $base-track-color: null,
    $disabled-base-track-color: null,
    $thumb-border-color: null,
    $thumb-disabled-border-color: null,
    $track-hover-color: null,
    $thumb-hover-color: null,
    $base-track-hover-color: null,
    $tick-label-color: null,
    $tick-label-color-tall: null,
    $tick-color: null,
    $tick-color-tall: null,
) {
    $name: 'igx-slider';
    $slider-schema: ();

    @if map-has-key($schema, $name) {
        $slider-schema: map-get($schema, $name);
    } @else {
        $slider-schema: $schema;
    }

    $theme: apply-palette($slider-schema, $palette);

    @if not($label-text-color) and $label-background-color {
        $label-text-color: text-contrast($label-background-color);
    }

    @return extend($theme, (
        name: $name,
        palette: $palette,
        track-color: $track-color,
        track-hover-color: $track-hover-color,
        thumb-color: $thumb-color,
        thumb-hover-color: $thumb-hover-color,
        label-background-color: $label-background-color,
        label-text-color: $label-text-color,
        disabled-thumb-color: $disabled-thumb-color,
        base-track-color: $base-track-color,
        disabled-base-track-color: $disabled-base-track-color,
        thumb-border-color: $thumb-border-color,
        thumb-disabled-border-color: $thumb-disabled-border-color,
        base-track-hover-color: $base-track-hover-color,
        tick-label-color: $tick-label-color,
        tick-label-color-tall: $tick-label-color-tall,
        tick-color: $tick-color,
        tick-color-tall: $tick-color-tall,
    ));
}

/// @param {Map} $theme - The theme used to style the component.
/// @requires {mixin} igx-root-css-vars
/// @requires rem
/// @requires --var
@mixin igx-slider($theme) {
    @include igx-root-css-vars($theme);

    $left: if-ltr(left, right);
    $right: if-ltr(right, left);

    $slider-height: 48px;

    $slider-track-height: map-get((
        material: 2px,
        fluent: 4px
    ), map-get($theme, variant));

    // Slide ticks
    $tick-push: rem(4px);
    $base-tick-height: rem(8px);
    $tick-height: $base-tick-height;
    $tick-height--tall: $base-tick-height * 2;
    $tick-width: rem(2px);

    $thumb-border-width: map-get((
        material: 0,
        fluent: 2px
    ), map-get($theme, variant));

    // Slider Thumb
    $slider-thumb-width: 40px;
    $slider-thumb-height: $slider-thumb-width;
    $slider-thumb-radius: $slider-thumb-width / 2;

    // Slider Label
    $slider-label-width: 36px;
    $slider-label-height: $slider-label-width;
    $slider-label-radius: $slider-label-width / 2;
    $slider-label-font-size: rem(12px);
    $slider-label-font-weight: 600;
    $slider-label-padding: 0 rem(2px);

    $switch-display: map-get((
        material: block,
        fluent: none
    ), map-get($theme, variant));

    $dot-size: map-get((
        material: 12px,
        fluent: 16px
    ), map-get($theme, variant));

    %igx-slider-display {
        display: flex;
        position: relative;
        height: rem($slider-height);
        flex-grow: 1;
        align-items: center;
        transition: all .2s $ease-out-quad;

        &:hover {
            %igx-slider-track-fill {
                background: --var($theme, 'track-hover-color');
            }

            %igx-slider-track {
                background: --var($theme, 'base-track-hover-color');
            }

            %igx-slider-track--disabled {
                background: --var($theme, 'disabled-base-track-color');
            }

            %igx-thumb-dot {
                &::before {
                    border-color: --var($theme, 'track-hover-color');
                }
            }

            %igx-thumb-dot--disabled {
                &::before {
                    border-color: --var($theme, 'thumb-disabled-border-color');
                }
            }
        }
    }

    %igx-slider-thumbs-container {
        position: absolute;
        width: 100%;
        height: 0;
        cursor: default;
        z-index: 1;
        left: 0;
    }

    %igx-slider-track {
        position: relative;
        width: 100%;
        height: rem($slider-track-height);
        background: --var($theme, 'base-track-color');
        transition: background .2s $ease-out-quad;
    }

    %igx-slider-track--disabled {
        background: --var($theme, 'disabled-base-track-color');
    }

    %igx-slider-track-fill {
        position: absolute;
        width: 100%;
        height: inherit;
        background: --var($theme, 'track-color');
        transform-origin: #{$left} center;
        transform: scaleX(0);
    }

    %igx-slider-track-fill--disabled {
        visibility: hidden;
    }

    %igx-slider__ticks {
        width: 100%;
        display: flex;
        position: absolute;
        top: $tick-push;
        justify-content: space-between;
        z-index: 1;

        &%igx-slider__ticks--top {
            bottom: $tick-push;
            top: auto;
            align-items: flex-end;
        }
    }

    %igx-slider__ticks-group {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;

        &:first-of-type {
            margin-left: rem(-1px);
        }

        &:last-of-type {
            margin-left: rem(-1px);
        }
    }

    %igx-slider__ticks-label {
        color: --var($theme, 'tick-label-color');
        position: absolute;
        top: $tick-height--tall;
        transform: translate(-50%);
        line-height: .7;
        opacity: 1;
        transition: opacity .2s $ease-in-out-quad;
    }

    %igx-slider__ticks-tick {
        background: --var($theme, 'tick-color');
        height: $tick-height;
        width: $tick-width;
    }

    %igx-slider__ticks--tall {
        %igx-slider__ticks-label {
            top: calc(#{$tick-height--tall} + #{$tick-height});
        }
    }

    %igx-slider__tick--disabled {
        background: --var($theme, 'disabled-base-track-color')!important;
    }

    %igx-slider__ticks-labels--disabled {
        color: --var($theme, 'disabled-base-track-color')!important;
    }

    %igx-slider__ticks-group--tall {
        %igx-slider__ticks-tick {
            height: $tick-height--tall;
            background: --var($theme, 'tick-color-tall');
        }

        %igx-slider__ticks-label {
            top: calc(#{$tick-height--tall} + #{$tick-height});
            color: --var($theme, 'tick-label-color-tall');
        }
    }

    %igx-slider__ticks--top {
        %igx-slider__ticks-label {
            bottom: calc(#{$tick-height} + #{$tick-height});
            top: auto;
        }

        &%igx-slider__ticks--tall {
            %igx-slider__ticks-label {
                bottom: calc(#{$tick-height--tall} + #{$tick-height});
                top: auto;
            }
        }
    }

    %igx-slider__tick-label--hidden {
        opacity: 0;
    }

    %igx-slider-track-steps {
        position: absolute;
        width: 100%;
        height: rem($slider-track-height);
        background-size: 100% em($slider-track-height);
        opacity: .85;
        transition: opacity .2s $ease-out-quad;
        z-index: 1;
    }

    %igx-slider-track-steps--disabled {
        visibility: hidden;
    }

    %igx-slider__tick-labels--top-bottom {
        %igx-slider__ticks-group {
            display: block;
        }

        %igx-slider__ticks-label {
            writing-mode: vertical-rl;
            transform: translate(-50%) rotate(0deg);
        }

        %igx-slider__ticks--tall {
            %igx-slider__ticks-label {
                top: calc(#{$tick-height--tall} + #{rem(2px)});
            }
        }

        &%igx-slider__ticks--top {
            %igx-slider__ticks-label {
                writing-mode: vertical-rl;
                transform: translate(-50%) rotate(0deg);
            }

            %igx-slider__ticks--tall {
                %igx-slider__ticks-label {
                    bottom: calc(#{$tick-height--tall} + #{rem(2px)});
                }
            }
        }
    }

    %igx-slider__tick-labels--bottom-top {
        %igx-slider__ticks-group {
            display: block;
        }


        %igx-slider__ticks-label {
            writing-mode: vertical-rl;
            transform: translate(-50%) rotate(180deg);
        }

        &%igx-slider__ticks--top {
            %igx-slider__ticks-label {
                writing-mode: vertical-rl;
                transform: translate(-50%) rotate(180deg);
            }

            %igx-slider__ticks--tall {
                %igx-slider__ticks-label {
                    bottom: calc(#{$tick-height--tall} + #{rem(2px)});
                }
            }
        }
    }

    %igx-thumb-display {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: $slider-thumb-width;
        height: $slider-thumb-height;
        outline-style: none;
        top: -#{rem($slider-thumb-radius)};
        margin-left: -#{rem($slider-thumb-radius)};

        &:focus %igx-thumb-dot::after {
            opacity: .18;
            /* 32 / 40 */
            transform: scale(.8);
        }
    }

    %igx-thumb--disabled {
        &:hover %igx-thumb-label {
            opacity: 0;
        }
    }

    %igx-label-display {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        height: $slider-thumb-height;
        outline-style: none;
        top: -#{rem($slider-thumb-radius)};
        margin: 0 auto;
    }

    %igx-thumb-label {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        top: -#{rem($slider-thumb-height - 4px)};
        left: -50%;
        pointer-events: none;
        min-width: rem($slider-label-width);
        height: rem($slider-label-height);
        padding: $slider-label-padding;
        border-radius: rem($slider-label-radius);
        margin: 0 auto;
        font-size: $slider-label-font-size;
        font-weight: $slider-label-font-weight;
        line-height: rem(18px);
        color: --var($theme, 'label-text-color');
        background: --var($theme, 'label-background-color');
        opacity: 0;
        border-color: --var($theme, 'label-background-color') transparent transparent;
        transition: opacity .1s $ease-out-quad;
        z-index: -1;

        &::after {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            margin-left: -#{$slider-label-radius};
            width: rem($slider-label-width);
            height: $slider-label-height;
            border-radius: 0 $slider-label-radius $slider-label-radius;
            background: inherit;
            transform: rotate(-135deg);
            z-index: -1;
        }

        &::before {
            content: '';
            position: absolute;
            top: rem(40px);
            left: calc(50% - 1px);
            border-left: 1px solid;
            border-right: 1px solid;
            border-top: rem(14px) solid;
            border-color: inherit;
        }
    }

    %igx-thumb-dot {
        position: relative;
        left: 0;
        padding: rem(20px);
        pointer-events: none;

        &:hover::after {
            opacity: .12;
            /* 32 / 40 */
            transform: scale(.8);
        }

        &::before {
            position: absolute;
            content: '';
            width: rem($dot-size);
            height: rem($dot-size);
            left: #{rem($slider-thumb-radius) - (rem($dot-size) / 2)};
            top: #{rem($slider-thumb-radius) - (rem($dot-size) / 2)};
            background: --var($theme, 'thumb-color');
            border: rem($thumb-border-width) solid --var($theme, 'thumb-border-color');
            transform: rotate(45deg);
            transition: transform .1s $ease-out-quad, border-radius .1s $ease-out-quad;
            border-radius: rem($slider-thumb-radius);
        }

        &::after {
            display: $switch-display;
            position: absolute;
            content: '';
            width: rem($slider-thumb-width);
            height: rem($slider-thumb-height);
            background: --var($theme, 'thumb-color');
            top: 0;
            left: 0;
            opacity: 0;
            transform: scale(0);
            transform-origin: center center;
            transition: transform .1s $ease-out-quad, opacity .1s $ease-out-quad;
            border-radius: 50%;
        }
    }

    %igx-thumb-dot--disabled {
        pointer-events: none;

        &::before {
            background: --var($theme, 'disabled-thumb-color');
            border-color: --var($theme, 'thumb-disabled-border-color');
            border-radius: rem($slider-thumb-radius);
        }

        &::after {
            transform: scale(0);
        }
    }

    %igx-thumb-dot--active {
        &::before {
            border-radius: 0 $slider-thumb-radius $slider-thumb-radius;
        }
    }

    %igx-thumb-dot--pressed {
        &::after {
            opacity: .24 !important;
            /* 48 / 40 */
            transform: scale(1.2) !important;
        }
    }

    %igx-thumb-label--active {
        opacity: 1;
    }

    %igx-thumb--active {
        z-index: 1;
    }
}