@use '../../design/scss/variables' as *;

$block-font-size: $font-size-base * $font-size-rate;

.wp-block-adpresso-ad-inserter,
.wp-block-advads-gblock {
	--wp-admin-theme-color: #{$color-primary};
	--wp-admin-theme-color-darker-10: #{$color-teal-dark};
	--wp-admin-theme-color-darker-20: #{$color-teal-darkest};

	> .components-placeholder {
		border-left: $border-md solid $color-primary;
		background-color: $color-primary-superlight;
		box-shadow: inset 0 0 0 1px $color-primary-light;
	}

	.adpresso-block-placeholder-preview {
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		gap: $space-2;
		max-width: 100%;
		padding: $space-3 $space-4;
		border: 1px dashed $color-teal-very-bright;
		border-left: $border-md solid $color-primary;
		border-radius: $radius-sm;
		background-color: $color-primary-superlight;
		color: $color-text;
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
		font-size: $block-font-size;
		line-height: 1.4;
		text-align: left;

		> p {
			margin: 0;
			font-size: 1.15em;
			font-weight: 600;
			color: $color-teal-dark;
			overflow-wrap: anywhere;
		}

		> .components-notice {
			margin: 0;
		}

		> .components-button {
			align-self: flex-start;
		}
	}

	.adpresso-block-placeholder-label {
		color: $color-teal-light;
		font-size: .85em;
		font-weight: 600;
		letter-spacing: .04em;
		text-transform: uppercase;
	}

	.adpresso-block-placeholder-selection {
		display: flex;
		align-items: center;
		gap: $space-1;
		min-width: 0;
		font-size: 1.15em;
		font-weight: 600;
		color: $color-teal-dark;

		> span:first-child {
			min-width: 0;
			overflow-wrap: anywhere;
		}
	}

	.adpresso-block-edit-link {
		display: inline-flex;
		flex-shrink: 0;
		align-items: center;
		justify-content: center;
		width: 2em;
		height: 2em;
		border-radius: $radius-xs;
		color: $color-primary;
		text-decoration: none;

		&:hover,
		&:focus {
			background-color: $color-primary-light;
			color: $color-teal-dark;
		}

		&:focus-visible {
			outline: 2px solid $color-primary;
			outline-offset: 1px;
		}

		.dashicons {
			width: 1.4em;
			height: 1.4em;
			font-size: 1.4em;
		}

		.components-external-link__icon {
			display: none;
		}
	}

	.adpresso-block-reselect {
		max-width: 22em;

		.components-base-control__field {
			margin-bottom: 0;
		}

		select {
			background-color: $color-white;
		}
	}
}

// Legacy Advanced Ads block: same card, golden accent.
.wp-block-advads-gblock .adpresso-block-placeholder-preview {
	border-color: $color-golden-brown-bright;
	border-left-color: $color-accent;
	background-color: $color-accent-superlight;

	.adpresso-block-placeholder-label {
		color: $color-golden-brown-darkest;
	}
}