@use '@lucca-front/scss/src/commons/utils/a11y';
@use '@lucca-front/icons/src/icon/exports' as icons;
@use '@lucca-front/scss/src/commons/utils/namespace';

@mixin component($atRoot: namespace.$defaultAtRoot) {
	padding: var(--components-timepicker-padding);
	inline-size: fit-content;

	@at-root ($atRoot) {
		.timePicker-fieldset {
			display: flex;
			align-items: center;
			box-shadow: 0 0 0 1px var(--components-timepicker-border);
			border-radius: var(--pr-t-border-radius-input);
			padding: 0;
			border: 0;
			margin: 0;
			background-color: var(--components-timepicker-background);
			color: var(--components-timepicker-color);
			font: var(--components-timepicker-font);
			position: relative;
			cursor: text;

			&:hover {
				--components-timepicker-border: var(--pr-t-color-input-border-hover);
			}

			&:focus-within {
				@include a11y.focusVisible($offset: 3px);
			}
		}

		.timePicker-fieldset-groupSeparator {
			pointer-events: none;
			display: grid;
			place-items: center;
			text-align: center;
			inline-size: var(--pr-t-spacings-200);
			margin-block: 0;
			margin-inline: calc(var(--pr-t-spacings-100) * -1);
			position: relative;
			inset-inline-start: calc(var(--pr-t-spacings-25) * -1);
		}

		.timePicker-fieldset-group {
			position: relative;

			~ .timePicker-fieldset-group {
				margin-inline-start: calc(var(--pr-t-spacings-50) * -1);
			}
		}

		.timePicker-fieldset-group-textfield {
			background-color: transparent;
		}

		.timePicker-fieldset-group-textfield-input {
			display: flex;
			align-items: center;
			justify-content: center;
			border: 0;
			block-size: var(--components-timepicker-input-height);
			inline-size: calc(var(--components-timepicker-input-minInlineSize) + var(--components-timepicker-input-digits, 2) * 1ch);
			outline: none;
			color: inherit;
			background-color: transparent;
			text-align: center;
			padding-block: var(--components-timepicker-input-padding-block);
			padding-inline: var(--components-timepicker-input-padding-inline);
			box-sizing: content-box;
			opacity: 0.0001;

			&::placeholder {
				color: var(--component-textField-placeholder);
			}

			&:focus-visible {
				& + .timePicker-fieldset-group-textfield-display {
					background-color: var(--palettes-product-100);
				}
			}
		}

		.timePicker-fieldset-group-textfield-display {
			position: absolute;
			inset: var(--components-timepicker-display-padding-inline) var(--components-timepicker-display-padding-block);
			border-radius: var(--pr-t-border-radius-50);
			pointer-events: none;
			display: grid;
			place-items: center;
		}

		.timePicker-fieldset-group-stepper {
			position: absolute;
			inset-block-end: calc(var(--components-timepicker-input-height) + var(--pr-t-spacings-150) + 1px);
			border: 0;
			padding: 0;
			block-size: 1rem;
			inline-size: 1rem;
			inset-inline-start: 50%;
			transform: translateX(-50%);
			background-color: transparent;
			color: var(--palettes-neutral-600);
			display: inline-flex;
			justify-content: center;
			align-items: center;
			border-radius: var(--pr-t-border-radius-50);
			outline: none;
			opacity: 1;
			transition-property: opacity;
			transition-duration: var(--commons-animations-durations-fast);
			cursor: pointer;

			&:hover {
				background-color: var(--palettes-neutral-50);
				color: var(--palettes-neutral-800);
			}

			&:disabled {
				cursor: default;
				color: var(--palettes-neutral-500); // disabled token candidate
				pointer-events: none;
			}

			.lucca-icon {
				@include icons.XS;
			}

			+ .timePicker-fieldset-group-stepper {
				inset-block-start: calc(var(--components-timepicker-input-height) + var(--pr-t-spacings-150) + 1px);
				inset-block-end: auto;
			}
		}

		.timePicker-fieldset-meridiem {
			box-sizing: content-box;
			inline-size: calc(var(--components-timepicker-input-minInlineSize) + 2ch);
			padding-inline: var(--components-timepicker-display-padding-block);
			position: relative;
			align-self: stretch;
			margin-inline-start: calc(var(--pr-t-spacings-50) * -1);

			&::after {
				content: '';
				position: absolute;
				inset: var(--components-timepicker-display-padding-inline) var(--components-timepicker-display-padding-block);
				border-radius: var(--pr-t-border-radius-50);
				display: grid;
				place-items: center;
				text-align: end;
			}

			&:has(input:focus) {
				&::after {
					background-color: var(--palettes-product-100);
				}
			}

			&:has(.timePicker-fieldset-meridiem-ante-input:checked) {
				&::after {
					content: 'AM' / '';
				}
			}

			&:has(.timePicker-fieldset-meridiem-post-input:checked) {
				&::after {
					content: 'PM' / '';
				}
			}
		}

		.timePicker-fieldset-meridiem-ante,
		.timePicker-fieldset-meridiem-post {
			@include a11y.mask;
		}
	}
}