/* Patterns - Interaction - TimePicker */
////
/// @group Patterns-TimePicker
/// Patterns - Interaction - TimePicker

/// Import Flatpickr library styles
@import '../../../../../Providers/OSUI/Timepicker/Flatpickr/scss/_flatpickr.scss';

@import 'timepicker_ss_preview_imgs';

///
.osui-timepicker {
	input {
		// Hack used to disable dateTime input pseudoElements (browser native placeholders)
		&[type='time'] {
			&::-webkit-inner-spin-button,
			&::-webkit-calendar-picker-indicator,
			&::-webkit-datetime-edit-year-field,
			&::-webkit-datetime-edit-month-field,
			&::-webkit-datetime-edit-day-field,
			&::-webkit-datetime-edit-fields-wrapper {
				display: none;
				-moz-appearance: none;
			}
		}

		// Disable states for Datepicker
		&.flatpickr-input[disabled] + input {
			background-color: var(--color-neutral-2);
			border: var(--border-size-s) solid var(--color-neutral-4);
			color: var(--color-neutral-6);
			pointer-events: none;
		}

		// Hide the platform input which is set as hidden by the library and we're change it into the expected type, however we do not want it visible since library will add a clone to better deal with the selected dates.
		// We cannot use the provider class since the provider class will not be taken into consideration on the input widget react lifecycle
		&[type='time']:first-of-type {
			display: none;

			// Make the platform input visible in Service Studio
			& {
				-servicestudio-display: inline-flex !important;
			}
		}
	}

	// Service Studio Preview Container Styles
	&__dropdown-ss-preview {
		display: none;
		-servicestudio-display: none;

		// Service Studio Preview
		& {
			-servicestudio-background-color: transparent;
			-servicestudio-background-position: top left;
			-servicestudio-background-repeat: no-repeat;
			-servicestudio-background-size: contain;
			-servicestudio-border-radius: var(--border-radius-soft);
			-servicestudio-display: inline-block;
			-servicestudio-height: 0;
			-servicestudio-margin-top: 2px;
			-servicestudio-max-width: 320px;
			-servicestudio-overflow: hidden;
			-servicestudio-position: relative;
			-servicestudio-width: 100%;
			-servicestudio-z-index: var(--layer-local-tier-1);

			&.time12h {
				-servicestudio-background-image: $timepicker_time12h_img_base64;
				-servicestudio-height: var(--space-xl);
			}

			&.time24h {
				-servicestudio-background-image: $timepicker_time24h_img_base64;
				-servicestudio-height: var(--space-xl);
			}

			& + .placeholder-ss-preview {
				-servicestudio-height: 0;
				-servicestudio-opacity: 0;
				-servicestudio-overflow: hidden;
				-servicestudio-width: 100%;
			}
		}
	}

	.not-valid + .input,
	.not-valid + .flatpickr-mobile {
		border-color: var(--color-error);
	}

	.flatpickr-mobile ~ span.validation-message {
		bottom: -40px;
	}
}

///
.form {
	// Service Studio Preview
	.osui-timepicker__dropdown-ss-preview {
		-servicestudio-margin-top: -22px;
	}
}

// If Hybrid IDE
///
html[data-uieditorversion^='1'] {
	.osui-timepicker__dropdown-ss-preview {
		&.time12h,
		&.time24h {
			-servicestudio-padding-top: min(var(--space-xl), 100%);
			-servicestudio-height: 0;
		}
	}
}

.osui-timepicker__dropdown {
	&.hasTime.noCalendar {
		.flatpickr-time {
			padding: 0;
			height: var(--space-xl);

			&.time24hr:after {
				display: none;
			}

			.numInputWrapper {
				height: var(--space-xl);
				flex-grow: 1;
			}

			.flatpickr-am-pm {
				position: relative;
				margin-left: var(--space-s);
				margin-right: var(--space-s);
			}
		}

		&.dropdown--is-large {
			.flatpickr-time {
				height: var(--space-xxl);
				max-height: var(--space-xxl);

				.numInputWrapper {
					height: var(--space-xxl);
				}
				.flatpickr-time-separator {
					line-height: var(--space-xxl);
				}
			}
		}

		&.dropdown--is-small {
			.flatpickr-time {
				height: var(--space-l);
				max-height: var(--space-l);

				.numInputWrapper {
					height: var(--space-l);
				}
				.flatpickr-time-separator {
					line-height: var(--space-l);
				}
			}
		}
	}

	&:before,
	&:after {
		display: none;
	}
}