@import "Theme.scss";

// Positioned in code (Style.Left/Top) above its seat's hand.
SeatTag
{
    position: absolute;
}

.player
{
    flex-direction: column;
    gap: 9px;
    min-width: 190px;
    padding: 11px 13px;
    background-color: $panel;
    border: 0.15px solid $line-soft;
    border-radius: $r-md;
    transition: opacity .1s ease, filter .1s ease, border-color .1s ease;
    @include elevate;

    &.hidden { display: none; }

    .head
    {
        flex-direction: row;
        align-items: center;
        gap: 11px;

        // Steam avatar disc (or, for bots, the .fallback initial) - a gold ring marks your own seat.
        .avatar
        {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            align-items: center;
            justify-content: center;
            background-color: $panel-2;
            object-fit: cover;
            border: 2px solid rgba(236, 230, 214, .14);
            font-family: $sans;
            font-size: 16px;
            font-weight: 800;
            color: $text-soft;
            transition: border-color .1s ease;
        }

        .who
        {
            flex-direction: column;
            gap: 2px;

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

            .chips
            {
                font-family: $sans;
                font-size: 13px;
                font-weight: 700;
                color: $text-dim;
            }
        }
    }

    // Bet + badges, divided from the head by a hairline.
    .meta
    {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        padding-top: 9px;
        border-top: 0.15px solid $line;

        .bet
        {
            flex-direction: row;
            align-items: center;
            gap: 6px;

            .lbl
            {
                font-family: $sans;
                font-size: 9px;
                font-weight: 800;
                letter-spacing: 1.5px;
                text-transform: uppercase;
                color: $text-mut;
            }

            .dot
            {
                width: 11px;
                height: 11px;
                border-radius: 50%;
                background-color: $gold;
            }

            .amt
            {
                font-family: $sans;
                font-size: 13px;
                font-weight: 800;
                color: $text;
            }
        }

        .badge
        {
            font-family: $sans;
            font-size: 10px;
            font-weight: 800;
            letter-spacing: .5px;
            color: $text-soft;
            background-color: $chip;
            border: 0.15px solid $line;
            border-radius: $r-sm;
            padding: 3px 8px;

            &.good { color: #0e1a12; background-color: $green; border-color: transparent; }
            &.bad { color: #fff; background-color: $red; border-color: transparent; }
            &.gold { color: $on-gold; background-color: $gold; border-color: transparent; }
        }
    }

    // Your own seat: a gold frame and a gold ring on the avatar.
    &.you
    {
        border-color: $gold;

        .avatar { border-color: $gold; }
    }

    // Whoever's on the clock glows.
    &.acting { border-color: $gold; filter: brightness(1.15); }

    &.folded { opacity: 0.4; }
}