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

#radar-html.weather-display {
	background-image: var(--theme-background-4);

	.header {
		height: 83px;

		.title.dual {
			color: white;
			font-family: 'Arial', sans-serif;
			font-weight: bold;
			font-size: 28pt;
			left: 155px;

			.top {
				top: -4px;
			}

			.bottom {
				top: 31px;
			}
		}

		.right {
			position: absolute;
			right: 0px;
			width: 360px;
			margin-top: 2px;
			font-family: 'Star4000';
			font-size: 18pt;
			font-weight: bold;
			@include u.text-shadow();
			text-align: center;

			.scale-table {
				display: flex;
				justify-content: center;
				gap: 4px;

				.item {
					display: flex;
					flex-direction: column;
					align-items: center;
					width: 25px;
					gap: 2px;
				}

				.box {
					display: block;
					border: 2.7px solid #000;
					width: 90%;
					height: 12px;
					margin-top: 4px;
					padding: 0;
				}

				.box-1 {
					background-color: rgb(73, 190, 246);
				}

				.box-2 {
					background-color: rgb(49, 210, 22);
				}

				.box-3 {
					background-color: rgb(241, 228, 88);
				}

				.box-4 {
					background-color: rgb(224, 142, 47);
				}

				.box-5 {
					background-color: rgb(196, 42, 42);
				}

				.box-6 {
					background-color: rgb(145, 59, 184);
				}

				.label {
					font-family: 'Star4000 Small';
					font-size: 10pt;
					line-height: 1;
					white-space: nowrap;
				}
			}

			.scale {
				margin-top: -2px;
			}

			.time {
				position: relative;
				font-weight: normal;
				top: -20px;
				font-family: 'Star4000 Small';
				font-size: 18pt;
				left: 132px;
			}
		}
	}
}

.weather-display .main.radar {
	overflow: hidden;
	height: 367px;

	.container {
		position: relative;
		height: 100%;

		.scroll-area {
			position: relative;
			height: 100%;
		}

		.frame {
			height: 100%;
		}

		.map {
			height: 100%;
			width: 100%;
		}

		.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 {
			display: none;
			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(18 34 61 / 0%);
				color: #fff;
				text-align: center;
				opacity: 0.35;
			}

			.city {
				font-family: 'Star4000 Small';
				font-size: 11pt;
				line-height: 1;
				white-space: nowrap;
				margin-bottom: 1px;
				text-shadow: 1px 1px 0 #000;
				display: none;
			}

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

			.temp {
				font-family: 'Star4000';
				font-size: 18pt;
				line-height: 1;
				color: #ff0;
				text-shadow: 1px 1px 0 #000;
			}

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

.wide.radar #container {
	background: url(../images/backgrounds/4-wide.png);
}