
#elementor-role-manager {
	max-width: 500px;
	margin-block-start: 50px;

	h3 {
		color: $editor-dark;
		font-weight: normal;
		font-size: 22px;
	}

	.elementor-settings-form-page {
		padding: 0;
	}

	.elementor-role-row {
		background: #ffffff;
		color: $editor-dark;
		margin-block-end: 2px;

		.elementor-role-label {
			display: flex;
			padding: 15px 20px;
			font-weight: 500;
			cursor: pointer;

			span.elementor-role-name {
				padding-inline-end: 20px;
			}

			span.elementor-role-toggle {
				text-align: end;
				flex-grow: 1;
			}

			span.elementor-role-excluded-indicator {
				color: $editor-light;
			}
		}

		.elementor-role-controls {
			background-color: $gray-lightest;
			padding: 20px 20px 5px;

			> div {
				margin-block-end: 15px;
			}

			.elementor-role-go-pro {
				display: flex;
				align-items: center;

				.elementor-role-go-pro__desc {
					font-weight: 500;
					font-style: italic;
					flex-grow: 1;
				}

				.elementor-role-go-pro__link {
					display: flex;
				}
			}
		}

		.elementor-role-controls-advanced {
			> div + div {
				margin-block-start: 15px;
			}
		}
	}

	.elementor-role-control-warning {
		color: var(--e-a-color-danger);
	}
}

