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

.reports-dashboard {
	.hosting-dashboard-layout__header-actions {
		display: flex;
		flex-direction: column;
		align-items: normal;
		justify-content: normal;
	}

	.dataviews-view-list__field-value {
		color: var(--color-accent-80);
	}

	&.main.hosting-dashboard-layout {
		background: inherit;
	}

	&.is-empty {
		.hosting-dashboard-layout__body-wrapper {
			max-width: 900px;
			padding-block-start: calc(24px + 48px);
		}
	}

	&.reports-dashboard--has-selected {
		ul.dataviews-view-list {
			margin: 0;
			list-style: none;
		}

		.dataviews-view-list__item .components-flex {
			gap: 0;
		}

		.hosting-dashboard-layout__top-wrapper > * {
			padding-inline: 24px;
		}

		.reports-dashboard__column {
			flex: unset;
			height: 100%;
			transition: all 0.2s;
			width: 400px;
			display: none;

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

	.hosting-dashboard-item-view {
		display: flex;
		flex-direction: column;
		height: calc(100vh - 32px);
	}
}

.reports-dashboard__actions {
	@include body-small;
	display: flex;
	flex-direction: column;
	gap: 16px;

	@include break-xlarge {
		flex-direction: row;
		align-items: center;
	}
}

.reports-dashboard-empty-state__content {
	display: flex;
	flex-direction: column;
	gap: 24px;


	@include break-large {
		.step-section-item__description {
			max-width: 80%;
		}
	}
}

.reports-dashboard-empty-state__heading {
	@include heading-2x-large;
	margin-block-end: 8px;
}

.reports-dashboard-empty-state__description {
	@include body-large;

	> div {
		margin-block-end: 16px;
	}

	a {
		text-decoration: underline;
	}
}

.reports-dashboard-empty-state__buttons {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-block-start: 16px;

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

	@include break-xlarge {
		flex-direction: row;
		gap: 12px;
		align-items: center;
	}

	button {
		width: 100%;

		@include break-large {
			width: auto;
			min-width: 160px;
		}
	}
}

.reports-dashboard-empty-state__footnote {
	@include body-medium;
	color: var(--color-neutral-50);
}

.a4a-reports-dashboard__more-emails {
	margin-inline-start: 4px;
}