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

.weather-display .main.current-weather {
	&.main {

		.col {
			height: 50px;
			width: 255px;
			display: inline-block;
			margin-top: 10px;
			padding-top: 10px;
			position: absolute;

			@include u.text-shadow();

			&.left {
				font-family: 'Star4000 Extended';
				font-size: 24pt;

			}

			&.right {
				right: 0px;
				font-family: "Star4000 Large";
				font-size: 20px;
				font-weight: bold;
				line-height: 24px;

				.row {
					margin-bottom: 12px;

					.label,
					.value {
						display: inline-block;
					}

					.label {
						margin-left: 20px;
					}

					.value {
						float: right;
						margin-right: 10px;
					}

				}

			}
		}

		.center {
			text-align: center;
		}

		.temp {
			font-family: 'Star4000 Large';
			font-size: 24pt;
		}

		.icon {
			img {
				margin: 0 auto;
				display: block;
			}
		}

		.wind-container {
			margin-left: 10px;
			display: flex;

			&>div {
				width: 50%;
			}

			.wind {
				text-align: right;
			}
		}

		.wind-gusts {
			text-align: right;
			font-size: 28px;
		}

		.location {
			color: c.$title-color;
			max-height: 32px;
			margin-bottom: 10px;
			padding-top: 4px;
			overflow: hidden;
			text-wrap: nowrap;
		}
	}
}