import DayPicker from 'react-day-picker';
import { selectors } from '@defencedigital/design-tokens';
import styled, { css } from 'styled-components';
import { BUTTON_VARIANT } from '../../Button';
import { COMPONENT_SIZE } from '../../Forms';
import { getButtonStyles } from '../../Button/partials/StyledButton';
import { isIE11 } from '../../../helpers';
var color = selectors.color,
  spacing = selectors.spacing,
  fontSize = selectors.fontSize;
var DAY_SIZE = '34px';
export var StyledDayPicker = styled(DayPicker).withConfig({
  displayName: "StyledDayPicker",
  componentId: "sc-bds9aq-0"
})(["pointer-events:none;", " .DayPicker{display:inline-block;}.DayPicker-wrapper{position:relative;flex-direction:row;padding-bottom:", ";user-select:none;border-radius:15px;outline:none;}.DayPicker-Months{display:flex;flex-wrap:wrap;justify-content:center;}.DayPicker-Month{display:table;margin:0 ", ";margin-top:", ";border-spacing:0;border-collapse:collapse;user-select:none;}.DayPicker-NavButton{", ";position:absolute;top:", ";width:38px;background-position:center;background-size:18px;background-repeat:no-repeat;}.DayPicker-NavButton--prev{left:", ";background-image:url(\"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='16px' height='16px' viewBox='0 0 16 16' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3EIcons/Navigation/chevron-left%3C/title%3E%3Cdefs%3E%3Cpolygon id='path-1' points='10.2755556 4.9422222 9.33333334 3.99999998 5.33333332 8 9.33333334 12 10.2755556 11.0577778 7.21777777 8'%3E%3C/polygon%3E%3C/defs%3E%3Cg id='Icons/Navigation/chevron-left' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cmask id='mask-2' fill='white'%3E%3Cuse xlink:href='%23path-1'%3E%3C/use%3E%3C/mask%3E%3Cuse id='Icons/Navigation/ic_chevron_left_18px' fill='%23233745' fill-rule='nonzero' xlink:href='%23path-1'%3E%3C/use%3E%3C/g%3E%3C/svg%3E\");}.DayPicker-NavButton--next{right:", ";background-image:url(\"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='16px' height='16px' viewBox='0 0 16 16' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3EIcons/Navigation/chevron-right%3C/title%3E%3Cdefs%3E%3Cpolygon id='path-1' points='6.66666666 3.99999998 5.72444443 4.9422222 8.78222223 8 5.72444443 11.0577778 6.66666666 12 10.6666667 8'%3E%3C/polygon%3E%3C/defs%3E%3Cg id='Icons/Navigation/chevron-right' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cmask id='mask-2' fill='white'%3E%3Cuse xlink:href='%23path-1'%3E%3C/use%3E%3C/mask%3E%3Cuse id='Icons/Navigation/ic_chevron_right_18px' fill='%23233745' fill-rule='nonzero' xlink:href='%23path-1'%3E%3C/use%3E%3C/g%3E%3C/svg%3E\");}.DayPicker-NavButton--interactionDisabled{display:none;}.DayPicker-Caption{display:table-caption;margin-bottom:", ";height:1.5rem;color:", ";font-size:", ";line-height:1.5rem;text-align:center;white-space:nowrap;}.DayPicker-Weekdays{display:table-header-group;margin-top:", ";}.DayPicker-WeekdaysRow{display:table-row;}.DayPicker-Weekday{display:table-cell;padding:0 ", " ", ";text-align:center;text-transform:uppercase;font-size:", ";color:", ";font-weight:600;}.DayPicker-Weekday abbr[title]{border-bottom:none;text-decoration:none;}.DayPicker-Body{display:table-row-group;}.DayPicker-Week{display:table-row;}.DayPicker-Day{position:relative;display:table-cell;border:1px solid ", ";font-size:", ";font-weight:400;color:", ";text-align:center;vertical-align:middle;height:", ";width:", ";cursor:pointer;&:focus{outline:none;&::after{content:'';position:absolute;left:0;top:0;right:0;bottom:0;box-shadow:0 0 0 2px ", ",0 0 0 4px ", ";z-index:1000;", "}}}.DayPicker-Day--outside{border:none;visibility:hidden;}&.DayPicker--interactionDisabled .DayPicker-Day,.DayPicker-Day--outside{cursor:default;}.DayPicker-Day:not(.DayPicker-Day--outside){&.DayPicker-Day--today{color:", ";}&.DayPicker-Day--selected{background-color:", ";}&.DayPicker-Day--start,&.DayPicker-Day--end{color:", ";background-color:", ";}}&:not(.DayPicker--interactionDisabled){.DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--start):not(.DayPicker-Day--end):not(.DayPicker-Day--outside):hover{background-color:", ";}}.DayPicker-Day--disabled{color:", ";pointer-events:none;}"], function (_ref) {
  var $isVisible = _ref.$isVisible;
  return $isVisible && css(["pointer-events:all;"]);
}, spacing('8'), spacing('6'), spacing('8'), getButtonStyles({
  $size: COMPONENT_SIZE.SMALL,
  $variant: BUTTON_VARIANT.TERTIARY
}), spacing('6'), spacing('6'), spacing('6'), spacing('8'), color('neutral', '600'), fontSize('base'), spacing('8'), spacing('2'), spacing('4'), fontSize('xs'), color('neutral', '400'), color('neutral', '000'), fontSize('m'), color('neutral', '500'), DAY_SIZE, DAY_SIZE, color('action', '500'), color('action', '100'), isIE11() && css(["left:-1px;top:-1px;right:-1px;height:", ";"], DAY_SIZE), color('warning', '800'), color('action', '000'), color('neutral', 'white'), color('action', '700'), color('neutral', '100'), color('neutral', '200'));