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

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

			button {
				padding: 4px;
			}
		}

		&__content {
			margin-top: 60px;
			padding: 0 24px 28px 24px;
		}
	}

	&__container {
		width: 352px;
		max-width: 100%;
	}

	.has-size-small {
		.ppcp-r-modal__container {
			max-width: 252px;
		}

		.components-modal__content {
			margin-top: 48px;
		}
	}

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

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

	&__content {
		padding: 0;
	}

	.components-toggle-control {
		gap: 8px;
		margin: 0;

		label {
			@include font(13, 20, 400);
			color: $color-text-text;
		}

		.components-form-toggle__track {
			border-color: $color-border;
		}
	}

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

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


		input[type='text'] {
			margin: 0;
			border-color: $color-gray-700;
		}
	}

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

		&--acdc {
			gap: 18px;

			.ppcp-r-modal__field-row--save {
				margin-top: 2px;
			}
		}

		.components-radio-control {
			.components-flex {
				gap: 18px;
			}

			label {
				@include font(14, 20, 400);
				color: $color-black;
			}

			&__option {
				gap: 18px;
			}

			&__input {
				border-color: $color-gray-700;
				margin-right: 0;
				&:checked {
					border: 1px solid $color-gray-700;
					background-color: $color-white;

					&::before {
						transform: translate(3px, 3px);
						border-width: 6px;
						border-color: $color-blueberry;
					}
				}
			}
		}
	}

	.ppcp-r-modal__field-row--save button.is-primary {
		@include small-button;
		width: 100%;
		justify-content: center;
		padding: 6px 12px;
	}

	.ppcp-r__radio-content {
		label {
			@include font(13, 20, 400);
		}
	}

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

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