"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

const styleh_components_1 = require("styleh-components");

const Text_1 = require("../../atoms/Text");

const rangeWidth = 300;

function selectedColor(props) {
  const list = [];
  const fillRange = rangeWidth / (props.max / props.step) * (props.state.selectedValue / props.step);

  for (let i = 0; i < fillRange; i++) {
    const divider = i === fillRange - 1 ? ' ' : ',';
    const shadow = i + 'px 0 0 -5px #218cd3' + divider;
    list.push(shadow);
  }

  return list;
}

const MaxValue = styleh_components_1.styled.withComponent(Text_1.Label)`text-transform:capitalize;`;
exports.MaxValue = MaxValue;
const MinValue = styleh_components_1.styled.withComponent(Text_1.Label)`text-transform:capitalize;`;
exports.MinValue = MinValue;
const FlexSpacing = styleh_components_1.styled.div`display:flex;justify-content:space-between;`;
exports.FlexSpacing = FlexSpacing;
const StyledInput = styleh_components_1.styled.input`position:absolute;border:none;border-radius:14px;overflow:hidden;left:0;top:50px;width:300px;outline:none;height:20px;margin:0;padding:0;&::-webkit-slider-thumb{pointer-events:all;position:relative;z-index:1;outline:0;-webkit-appearance:none;width:20px;height:20px;border:none;border-radius:14px;}`;
exports.StyledInput = StyledInput;
const InputWrapper = styleh_components_1.styled.div``;
exports.InputWrapper = InputWrapper;
const StyledMinValueInput = styleh_components_1.styled.withComponent(StyledInput)`&::-webkit-slider-runnable-track{width:100%;height:30px;background:linear-gradient(to bottom,red,red) 100% 50%/100% 3px no-repeat transparent;}&::-webkit-slider-thumb{position:relative;-webkit-appearance:none;appearance:none;height:13px;width:13px;background:#0199ff;border-radius:100%;border:0;top:50%;margin-top:-8px;box-shadow:${props => selectedColor(props)};transition:background-color 150ms;}`;
exports.StyledMinValueInput = StyledMinValueInput;
const StyledMaxValueInput = styleh_components_1.styled.withComponent(StyledInput)``;
exports.StyledMaxValueInput = StyledMaxValueInput;
const Wrapper = styleh_components_1.styled.section`width:${rangeWidth}px;position:relative;`;
exports.Wrapper = Wrapper; //# sourceMappingURL=styled.js.map