// Copyright 2016 Palantir Technologies, Inc. All rights reserved.
// Licensed under the BSD-3 License as modified (the “License”); you may obtain a copy
// of the license at https://github.com/palantir/blueprint/blob/master/LICENSE
// and https://github.com/palantir/blueprint/blob/master/PATENTS

@import "../tooltip/common";
@import "./common";

/*
Sliders

A slider is a numeric input for choosing one or two numbers between lower and upper bounds.
The `Slider` component also has a labeled axis that supports custom formatting.

To adjust a slider value, the user clicks and drags a handle or clicks the axis to move the nearest
handle to that spot. Users can also use arrow keys on the keyboard to adjust the value.

Use `Slider` for choosing a single value and `RangeSlider` for choosing two values.

Styleguide components.slider
*/

/*
Single slider

@react-example SliderExample

Weight: -1

Styleguide components.slider.single
*/

/*
JavaScript API

The `Slider` component is available in the __@blueprintjs/core__ package.
Make sure to review the [general usage docs for JS components](#components.usage).

`Slider` is a controlled component, so the `value` prop determines its current appearance. Provide
an `onChange` handler to receive updates and an `onRelease` handler to determine when the user has
stopped interacting with the slider.

@interface ISliderProps

Styleguide components.slider.single.js
*/

$handle-height: $pt-icon-size-standard !default;
$track-height: $handle-height - $pt-grid-size !default;
$label-top: $handle-height + 4px !default;

.pt-slider {
  @include slider($pt-input-height-large);

  outline: none;
  user-select: none;

  &.pt-slider-unlabeled {
    height: $handle-height;
  }
}

.pt-slider-track,
.pt-slider-progress {
  @include slider-track($handle-height, $track-height);
}

.pt-slider-progress,
.pt-dark .pt-slider-progress {
  background: $pt-intent-primary;
}

.pt-slider-handle {
  @include slider-handle($handle-height, $track-height);

  .pt-slider-label {
    transform: translate(-50%, $label-top - $button-border-width);
    margin-left: $handle-height / 2 - $button-border-width;
    border-radius: $pt-border-radius;
    box-shadow: $pt-tooltip-box-shadow;
    background: $tooltip-background-color;
    color: $tooltip-text-color;

    .pt-dark & {
      box-shadow: $pt-dark-tooltip-box-shadow;
      background: $dark-tooltip-background-color;
      color: $dark-tooltip-text-color;
    }

    .pt-disabled & {
      box-shadow: none;
    }
  }
}

.pt-slider-label {
  @include slider-label();

  position: absolute;
  transform: translate(-50%, $label-top);
}

/*
Range slider

`RangeSlider` allows the user to choose a range between upper and lower bounds. The component
functions identically to `Slider` except that the user can select both ends of the range. It exposes
its selected value as `[number, number]`: a two-element array with minimum and maximum range bounds.

@react-example RangeSliderExample

Styleguide components.slider.range
*/

/*
JavaScript API

The `RangeSlider` component is available in the __@blueprintjs/core__ package. Make sure to review
the [general usage docs for JS components](#components.usage).

`RangeSlider` is a controlled component, so the `value` prop determines its current appearance.
Provide an `onChange` handler to receive updates and an `onRelease` handler to determine when the
user has stopped interacting with the slider.

@interface IRangeSliderProps

Styleguide components.slider.range.js
*/

.pt-range-slider {
  .pt-slider-handle {
    width: $handle-height / 2;

    &:first-of-type {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    &:last-of-type {
      margin-left: $handle-height / 2 - $button-border-width;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;

      .pt-slider-label {
        margin-left: 0;
      }
    }
  }

  .pt-slider-progress {
    border-radius: 0;
  }
}