@use '@lucca-front/scss/src/commons/utils/reset';
@use '@lucca-front/scss/src/commons/utils/a11y';
@use '@lucca-front/icons/src/commons/utils/icon';

@mixin S {
	.timeline-step-title {
		--components-timeline-title-fontSize: var(--pr-t-font-body-S-fontSize);
		--components-timeline-title-lineHeight: var(--pr-t-font-body-M-lineHeight);

		padding-inline-start: 1.25rem;

		&::before {
			inline-size: 0.5rem;
			block-size: 0.5rem;
		}
	}
}

@mixin L {
	.timeline-step-title {
		padding-inline-start: 2.25rem;
		min-inline-size: 2rem;

		&::before {
			inline-size: 1.5rem;
			block-size: 1.5rem;
		}
	}

	// stylelint-disable-next-line selector-not-notation
	.timeline-step:not([aria-current='step']):not([aria-current='step'] ~ .timeline-step) .timeline-step-title-icon {
		&::before {
			inset-inline-start: var(--pr-t-spacings-100);
		}
	}
}

@mixin addStepL {
	.timeline-step-title-icon {
		&::before {
			inset-inline-start: var(--pr-t-spacings-100);
		}
	}
}

@mixin vertical {
	align-items: flex-start;
	flex-direction: column;

	.timeline-step {
		margin-block-start: var(--pr-t-spacings-100);
		display: block;
		position: relative;
		inline-size: 100%;

		// line
		&:not(:last-child)::after {
			content: '';
			display: block;
			block-size: auto;
			position: absolute;
			inset-block-start: calc(var(--pr-t-spacings-400) + var(--pr-t-spacings-50));
			inset-block-end: calc(var(--pr-t-spacings-150) * -1);
			inset-inline-start: 0.45rem; // magic number
			margin: 0;
			border-inline-start: 2px solid var(--palettes-neutral-200);
		}

		&:not(:last-child)[aria-current='step'] {
			&::after {
				inset-block-start: calc(var(--pr-t-spacings-400) + var(--pr-t-spacings-50));
			}
		}
	}

	.timeline-step-title {
		margin-block: var(--pr-t-spacings-100);
		margin-inline: 0;
		min-block-size: var(--pr-t-spacings-300);
		min-inline-size: 0;

		&::before {
			inset-block-start: var(--pr-t-spacings-150);
		}
	}

	.timeline-step-description {
		padding-inline-start: calc(var(--pr-t-spacings-300) + var(--pr-t-spacings-50));
	}

	.timeline-stepAddBetweenStep {
		min-block-size: 3rem;
	}
}

@mixin verticalNotSNotL {
	.timeline-step-title {
		&::before {
			inset-inline-start: 0;
		}
	}
}

@mixin verticalS {
	.timeline-step {
		&::after {
			inset-block-end: calc(var(--pr-t-spacings-200) * -1);
			inset-inline-start: 0.45rem; // magic number
			inset-block-start: var(--pr-t-spacings-400);
		}

		&[aria-current='step'] {
			&::after {
				inset-block-start: var(--pr-t-spacings-400);
			}
		}
	}

	.timeline-step-description {
		padding-inline-start: var(--pr-t-spacings-250);
	}
}

@mixin verticalL {
	.timeline-step {
		&::after {
			inset-block-end: calc(var(--pr-t-spacings-100) * -1);
			inset-inline-start: 0.95rem; // magic number
			inset-block-start: 2.5rem;
		}

		&[aria-current='step'] {
			&::after {
				inset-block-start: 2.5rem;
			}
		}
	}

	.timeline-step-description {
		padding-inline-start: calc(var(--pr-t-spacings-400) + var(--pr-t-spacings-50));
		min-block-size: var(--pr-t-spacings-400);
	}
}

@mixin verticalProgress {
	.timeline-step[aria-current='step'] {
		&::after {
			block-size: unset;
			inline-size: 2px;
			border: none;
			background:
				linear-gradient(
					180deg,
					var(--palettes-700, var(--palettes-product-700)) var(--progress),
					var(--palettes-neutral-200) var(--progress)
				);
		}
	}
}

@mixin number {
	counter-reset: timeline;

	.timeline-step:not(.timeline-stepAddBetweenStep) {
		.timeline-step-title {
			counter-increment: timeline;

			&::before {
				content: counter(timeline) / '';
				font-size: var(--pr-t-font-body-XS-fontSize);
				line-height: 1;
			}
		}
	}
}

@mixin numberL {
	.timeline-step-title::after,
	.timeline-step-title::before {
		font-size: var(--pr-t-font-body-S-fontSize) !important;
	}
}

@mixin checkedPastStep {
	// stylelint-disable-next-line selector-not-notation
	.timeline-step:not([aria-current='step']):not([aria-current='step'] ~ .timeline-step):not(.timeline-stepAddBetweenStep) {
		.timeline-step-title {
			&::before {
				background-color: var(--palettes-100, var(--palettes-product-100));
				content: '';
			}

			.timeline-step-title-icon::before {
				@include icon.generate('sign_confirm');

				font-size: var(--components-timeline-icon-size);
				display: flex;
				background-color: transparent;
				color: var(--palettes-700, var(--palettes-product-700));
			}
		}

		&::after {
			border-color: var(--palettes-200, var(--palettes-product-200));
			border-block-end-style: solid;
		}
	}
}

@mixin checkedPastStepL {
	--components-timeline-icon-size: var(--pr-t-font-body-S-lineHeight);
}

@mixin checkedPastStepVerticalNotL {
	// stylelint-disable-next-line selector-not-notation
	.timeline-step:not([aria-current='step']):not([aria-current='step'] ~ .timeline-step) {
		.timeline-step-title {
			.timeline-step-title-icon::before {
				inset-inline-start: 0;
			}
		}
	}
}

@mixin addStep {
	.timeline-step {
		&:nth-last-child(2)::after {
			background-color: transparent;
			background-image:
				linear-gradient(
					90deg,
					transparent 25%,
					var(--palettes-neutral-200) 25%,
					var(--palettes-neutral-200) 50%,
					transparent 50%,
					transparent 75%,
					var(--palettes-neutral-200) 75%,
					var(--palettes-neutral-200) 100%
				);
			background-size: var(--pr-t-spacings-100) var(--pr-t-spacings-100);
		}

		&:last-child {
			.timeline-step-title {
				&::before {
					display: none;
				}

				.timeline-step-title-icon::before {
					@include icon.generate('maths_plus');

					display: flex;
				}
			}
		}
	}

	.timeline-step-title-icon {
		&::before {
			content: '';
			color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));
			inline-size: 1rem;
			block-size: 1rem;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: var(--pr-t-border-radius-full);
			background-color: var(--palettes-700, var(--palettes-product-700));
			position: absolute;
			inset-inline-start: var(--pr-t-spacings-50);
			inset-block-start: 50%;
			transform: translateY(-50%);
		}
	}

	.button {
		gap: 0;
	}
}

@mixin addStepVertical {
	.timeline-step {
		&:nth-last-child(2)::after {
			background-color: transparent;
			background-image:
				linear-gradient(
					0deg,
					transparent 25%,
					var(--palettes-neutral-200) 25%,
					var(--palettes-neutral-200) 50%,
					transparent 50%,
					transparent 75%,
					var(--palettes-neutral-200) 75%,
					var(--palettes-neutral-200) 100%
				);
			background-size: var(--pr-t-spacings-100) var(--pr-t-spacings-100);
		}
	}
}

@mixin addStepVerticalNotL {
	.timeline-step:last-child {
		.timeline-step-title {
			.timeline-step-title-icon::before {
				inset-inline-start: 0;
			}
		}
	}
}

@mixin addStepVerticalL {
	.timeline-step:last-child {
		.timeline-step-title {
			.timeline-step-title-icon::before {
				inset-inline-start: var(--pr-t-spacings-100);
			}
		}
	}
}

@mixin addBetweenStep {
	.timeline-stepAddBetweenStep {
		.timeline-step-title {
			padding-inline-start: 0;

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

	.timeline-stepAddBetweenStep-title {
		@include reset.button;

		inline-size: auto;

		&:hover {
			.timeline-step-title-icon::before {
				background-color: var(--palettes-600, var(--palettes-product-600));
			}
		}

		&:focus-visible {
			.timeline-step-title-icon::before {
				@include a11y.focusVisible;
			}
		}
	}

	// stylelint-disable-next-line selector-not-notation
	.timeline-step:not([aria-current='step']):not([aria-current='step'] ~ .timeline-step) .timeline-step-title-icon::before {
		@include icon.generate('maths_plus');

		display: flex;
		transition: background-color var(--commons-animations-durations-fast);
	}
}

@mixin addBetweenStepVerticalNotL {
	// stylelint-disable-next-line selector-not-notation
	.timeline-step:not([aria-current='step']):not([aria-current='step'] ~ .timeline-step) .timeline-step-title-icon::before {
		inset-inline-start: 0;
	}
}

@mixin addBetweenStepL {
	// stylelint-disable-next-line selector-not-notation
	.timeline-step:not([aria-current='step']):not([aria-current='step'] ~ .timeline-step) .timeline-step-title-icon::before {
		inline-size: 1.5rem;
		block-size: 1.5rem;
		inset-inline-start: var(--pr-t-spacings-50);
	}
}

@mixin progress {
	.timeline-step[aria-current='step'] {
		&::after {
			border: none;
			block-size: 2px;
			background:
				linear-gradient(
					90deg,
					var(--palettes-700, var(--palettes-product-700)) var(--progress),
					var(--palettes-neutral-200) var(--progress)
				);
		}
	}
}

@mixin dashed {
	.timeline-step::after {
		border-block-end-style: dashed;
	}
}

@mixin dashedVertical {
	.timeline-step::after {
		border-inline-start-style: dashed;
	}
}

@mixin notPastChecked {
	.timeline-step-title {
		&::before {
			background-color: var(--palettes-700, var(--palettes-product-700));
			color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));
		}
	}
}