src/static/scripts/components/misc/awardsInfo/_awardsInfo.scss
@use "../../../../style/vars";
@use "../../../../style/shadow";

.awardsInfo {
	$awardsTileSeize: 4rem;

	> .preview {
		display: flex;
		position: relative;

		* {
			font-size: .8em;
		}
	}

	> .expandedWrapper {
		position: relative;
		z-index: 2;

		> .expandedView {
			@extend %shadow-dreamy;
			position: absolute;
			z-index: 1;
			visibility: hidden;
			opacity: 0;
			margin-left: -50%;
			transform: translateX(-25%) scale(.9);
			transition: all .25s ease;
			max-width: ($awardsTileSeize + 1rem) * 3 + 2rem;
			overflow-x: hidden;
			border-radius: 1rem;
			border: 1px solid vars.$border-color;
			background: vars.$background;

			.awardInfo {
				display: flex;
				flex-flow: column;
				background: vars.$background-el1;
				padding: .65rem;
				position: sticky;
				top: -1rem;

				> .top {
					display: flex;
					justify-content: space-between;
				}

				* {
					font-size: .8rem;
				}
			}

			.awardsList {
				display: grid;
				grid-template-columns: 1fr 1fr 1fr;
				max-height: ($awardsTileSeize + 1rem) * 3 + 2rem;
				overflow-y: auto;
				overflow-x: hidden;
				padding: 1rem;

				.award {
					margin: .5rem;
					cursor: pointer;
					position: relative;

					img {
						width: $awardsTileSeize;
						height: $awardsTileSeize;
					}

					.count {
						position: absolute;
						top: 0;
						left: 0;
						background: vars.$tooltip-bg;
						box-shadow: 0 0 6px 1px vars.$tooltip-bg;
						border: 1px solid vars.$border-color;
						height: 1rem;
						padding: 0 .125rem;
						border-radius: .5rem;
						font-size: .75rem;
					}
				}
			}
		}
	}

	.coins {
		position: relative;

		&::after {
			content: "¢";
			margin-left: .125rem;
		}
	}

	&.show .expandedView {
		visibility: visible;
		opacity: 1;
		transform: translateX(-25%) scale(1);
	}
}