<commit_before>@import '../card/card';

@keyframes lightSpeedIn {
	0% {
		opacity: 0;
		transform: translate3d(100%, 0, 0) skewX(30deg);
		transform: translate3d(100%, 0, 0) skewX(30deg);
		transform: translate3d(100%, 0, 0) skewX(30deg);
	}

	100% {
		opacity: 1;
	}
}

.sq-player {
	@include clearfix;

	float: left;
	margin-bottom: 2rem;
	position: relative;
	text-align: center;

	&.current {
		float: none;

		card {
			top: 0;

			&.selected {
				top: -2rem;

				.card {
					border: 2px solid get-color('zest');
					border-radius: .75rem;
				}
			}
		}

		.sq-player-info {
		}
	}

	&.active {
		.sq-player-info {
			color: get-color('mandy');
			font-weight: $font-weight-bold;
		}
	}

	.sq-player-thumbnail {
		float: left;

		img {
			width: 10rem;
		}
	}

	.sq-player-info {
		@include clearfix;

		float: left;
		margin-right: 1rem;

		.sq-player-total-cards,
		.sq-player-storage {
			position: relative;
		}

		.sq-player-total-cards {
			display: inline-block;
			font-size: 2rem;

			.card {
				height: 5rem;
				position: relative;
				width: 4rem;
			}

			.sq-player-card-count {
				@include center-horizontal;

				color: get-color(white);
				position: absolute;
				top: 0;
			}
		}

		.sq-player-storage {
			font-size: 5rem;

			.sq-player-score {
				@include center-horizontal;
				color: get-color('carnaby-tan');
				font-size: 2.25rem;
				line-height: 2.25;
				top: 0;
			}
		}
	}

	.sq-player-cards {
		@include clearfix;

		float: left;
		width: 50%;

		.cards-group {
			@extend %playing-cards;

			.empty {
				@extend %playing-cards;

				border: 2px dotted;
				padding: 3.5rem;

				&::after {
					content: 'NO CARDS';
				}
			}

			card {
				float: left;
				position: relative !important;
				width: rem-calc($card-width-stack);

				&.mine {
					animation: .5s linear grow;
				}

				&.ng-leave-active {
					.card {
						animation: .5s linear fade-out;
					}
				}
			}
		}

		@media (min-width: $screen-md-min) {
			width: 70%;
		}
	}
}<commit_msg>Fix style of player cards for 'small' size<commit_after>@import '../card/card';

@keyframes lightSpeedIn {
	0% {
		opacity: 0;
		transform: translate3d(100%, 0, 0) skewX(30deg);
		transform: translate3d(100%, 0, 0) skewX(30deg);
		transform: translate3d(100%, 0, 0) skewX(30deg);
	}

	100% {
		opacity: 1;
	}
}

.sq-player {
	@include clearfix;

	float: left;
	margin-bottom: 2rem;
	position: relative;
	text-align: center;

	&.current {
		float: none;

		card {
			top: 0;

			&.selected {
				top: -2rem;

				.card {
					border: 2px solid get-color('zest');
					border-radius: .75rem;
					transform: scale(1.5);
				}
			}
		}

		.sq-player-info {
		}
	}

	&.active {
		.sq-player-info {
			color: get-color('mandy');
			font-weight: $font-weight-bold;
		}
	}

	.sq-player-thumbnail {
		float: left;
		margin-right: 1rem;
		transform: translateY(25%);

		img {
			width: 7.5rem;
		}
	}

	.sq-player-info {
		@include clearfix;

		float: left;
		margin-right: 1rem;

		.sq-player-total-cards,
		.sq-player-storage {
			position: relative;
		}

		.sq-player-total-cards {
			display: inline-block;
			font-size: 2rem;

			.card {
				height: 5rem;
				position: relative;
				width: 4rem;
			}

			.sq-player-card-count {
				@include center-horizontal;

				color: get-color(white);
				position: absolute;
				top: 0;
			}
		}

		.sq-player-storage {
			font-size: 5rem;

			.sq-player-score {
				@include center-horizontal;
				color: get-color('carnaby-tan');
				font-size: 2.25rem;
				line-height: 2.25;
				top: 0;
			}
		}
	}

	.sq-player-cards {
		@include clearfix;

		float: left;
		width: 50%;

		.cards-group {
			@extend %playing-cards;

			[role='button'] {
				position: absolute;
			}

			.empty {
				@extend %playing-cards;

				border: 2px dotted;
				padding: 3.5rem;

				&::after {
					content: 'NO CARDS';
				}
			}

			card {
				float: left;
				position: relative !important;
				width: rem-calc($card-width-stack);

				&.mine {
					animation: .5s linear grow;
				}

				&.ng-leave-active {
					.card {
						animation: .5s linear fade-out;
					}
				}
			}
		}
	}

	@media (min-width: $screen-md-min) {
		&.current {
			card {
				&.selected {
					.card {
						transform: scale(1);
					}
				}
			}
		}

		.sq-player-thumbnail {
			img {
				width: 10rem;
			}
		}

		.sq-player-cards {
			width: 70%;
		}
	}
}
{'fraction_non_alphanumeric': 0.16062413951353832, 'fraction_numerical': 0.029371271225332722, 'mean_word_length': 2.1495664739884393, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1771266', 'n_tokens_mistral': 2295, 'n_tokens_neox': 1713, 'n_words': 341}