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

.step-section-item {
	margin-block-end: 16px;
	border-radius: 4px;
	border: 1px solid var(--color-accent-5);
	padding: 16px 24px;

	@include break-large {
		display: flex;
		gap: 16px;
	}

	.step-section-item__icon {
		display: none;


		@include break-large {
			display: block;
		}
	}

	.step-section-item__heading {
		@include heading-large;
	}

	.step-section-item__description {
		margin-block-start: 4px;
		@include body-medium;
		color: var(--color-accent);
	}

	.step-section-item__button {
		margin-block-start: 16px;
		margin-inline-start: auto;

		.button {
			width: 100%;
			height: 40px;

			@include break-large {
				min-width: 100px;
				width: auto;
				height: inherit;
			}
		}
	}
}

.step-section-item__status {

	&.is-small-screen {
		display: block;
		margin-block-end: 16px;

		@include break-large {
			display: none;
		}
	}

	&.is-large-screen {
		display: none;
		width: 30%;

		@include break-large {
			display: flex;
			margin-block-start: 0;
		}
	}

	&.step-section-item__status--rounded {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 24px;
		height: 24px;
		padding: 0;
	}

	.step-section-item__status-wrapper {
		margin-left: auto;
	}

	&.badge {
		white-space: nowrap;
		position: relative;
		top: -1px;
	}

	&.badge--success {
		background-color: var(--color-success-5);
		color: var(--color-success-80);
	}

	&.badge--warning {
		background-color: var(--color-warning-5);
		color: var(--color-warning-80);
	}

	&.badge--error {
		background-color: var(--color-error-5);
		color: var(--color-error-80);
	}
}

.step-section-item__content {
	@include break-large {
		max-width: 70%;
	}
}

.step-section-item__step-number {
	display: none;
	color: var(--color-accent);
	@include heading-small;
	text-align: center;
	min-width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 2px solid var(--color-accent);

	@include break-large {
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

.sidebar__menu-icon {
	fill: currentColor;
}
