function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

/*
Copyright (c) 2018 Uber Technologies, Inc.

This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/
import { styled } from '../styles/index.js';
import { getTrackBackground } from 'react-range';
export var Root = styled('div', function (props) {
  return {};
});
Root.displayName = "Root";
Root.displayName = 'StyledRoot';
export var Track = styled('div', function (props) {
  var $theme = props.$theme,
      $value = props.$value,
      $disabled = props.$disabled,
      $isDragged = props.$isDragged;
  var sizing = $theme.sizing;
  var cursor = 'inherit';

  if ($disabled) {
    cursor = 'not-allowed';
  } else if ($isDragged) {
    cursor = 'grabbing';
  } else if ($value.length === 1) {
    cursor = 'pointer';
  }

  return {
    paddingTop: sizing.scale1000,
    paddingBottom: sizing.scale600,
    paddingRight: sizing.scale600,
    paddingLeft: sizing.scale600,
    display: 'flex',
    cursor: cursor
  };
});
Track.displayName = "Track";
Track.displayName = 'StyledTrack';
export var InnerTrack = styled('div', function (props) {
  var $theme = props.$theme,
      $value = props.$value,
      $min = props.$min,
      $max = props.$max,
      $disabled = props.$disabled;
  var colors = $theme.colors,
      borders = $theme.borders,
      sizing = $theme.sizing;
  return {
    borderRadius: $theme.borders.useRoundedCorners ? borders.radius100 : '0px',
    background: getTrackBackground({
      values: $value,
      colors: $value.length === 1 ? [$disabled ? colors.mono600 : colors.primary, colors.mono400] : [colors.mono400, $disabled ? colors.mono600 : colors.primary, colors.mono400],
      min: $min,
      max: $max
    }),
    height: sizing.scale100,
    width: '100%',
    alignSelf: 'center',
    cursor: $disabled ? 'not-allowed' : 'inherit'
  };
});
InnerTrack.displayName = "InnerTrack";
InnerTrack.displayName = 'StyledInnerTrack';
export var Tick = styled('div', function (props) {
  return _objectSpread({}, props.$theme.typography.font300);
});
Tick.displayName = "Tick";
Tick.displayName = 'StyledTick';
export var TickBar = styled('div', function (props) {
  var $theme = props.$theme;
  var sizing = $theme.sizing;
  return {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingRight: sizing.scale600,
    paddingLeft: sizing.scale600,
    paddingBottom: sizing.scale400
  };
});
TickBar.displayName = "TickBar";
TickBar.displayName = 'StyledTickBar';
export var Thumb = styled('div', function (props) {
  var $theme = props.$theme,
      $value = props.$value,
      $thumbIndex = props.$thumbIndex,
      $disabled = props.$disabled;
  var isLeft = $value.length === 2 && $thumbIndex === 0;
  var isRight = $value.length === 2 && $thumbIndex === 1;
  return {
    height: '24px',
    width: isLeft || isRight ? '12px' : '24px',
    borderTopLeftRadius: isRight ? '1px' : '4px',
    borderTopRightRadius: isLeft ? '1px' : '4px',
    borderBottomLeftRadius: isRight ? '1px' : '4px',
    borderBottomRightRadius: isLeft ? '1px' : '4px',
    backgroundColor: $theme.colors.mono100,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    borderWidth: '1px',
    borderStyle: 'solid',
    borderColor: $theme.colors.mono400,
    boxShadow: '0px 1px 4px rgba(0, 0, 0, 0.12)',
    cursor: $disabled ? 'not-allowed' : 'inherit'
  };
});
Thumb.displayName = "Thumb";
Thumb.displayName = 'StyledThumb';
export var InnerThumb = styled('div', function (props) {
  var $theme = props.$theme,
      $isDragged = props.$isDragged;
  return {
    height: '8px',
    width: '2px',
    borderRadius: '2px',
    backgroundColor: $isDragged ? $theme.colors.primary : $theme.colors.mono600
  };
});
InnerThumb.displayName = "InnerThumb";
InnerThumb.displayName = 'StyledInnerThumb';
export var ThumbValue = styled('div', function (props) {
  var $theme = props.$theme;
  return _objectSpread({
    position: 'absolute',
    top: "-".concat($theme.sizing.scale800)
  }, $theme.typography.font300, {
    backgroundColor: 'transparent'
  });
});
ThumbValue.displayName = "ThumbValue";
ThumbValue.displayName = 'StyledThumbValue';