/* ## BN Mapbox Styling
------------------------------------------- */
.bn-map__locations {
	cursor:col-resize;
	position: relative;
	padding-block: var(--unit-sm);
	display: flex;
	max-width: 100%;
	gap: var(--unit-sm);
	overflow: auto;
	overscroll-behavior: contain;
	flex: 1;
	scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none; /* For Internet Explorer and Edge */
	&::-webkit-scrollbar {
		display: none; /* For Chrome, Safari, and Opera */
	}
	&:hover:after{
		content: 'scroll';
		position:fixed;
		left:0;
		right:0;
		top: 40%;
		margin-left:auto;
		margin-right:auto;
		padding: 12px 30px;
		background-color: rgb(132, 132, 132);
		border-radius: 99px;
		color: white;
		pointer-events: none;
		opacity: 0;
		transition: all 5s ease 0.5s;
		z-index: 2;
		width: fit-content;
		@starting-style{
			opacity: 1;
		}
	}
}
button.bn-map__location {
	display: flex;
	flex-direction: column;
	border-radius: 0;
	background-color: rgb(104, 104, 104);
	color: #fff;
	text-align: left;
	padding: var(--unit-md);
	border: none;
	cursor:col-resize;
	transition: all 0.4s ease;
	&:hover, &:active, &:focus, &[aria-pressed="true"]{
		background-color: var(--wp--preset--color--primary);
		color: white;
	}
}
.bn-map__location-title{
	min-width: 220px;
	white-space: nowrap;
	color: currentColor;
}
.bn-map__location-title,
.bn-map__location-address {
	display: block;
}
.grower{
	flex-grow: 1;
}
.bn-map__entity{
	img{
		height: 16px;
		width: auto;
		padding-block: 3px;
	}
}
.bn-map__canvas {
	min-height: 600px;
}
.bn-map__marker {
	width: 20px;
	height: 20px;
	padding: 0;
	border: 2px solid #fff;
	border-radius: 50%;
	background: #1d23aa;
	cursor: pointer;
}
.mapboxgl-popup {
	.mapboxgl-popup-content {
		background-color: #1d23aa;
		color: white;
	}
	.mapboxgl-popup-tip {
		border-top-color: #1d23aa;
	}
	.mapboxgl-popup-close-button {
		color: white;
		&:hover {
			background-color: transparent;
		}
	}
}