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

.weather-display .latest-observations {

	&.main {
		overflow-y: hidden;

		.column-headers {
			height: 20px;
			position: absolute;
			width: 100%;
		}

		.column-headers {
			top: 0px;

			div {
				display: inline-block;
				font-family: 'Star4000 Small';
				font-size: 24pt;
				position: absolute;
				top: -14px;
				@include u.text-shadow();
			}

			.temp {
				// hidden initially for english/metric switching
				display: none;

				&.show {
					display: inline-block;
				}
			}
		}

		.temp {
			left: 230px;
		}

		.weather {
			left: 280px;
		}

		.wind {
			left: 430px;
		}

		.observation-lines {
			min-height: 338px;
			padding-top: 10px;

			.observation-row {
				font-family: 'Star4000';
				font-size: 24pt;
				@include u.text-shadow();
				position: relative;
				height: 40px;

				>div {
					position: absolute;
					top: 8px;
				}

				.wind {
					white-space: pre;
					text-align: right;
				}
			}
		}
	}
}