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

LobbyPage {
    width: 100%;
    min-height: 0;

    .lobby-page {
        width: 100%;
        min-height: 0;
    }

    .lobby-page-shell {
        width: 100%;
        min-height: 0;
        flex-direction: column;
        gap: 10px;
    }

    .lobby-page-top {
        width: 100%;
        align-items: center;
        gap: 10px;
    }

    .lobby-page-back {
        min-width: 132px;
    }

    .lobby-page-title {
        @include menu-eyebrow();
    }

    .lobby-page-details {
        width: 100%;
        flex-direction: column;
        gap: 6px;
        @include menu-surface( $padding: 10px );
    }

    .detail-row {
        width: 100%;
        align-items: center;
        gap: 10px;
    }

    .detail-key {
        min-width: 120px;
        font-size: 11px;
        color: rgba( 255, 255, 255, 0.65 );
        text-transform: uppercase;
        letter-spacing: 1.4px;
        text-shadow: none;
    }

    .detail-value {
        flex-grow: 1;
        text-align: right;
        font-size: 12px;
        color: rgba( 255, 255, 255, 0.9 );
        text-shadow: none;
    }

    .detail-value-privacy {
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
    }

    .detail-privacy-icon {
        font-size: 14px;
        color: rgba( 255, 255, 255, 0.72 );
    }

    .detail-privacy-label {
        font-size: 11px;
        letter-spacing: 0.8px;
        text-transform: uppercase;
        color: rgba( 255, 255, 255, 0.82 );
        text-shadow: none;
    }

    .lobby-page-warning {
        width: 100%;
        align-items: center;
        gap: 8px;
        padding: 10px;
        border-radius: 6px;
        border: 1px solid rgba( $warning-orange, 0.45 );
        background-color: rgba( $warning-orange, 0.1 );
    }

    .lobby-page-warning--privacy {
        border-color: rgba( 255, 255, 255, 0.18 );
        background-color: rgba( 255, 255, 255, 0.05 );
    }

    .lobby-page-warning-text {
        @include menu-copy( $size: 11px, $color: rgba( 255, 255, 255, 0.84 ), $tracking: 0.5px );
    }

    .lobby-page-join {
        width: 100%;
    }

    .lobby-page-cancel-join {
        width: 100%;
        color: rgba( 255, 255, 255, 0.72 );
    }
}