/* DayPicker styles (version 7.1.10) */

.DayPicker {
	user-select: none;
}

.DayPicker-wrapper {
	position: relative;
	display: flex;
	justify-content: center;
	padding: calc(var(--rrui-unit) * 2);
	/* A colored line at the bottom of the calendar
	   to indicate that it's focused (when focused). */
	border-bottom: 0.1em solid transparent;
}

.DayPicker-wrapper:focus {
	border-bottom-color: var(--rrui-date-picker-calendar-border-color-focus);
}

.DayPicker-NavButton {
	position : absolute;
	top      : calc(var(--rrui-unit) * 2 + 0.25em);
	cursor   : pointer;
	width    : 1.5em;
	height   : 1.5em;
}

.DayPicker-NavButton--prev {
	left: calc(var(--rrui-unit) * 2 + 0.25em);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='fill: currentColor; color: %2303b2cb;'%3E%3Cpath d='M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z'%3E%3C/path%3E%3C/svg%3E");
}

.DayPicker-NavButton--next {
	right: calc(var(--rrui-unit) * 2 + 0.25em);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='fill: currentColor; color: %2303b2cb;'%3E%3Cpath d='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'%3E%3C/path%3E%3C/svg%3E");
}

.DayPicker-NavButton--prev:focus,
.DayPicker-NavButton--next:focus {
	background-color: #f7f7f7;
	border-radius: 50%;
}

.DayPicker-NavButton--interactionDisabled {
	display: none;
}

.DayPicker-Caption {
	/* iPhone moves <select/>s around the screen on focus when using `display: table-caption`. */
	/* display: table-caption; */
	text-align: center;
	margin-bottom: 1em;
}

.DayPicker-Weekdays {
	margin-top: 1em;
	display: table-header-group;
}

.DayPicker-WeekdaysRow {
	display: table-row;
}

.DayPicker-Weekday {
	display: table-cell;
	padding: 0.5em;
	font-size: 0.875em;
	text-align: center;
	color: var(--rrui-date-picker-calendar-weekday-color);
}

.DayPicker-Weekday abbr[title] {
	border-bottom: none;
	text-decoration: none;
}

.DayPicker-Body {
	display: table-row-group;
}

.DayPicker-Week {
	display: table-row;
}

.DayPicker-Day {
	display: table-cell;
	padding: 0.5em;
	text-align: center;
	cursor: pointer;
	vertical-align: middle;
	border-radius: 50%;
}

.DayPicker--interactionDisabled .DayPicker-Day {
	cursor: default;
}

/* Default modifiers */

.DayPicker-Day--today:not(.DayPicker-Day--selected):not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside)
{
	color: var(--rrui-date-picker-calendar-day-color--today);
	font-weight: var(--rrui-date-picker-calendar-day-font-weight--today);
}

.DayPicker-Day--outside
{
	cursor: default;
	color: var(--rrui-date-picker-calendar-day-color-outside);
}

.DayPicker-Day--disabled
{
	color: var(--rrui-date-picker-calendar-day-color-disabled);
	cursor: default;
}

.DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside)
{
	color: var(--rrui-date-picker-calendar-day-color-selected);
	background-color: var(--rrui-date-picker-calendar-day-background-color-selected);
}

/* .DayPicker:not(.DayPicker--interactionDisabled) ... */
.DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside):hover
{
	color: var(--rrui-date-picker-calendar-day-color-focus);
	background-color: var(--rrui-date-picker-calendar-day-background-color-focus);
}

.DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside):active
{
	color: var(--rrui-date-picker-calendar-day-color-active);
	background-color: var(--rrui-date-picker-calendar-day-background-color-active);
}

/* =============================== */
/* Custom `react-daypicker` styles */
/* =============================== */

.DayPicker-Months
{
	margin-top : 0.5em;
}

.DayPicker-Month
{
	margin-top : 0;
}

.DayPicker-MonthSelect
{
	margin-right : 0.3em;
}

.DayPicker-MonthSelect,
.DayPicker-YearSelect
{
	display  : inline-block;
	position : relative;
}

/* `:focus` styles are implemented using
   `background-color` / `border-color`
   instead of a standard `outline`. */
/* Didn't add `:focus` specifier for lesser CSS rule priority. */
/* ------------------------------------ */
/* `.DayPicker-wrapper` is a `<div/>` wrapping the calendar.
   It gets focused upon expanding which causes an outline.
   That outline can be safely removed because it doesn't aid accesiblity. */
.rrui__date-picker:not(.rrui__outline--default) .DayPicker-wrapper,
/* Calendar days have `background-color` on `:focus`.
   Therefore their `outline` can be safely removed. */
.rrui__date-picker:not(.rrui__outline--default) .DayPicker-Day,
/* Previous/Next month buttons have `background-color` on `:focus`.
   Therefore their `outline` can be safely removed. */
.rrui__date-picker:not(.rrui__outline--default) .DayPicker-NavButton
{
	outline: none;
}

/* https://github.com/gpbl/react-day-picker/issues/708 */
/*
.DayPicker-NavButton:active
{
	color : var(--rrui-accent-color-light);
}
*/

/* ----------------------------------------------------- */
/* -                  `<DatePicker/>`                  - */
/* ----------------------------------------------------- */

.rrui__date-picker
{
	position: relative;
}

.rrui__date-picker .rrui__expandable
{
	min-width  : 100%;
	background-color : var(--rrui-list-item-background-color);
	color : var(--rrui-list-item-text-color);
}

.rrui__date-picker .rrui__expandable__content
{
	/* For compatibility with older versions. */
	/* Deprecated. Will be removed in versions > 0.14. */
	padding : 0;
}

.rrui__date-picker__calendar abbr
{
	text-decoration : none;
}

.rrui__date-picker__input-overlay
{
	/*
	Set `display` to `block` for fullscreen `.rrui__expandable` design.
	This works around the mobile keyboard appearing from the bottom.
	display  : block;
	*/
	display  : none;
	position : absolute;
	top      : 0;
	width    : 100%;
	height   : 100%;

	/* `z-index` could potentially cause a bug
	   when the overlay would be above other content on a page
	   resulting in it capturing events like "mousedown" or "click". */
	/* z-index  : 1; */
	outline  : none;
}

.rrui__date-picker__close
{
	/*
	Set `display` to `block` for fullscreen `.rrui__expandable` design.
	display      : block;
	*/
	display      : none;
}

.rrui__date-picker:focus
{
	display: none
}

.rrui__date-picker__icon
{
	position : absolute;
	top      : calc((var(--rrui-input-height) - var(--rrui-unit) * 1.5) / 2);
	right    : calc(var(--rrui-unit) / 2);
	width    : calc(var(--rrui-unit) * 1.5);
	height   : calc(var(--rrui-unit) * 1.5);
	opacity  : 0.5;
	color    : var(--rrui-black-color);

	/* `z-index` could potentially cause a bug
	   when the button would be above other content on a page
	   resulting in it capturing events like "mousedown" or "click". */
	/* z-index  : 1; */
}

.rrui__date-picker__icon--hidden
{
	display : none;
}

/*
// Adding `:focus` style for date picker icon is not required
// because it's not tabbable (`tabIndex={-1}`).
.rrui__date-picker__icon:focus,
*/
.rrui__date-picker .rrui__expanded--expanded .rrui__date-picker__icon
{
	opacity : 1;
	color   : var(--rrui-accent-color);
}

.rrui__date-picker__icon:focus
{
	opacity : 1;
	color   : var(--rrui-accent-color);
}

.rrui__date-picker__icon:active
{
	opacity : 1;
	color   : var(--rrui-accent-color-light);
}

.DayPicker-YearSelect select:focus + button .rrui__select__arrow,
.DayPicker-MonthSelect select:focus + button .rrui__select__arrow
{
	color : var(--rrui-select-toggler-text-color-active);
}