import { taggedTemplateLiteral as _taggedTemplateLiteral } from '../../../_virtual/_rollupPluginBabelHelpers.js';
import styled, { css } from 'styled-components';

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
var largeSizeCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 24px;\n  height: 24px;\n"])));
var mediumSizeCss = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 16px;\n  height: 16px;\n"])));
var smallSizeCss = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 12px;\n  height: 12px;\n"])));
var borderCss = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  color: ", ";\n  border: 1px solid ", ";\n  box-shadow: none;\n"])), function (_ref) {
  var theme = _ref.theme;
  return theme.colourMaterialPrimary;
}, function (_ref2) {
  var theme = _ref2.theme;
  return theme.colourMaterialBorder;
});
var HeatmapSliderWrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 12px;\n  span {\n    > span:nth-child(2) {\n      background: transparent;\n      border: none;\n    }\n    > span:nth-child(3) {\n      ", "\n\n      :hover {\n        box-shadow: none;\n      }\n      > span {\n        display: none;\n      }\n    }\n    > span:last-child {\n      ", "\n      :hover {\n        box-shadow: none;\n      }\n      > span {\n        display: none;\n      }\n    }\n  }\n\n  &.small-slider {\n    span {\n      > span:first-child {\n        height: 2px;\n        background: ", ";\n        opacity: 1;\n      }\n\n      > span:nth-child(3) {\n        ", "\n      }\n\n      > span:last-child {\n        ", "\n      }\n    }\n  }\n  &.medium-slider {\n    span {\n      > span:first-child {\n        height: 6px;\n        background: ", ";\n      }\n\n      > span:nth-child(3) {\n        ", "\n      }\n\n      > span:last-child {\n        ", "\n      }\n    }\n  }\n\n  &.large-slider {\n    span {\n      > span:first-child {\n        height: 12px;\n        background: ", ";\n      }\n\n      > span:nth-child(3) {\n        ", "\n      }\n\n      > span:last-child {\n        ", "\n      }\n    }\n  }\n"])), borderCss, borderCss, function (_ref3) {
  var theme = _ref3.theme;
  return theme.colourData3;
}, smallSizeCss, smallSizeCss, function (_ref4) {
  var theme = _ref4.theme;
  return theme.colourData2;
}, mediumSizeCss, mediumSizeCss, function (_ref5) {
  var theme = _ref5.theme;
  return theme.colourData1;
}, largeSizeCss, largeSizeCss);

export { HeatmapSliderWrapper };
//# sourceMappingURL=style.js.map
