.wrapper {
	font-size: 14px;
	line-height: 22px;

	:global(button ~ button) {
		margin-left: 20px !important;
	}

	.body {
		margin-top: 16px;

		.section {
			padding: 16px;
			border-radius: 4px;
			background-color: var(--gray-0);

			~ .section {
				margin-top: 16px;
			}

			&.has-error {

				textarea {
					border-color: var(--red-40);
				}

				.error-message {
					display: block;
					color: var(--red-40);
				}
			}

			.title {
				margin-bottom: 16px;
				font-size: 16px;
				line-height: 1;
				font-weight: 600;
			}

			textarea {
				display: block;
				margin-bottom: 8px;
				width: 100%;
				padding: 12px 16px;
				border-radius: 4px;
				border: 1px solid var(--gray-10);
				background: var(--primary-white);
				color: #000;
			}

			.error-message {
				display: none;
			}

			.description {
				margin-top: 8px;
				font-size: 14px;
				line-height: 1.5;
				color: var(--gray-60);
				font-weight: 400;
			}

			label {
				display: block;
				font-size: 16px;
				line-height: 1.5;

				&:not(:last-child) {
					margin-bottom: 8px;
				}
			}
		}

		.button {
			margin-top: 16px;
		}
	}

	.see-logs-link {
		font-size: 16px;
		line-height: 1.5;
	}

	.logging-toggle {
		margin-right: 1em;
		float: left;
	}

	.clearfix {
		clear: both;
	}
}

.example-wrapper {
	position: relative;
	display: inline;

	.example-button {
		position: relative;
		z-index: 10;
	}

	.tooltip-wrapper {
		position: absolute;
		top: 0;
		left: -10px;
		z-index: 9;

		.tooltip :global(.icon-tooltip-container .components-popover__content) {
			width: 150px;
		}
	}
}
