@use "../kit-deps" as *;
@use "typography" as *;

.steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: $space-3;
	width: 100%;
	max-width: 900px;
	margin: 0;
	padding: 0;
	list-style: none;

	.step {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: $space-2;
		min-height: 120px;
		padding: $space-4;
		border: $border-width-base solid $border-color-muted;
		border-left-width: $border-width-accent;
		background: $surface-panel-muted;
	}

	.step-marker {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: $control-height-sm;
		height: $control-height-sm;
		color: $color-text-light;
		border: $border-width-base solid $border-color-muted;
		font-size: $font-size-sm;
		font-weight: $font-weight-bold;
		line-height: $line-height-base;
	}

	.step-title {
		margin: 0;
		font-size: $font-size-md;
		font-weight: $font-weight-bold;
		line-height: $line-height-snug;
		text-transform: uppercase;
	}

	.step-text {
		margin: 0;
		color: $color-text-medium;
		font-size: $font-size-sm;
		line-height: $line-height-normal;
	}

	.step-complete {
		border-color: $color-success;

		.step-marker {
			color: $color-black;
			background: $color-success;
			border-color: $color-success;
		}
	}

	.step-current {
		border-color: $color-secondary;

		.step-marker {
			color: $color-black;
			background: $color-secondary;
			border-color: $color-secondary;
		}
	}

	.step-disabled {
		opacity: 0.62;
	}

	&.steps-vertical {
		grid-template-columns: 1fr;
		max-width: 520px;
		gap: 0;

		.step {
			min-height: auto;
			border-bottom-width: 0;

			&:last-child {
				border-bottom-width: $border-width-base;
			}
		}
	}
}

@include media_down("lg") {
	.steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@include media_down("sm") {
	.steps {
		grid-template-columns: 1fr;
	}
}