@import "./datepicker";

.components-datetime {
	// This padding is leveraged when the component is used alone,
	// usually inside popovers.
	padding: $grid-unit-20;

	// This rule removes the padding when used inside a panel.
	.components-panel__body & {
		padding: 0;
	}

	.components-datetime__calendar-help {
		padding: $grid-unit-20;
		min-width: 260px;

		h4 {
			margin: 0;
		}
	}

	.components-datetime__buttons {
		display: flex;
		justify-content: space-between;
	}

	.components-datetime__date-help-toggle {
		display: block;
		margin-left: auto;
	}

	fieldset {
		border: 0;
		padding: 0;
		margin: 0;
	}

	select,
	input {
		@include input-style__neutral();
	}

	// Override inherited conflicting styles to be consistent.
	select,
	input[type="number"],
	.components-button {
		height: 30px;
		margin-top: 0;
		margin-bottom: 0;
	}

	.components-button:focus {
		z-index: z-index(".components-button {:focus or .is-primary}");
	}
}

.components-datetime__date {
	min-height: 236px;
	border-top: 1px solid $gray-300;

	// Override external DatePicker styles.
	.DayPickerNavigation_leftButton__horizontalDefault {
		/*!rtl:begin:ignore*/
		left: 13px;
		/*!rtl:end:ignore*/
	}

	.CalendarMonth_caption {
		font-size: $default-font-size;
	}

	// Seperate borders so that border respect border radius
	.CalendarMonth_table {
		border-collapse: separate;
		border-spacing: 2px;
	}

	.CalendarDay {
		font-size: $default-font-size;
		border: none;
		border-radius: $radius-round;
		text-align: center;

		&:focus {
			box-shadow: inset 0 0 0 var(--gc-admin-border-width-focus) var(--gc-admin-theme-color), inset 0 0 0 #{ $border-width-focus + $border-width } $white;
			outline: 2px solid transparent; // Shown in Windows 10 high contrast mode.
		}
	}

	.CalendarDay__selected {
		background: var(--gc-admin-theme-color);
		border: 2px solid transparent; // This indicates selection in Windows 10 high contrast mode.

		&:hover {
			background: var(--gc-admin-theme-color-darker-20);
		}

		&:focus {
			box-shadow: inset 0 0 0 $border-width $white;
		}
	}

	.DayPickerNavigation_button__horizontalDefault {
		padding: 2px 8px;
		top: 20px;

		&:focus {
			@include input-style__focus();
		}
	}

	.DayPicker_weekHeader {
		top: 50px;
		.DayPicker_weekHeader_ul {
			margin: 1px;
			padding-left: 0;
			padding-right: 0;
		}
	}

	&.is-description-visible .DayPicker {
		visibility: hidden;
	}
}

.components-datetime__date .CalendarDay .components-datetime__date__day {
	height: 100%;
	display: flex;
	justify-content: center;
	align-content: center;
	flex-direction: column;
	position: relative;

	&.has-events::before {
		content: " ";
		width: 4px;
		height: 4px;
		border-radius: 2px;
		position: absolute;
		left: 50%;
		margin-left: -2px;
		bottom: 0;
		background-color: $white;
	}
}

.components-datetime__date .CalendarDay:not(.CalendarDay__selected) .components-datetime__date__day.has-events::before {
	background: var(--gc-admin-theme-color);
}

.components-datetime__time {
	padding-bottom: $grid-unit-20;

	fieldset {
		position: relative;
		margin-bottom: 0.5em;
	}

	fieldset + fieldset {
		margin-bottom: 0;
	}

	.components-datetime__time-field-am-pm fieldset {
		margin-top: 0;
	}

	.components-datetime__time-wrapper {
		display: flex;

		.components-datetime__time-separator {
			display: inline-block;
			padding: 0 3px 0 0;
		}

		.components-datetime__time-field {

			&-time {
				/*rtl:ignore*/
				direction: ltr;
			}

			select {
				margin-right: $grid-unit-05;

				&:focus {
					position: relative;
					z-index: 1;
				}
			}

			input[type="number"] {
				padding: 2px;
				margin-right: $grid-unit-05;
				text-align: center;
				-moz-appearance: textfield;

				&:focus {
					position: relative;
					z-index: 1;
				}

				&::-webkit-inner-spin-button {
					-webkit-appearance: none;
					margin: 0;
				}
			}
		}
	}

	// Makes the month appear before the day if time format uses AM/PM
	// We are assuming MM-DD-YYY correlates with AM/PM
	&.is-12-hour {
		.components-datetime__time-field-day input {
			margin: 0 -$grid-unit-05 0 0 !important;
			border-radius: $radius-block-ui 0 0 $radius-block-ui !important;
		}
		.components-datetime__time-field-year input {
			border-radius: 0 $radius-block-ui $radius-block-ui 0 !important;
		}
	}
}

.components-datetime__timezone {
	line-height: 30px;
	margin-left: $grid-unit-05;
	text-decoration: underline dotted;
}

.components-datetime__time-legend {
	font-weight: 600;
	margin-top: 0.5em;

	&.invisible {
		position: absolute;
		top: -999em;
		left: -999em;
	}
}

.components-datetime__time-field-hours-input,
.components-datetime__time-field-minutes-input,
.components-datetime__time-field-day-input {
	width: 35px;
}

.components-datetime__time-field-year-input {
	width: 55px;
}

.components-datetime__time-field-month-select {
	max-width: 145px;
}

// Hack to center the datepicker component within the popover.
// It sets its own styles so centering is tricky.
.components-popover .components-datetime__date {
	padding-left: $grid-unit-05;
}