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

.main.hosting-dashboard-layout.sites-dashboard .site-error-preview {
	.hosting-dashboard-item-view__navigation.is-hidden {
		display: none;
	}

	.hosting-dashboard-item-view__content {
		padding: 24px;
		display: block;

		@include break-large {
			padding: 48px 24px;
		}
	}

	.hosting-dashboard-item-view__header {
		border: 1px solid var( --color-accent-5 );
	}
}

.site-error-preview__title {
	@include heading-large;
	margin-block-end: 16px;
}

.site-error-preview__description {
	@include body-medium;
	margin-block-end: 16px;
}

.site-error-preview__actions {
	.card {
		border-radius: 8px;
		margin-block-end: 16px;

		.formatted-header {
			margin: 0;

			.button {
				margin-block-start: 16px;
			}

			@include break-large {
				display: flex;
				align-items: center;
				justify-content: space-between;
				gap: 32px;

				> div {
					width: 70%;
					flex: 1;
				}

				.button {
					margin-block-start: 0;
				}
			}
		}

		.formatted-header__title {
			@include heading-medium;
			margin-block-end: 4px;
			color: var( --color-primary-100 );
		}

		.formatted-header__subtitle {
			@include body-medium;
			margin-block-end: 0;
		}
	}

	.button svg {
		position: relative;
		inset-block-start: 1px;
		inset-inline-start: 4px;
	}
}

.site-no-wp-admin-access {
	.hosting-dashboard-item-view__content {
		display: block;
	}
}
