/*
 * Ajuste fino de posicionamento dos overlays do Shorts por aparelho.
 *
 * Como usar:
 * - Valores maiores empurram para baixo.
 * - Valores menores sobem os elementos.
 * - Este arquivo e carregado depois de shorts.css para sobrescrever so os offsets.
 */

:root {
    /* Android / desktop (padrao) */
    --az-shorts-meta-android: 80px;
    /* Botões laterais: Curtir, Compartilhar, Som, Salvar */
    --az-shorts-actions-android: 80px;

    /* iOS / desktop */
    --az-shorts-meta-ios: 80px;
    --az-shorts-actions-ios: 80px;

    /* Android / mobile (<= 640px) */
    --az-shorts-meta-android-mobile: 80px;
    --az-shorts-actions-android-mobile: 80px;

    /* iOS / mobile (<= 640px) */
    --az-shorts-meta-ios-mobile: 80px;
    /* Diminua este valor para subir os botões no iPhone */
    --az-shorts-actions-ios-mobile: 80px;
}

.shorts-page {
    --shorts-meta-bottom: var(--az-shorts-meta-android);
    --shorts-actions-bottom: var(--az-shorts-actions-android);
}

@supports (-webkit-touch-callout: none) {
    .shorts-page {
        --shorts-meta-bottom: var(--az-shorts-meta-ios);
        --shorts-actions-bottom: var(--az-shorts-actions-ios);
    }
}

@media (max-width: 640px) {
    .shorts-page {
        --shorts-meta-bottom: var(--az-shorts-meta-android-mobile);
        --shorts-actions-bottom: var(--az-shorts-actions-android-mobile);
    }
}

@media (max-width: 640px) {
    @supports (-webkit-touch-callout: none) {
        .shorts-page {
            --shorts-meta-bottom: var(--az-shorts-meta-ios-mobile);
            --shorts-actions-bottom: var(--az-shorts-actions-ios-mobile);
        }
    }
}