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

@mixin component($atRoot: namespace.$defaultAtRoot) {
	list-style-type: none;
	padding: 0;
	margin-block: var(--pr-t-spacings-200);
	margin-inline: 0;
	display: flex;
	align-items: center;

	@at-root ($atRoot) {
		.timeline-step {
			flex-grow: 1;
			display: flex;
			align-items: center;

			&:not(:last-child) {
				&::after {
					content: '';
					display: flex;
					flex-grow: 1;
					border-block-end: 2px solid var(--palettes-neutral-200);
					margin: var(--pr-t-spacings-100);
				}
			}

			&:last-child {
				flex-grow: 0;
			}
		}

		.timeline-step-title {
			padding-inline-start: 1.75rem;
			position: relative;
			display: block;
			color: var(--palettes-product-700);
			font-weight: var(--pr-t-font-fontWeight-semibold);
			margin: 0;
			font-size: var(--components-timeline-title-fontSize);
			line-height: var(--components-timeline-title-lineHeight);
			min-inline-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,
		.timeline-step-title {
			&::before {
				content: '';
				color: 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-product-700);
				position: absolute;
				inset-inline-start: var(--pr-t-spacings-50);
				inset-block-start: 50%;
				transform: translateY(-50%);
			}
		}

		.timeline-step-title-action {
			@include reset.button;

			color: currentColor;
			text-decoration: none;
			cursor: default;
			display: inline-block;
			inline-size: auto;

			&:not([disabled]) {
				&:hover,
				&:focus {
					color: currentColor;
					text-decoration: underline;
					cursor: pointer;
				}
			}
		}
	}
}