@import '/UI/Style.scss';

GearSelector {
    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%);
    }
}