@import "@automattic/onboarding/styles/mixins";
@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";

$design-button-primary-color: var(--color-primary);
$design-button-primary-hover-color: var(--color-primary-60);

.step-container.error-step {
	padding: 1rem;

	.formatted-header .formatted-header__title {
		margin: 40px 0;
	}
}

.error-step__message {
	padding: 12px;
	border-radius: 4px;
	color: var(--color-error-50);
	background-color: var(--color-error-5);
}

.error-step__button {
	background: $design-button-primary-color;
	border-color: $design-button-primary-color;
	padding: 9px 48px;
	border-radius: 4px;
	font-weight: 500;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;

	&:hover,
	&:focus {
		background: $design-button-primary-hover-color;
		border-color: $design-button-primary-hover-color;
	}
}

.error-step__link {
	&.button.is-borderless {
		padding: 10px 14px;
	}
	&.components-button.is-link:not(:disabled) {
		color: var(--studio-gray-40);
	}
	&.components-button.is-link:hover:not(:disabled),
	&.components-button.is-link:active:not(:disabled) {
		color: var(--studio-gray-60);
	}
	&.error-step__contact-suport {
		float: right;
	}
}
