@use '../../../node_modules/sass-basis/src/css/core';

.smf-progress-tracker {
	@include core.list-unstyled();
	margin-bottom: var(--_margin1);
	display: flex;
	flex-wrap: nowrap;

	&__item {
		position: relative;
		margin: 0;
		flex: 1 1 auto;
		width: 33.33333%;
		display: flex;
		flex-direction: column;
		align-items: center;

		&::before,
		&::after {
			position: absolute;
			top: 12px;
			content: '';
			display: block;
			height: 1px;
			background-color: var(--_light-color-gray);
		}

		&::before {
			right: 50%;
			left: 0;
		}

		&::after {
			right: 0;
			left: 50%;
		}

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

		&--complete {
			&::after {
				display: none;
			}
		}

		&[aria-current=true] {
			.smf-progress-tracker__item__number {
				background-color: var(--_color-text);
				font-weight: bold;
			}

			.smf-progress-tracker__item__text {
				color: var(--_color-text);
				font-weight: bold;
			}
		}
	}

	&__item__number {
		position: relative;
		z-index: 1;
		@include core.circle(24px);
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: var(--_light-color-gray);
		color: #fff;
		letter-spacing: 0;
	}

	&__item__text {
		margin-top: .5em;
		color: var(--_light-color-gray);
	}
}