/* The mobile site shell shares the Mini App's exact brand typography. */
.onek-logo__mini {
    display: none;
}

@media (max-width: 1280px) {
    @font-face {
        font-family: OnekMiniBrandMark;
        src: url('../../../mu-plugins/onek-mini-app/fonts/Roboto-Medium.woff2') format('woff2');
        font-weight: 500;
        font-display: swap;
    }

    @font-face {
        font-family: OnekMiniBrandWord;
        src: url('../../../mu-plugins/onek-mini-app/fonts/InterTight-Variable.ttf') format('truetype');
        font-weight: 100 900;
        font-display: swap;
    }

    html body.onek-body .onek-header .onek-logo.onek-logo--mini-mobile,
    html body.onek-body .onek-footer .onek-logo.onek-logo--mini-mobile {
        display: inline-flex;
        width: auto;
        min-width: 0;
        height: auto;
        min-height: 0;
        flex: 0 0 auto;
        top: 0;
        transform: none !important;
        perspective: none;
    }

    html body.onek-body .onek-header .onek-logo.onek-logo--mini-mobile > picture,
    html body.onek-body .onek-footer .onek-logo.onek-logo--mini-mobile > img,
    html body.onek-body .onek-auth-modal__brand.onek-brand--mini-mobile > img {
        display: none !important;
    }

    html body.onek-body .onek-header .onek-logo--mini-mobile::before,
    html body.onek-body .onek-header .onek-logo--mini-mobile::after,
    html body.onek-body .onek-footer .onek-logo.onek-logo--mini-mobile::before,
    html body.onek-body .onek-footer .onek-logo.onek-logo--mini-mobile::after {
        display: none;
        content: none;
    }

    :is(.onek-logo--mini-mobile, .onek-brand--mini-mobile) .onek-logo__mini {
        display: flex;
        align-items: center;
        gap: 5px;
        flex-shrink: 0;
        color: #fff;
        line-height: 1;
        white-space: nowrap;
        -webkit-font-smoothing: antialiased;
    }

    /* Keep the same typography across the header, footer and auth dialogs. */
    body.onek-body :is(.onek-logo--mini-mobile, .onek-brand--mini-mobile) .onek-logo__mini-block {
        font-family: OnekMiniBrandMark, Arial, sans-serif !important;
    }

    body.onek-body :is(.onek-logo--mini-mobile, .onek-brand--mini-mobile) .onek-logo__mini-word {
        font-family: OnekMiniBrandWord, Arial, sans-serif !important;
    }

    .onek-logo__mini-block {
        display: block;
        padding: 1px 6px 1px 3px;
        background: #fff;
        color: #080808;
        font-size: 29px;
        font-weight: 500;
        line-height: 31px;
        letter-spacing: -3px;
    }

    .onek-logo__mini-word {
        font-size: 16.5px;
        font-weight: 500;
        line-height: 1;
        letter-spacing: -.7px;
    }
}

@media (max-width: 359px) {
    :is(.onek-logo--mini-mobile, .onek-brand--mini-mobile) .onek-logo__mini {
        gap: 4px;
    }

    .onek-logo__mini-block {
        padding-inline: 3px 5px;
        font-size: 25px;
        line-height: 27px;
        letter-spacing: -2.6px;
    }

    .onek-logo__mini-word {
        font-size: 13.2px;
        letter-spacing: -.56px;
    }
}