@use "~@wordpress/base-styles/colors" as wp-colors;

.editor-styles-wrapper {
	.newspack-ads-ad-block {
		align-items: center;
		display: flex;
		justify-content: center;
	}
	.newspack-ads-ad-block-placeholder {
		align-items: center;
		box-sizing: content-box;
		display: flex;
		font-family:
			-apple-system,
			BlinkMacSystemFont,
			"Segoe UI",
			Roboto,
			Oxygen-Sans,
			Ubuntu,
			Cantarell,
			"Helvetica Neue",
			sans-serif;
		justify-content: center;
		margin: auto;
		padding: 16px;
		position: relative;
		width: 100%;
		overflow: hidden;
		svg.newspack-ads-ad-block-mock {
			display: block;
			pointer-events: none;
			position: absolute;
			rect {
				fill: white;
				stroke: rgba(wp-colors.$gray-900, 0.4);
				stroke-width: 1px;
			}
			line {
				stroke: rgba(wp-colors.$gray-900, 0.4);
				stroke-width: 1px;
			}
		}
		.newspack-ads-ad-block-ad-label {
			background: white;
			border: 1px dashed rgba(wp-colors.$gray-900, 0.4);
			color: wp-colors.$gray-900;
			font-size: 10px;
			line-height: 1.6;
			padding: 4px 8px;
			pointer-events: none;
			position: absolute;
			text-align: center;
		}
	}
	.newspack-ads-ad-block-edit {
		display: flex;
		flex-direction: column;
		width: 100%;
		.components-spinner {
			margin: 0;
		}
		.newspack-ads-ad-block-edit-fields {
			max-width: 500px;
			margin: 0 auto;
			.components-base-control {
				margin-bottom: 16px;
				p {
					font-size: 13px;
				}
			}
		}
	}
}
