import styled from "styled-components";
import Box from "../../templates/box";
import InputRange from "../range";
export var Slider = styled(Box).withConfig({
  displayName: "styled__Slider",
  componentId: "sc-y2g216-0"
})([""]);
export var SliderTrack = styled(Box).withConfig({
  displayName: "styled__SliderTrack",
  componentId: "sc-y2g216-1"
})(["background-position:", ";background-color:", "40;background-image:linear-gradient( ", ",", " );background-repeat:no-repeat;background-size:", ";height:2px;width:", ";"], function (_ref) {
  var max = _ref.max,
    min = _ref.min,
    minValue = _ref.minValue,
    width = _ref.width;
  return width * ((minValue - min) / (max - min)) * 100 / 100 + "px 100%";
}, function (_ref2) {
  var theme = _ref2.theme;
  return theme.colors.primary;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.colors.primary;
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.colors.primary;
}, function (_ref5) {
  var max = _ref5.max,
    maxValue = _ref5.maxValue,
    min = _ref5.min,
    minValue = _ref5.minValue;
  return (maxValue - minValue) * 100 / (max - min) + "% 100%";
}, function (_ref6) {
  var width = _ref6.width;
  return width ? width + "px" : "100%";
});
export var Range = styled(InputRange).withConfig({
  displayName: "styled__Range",
  componentId: "sc-y2g216-2"
})(["pointer-events:none;position:absolute;height:0;outline:none;width:100%;&::-webkit-slider-thumb{pointer-events:all;}"]);