@import "/UI/Style.scss";

EquipSelector {
	position: absolute;
	bottom: 250px;
	right: 0px;
	align-items: center;
	font-family: $font-main;
	opacity: 0;
	transition: opacity 0.4s ease-in-out;

	&.visible {
		> .all-gear {
			> .gear {
				transform: translateX(0%);
			}
		}

		opacity: 1;
	}

	> .all-gear {
		flex-direction: column;
		gap: 20px;

		> .gear {
			position: relative;
			width: 350px;
			height: 80px;
			background-color: rgba($gray-darker, 0.9);
			align-items: center;
			transform: translateX(100%);
			opacity: 0.5;

			> .finger {
				position: absolute;
				right: 100%;
				height: 50px;
				background-size: contain;
				background-position: center;
				background-repeat: no-repeat;
				animation: Bounce 0.3s linear alternate infinite;
				bottom: 20px;
				display: none;
			}

			&.selected {
				opacity: 1;

				> .finger {
					display: flex;
				}
			}

			> .name {
				position: absolute;
				bottom: 10px;
				left: 10px;
				padding: 2px 15px;
				justify-content: center;
				align-items: center;
				font-size: 22px;
				color: $white;
				background-color: $gray-darker;
				text-transform: uppercase;
			}

			> .icon {
				position: absolute;
				right: 70px;
				bottom: 10px;
				max-width: 150px;
				background-size: contain;
				background-position: right;
				background-repeat: no-repeat;
			}

			> .key {
				position: absolute;
				right: 15px;
				width: 30px;
				aspect-ratio: 1;
				background-color: $white;
				color: $gray-darker;
				justify-content: center;
				align-items: center;
				font-size: 24px;
			}
		}
	}
}

@keyframes Bounce {
	0% {
		transform: translateX(30%);
	}

	100% {
		transform: translateX(20%);
	}
}