@import '../variables.less';

.citizen-siteStats {
	display: flex;
	font-size: 0.875rem; // TODO: Put this in variable
	gap: 0.875rem;

	&__item {
		display: flex;
		align-items: center;
		gap: 0.4375rem;

		&:before {
			width: 0.875rem;
			height: 0.875rem;
			background-size: contain;
			content: '';
			opacity: var( --opacity-icon-base );
		}
	}
}

.skin-citizen-dark {
	.citizen-siteStats__item:before {
		filter: invert( 1 );
	}
}

/* Can't display all in one line so let's hide file */
@media ( max-width: 480px ) {
	#citizen-siteStats__item--images {
		display: none;
	}
}