@import "Theme.scss";

// The pre-game settings card, sitting above the Deal/Back bar in the Waiting lobby. Compact rows of
// label + control, grouped by section. Composes from the shared .cg-* vocabulary (buttons, groups, pills).
.game-settings
{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 16px 18px;
    max-width: 540px;
    background-color: $panel;
    border: 0.15px solid $line;
    border-radius: $r-md;
    pointer-events: all;
    @include elevate;

    .head
    {
        margin-bottom: 2px;
    }

    .group-head
    {
        font-family: $sans;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: $text-mut;
        margin-top: 6px;
    }

    .row
    {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
    }

    .label
    {
        flex-direction: column;
        flex-grow: 1;
        gap: 2px;

        .name
        {
            font-family: $sans;
            font-size: 14px;
            font-weight: 700;
            color: $text;
        }

        .desc
        {
            font-family: $sans;
            font-size: 11px;
            font-weight: 400;
            color: $text-mut;
        }
    }

    // Controls are tighter than the main action bar so a row of choices stays on one line.
    .control
    {
        flex-shrink: 0;

        .cg-btn
        {
            padding: 8px 14px;
            font-size: 12px;
            letter-spacing: 1px;
        }

        // The current value sitting between the - / + stepper buttons.
        .value
        {
            justify-content: center;
            min-width: 54px;
            color: $text;
            background-color: $panel-2;
            cursor: default;
            pointer-events: none;
        }
    }
}