@use "sass:math";

.atlas-info-digit {
	align-items: flex-end;
	display: flex;
	font-size: 12.8px;
	margin: $space-md-atlas 0;
	max-width: math.div(100%, 3);
	position: relative;
	width: 50%;

	&__digit {
		color: $color-blue-atlas;
		font-size: 48px;
		font-weight: normal;
		line-height: 1;
		margin-right: 5px;
	}

	&__details {
		margin-bottom: 0.4em;
	}

	&__title {
		font-size: 16px;
		font-weight: bold;
	}

	&__popup {
		@include tooltip($_state: stale);

		&::before {
			@include tooltip(__arrow);
		}

		.atlas-info-digit:hover & {
			@include tooltip($_state: activated);
		}
	}

	&__list {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	&__item {}

	&._primary {
		.atlas-info-digit__digit {
			font-size: 64px;
			font-weight: normal;
		}
	}
}