@use "~admin-stylesheets/colors";

.nelio-content-pageviews-analytics {
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: space-between;

	&__title {
		align-items: center;
		display: flex;
		flex-direction: row;
		font-variant: small-caps;
		justify-content: center;
		margin-bottom: 0.5em;
	}

	&__help-icon {
		display: flex;
		color: colors.$layout-colors__foreground--is-blurred;
		margin-left: 0.2em;
	}

	&__value {
		font-size: 2em;
		line-height: 1;
	}

	&__metrics {
		align-items: flex-end;
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin-top: 1em;
		min-height: 42px;
	}

	&__metric {
		align-items: center;
		display: flex;
		flex-direction: column;
		margin: 0 0.2em;
		min-width: 2em;

		&-network {
			margin-bottom: 4px;
			font-size: 18px;
		}

		&-value {
			color: colors.$layout-colors__foreground--is-blurred;
		}
	}
}