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

.task-steps {
	a {
		text-decoration: underline;
		color: unset;
	}
}

.task-steps__steps {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.task-steps__header {
	display: flex;
	justify-content: space-between;
	padding-block-end: 24px;
	flex-direction: column;
	gap: 24px;

	.task-steps__heading-container {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	@include break-large {
		flex-direction: row;
	}
}

.task-steps__heading {
	@include heading-x-large;
}

.task-steps__subheading {
	@include body-large;
	color: var( --color-accent-60 );
}

.task-step {
	width: 100%;
	border-radius: 8px;
	.foldable-card__main {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
	}

	.foldable-card__secondary {
		flex: unset;
	}

	&.card.foldable-card.is-expanded {
		margin: 0 0 16px 0;

		.foldable-card__content {
			padding-block-start: 16px;
			border-top: none;

			@include break-large {
				padding: 20px 72px 16px;
			}
		}
	}
}

.task-step__button-container {
	display: flex;
	gap: 10px;
	flex-direction: column;

	@include break-large {
		flex-direction: row;
	}

	svg {
		margin-inline-start: 4px;
	}
}

.task-step__header {
	display: flex;
	align-items: center;
	gap: 24px;
}

.task-step__title {
	@include heading-medium;

	@include break-large {
		@include heading-x-large;
	}
}

.task-step__description {
	@include body-large;
	padding-block-end: 20px;
}

.task-step__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 30px;
	border-radius: 50%;
	min-width: 30px;
	max-width: 30px;
	@include heading-large;
	text-align: center;
}

.task-step__count {
	@extend .task-step__icon;
	border: 1px solid var( --color-accent-5 );
}

.task-step__completed {
	@extend .task-step__icon;
	background-color: var( --color-primary );
	border: 1px solid var( --color-primary );
	fill: var( --color-text-white );
}
