@import "../../common";

#clock-unit {
	display: flex;
	align-items: stretch;
	opacity: 0.7;

	sup {
		cursor: help;
	}

	.time-of-day {
		flex: 1 1 45%;
		padding: $menu-padding 0 $menu-padding*0.8 $menu-padding;
	}
	.resets {
		flex: 1 1 55%;
		padding: $menu-padding 0 $menu-padding*0.8 0;
	}

	p {
		margin: 0 0 0 0;
		padding: 0;

		font-size: 0.9rem;

		&[title] {
			cursor: help;
		}
	}

	// Always show

	.currentTime {
		height: auto;
		font-size: 1.8rem;
		font-weight:bold;
		display: block;
	}

	.untilNight {
		font-size: 1.25rem;
	}
	.untilDaytime {
		font-size: 1.05rem;
	}

	&.isDay {
		.untilDaytime {
			display: none;
		}
	}
	&.isNight {
		.untilNight {
			display: none;
		}
	}

	p.untilImperialReset {
		opacity: 0.75;
	}

	p.soon {
		display: block;
		b {
			color: $color-primary-700;
		}
	}
}
