import React from 'react';
import styled from 'styled-components';
import { getHeight, getKnobSize } from '../../Slider/utils';
var HoverArea = styled.div.withConfig({
  displayName: "RangeSliderTrack__HoverArea",
  componentId: "sc-1tnkune-0"
})(["position:relative;width:100%;height:", ";cursor:", ";padding:", ";"], function (p) {
  return "".concat(getHeight(p.$variant), "px");
}, function (p) {
  return p.$disabled ? 'not-allowed' : 'pointer';
}, function (p) {
  return "".concat(p.theme.spacing.unit(2), "px 0");
});
var Track = styled.div.withConfig({
  displayName: "RangeSliderTrack__Track",
  componentId: "sc-1tnkune-1"
})(["position:relative;width:100%;height:", ";background:", ";border-radius:", ";cursor:", ";"], function (p) {
  return "".concat(getHeight(p.$variant), "px");
}, function (p) {
  return p.theme.colorTokens.neutral.background_skeleton;
}, function (p) {
  return "".concat(getKnobSize(p.$variant), "px");
}, function (p) {
  return p.$disabled ? 'not-allowed' : 'pointer';
});
var RangeSliderTrack = function RangeSliderTrack(_ref) {
  var children = _ref.children,
    disabled = _ref.disabled,
    variant = _ref.variant,
    readOnly = _ref.readOnly,
    sliderColor = _ref.sliderColor,
    onMouseDown = _ref.onMouseDown,
    onMouseLeave = _ref.onMouseLeave,
    onMouseMove = _ref.onMouseMove,
    onMouseUp = _ref.onMouseUp,
    onTouchStart = _ref.onTouchStart;
  return React.createElement(HoverArea, {
    $disabled: disabled || readOnly,
    onMouseDown: onMouseDown,
    onMouseLeave: onMouseLeave,
    onMouseMove: onMouseMove,
    onMouseUp: onMouseUp,
    onTouchStart: onTouchStart,
    $sliderColor: sliderColor,
    $variant: variant
  }, React.createElement(Track, {
    $disabled: disabled || readOnly,
    $variant: variant
  }, children));
};
export default RangeSliderTrack;