_monthpicker.scss

/* Patterns - Interaction - MonthPicker */
////
/// @group Patterns-MonthPicker
/// Patterns - Interaction - MonthPicker

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

///
.osui-monthpicker {
	// Service Studio Preview Container Styles
	&-ss-preview {
		display: none;

		// Service Studio Preview
		& {
			-servicestudio-display: inline-block;
			-servicestudio-margin-top: 2px;
			-servicestudio-overflow: hidden;
			-servicestudio-position: relative;
			-servicestudio-z-index: var(--layer-local-tier-1);

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

			&:before,
			&:after {
				-servicestudio-color: var(--color-indigo);
				-servicestudio-font-family: var(--osui-icon-font-family);
				-servicestudio-position: absolute;
				-servicestudio-height: 34px;
				-servicestudio-top: var(--space-m); 
				-servicestudio-width: 34px;
			}

			&:before {
				-servicestudio-content: var(--osui-icon-arrow-left);
				-servicestudio-right: var(--space-l);
			}

			&:after {
				-servicestudio-content: var(--osui-icon-arrow-right);
				-servicestudio-right: var(--space-xs);
			}
		}
	}

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

	input {
		// Disable states for Datepicker
		&[disabled] + input {
			background-color: get-background-color('neutral-2');
			border: var(--border-size-s) solid get-border-color('neutral-4');
			color: get-text-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
		&:first-of-type:not(.flatpickr-calendar.inline input) {
			display: none;

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

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