@use "~admin-stylesheets/colors";

#wpwrap {
	background: #f3f5f6;
}

ul#adminmenu > li.current > a.current::after {
	border-right-color: #aeaebb;
}

.nelio-content-welcome-page {
	background: #fff;
	border-radius: 2px;
	border: 1px solid colors.$layout-colors__border;
	display: block;
	margin: 7em auto 1em;
	max-width: 40em;
	padding: 2em;
	text-align: center;

	&__logo {
		max-width: 20em;

		.full-logo_svg__nelio-content-logo-dark,
		.nelio-content-logo-dark {
			fill: colors.$components-colors__logo--is-dark;
		}

		.full-logo_svg__nelio-content-logo-light,
		.nelio-content-logo-light {
			fill: colors.$components-colors__logo--is-light;
		}
	}

	&__subtitle {
		color: colors.$layout-colors__foreground--is-blurred;
		margin: 1em 2em;
	}

	&__intro {
		color: #1e1e1e;
		font-style: normal;
		font-size: 32px;
		line-height: 40px;
		text-align: center;
		margin-bottom: 12px;
		letter-spacing: normal;
		padding-top: 0;
		font-weight: 500;
	}

	&__instructions {
		color: colors.$layout-colors__foreground--is-blurred;
		margin: 1em 2em 2em;
		font-style: normal;
		font-weight: 400;
		font-size: 16px;
		line-height: 24px;
		text-align: center;
	}

	&__policy {
		max-width: 90%;
		margin: 1em auto;
		text-align: left;

		.components-base-control__field {
			display: flex;
			flex-direction: row;
		}

		.components-checkbox-control__input-container {
			margin-top: 0.2em;
		}
	}

	&__policy-checkbox--pulse input {
		animation: pulse 2s infinite;

		:hover {
			animation: none;
		}
	}

	&__actions {
		border-top: 1px solid colors.$layout-colors__border--is-subtle;
		margin: 2em auto 0;
		max-width: 90%;
		padding-top: 2em;
		display: flex;
		gap: 1em;
		justify-content: center;
	}

	&__start,
	&__skip {
		padding: 10px 16px;
		width: 200px;
		height: 48px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 14px;
	}

	&__error {
		color: colors.$layout-colors__foreground--is-warning;
		display: flex;
		margin: 2em 1em;
		margin-bottom: 0;
		text-align: left;

		.dashicon {
			flex-grow: 0;
			flex-shrink: 0;
			margin-right: 0.5em;
		}
	}
}

@keyframes pulse {

	0% {
		box-shadow: 0 0 0 0 rgba(11, 41, 83, 0.4);
	}

	70% {
		box-shadow: 0 0 0 10px rgba(11, 41, 83, 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(11, 41, 83, 0);
	}
}