@import "/UI/Styles/Theme.scss";

BuyMenu {
    backdrop-filter: brightness( 0.5 );
    z-index: 100;

    .container {
        position: absolute;
        margin-left: auto;
        margin-right: auto;
        padding: 64px;
        border-radius: 20px;
        flex-direction: column;
        gap: 32px;
        pointer-events: none;
    }

    .section {
        flex-direction: column;
        gap: 16px;
    }

    .options {
        gap: 8px;
        flex-direction: row;
        flex-wrap: wrap; 
    }

    &.visible {
        pointer-events: all;
    }

    .title { 
        color: #fff;
    }

    .button { 
        color: #fff; 
        padding: 8px;
        display: flex;
        flex-direction: column; 
        transition: all 0.075s ease;
        justify-content: space-between;
        align-items: flex-start; 
        height: 100px;
        width: 200px;

        &.primary {
            height: 125px;
            width: 250px;
        }

        &.equipment {
            .gunicon {
                width: 30%;
                height: 100%;
            }
        }

        label { 
        }

        &.unaffordable {
            opacity: 0.24;
            pointer-events: none;
        }

        &.owned {
            background-color: rgba( $yellow, 0.5 );
            border-color: $yellow;
            pointer-events: none;
        }
         
    }

    .gunicon {
        position: absolute;
        align-self: center;
        width: 60%;
        height: 100%;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        z-index: -1;
    }
}