@import '/UI/Style.scss';

LoadoutSelector {
    flex-direction: column;
    gap: 20px;
    font-family: $font-main;
    color: $white;
    padding-bottom: 20px;

    > .title {
        flex-direction: row;
        gap: 15px;
        align-items: center;
        font-size: 28px;
        text-transform: uppercase;

        > .number {
            width: 35px;
            aspect-ratio: 1;
            justify-content: center;
            align-items: center;
            background-color: $white;
            color: $gray-darker;
        }
    }

    > .gear {
        position: relative;
        width: 100%;
        height: 80px;
        background-color: $gray;

        > img {
            position: absolute;
            right: 30px;
            bottom: -20px;
            max-width: 200px;
            background-size: contain;
            background-position: right;
            background-repeat: no-repeat;
        }

        > .name {
            position: absolute;
            top: 100%;
            left: 20px;
            margin-top: -15px;
            padding: 2px 20px;
            background-color: $white;
            color: $gray-darker;
            font-size: 24px;
            text-transform: uppercase;
        }

        > .buttons {
            position: absolute;
            top: 10px;
            width: 100%;
            left: 0px;
            justify-content: space-between;
            padding: 0px 10px;

            > Button {
                width: 30px;
                padding: 0px;
                aspect-ratio: 1;
                font-size: 32px;
                align-items: center;
                text-align: center;
                background-color: $white;
                color: $gray-darker;
            }
        }
    }
}