/* @docs */
$slider-background: transparent !default;
$slider-margin: 1em 0 !default;
$slider-mark-size: 0.75rem !default;
$slider-font-size: $base-font-size !default;
$slider-rounded-borded-radius: $base-rounded-border-radius !default;
$slider-thumb-background: $white !default;
$slider-thumb-border: 1px solid $grey-light !default;
$slider-thumb-radius: $base-border-radius !default;
$slider-thumb-shadow: none !default;
$slider-thumb-to-track-ratio: 2 !default;
$slider-thumb-transform: scale(1.25) !default;
$slider-tick-background: $primary !default;
$slider-tick-radius: $base-border-radius !default;
$slider-tick-to-track-ratio: 0.5 !default;
$slider-tick-width: 3px !default;
$slider-track-background: $grey-lighter !default;
$slider-fill-background: $primary !default;
$slider-track-border-radius: $base-border-radius !default;
$slider-track-border: 0px solid $grey !default;
$slider-track-disabled: 0.5 !default;
$slider-track-radius: $base-border-radius !default;
$slider-track-shadow: 0px 0px 0px $grey !default;
/* @docs */

@mixin slider-size($size, $name: null) {
	$track-height: divide($size, $slider-thumb-to-track-ratio);
	$tick-height: $track-height * $slider-tick-to-track-ratio;
	$thumb-size: $size;

    .o-slide__track {
        @if ($name != null) {
            @include avariable('height', ('slider-track-height-' + #{$name}), $track-height);
        } @else {
            @include avariable('height', 'slider-track-height', $track-height);
        }
    }

	.o-slide__thumb {
        @if ($name != null) {
            @include avariable('height', 'slider-thumb-size-' + #{$name}, $thumb-size);
            @include avariable('width', 'slider-thumb-size-' + #{$name}, $thumb-size);
        } @else {
            @include avariable('height', 'slider-thumb-size', $thumb-size);
            @include avariable('width', 'slider-thumb-size', $thumb-size);
        }
    }

    .o-slide__tick {
        @if ($name != null) {
            @include avariable('height', 'slider-tick-height-' + #{$name}, $tick-height);
        } @else {
            @include avariable('height', 'slider-tick-height', $tick-height);
        }
    }

    .o-slide__tick-label {
        @if ($name != null) {
            @include avariable('font-size', 'slider-mark-size-' + #{$name}, $slider-mark-size);
        } @else {
            @include avariable('font-size', 'slider-mark-size', $slider-mark-size);
        }
        position: absolute;
        @include evariable(
            'top', 'calc($label-top * 0.5 + 2px)',
            eparam('$label-top', variable('slider-tick-label-top-' + #{$name}, $track-height))
        );
        left: 50%;
        transform: translateX(-50%);
    }
}

.o-slide {
    @include avariable('margin', 'slider-margin', $slider-margin);
    @include avariable('background', 'slider-background', $slider-background);
    width: 100%;

    &__thumb {
        @include avariable('box-shadow', 'slider-thumb-shadow', $slider-thumb-shadow);
        @include avariable('border', 'slider-thumb-border', $slider-thumb-border);
        @include avariable('border-radius', 'slider-thumb-radius', $slider-thumb-radius);
        @include avariable('background', 'slider-thumb-background', $slider-thumb-background);
        &:focus {
            @include avariable('transform', 'slider-thumb-transform', $slider-thumb-transform);
        }
        &--rounded {
            @include avariable('border-radius', 'slider-rounded-borded-radius', $slider-rounded-borded-radius);
        }
        &--dragging {
            cursor: grabbing;
            filter: brightness(0.8);
        }
    }

    &__track {
        display: flex;
        align-items: center;
        position: relative;
        cursor: pointer;
        @include avariable('background', 'slider-track-background', $slider-track-background);
        @include avariable('border-radius', 'slider-track-border-radius', $slider-track-border-radius);
    }
    &__fill {
        position: absolute;
        height: 100%;
        @include avariable('box-shadow', 'slider-track-shadow', $slider-track-shadow);
        @include avariable('background', 'slider-fill-background', $slider-fill-background);
        @include avariable('border-radius', 'slider-track-radius', $slider-track-radius);
        @include avariable('border', 'slider-track-border', $slider-track-border);
        // Fix alignment in IE 11. Cancel out for others
        top: 50%;
        transform: translateY(-50%);
        @each $name, $pair in $colors {
            $color: nth($pair, 1);
            &--#{$name} {
                @include avariable('background', ('variant-' + #{$name}), $color);
            }
        }
    }
    @include slider-size($slider-font-size);
    @each $name, $value in $sizes {
        &--#{$name} {
            @include slider-size($value, $name);
        }
    }
    &__tick {
        position: absolute;
        transform: translate(-50%, -50%);
        top: 50%;
		@include avariable('width', 'slider-tick-width', $slider-tick-width);
        @include avariable('background', 'slider-tick-background', $slider-tick-background);
        @include avariable('border-radius', 'slider-tick-radius', $slider-tick-radius);
        &--hidden {
            background: transparent;
        }
    }
    &__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
    }
    &--disabled {
        cursor: not-allowed;
        pointer-events: none;
        @include avariable('opacity', 'slider-track-disabled', $slider-track-disabled);
    }
}