.vpf-pro-note {
	position: relative;
	max-width: 280px;
	padding: 20px;
	font-size: 13px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	color: #b65e96;
	background: linear-gradient(to left, rgba(#743ad5, 20%), rgba(#d53a9d, 20%));

	.vpf-setup-wizard-panel & {
		margin: 0 auto;
	}
	.vpf-component-gallery-control-item-modal-wrap & {
		width: 100%;
		max-width: none;
	}

	&::before {
		position: absolute;
		top: 1px;
		right: 1px;
		bottom: 1px;
		left: 1px;
		z-index: 0;
		display: block;
		content: "";
		background-color: #fff6fc;
	}

	> * {
		position: relative;
		z-index: 1;
	}

	h3 {
		margin-top: 0;
		margin-bottom: 0;
		font-size: 13px;
		font-weight: 600;
		font-family: inherit;
		color: #d53a9d;
		text-transform: none;
	}

	p {
		font-size: inherit !important;
	}

	ul {
		margin: 0;
		list-style: none;

		li::before {
			display: inline;
			margin-bottom: 5px;
			content: "- ";
		}
	}

	.vpf-pro-note-description,
	.components-base-control__help {
		margin: 1em 0;
	}

	&-button {
		box-sizing: border-box;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 40px;
		padding: 0 16px;
		font-size: 13px;
		font-weight: 500;
		line-height: 1;
		text-decoration: none;
		background: linear-gradient(to left, #743ad5, #d53a9d);
		border-radius: 2px;
		transition: 0.2s filter ease, 0.2s transform ease;

		&,
		&:hover,
		&:focus,
		&:active {
			color: #fff;
		}

		&:hover,
		&:focus {
			filter: contrast(1.5) drop-shadow(0 3px 3px rgba(213, 58, 157, 30%));
			transform: translateY(-1px);
		}
	}
}