.cloud-create-modal {
	.components-modal__content {
		min-inline-size: 550px;
	}

	.action-buttons {
		display: flex;
		justify-content: flex-end;
	}

	.components-button.is-secondary {
		box-shadow: none;
	}

	.notice {
		margin-inline: 0;
	}
}

.generate-button {
	display: flex;
	align-items: center;
	gap: 5px;

	.dashicons-warning {
		color: #b32d2e;
	}

	.snippet-tags-container &,
	.snippet-description-container & {
		float: inline-end;
	}
}

.code-line-explanation {
	display: flex;
	cursor: default;
	font-size: inherit;
	margin: 0;
	padding-inline: 6px;
	border-inline-start: none;
	border-inline-end: none;
	border-block-start: 1px solid rgb(0 0 0 / 15%);
	border-block-end: 1px solid rgb(0 0 0 / 15%);
	border-image-slice: 1;
	border-image-width: 1;
	border-image-repeat: stretch;
	color: #666;
	font-style: italic;
	font-family: monospace;
	gap: 5px;
	align-items: center;

	img {
		block-size: 1rem;
		opacity: 0.7;
	}

	.code-line-actions {
		cursor: default;
		gap: 7px;
		display: inline-flex;
		margin-inline-start: 5px;
		font-family: system-ui;
		font-style: normal;

		.commit {
			color: #3d9970;
		}

		.remove {
			color: #b32d2e;
		}

		.action {
			cursor: pointer;
			opacity: 0.6;

			&:hover {
				opacity: 1;
			}
		}
	}
}

.cloud-connect-modal {
	.icons-group {
		display: flex;
		align-items: center;
		justify-content: center;

		.dashicons {
			inline-size: 50px;
			block-size: 50px;
			font-size: 50px;
		}
	}

	.action-buttons {
		display: flex;
		justify-content: flex-end;
	}
}