@import '../../../shared/styles/gutenberg-colors.scss';

.component__map-theme-picker__button {
	.edit-post-settings-sidebar__panel-block & {
		border: 1px solid $light-gray-500;
		border-radius: 100%;
		width: 56px;
		height: 56px;
		margin: 2px;
		text-indent: -9999px;
		background-color: $light-gray-500;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: contain;
		transform: scale( 1 );
		transition: transform 0.2s ease;
		&:hover {
			transform: scale( 1.1 );
		}
		&.is-selected {
			border-color: $black;
		}
		&.is-theme-default {
			background-image: url( './map-theme_default.jpg' );
		}
		&.is-theme-black_and_white {
			background-image: url( './map-theme_black_and_white.jpg' );
		}
		&.is-theme-satellite {
			background-image: url( './map-theme_satellite.jpg' );
		}
		&.is-theme-terrain {
			background-image: url( './map-theme_terrain.jpg' );
		}
	}
}
