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

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
var datepickerCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  padding: 5px;\n  font-family: ", ";\n  font-size: ", ";\n\n  color: ", ";\n  margin: 0px;\n"])), function (_ref) {
  var theme = _ref.theme;
  return theme.fontWorkSansRegular;
}, function (_ref2) {
  var theme = _ref2.theme;
  return theme.fontSize_10;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.colourTextSecondary;
});
var DatePickerButtonWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .DatePickerButton {\n    font-family: ", ";\n    width: auto;\n    height: 47px;\n    top: -1px;\n    background: ", ";\n    border-top-left-radius: 4px;\n    border-bottom-left-radius: 4px;\n    border: 1px solid ", ";\n    gap: 20px;\n    text-transform: none;\n    color: ", ";\n    padding: 9px 20px;\n\n    :hover {\n      background: ", ";\n    }\n\n    > span {\n      margin: 0px;\n      > div {\n        display: flex;\n        > svg {\n          > path {\n            fill-opacity: 1;\n          }\n        }\n      }\n    }\n  }\n\n  .react-datepicker {\n    display: flex;\n  }\n\n  .DatePickerButtonWithDate {\n    width: auto;\n    padding: 10px;\n    gap: 0px;\n    justify-content: space-between;\n  }\n"])), function (_ref4) {
  var theme = _ref4.theme;
  return theme.fontWorkSansRegular;
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.colourMaterialPrimary;
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.colourMaterialBorder;
}, function (_ref7) {
  var theme = _ref7.theme;
  return theme.colourTextPrimary;
}, function (_ref8) {
  var theme = _ref8.theme;
  return theme.colourMaterialPrimaryHover;
});
styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  > div:first-child {\n    > div:last-child {\n      > div {\n        input {\n          border: 1px solid ", ";\n          background: ", ";\n\n          :hover {\n            background: ", ";\n          }\n\n          :focus {\n            background: ", ";\n          }\n        }\n      }\n    }\n  }\n"])), function (_ref9) {
  var theme = _ref9.theme;
  return theme.colourMaterialBorder;
}, function (_ref10) {
  var theme = _ref10.theme;
  return theme.colourMaterialPrimary;
}, function (_ref11) {
  var theme = _ref11.theme;
  return theme.colourMaterialPrimaryHover;
}, function (_ref12) {
  var theme = _ref12.theme;
  return theme.colourBrandPrimaryTintLight;
});
var DatePickerWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  .react-datepicker-popper[data-placement^=\"bottom\"]\n    .react-datepicker__triangle {\n    display: none;\n  }\n  .react-datepicker__current-month {\n    font-family: ", ";\n    font-size: ", ";\n    color: ", ";\n  }\n  .react-datepicker__day-name {\n    ", "\n  }\n\n  .react-datepicker__day--selected {\n    color: ", " !important;\n  }\n\n  .react-datepicker__day {\n    ", "\n\n    :hover {\n      background: ", ";\n      color: ", ";\n    }\n  }\n  .react-datepicker__header {\n    background: none;\n    border: none;\n    padding: 0px;\n    margin-top: 20px;\n  }\n\n  .react-datepicker__day--keyboard-selected {\n    background: ", " !important;\n    color: ", " !important;\n    :hover {\n      background: ", " !important;\n      color: ", " !important;\n    }\n  }\n\n  react-datepicker__day--outside-month {\n    background: ", " !important;\n    color: ", " !important;\n  }\n\n  .react-datepicker__day--in-range {\n    background: ", ";\n    color: ", ";\n    border-radius: 0px;\n\n    :hover {\n      background: ", ";\n      color: ", ";\n      border-radius: 0px;\n    }\n  }\n\n  .react-datepicker__day--in-selecting-range {\n    background: ", " !important;\n    color: ", " !important;\n    border-radius: 0px !important;\n  }\n  .react-datepicker__navigation-icon::before {\n    color: ", ";\n    font-family: ", ";\n    font-weight: ", ";\n  }\n\n  .react-datepicker__navigation {\n    align-items: flex-start;\n  }\n\n  .react-datepicker__day--range-start {\n    background: ", " !important;\n    color: ", " !important;\n    border-radius: 4px !important;\n  }\n  .react-datepicker__day--range-end {\n    background: ", " !important;\n    color: ", " !important;\n    border-radius: 4px !important;\n  }\n\n  .react-datepicker__day--outside-month {\n    background: ", " !important;\n    color: ", " !important;\n    border-radius: 4px !important;\n  }\n\n  .react-datepicker {\n    border: none;\n    border-radius: 0px;\n    border-left: 1px solid ", ";\n    padding-left: 20px;\n  }\n\n  .react-datepicker__week {\n    text-align: left;\n    margin-bottom: 4px;\n    > div:empty {\n      background-color: ", " !important;\n      display: none;\n    }\n  }\n"])), function (_ref13) {
  var theme = _ref13.theme;
  return theme.fontWorkSansRegular;
}, function (_ref14) {
  var theme = _ref14.theme;
  return theme.fontSize14;
}, function (_ref15) {
  var theme = _ref15.theme;
  return theme.colourTextPrimary;
}, datepickerCss, function (_ref16) {
  var theme = _ref16.theme;
  return theme.colourMaterialPrimary;
}, datepickerCss, function (_ref17) {
  var theme = _ref17.theme;
  return theme.colourMaterialPrimaryHover;
}, function (_ref18) {
  var theme = _ref18.theme;
  return theme.colourTextPrimary;
}, function (_ref19) {
  var theme = _ref19.theme;
  return theme.colourBrandPrimary;
}, function (_ref20) {
  var theme = _ref20.theme;
  return theme.colourTextReversePrimary;
}, function (_ref21) {
  var theme = _ref21.theme;
  return theme.colourBrandPrimary;
}, function (_ref22) {
  var theme = _ref22.theme;
  return theme.colourTextReversePrimary;
}, function (_ref23) {
  var theme = _ref23.theme;
  return theme.colourMaterialPrimaryBackground;
}, function (_ref24) {
  var theme = _ref24.theme;
  return theme.colourTextReverseDisabled;
}, function (_ref25) {
  var theme = _ref25.theme;
  return theme.colourMaterialSecondary;
}, function (_ref26) {
  var theme = _ref26.theme;
  return theme.colourTextPrimary;
}, function (_ref27) {
  var theme = _ref27.theme;
  return theme.colourMaterialSecondary;
}, function (_ref28) {
  var theme = _ref28.theme;
  return theme.colourTextPrimary;
}, function (_ref29) {
  var theme = _ref29.theme;
  return theme.colourMaterialSecondary;
}, function (_ref30) {
  var theme = _ref30.theme;
  return theme.colourTextPrimary;
}, function (_ref31) {
  var theme = _ref31.theme;
  return theme.colourTextSecondary;
}, function (_ref32) {
  var theme = _ref32.theme;
  return theme.fontWorkSansRegular;
}, function (_ref33) {
  var theme = _ref33.theme;
  return theme.fontWeight_900;
}, function (_ref34) {
  var theme = _ref34.theme;
  return theme.colourBrandPrimary;
}, function (_ref35) {
  var theme = _ref35.theme;
  return theme.colourTextReversePrimary;
}, function (_ref36) {
  var theme = _ref36.theme;
  return theme.colourBrandPrimary;
}, function (_ref37) {
  var theme = _ref37.theme;
  return theme.colourTextReversePrimary;
}, function (_ref38) {
  var theme = _ref38.theme;
  return theme.colourMaterialPrimaryBackground;
}, function (_ref39) {
  var theme = _ref39.theme;
  return theme.colourTextDisabled;
}, function (_ref40) {
  var theme = _ref40.theme;
  return theme.colourMaterialBorder;
}, function (_ref41) {
  var theme = _ref41.theme;
  return theme.colourMaterialPrimary;
});
var DatePickerContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  width: fit-content;\n  margin-top: 10px;\n  box-shadow: 0px -3px 20px ", ";\n  background: ", ";\n  border-radius: 1px solid ", ";\n  border-radius: 4px;\n"])), function (_ref42) {
  var theme = _ref42.theme;
  return theme.colorBoxShadow;
}, function (_ref43) {
  var theme = _ref43.theme;
  return theme.colourMaterialPrimary;
}, function (_ref44) {
  var theme = _ref44.theme;
  return theme.colourMaterialBorder;
});
var DatePickerSettingPanelContainer = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: 100%;\n  display: inline-flex;\n"])));
var DatePickerSettingPanelWrapper = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\npadding: 20px 10px;\nwidth: fit-content;\n\n.css-10d9dml-MuiTabs-indicator{\n    display: none;\n}\n\n.css-aym9vq-MuiButtonBase-root-MuiTab-root.Mui-selected{\n    background: ", ";\n    color: ", ";\n    svg{\n        path{\n            fill: ", ";\n            fill-opacity: 1 !important;\n        }\n    }\n}\n  div {\n    div {\n      div {\n          gap: 10px;\n        button {\n            padding: 9px 10px;\n          display: inline-flex;\n          flex-direction: row;\n          justify-content: start;\n          max-width: 0;\n          min-width: 102px;\n          min-height: 37px;\n          align-items: center;\n          background: ", ";\n          border-radius: 4px;\n          font-family : ", ";\n          font-size : ", ";\n  \n          text-transform: none;\n          \n          svg{\n              margin-right: 10px;\n          }\n\n          :hover{\n            background: ", ";\n          }\n\n          .css-8je8zh-MuiTouchRipple-root{\n              display: none;\n          }\n\n        }\n    }\n  }\n"])), function (_ref45) {
  var theme = _ref45.theme;
  return theme.colourMaterialSecondary;
}, function (_ref46) {
  var theme = _ref46.theme;
  return theme.colourBrandPrimaryDark;
}, function (_ref47) {
  var theme = _ref47.theme;
  return theme.colourBrandPrimaryDark;
}, function (_ref48) {
  var theme = _ref48.theme;
  return theme.colourMaterialPrimary;
}, function (_ref49) {
  var theme = _ref49.theme;
  return theme.fontWorkSansRegular;
}, function (_ref50) {
  var theme = _ref50.theme;
  return theme.fontSize14;
}, function (_ref51) {
  var theme = _ref51.theme;
  return theme.colourMaterialPrimaryHover;
});
var DatePickerSettingPanelScreen = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  padding: 20px 20px 20px 0px;\n"])));
styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  font-family: ", ";\n  font-size: ", ";\n  color: ", ";\n"])), function (_ref52) {
  var theme = _ref52.theme;
  return theme.fontWorkSansRegular;
}, function (_ref53) {
  var theme = _ref53.theme;
  return theme.fontSize_10;
}, function (_ref54) {
  var theme = _ref54.theme;
  return theme.colourTextPrimary;
});
var TimeContainer = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  border-left: 1px solid ", ";\n  margin-top: 10px;\n"])), function (_ref55) {
  var theme = _ref55.theme;
  return theme.colourMaterialBorder;
});
var DateTimeWrapper = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 47px;\n  width: 189px;\n  padding: 14px 24px;\n  background: ", ";\n  border-radius: 4px;\n  justify-content: space-between;\n\n  > div > span {\n    color: ", ";\n    font-size: 14px;\n  }\n"])), function (_ref56) {
  var theme = _ref56.theme;
  return theme.hexColourData1;
}, function (_ref57) {
  var theme = _ref57.theme;
  return theme.colourTextWhite;
});
var TimeSelect = styled.select(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  appearance: none;\n  background: ", ";\n  color: ", ";\n  text-align: center;\n  width: 25px;\n  font-size: 14px;\n\n  &:focus-visible {\n    outline: 0;\n  }\n"])), function (_ref58) {
  var theme = _ref58.theme;
  return theme.hexColourData1;
}, function (_ref59) {
  var theme = _ref59.theme;
  return theme.colourTextWhite;
});

export { DatePickerButtonWrapper, DatePickerContainer, DatePickerSettingPanelContainer, DatePickerSettingPanelScreen, DatePickerSettingPanelWrapper, DatePickerWrapper, DateTimeWrapper, TimeContainer, TimeSelect };
//# sourceMappingURL=style.js.map
