"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.getDateRangePickerStyles = void 0;

var _branding = require("../../mixins/branding");

var _typography = require("../../mixins/typography");

var _focus = require("../../mixins/focus");

var _color = require("../../utils/color");

var getDateRangePickerStyles = function getDateRangePickerStyles(_ref) {
  var theme = _ref.theme;
  return "\n/* DayPicker styles */\n\n.DayPicker {\n  display: inline-block;\n  outline: none;\n}\n\n.DayPicker-wrapper {\n  position: relative;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  padding-bottom: 1rem;\n  flex-direction: row;\n  ".concat((0, _focus.getBaseFocusState)({}), "\n  ").concat(_focus.FOCUS_VISIBLE_SELECTOR, " {\n    box-shadow: ").concat((0, _focus.focusedBoxShadow)({
    theme: theme
  }), ", ").concat((0, _focus.focusedBorderShadow)({
    theme: theme
  }), " ").concat((0, _focus.focusedBorderColor)({
    theme: theme
  }), ";\n    border-radius: 10px;\n  }\n}\n\n.DayPicker-Months {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n}\n\n.DayPicker-Month {\n  display: table;\n  border-collapse: collapse;\n  border-spacing: 0;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  margin: 0 1rem;\n  margin-top: 1rem;\n}\n\n.DayPicker-NavButton {\n  position: absolute;\n  cursor: pointer;\n  top: 1rem;\n  right: 1.5rem;\n  margin-top: 2px;\n  color: ").concat((0, _branding.getPaletteColor)('greyscale-darker')({
    theme: theme
  }) || '', ";\n  width: 1.25rem;\n  height: 1.25rem;\n  display: inline-block;\n  background-size: 50%;\n  background-repeat: no-repeat;\n  background-position: center;\n  ").concat((0, _focus.getBaseFocusState)({}), "\n  ").concat(_focus.FOCUS_VISIBLE_SELECTOR, " {\n    box-shadow: ").concat((0, _focus.focusedBoxShadow)({
    theme: theme
  }), ", ").concat((0, _focus.focusedBorderShadow)({
    theme: theme
  }), " ").concat((0, _focus.focusedBorderColor)({
    theme: theme
  }), ";\n  }\n}\n\n.DayPicker-NavButton:hover {\n  opacity: 0.8;\n}\n\n.DayPicker-NavButton--prev {\n  margin-right: 1.5rem;\n  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAwCAYAAAB5R9gVAAAABGdBTUEAALGPC/xhBQAAAVVJREFUWAnN2G0KgjAYwPHpGfRkaZeqvgQaK+hY3SUHrk1YzNLay/OiEFp92I+/Mp2F2Mh2lLISWnflFjzH263RQjzMZ19wgs73ez0o1WmtW+dgA01VxrE3p6l2GLsnBy1VYQOtVSEH/atCCgqpQgKKqYIOiq2CBkqtggLKqQIKgqgCBjpJ2Y5CdJ+zrT9A7HHSTA1dxUdHgzCqJIEwq0SDsKsEg6iqBIEoq/wEcVRZBXFV+QJxV5mBtlDFB5VjYTaGZ2sf4R9PM7U9ZU+lLuaetPP/5Die3ToO1+u+MKtHs06qODB2zBnI/jBd4MPQm1VkY79Tb18gB+C62FdBFsZR6yeIo1YQiLJWMIiqVjQIu1YSCLNWFgijVjYIuhYYCKoWKAiiFgoopxYaKLUWOii2FgkophYp6F3r42W5A9s9OcgNvva8xQaysKXlFytoqdYmQH6tF3toSUo0INq9AAAAAElFTkSuQmCC');\n}\n\n.DayPicker-NavButton--next {\n  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAwCAYAAAB5R9gVAAAABGdBTUEAALGPC/xhBQAAAXRJREFUWAnN119ugjAcwPHWzJ1gnmxzB/BBE0n24m4xfNkTaOL7wOtsl3AXMMb+Vjaa1BG00N8fSEibPpAP3xAKKs2yjzTPH9RAjhEo9WzPr/Vm8zgE0+gXATAxxuxtqeJ9t5tIwv5AtQAApsfT6TPdbp+kUBcgVwvO51KqVhMkXKsVJFXrOkigVhCIs1Y4iKlWZxB1rX4gwlpRIIpa8SDkWmggrFq4IIRaJKCYWnSgnrXIQV1r8YD+1Vrn+bReagysIFfLABRt31v8oBu1xEBttfRbltmfjgEcWh9snUS2kNdBK6WN1vrOWxObWsz+fjxevsxmB1GQDfINWiev83nhaoiB/CoOU438oPrhXS0WpQ9xc1ZQWxWHqUYe0I0qrKCQKjygDlXIQV2r0IF6ViEBxVTBBSFUQQNhVYkHIVeJAtkNsbQ7c1LtzP6FsObhb2rCKv7NBIGoq4SDmKoEgTirXAcJVGkFSVVpgoSrXICGUMUH/QBZNSUy5XWUhwAAAABJRU5ErkJggg==');\n}\n\n.DayPicker-NavButton--interactionDisabled {\n  display: none;\n}\n\n.DayPicker-Caption {\n  padding: 0 0.5rem;\n  display: table-caption;\n  text-align: left;\n  margin-bottom: 0.5rem;\n}\n\n.DayPicker-Caption > div {\n  font-size: ").concat((0, _typography.getFontSize)({
    theme: theme,
    fontSize: 'f2'
  }), ";\n  font-weight: ").concat((0, _typography.getFontWeight)({
    theme: theme
  }), ";\n  color: ").concat((0, _branding.getPaletteColor)('greyscale-black')({
    theme: theme
  }) || '', ";\n}\n\n.DayPicker-Weekdays {\n  margin-top: 1rem;\n  display: table-header-group;\n}\n\n.DayPicker-WeekdaysRow {\n  display: table-row;\n}\n\n.DayPicker-Weekday {\n  display: table-cell;\n  font-size: ").concat((0, _typography.getFontSize)({
    theme: theme,
    fontSize: 'f0'
  }), ";\n  text-align: center;\n  color: ").concat((0, _branding.getPaletteColor)('greyscale-darker')({
    theme: theme
  }) || '', ";\n}\n\n.DayPicker-Weekday abbr[title] {\n  border-bottom: none;\n  text-decoration: none;\n}\n\n.DayPicker-Body {\n  display: table-row-group;\n}\n\n.DayPicker-Week {\n  display: table-row;\n}\n\n.DayPicker-Day {\n  outline: none;\n  ").concat((0, _focus.getBaseFocusState)({}), "\n  ").concat(_focus.FOCUS_VISIBLE_SELECTOR, " {\n    box-shadow: ").concat((0, _focus.focusedBoxShadow)({
    theme: theme
  }), ", ").concat((0, _focus.focusedBorderShadow)({
    theme: theme
  }), " ").concat((0, _focus.focusedBorderColor)({
    theme: theme
  }), ";\n  }\n  display: table-cell;\n  height: 37px;\n  width: 37px;\n  text-align: center;\n  cursor: pointer;\n  vertical-align: middle;\n  border-radius: 50%;\n  color: ").concat((0, _branding.getPaletteColor)('greyscale-black')({
    theme: theme
  }) || '', ";\n}\n\n.DayPicker-WeekNumber {\n  display: table-cell;\n  text-align: right;\n  vertical-align: middle;\n  min-width: 1rem;\n  font-size: ").concat((0, _typography.getFontSize)({
    theme: theme,
    fontSize: 'f0'
  }), ";\n  cursor: pointer;\n  color: ").concat((0, _branding.getPaletteColor)('greyscale-darker')({
    theme: theme
  }) || '', ";\n  border-right: 1px solid ").concat((0, _branding.getPaletteColor)('greyscale-light')({
    theme: theme
  }) || '', ";\n}\n\n.DayPicker--interactionDisabled .DayPicker-Day {\n  cursor: default;\n}\n\n.DayPicker-Footer {\n  padding-top: 0.5rem;\n}\n\n.DayPicker-TodayButton {\n  border: none;\n  background-image: none;\n  background-color: transparent;\n  box-shadow: none;\n  cursor: pointer;\n  color: ").concat((0, _branding.getPaletteColor)('brand-secondary-base')({
    theme: theme
  }) || '', ";\n  font-size: ").concat((0, _typography.getFontSize)({
    theme: theme,
    fontSize: 'f0'
  }), ";\n}\n\n/* Default modifiers */\n\n.DayPicker-Day--today {\n  color: ").concat((0, _branding.getPaletteColor)('brand-secondary-base')({
    theme: theme
  }) || '', ";\n  font-family: ").concat((0, _typography.getFontFamily)({
    theme: theme
  }), ";\n  font-weight: ").concat((0, _typography.getFontWeight)({
    theme: theme,
    bold: true
  }), ";\n}\n\n.DayPicker-Day--outside {\n  cursor: default;\n  color: ").concat((0, _branding.getPaletteColor)('greyscale-darker')({
    theme: theme
  }) || '', ";\n}\n\n.DayPicker-Day--disabled {\n  color: ").concat((0, _branding.getPaletteColor)('greyscale-medium')({
    theme: theme
  }) || '', ";\n  cursor: default;\n}\n\n.DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) {\n  position: relative;\n  color: ").concat((0, _branding.getPaletteColor)('white')({
    theme: theme
  }) || '', ";\n  background-color: ").concat((0, _branding.getPaletteColor)('brand-secondary-base')({
    theme: theme
  }) || '', ";\n}\n\n.DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside):hover {\n  background-color: ").concat((0, _branding.getPaletteColor)('brand-secondary-base')({
    theme: theme
  }) || '', ";\n}\n\n.DayPicker:not(.DayPicker--interactionDisabled)\n  .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside):hover {\n  background-color: ").concat((0, _branding.getPaletteColor)('greyscale-light')({
    theme: theme
  }) || '', ";\n}\n\n/* DayPickerInput */\n\n.DayPickerInput {\n  display: inline-block;\n}\n\n/* Custom for Patchwork */\n.DayPickerInput > input {\n  width: 100%; /* it should take the full width of its Box container */\n  height: 40px;\n  border-radius: 6px;\n  background-color: ").concat((0, _branding.getPaletteColor)('white')({
    theme: theme
  }) || '', ";\n  border: solid 1px ").concat((0, _branding.getPaletteColor)('greyscale-light')({
    theme: theme
  }) || '', ";\n\n  padding: 14px 30px 14px 20px;\n  color: ").concat((0, _branding.getPaletteColor)('greyscale-black')({
    theme: theme
  }) || '', ";\n  font-size: ").concat((0, _typography.getFontSize)({
    theme: theme,
    fontSize: 'f1'
  }), ";\n  line-height: 1;\n  font-family: ").concat((0, _typography.getFontFamily)({
    theme: theme
  }), ";\n}\n/* End custom for Patchwork */\n\n.DayPickerInput-OverlayWrapper {\n  position: relative;\n}\n\n.DayPickerInput-Overlay {\n  left: 0;\n  z-index: 2;\n  position: absolute;\n  background: ").concat((0, _branding.getPaletteColor)('white')({
    theme: theme
  }) || '', ";\n  box-shadow: 0 5px 15px ").concat((0, _color.fadeColor)((0, _branding.getPaletteColor)('greyscale-black')({
    theme: theme
  }), 0.95), ";\n  border: solid 1px ").concat((0, _branding.getPaletteColor)('greyscale-light')({
    theme: theme
  }) || '', "; /* custom */\n  border-radius: 3px;\n}\n\n.Range .DayPicker-Day--selected:not(.DayPicker-Day--start):not(.DayPicker-Day--end):not(.DayPicker-Day--outside) {\n  background-color: ").concat((0, _branding.getPaletteColor)('brand-secondary-bg')({
    theme: theme
  }), " !important;\n  color: ").concat((0, _branding.getPaletteColor)('brand-secondary-fg')({
    theme: theme
  }), ";\n}\n.Range .DayPicker-Day {\n  border-radius: 0 !important;\n}\n");
};

exports.getDateRangePickerStyles = getDateRangePickerStyles;