@import "@wordpress/base-styles/mixins";
@import "@wordpress/base-styles/variables";


$progress-bar-bg-color: #0277A8;
$progress-bar-bg-color-dark: #1490C7;

.step-progress {
	width: 100%;

	.step-progress__steps {
		max-width: 600px;
		margin: 0 auto;
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.step-progress__steps-container {
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		gap: 8px;
		width: 100%;

		&.is-two-columns {
			grid-template-columns: repeat(4, 1fr);
		}
	}

	.progress-bar__progress {
		background-color: $progress-bar-bg-color;


		@media (prefers-color-scheme: dark) {
			background-color: $progress-bar-bg-color-dark;
		}
	}

	.step-progress__step {
		justify-content: space-between;
		display: flex;
		flex-direction: column;
		gap: 8px;
		grid-column: span 2;
	}

	.step-progress__step.is-active {
		.step-progress__step-label {
			color: var(--color-neutral-80);
			font-weight: 600;

			@media (prefers-color-scheme: dark) {
				color: var(--color-text-inverted);
			}
		}
	}

	.step-progress__step:not(.is-active) {
		.step-progress__step-label {
			color: var(--color-neutral-70);

			@media (prefers-color-scheme: dark) {
				color: var(--color-text-inverted);
			}
		}
	}

	.step-progress__step-label {
		@include body-medium;
		transition: color 0.2s ease;
		order: -1;
		margin-bottom: 4px;
	}
}

.field-mandatory-message {
	@include body-small;
	padding-block-end: 8px;

	@media (prefers-color-scheme: dark) {
		color: var(--color-text-inverted);
	}
}
