/* =============================================================================
   BLAISE MOBILE MODE SELECTOR FIX V1.0.2
   ============================================================================= */


/* Base safety */

.blaise-mobile-mode-host{
    min-width:0 !important;
}


.blaise-mobile-mode-row{
    min-width:0 !important;

    overflow:visible !important;
}


.blaise-mobile-mode-button{
    min-width:0 !important;

    max-width:100% !important;

    visibility:visible !important;

    opacity:1 !important;

    pointer-events:auto !important;

    cursor:pointer !important;
}


/* =============================================================================
   TABLET + MOBILE
   ============================================================================= */

@media(max-width:768px){

    /*
     * Header must not clip Project Definition/Templates.
     */

    .blaise-mobile-mode-host{

        display:block !important;

        width:100% !important;
        max-width:100% !important;

        overflow:visible !important;

        position:relative !important;

        z-index:5 !important;
    }


    /*
     * Two selector controls remain permanently visible.
     */

    .blaise-mobile-mode-row{

        display:grid !important;

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            ) !important;

        gap:10px !important;

        width:100% !important;
        max-width:100% !important;

        margin:
            0
            0
            12px
            0 !important;

        padding:
            0 !important;

        position:relative !important;

        overflow:visible !important;

        z-index:10 !important;
    }


    .blaise-mobile-mode-button{

        display:flex !important;

        align-items:center !important;

        justify-content:flex-start !important;

        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        min-height:54px !important;

        margin:0 !important;

        padding:
            0
            14px !important;

        white-space:normal !important;

        overflow:visible !important;

        text-overflow:clip !important;

        font-size:
            17px !important;

        line-height:
            1.2 !important;

        visibility:visible !important;

        opacity:1 !important;

        pointer-events:auto !important;
    }


    /*
     * Do not allow neighboring action controls to cover selectors.
     */

    .blaise-mobile-mode-row + *,
    .blaise-mobile-mode-host > *{

        min-width:0;
    }


    /*
     * Existing generic selector classes also receive protection.
     */

    .architect-mode-row,
    .blaise-mode-row,
    [class*="mode-row"]{

        overflow:visible !important;

        visibility:visible !important;

        opacity:1 !important;
    }


    .architect-mode-button,
    .blaise-architect-mode-button{

        visibility:visible !important;

        opacity:1 !important;

        pointer-events:auto !important;
    }
}


/* =============================================================================
   PHONE
   ============================================================================= */

@media(max-width:480px){

    /*
     * On actual phones, stack vertically.
     *
     * This makes the two primary choices impossible to miss
     * and prevents text truncation.
     */

    .blaise-mobile-mode-row{

        grid-template-columns:
            minmax(0,1fr) !important;

        gap:8px !important;

        margin-bottom:
            12px !important;
    }


    .blaise-mobile-mode-button{

        min-height:
            56px !important;

        font-size:
            18px !important;

        font-weight:
            700 !important;
    }
}


/* =============================================================================
   VERY SMALL PHONE
   ============================================================================= */

@media(max-width:380px){

    .blaise-mobile-mode-button{

        padding:
            0
            12px !important;

        font-size:
            17px !important;
    }
}