.ppcp-r-modal {
	@import "../../global";
	@import './button';
	@import './fields';

	&__container {
		max-width: 100%;
		width: 400px;

		&--small {
			padding: 0 50px;
		}
	}

	.components-modal {
		&__header {
			height: 52px;
			padding: 20px 20px 0 20px;

			button {
				padding: 4px;
			}
		}

		&__content {
			margin-top: 48px;
			padding: 0 50px 48px 50px;
		}
	}

	&__header {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8px;
		border-bottom: 1px solid $color-gray-500;
		padding-bottom: 12px;
		margin-bottom: 24px;
	}

	&__title {
		@include font(16, 20, 600);
		color: $color-black;
	}

	&__content {
		width: 400px;
		max-width: 100%;
	}

	&__inverted-toggle-control {
		.components-form-toggle {
			order: 1;
		}
	}

	&__field-row {
		display: flex;
		flex-direction: column;
		gap: 8px;

		&--save {
			margin-top: 24px;
			align-items: flex-end;
		}


		input[type='text'] {
			padding: 7px 11px;
			@include font(14, 20, 400);
			margin: 0;
			border-color: $color-gray-700;
		}

		label {
			@include font(14, 16, 400);
			color: $color-gray-900;
		}
	}

	&__field-rows {
		display: flex;
		flex-direction: column;
		gap: 24px;

		&--acdc {
			gap: 18px;
		}
	}

	.ppcp-r-modal__field-row--save button.is-primary {
		border-radius: 2px;
		padding: 6px 12px;
		@include font(13, 20, 400);
	}

	&__content-title {
		@include font(14, 20, 600);
		color: $color-black;
		display: block;
		margin: 0 0 4px 0;
	}

	&__description {
		@include font(14, 20, 400);
		margin: 0 0 24px 0;
		color: $color-black;
	}

	&__field-rdb {
		display: flex;
		gap: 18px;
		align-items: center;
		position: relative;
		label {
			@include font(14, 20, 400);
			color: $color-black;
		}
	}
}