@use "~admin-stylesheets/colors";

#wpwrap {
	background: #f3f5f6;
}

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

.nelio-content-wizard-page {

	&__header {

		&-progress-bar {
			margin-top: 1.5em;
			margin-bottom: 1.5em;
			width: 100% !important;
			height: 8px !important;

			div {
				background-color: var(--wp-admin-theme-color);
			}
		}

		&-content {
			display: flex;
			justify-content: space-between;
		}

		&-logo {
			max-width: 8em;

			.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;
			}
		}
	}

	&__license-input {
		text-align: left;
		max-width: 18em;
		margin: 0 auto;

		input.components-text-control__input {
			font-size: 16px;
			height: 48px;
		}
	}

	&__step {
		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;

		&-title {
			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;
		}

		&-description {
			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: left;
		}

		&-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;
		}

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

.components-notice-list {
	margin-top: 1em;
}