/*
 * KGE Compact Completion Buttons v1.5
 *
 * IMPORTANT:
 * Tutor's "mobile/tablet" learning header is still active above 767px.
 * The screenshot supplied by the user is ~1030px wide, so the previous
 * max-width:767px rule never ran.
 *
 * This version matches the Tutor/KGE learning-layout breakpoint: 1099px.
 */

/* Our added tick is invisible on normal desktop. */
.kge-mobile-completion-tick {
    display: none !important;
}

@media screen and (max-width: 1099px) {

    /* Collapse the exact wrapper shown in DevTools. */
    .kge-top-complete.kge-force-square-wrap,
    .tutor-learning-header .kge-force-square-wrap {
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        flex: 0 0 42px !important;
    }

    .kge-top-complete form.kge-force-square-form,
    .tutor-learning-header form.kge-force-square-form,
    form.tutor-mb-none.kge-force-square-form {
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        flex: 0 0 42px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Exact button class visible in the user's DevTools screenshot. */
    body.single-lesson .kge-top-complete .tutor-mark-as-complete-button.kge-force-square-active,
    body.single-tutor_quiz .kge-top-complete .tutor-mark-as-complete-button.kge-force-square-active,
    .tutor-learning-header .tutor-mark-as-complete-button.kge-force-square-active {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;

        flex: 0 0 42px !important;
        padding: 0 !important;
        margin: 0 !important;
        gap: 0 !important;

        border-radius: 6px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;

        font-size: 0 !important;
        line-height: 0 !important;
        white-space: nowrap !important;
    }

    /* Hide Tutor's original text/icon children. */
    .tutor-mark-as-complete-button.kge-force-square-active > *:not(.kge-mobile-completion-tick) {
        display: none !important;
    }

    /* Show one centred KGE tick. */
    .tutor-mark-as-complete-button.kge-force-square-active .kge-mobile-completion-tick {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 22px !important;
        min-width: 22px !important;
        max-width: 22px !important;
        height: 22px !important;
        min-height: 22px !important;
        max-height: 22px !important;

        flex: 0 0 22px !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 22px !important;
        line-height: 1 !important;
    }

    .tutor-mark-as-complete-button.kge-force-square-active .kge-mobile-completion-tick svg {
        display: block !important;
        width: 22px !important;
        height: 22px !important;
    }
}