import styled, { css } from 'styled-components';
import { setLightness } from 'polished';
import { RANGE_SLIDER_TRACK_BELOW_FIRST_THRESHOLD, RANGE_SLIDER_BG_COLOR } from '../constants';
export var StyledMarker = styled.div.withConfig({
  displayName: "StyledMarker",
  componentId: "sc-182lzys-0"
})(["position:absolute;width:6px;height:6px;border-radius:999px;transform:translate(-50%,-50%);pointer-events:none;background-color:", ";left:", ";", " ", " ", ""], RANGE_SLIDER_BG_COLOR, function (_ref) {
  var $left = _ref.$left;
  return $left;
}, function (_ref2) {
  var $isActive = _ref2.$isActive;
  return $isActive && css(["background-color:", ";"], RANGE_SLIDER_TRACK_BELOW_FIRST_THRESHOLD);
}, function (_ref3) {
  var $thresholdColor = _ref3.$thresholdColor;
  return $thresholdColor && css(["background-color:", ";"], setLightness(0.85, $thresholdColor));
}, function (_ref4) {
  var $isActive = _ref4.$isActive,
    $thresholdColor = _ref4.$thresholdColor;
  return $isActive && $thresholdColor && css(["background-color:", ";"], $thresholdColor);
});