@use '@lucca-front/scss/src/commons/utils/a11y';
@use '@lucca-front/scss/src/commons/utils/namespace';

@mixin component($atRoot: namespace.$defaultAtRoot) {
	padding: var(--components-timepicker-padding);
	border: 0;
	border-radius: var(--pr-t-border-radius-input);
	box-shadow: 0 0 0 1px var(--palettes-neutral-300);
	display: inline-flex;
	background-color: var(--pr-t-elevation-surface-raised);
	transition: box-shadow var(--commons-animations-durations-fast);

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

		background-color: transparent;
	}

	@at-root ($atRoot) {
		.timepicker-field {
			position: relative;
			display: inline-block;
		}

		.timepicker-field-input {
			background-color: transparent;
			border-radius: var(--pr-t-border-radius-50);
			text-align: center;
			color: var(--pr-t-color-text);
			inline-size: var(--components-timepicker-input-width);
			block-size: var(--components-timepicker-input-height);
			border: 0;
			padding: 0;
			appearance: textfield;

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

			&:hover,
			&:focus,
			&:focus-visible {
				background-color: var(--palettes-100, var(--palettes-product-100));
				outline: none;
			}
		}

		.timepicker-field-increment {
			cursor: pointer;
			position: absolute;
			inset-block-end: calc(100% + 0.5rem + 1px);
			inset-inline-start: 0;
			border: 0;
			block-size: 1.25rem;
			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);
			inline-size: var(--components-timepicker-input-width);
			padding: 0;

			&:last-child {
				inset-block-start: calc(100% + 0.5rem + 1px);
				inset-block-end: auto;
			}

			&:hover {
				background-color: var(--palettes-neutral-50);
				color: var(--pr-t-color-text);
			}

			&:focus {
				background-color: var(--palettes-neutral-100);
				color: var(--pr-t-color-text);
			}

			.lucca-icon {
				font-size: 1rem;
			}
		}

		.timepicker-separator {
			margin-block: 0;
			margin-inline: var(--pr-t-spacings-50);
			text-align: center;
			inline-size: 0.5rem;
			line-height: var(--components-timepicker-input-height);
		}
	}
}