@import '../../sass/helper/mixins';
@import '../../sass/helper/variables';
@import '../../sass/helper/placeholders';

.all-players {
    display: flex;
    justify-content: space-around;
    max-width: 80vw;
    padding: 0 2rem;
    background-color: rgb(237, 213, 156);
    color: black;

    .player-ui {
        width: 30vw;
        p {
            margin: 1rem;
        }
        .subheader {
            font-weight: bold;
        }

        .resources {
            .player-chips-enum {
                display: flex;
                justify-content: center;
                @include map-gem-values(".player-chip");
            }
        }

        .reserved-card-view {
            background-color: rgb(232, 224, 200);
            .reserved-card-cost {
                display: flex;
                flex-flow: row wrap;
                justify-content: center;
                @include map-gem-values(".reserve-cost");
            }
        }

        .card {
            width: 100%;

            img {
                display: none;
            }

            @each $gem in $gemlist {
                @include map-gem-values('.foreground');
                .foreground-#{$gem} {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    padding: 8px;

                    p {
                        display: inline;
                        padding: 8px;
                    }
                    
                    .total-card-cost {
                        display: flex;
                        flex-flow: row wrap;
                        justify-content: center;
                        @include map-gem-values(".card-cost");
                    }
                }
            }
        }
    }
}