@use 'shared/_colors'as c;
@use 'shared/_utils'as u;

#regional-forecast-html.weather-display {
	background-image: var(--theme-background-5);
}

.weather-display .main.regional-forecast {
	position: relative;
	overflow: hidden;
	z-index: 0;

	.map {
		position: absolute;
		inset: 0;
	}

	.leaflet-map {
		height: 100%;
		width: 100%;
		background: #061f3e;
	}

	.leaflet-container {
		background: #061f3e;
		font-family: inherit;
	}

	.radar-base-layer,
	.radar-base-layer .leaflet-tile {
		filter: grayscale(0.35) brightness(0.58) contrast(1.1) saturate(0.2);
	}

	.radar-boundary-layer,
	.radar-boundary-layer .leaflet-tile {
		filter: grayscale(0.8) brightness(0.7) contrast(1.3) saturate(0.1);
	}

	.leaflet-control-container,
	.leaflet-control-attribution,
	.leaflet-control-zoom {
		display: none;
	}

	.location-marker {
		background: #ff0;
		border: 2px solid #000;
		border-radius: 50%;
	}

	.nearby-weather-marker {
		background: transparent;
		border: 0;

		.nearby-weather-marker-inner {
			display: inline-flex;
			flex-direction: column;
			align-items: center;
			min-width: 72px;
			padding: 2px 4px;
			background: rgb(255 255 255 / 0%);
			color: #fff;
			text-align: center;
		}

		.city {
			display: none;
		}

		.details {
			display: flex;
			align-items: center;
			gap: 2px;
		}

		.temp {
			font-family: 'Star4000';
			font-size: 18pt;
			line-height: 1;
			color: c.$title-color;
			@include u.text-shadow();
		}

		img {
			width: auto;
			height: 20px;
		}
	}
}