@use 'variables' as *;

.simplestats-dashboard-report {
	display: flex;
	flex-direction: column;
	gap: 32px;

	&__toast {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 8px 16px;
		background: $delta-down-bg;
		color: $delta-down-fg;
		border-radius: 8px;

		button {
			background: transparent;
			border: 0;
			color: inherit;
			font-weight: 600;
			cursor: pointer;
		}
	}

	&__error {
		padding: 60px 20px;
		text-align: center;
		background: #fff;
		border-radius: 12px;
		color: $muted-text;
	}
	&__retry {
		margin-top: 12px;
		padding: 10px 18px;
		background: $primary-button-bg;
		color: #fff;
		border: 0;
		border-radius: 8px;
		cursor: pointer;
	}
}

.simplestats-dashboard-data {
	display: flex;
	flex-direction: column;
	gap: 24px;
	transition: opacity 200ms ease;

	&.is-refetching { opacity: 0.6; pointer-events: none; }
}

.simplestats-dashboard-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;

	@media ( max-width: 960px ) {
		grid-template-columns: 1fr;
	}
}
