[data-component='Stats'] {
	TransitionAppear(500ms);

	+desktop() {
		position: relative;
		display: flex;
		flex-direction: row;
		padding: 10px 0;
		min-width: 100px;
		background-color: rgba(#1c446f, 0.75);
		font-size: 0.7rem;
	}

	+mobile() {
		position: fixed;
		z-index: 3000;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: rgba(#1c446f, 0.75);
		padding: 40px 10px;
		font-size: 0.9rem;
		overflow: auto;
	}

	> .close {
		background-image: url('/resources/images/close.svg');
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
		cursor: pointer;
		opacity: 0.75;
		transition-duration: 0.25s;

		+desktop() {
			position: absolute;
			top: 5px;
			right: 5px;
			width: 20px;
			height: 20px;
		}

		+mobile() {
			position: fixed;
			top: 10px;
			right: 10px;
			width: 30px;
			height: 30px;
		}

		&:hover {
			opacity: 1;
		}
	}

	> .block {
		padding: 5px;

		+desktop() {
			border-right: 1px solid rgba(#fff, 0.15);

			&:last-child {
				border-right: none;
			}
		}

		+mobile() {
			width: 100%;
		}

		> h1 {
			margin-bottom: 8px;
			text-align: center;
			font-weight: 400;
			color: #fff;
		}

		> .item {
			display: flex;
			flex-direction: row;
			margin: 3px 0;
			font-size: 0.95em;
			font-weight: 300;

			> .key {
				text-align: right;
				color: rgba(#fff, 0.9);

				+desktop() {
					width: 85px;
				}

				+mobile() {
					width: 50%;
				}
			}

			> .value {
				margin-left: 10px;
				text-align: left;
				color: #aae22b;

				+desktop() {
					width: 85px;
				}

				+mobile() {
					width: 50%;
				}
			}
		}
	}
}