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

	&__hero {
		background-color: #FFFFFF;
		border: 1px solid #1A1A1C;
		border-radius: 10px;
		padding: 40px;
	}

	&__hero-inner {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 24px;
		text-align: center;
	}

	&__pill-success {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		padding: 4px 12px;
		background-color: #ECFDF5;
		border: 1px solid #CFF3E2;
		border-radius: 100px;
		color: #4AB866;
		font-size: 13px;
		font-weight: 500;
		line-height: 20px;

		svg {
			width: 12px;
			height: 12px;
			display: block;
		}
	}

	&__text {
		display: flex;
		flex-direction: column;
		gap: 16px;
		width: 100%;
	}

	&__heading {
		margin: 0;
		color: #212226;
		font-size: 32px;
		font-weight: 600;
		line-height: 40px;
	}

	&__subtitle {
		margin: 0;
		color: #8A90A0;
		font-size: 16px;
		font-weight: 400;
		line-height: 24px;
	}

	&__pill-wait {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 8px 16px;
		background-color: #F0F5F8;
		border-radius: 999px;
		font-size: 14px;
		line-height: 20px;

		svg {
			width: 16px;
			height: 16px;
			display: block;
			color: #212226;
		}
	}

	&__pill-wait-label {
		color: #4F4F4F;
		font-weight: 400;
	}

	&__pill-wait-value {
		color: #212226;
		font-weight: 700;
	}

	// Brand citron secondary button (per simplestats-citron-brand-guidelines .btn-secondary):
	// white surface + dark border + dark text.
	&__button {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 8px 16px;
		background-color: #FFFFFF;
		border: 1px solid #1F1F1F;
		border-radius: 2px;
		color: #1F1F1F;
		font-size: 14px;
		font-weight: 600;
		line-height: 20px;
		text-decoration: none;
		cursor: pointer;

		&:hover, &:focus-visible {
			border-color: #212226;                // n800
		}

		// WP admin styles `#wpwrap a:hover` (and other link states) with blue —
		// pin the brand text color across all link states.
		&:hover,
		&:focus,
		&:focus-visible,
		&:active,
		&:visited {
			color: #1F1F1F;
		}

		// WP admin styles `a:focus` with outline / box-shadow / border-radius —
		// pin these properties so the branded button shape stays put on focus.
		&:focus,
		&:focus-visible {
			outline: none;
			box-shadow: none;
			border-radius: 2px;
		}

		svg {
			width: 12px;
			height: 12px;
			display: block;
			color: currentColor;
		}
	}

	// Cluster around the primary button + "Access your Dashboard" link.
	// 24px breathes between the button and the secondary link.
	&__actions {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 24px;
	}

	// Subtle secondary link beneath the primary button — muted by default,
	// darkens on hover. Underline offset matches the auth card alt-link.
	&__app-link {
		color: #4F4F4F;
		font-size: 13px;
		font-weight: 500;
		line-height: 20px;
		text-decoration: underline;
		text-underline-offset: 3px;
		text-decoration-thickness: 1px;
		text-decoration-color: rgba(33, 34, 38, 0.35);

		// WP admin's `#wpwrap a:hover` repaints links blue — pin link states.
		&:hover,
		&:focus,
		&:focus-visible,
		&:active {
			color: #212226;
			text-decoration-color: #212226;
		}
		&:visited { color: #4F4F4F; }

		&:focus,
		&:focus-visible {
			outline: none;
			box-shadow: none;
			border-radius: 2px;
		}
	}

	&__skeleton {
		display: block;
		width: 100%;
		height: auto;
	}
}
