[data-type="coblocks/map"] {

	@include input-submit-placeholder {
		.components-placeholder__label {

			svg {
				position: relative;
				top: -1px;
			}
		}

		.invalid-google-maps-api-key {
			clear: both;
			color: $alert-red !important;
			display: block;
			text-align: center;
			width: 100%;
		}
	}

	// Fix z-index, for when this block has margin bottom removed, and the next has margin-top removed.
	&.is-selected .components-resizable-box__handle {
		z-index: 30;
	}

	.iframe__overflow-wrapper {
		height: 100%;
		overflow: hidden;
	}

	.components-placeholder__cancel-button.is-link {
		display: block;
	}
}

.components-block-coblocks-map-api-key-remove__button {
	margin-left: 6px;
}

.components-block-coblocks-map-api-key__custom-input {
	margin-bottom: 5px !important;
}

// Map styles.
$styles: ("standard"), ("silver"), ("retro"), ("dark"), ("night"), ("aubergine");

// Style the custom styles component buttons.
.components-coblocks-map-styles__button-wrapper {

	.components-button {

		@each $style in $styles {

			&--#{$style} {
				background-image: url(/assets/map/#{$style}.jpg) !important;
				background-position: center center;
				background-repeat: no-repeat;
				background-size: cover !important;
			}
		}
	}
}

// Style the clickable areas for the map Styles panel.
.components-coblocks-map-styles {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	text-align: left;

	.components-button-group {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 100%;
	}

	.components-coblocks-map-styles__button-wrapper {
		border-radius: $radius-block-ui;
		display: flex;
		flex-direction: column;
		flex-shrink: 0;
		list-style: none;
		margin: 4px 0;
		padding: 5px;
		width: calc(50% - 8px);

		&.is-selected {
			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color, #007cba);
		}
	}

	.components-coblocks-map-styles__button {
		align-items: center;
		background: $white;
		border: 1px solid rgba(25, 30, 35, 0.2);
		border-radius: $radius-block-ui;
		box-shadow: none;
		height: auto;
		margin: 0;
		padding: 0 0 70px 0;
		width: 100%;
	}
}
