@use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;

.wp-block-jetpack-map {

	.wp-block-group-is-layout-flex:not(.is-vertical) > & {
		flex-basis: 100%;
	}

	.wp-block-group-is-layout-flex.is-vertical > & {
		width: 100%;
	}

	.wp-block-jetpack-map__gm-container {
		width: 100%;
		overflow: hidden;
		background: gb.$gray-200;
		min-height: 400px;
		text-align: start;
	}

	.mapkit-popup-content {
		background: #fff;
		border-radius: 3px;
		box-shadow: 0 1px 2px rgb(0 0 0 / 10%);
		max-width: 300px;
		min-width: 150px;
		padding: 10px 10px 15px;
		pointer-events: auto;

		h3 {
			font-size: 1.3125em;
			font-weight: 400;
			margin-bottom: 0.5rem;
		}

		p {
			margin-bottom: 0;
		}
	}

	.wp-block-jetpack-map__mb-container {
		height: 400px;
	}

	.mapboxgl-popup {

		h3 {
			font-size: 1.3125em;
			font-weight: 400;
			margin-bottom: 0.5rem;
		}

		p {
			margin-bottom: 0;
		}
		max-width: 300px;
	}

	.mapboxgl-ctrl-group button {
		// Prevents theme styles adding a border radius to all buttons
		// affecting the Map block controls too.
		border-radius: 0;
		// Prevents theme styles from affecting the background color of the button.
		background-color: transparent !important;
	}
}
