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

@media (max-width: 660px) {
	.hosting-dashboard-layout__header-title {
		// A4A hides a part of LayoutHeader since it displays a different header for mobile
		display: none;
	}
}

.a4a-layout__banner {
	margin-inline: 0;
	max-height: 100%;
	margin-block: 24px;

	&:not( .a4a-layout__banner--full-width ) > * {

		@include breakpoint-deprecated( ">660px" ) {
			max-width: 1500px;
			margin-inline: auto !important;
		}
	}

	@include breakpoint-deprecated( ">660px" ) {
		margin-block-start: 0;
	}
}

.a4a-layout__stepper {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin-block: 16px 32px;
}

.a4a-layout__stepper-step {
	display: flex;
	flex-direction: row;
	align-items: center;

	.a4a-layout__stepper-step-circle {
		width: 20px;
		height: 20px;
		display: flex;
		border-radius: 50%;
		justify-content: center;
		align-content: center;
		align-items: center;
		@include body-small;
	}

	.a4a-layout__stepper-step-name {
		margin-left: 0.5rem;
		white-space: nowrap;
	}

	.hosting-dashboard-layout__viewport {
		margin-inline-start: 0;
	}

	&.is-current > .a4a-layout__stepper-step-circle {
		background-color: var(--color-neutral-60);
		border: 2px solid var(--color-neutral-60);
		color: var(--color-text-inverted);
	}

	&.is-next > .a4a-layout__stepper-step-circle {
		border: 2px solid var(--color-neutral-60);
		color: var(--color-neutral-80);
	}

	&.is-complete > .a4a-layout__stepper-step-circle {
		background-color: var(--color-primary-50);
		border: 2px solid var(--color-primary-50);
		color: var(--color-text-inverted);
	}

	&.is-next > .a4a-layout__stepper-step-name {
		display: none;

		@include break-medium {
			display: flex;
		}
	}

	&.is-complete > .a4a-layout__stepper-step-name,
	&.is-complete > .a4a-layout__stepper-step-circle,
	&.is-complete + .a4a-layout__stepper-step-separator {
		display: none;

		@include break-medium {
			display: flex;
		}
	}
}

.a4a-layout__stepper-step-separator {
	border: 1px solid var(--color-neutral-80);
	width: 20px;
	height: 0;
	margin: 0 0.75rem;

	@include break-medium {
		width: 40px;
		margin: 0 1.25rem;
	}
}
