.vpf-control-wrap {
	> .components-base-control__help,
	> .components-base-control__field > .components-base-control__help {
		margin-bottom: 1em;
		font-size: 12px;
		font-style: normal;
		color: rgb(117, 117, 117);
		word-break: break-word;
	}

	.components-base-control__label {
		display: inline-block;
		margin-bottom: 8px;
	}

	.components-modal__content & {
		margin-bottom: 24px;
	}
}

// Text control.
.vpf-control-wrap-text input[disabled] {
	color: rgba(44, 51, 56, 50%);
	border-color: rgba(220, 220, 222, 75%);
	box-shadow: inset 0 1px 2px rgb(0 0 0 / 4%);
}

// Notice control.
.vpf-control-wrap-notice .components-notice {
	margin: 0;

	&.is-info {
		background-color: #e6f7ff;
	}
}

.vpf-control-category-title-pro {
	padding: 0.2em 0.8em;
	margin-right: 30px;
	margin-left: auto;
	font-size: 0.8em;
	color: #fff;
	background-color: #2540cc;
	border-radius: 1em;
}

.components-panel__body-toggle > .vpf-control-category-title-icon {
	position: absolute;
	top: 50%;
	display: block;
	transform: translateY(-50%);

	+ span {
		margin-left: 28px;
	}

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

// Group controls.
.vpf-control-group-separator {
	margin-bottom: 18px;
	border-bottom: 1px solid #e0e0e0;

	+ .vpf-control-group-separator {
		display: none;
	}

	.vpf-component-modal &,
	.vpf-component-elements-selector-modal & {
		margin-right: -32px;
		margin-left: -32px;
	}
}