/* ============================
   PullToRefresh – nach unten ziehen zum Aktualisieren an einer bestimmten Fläche
   ============================
   pull-to-refresh.js setzt an der Hülle data-oo-ptr (ziehen, bereit, laedt) und die Variablen --oo-ptr-weg (Weg der Anzeige)
   und --oo-ptr-anteil (0 bis 1, Anteil an der Schwelle). */

/* Eingebautes Neuladen des Browsers durch Runterwischen aus, solange eine PullToRefresh es verlangt */
html.oo-ptr-nativ-aus,
html.oo-ptr-nativ-aus body {
    overscroll-behavior-y: none;
}

.oo-ptr {
    --oo-ptr-weg: 0px;
    --oo-ptr-anteil: 0;
}

.oo-ptr--ohne-inhalt {
    display: contents;
}

/* Runder Kreis oben in der Mitte, kommt beim Ziehen von oben herein */
.oo-ptr__anzeige {
    position: fixed;
    top: 0;
    left: 50%;
    z-index: var(--oo-z-toast);
    width: 2.5rem;
    height: 2.5rem;
    margin-left: -1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--oo-color-surface);
    color: var(--oo-color-text-subtle);
    box-shadow: var(--oo-shadow-lg);
    pointer-events: none;
    opacity: 0;
    transform: translateY(calc(var(--oo-ptr-weg) - 100%));
    transition: transform 0.2s ease, opacity 0.2s ease, color 0.15s ease;
}

.oo-ptr[data-oo-ptr] > .oo-ptr__anzeige {
    opacity: min(1, calc(var(--oo-ptr-anteil) * 2));
}

/* Während des Ziehens folgt die Anzeige dem Finger ohne Verzögerung */
.oo-ptr[data-oo-ptr="ziehen"] > .oo-ptr__anzeige,
.oo-ptr[data-oo-ptr="bereit"] > .oo-ptr__anzeige {
    transition: color 0.15s ease;
}

.oo-ptr__symbol {
    transform: rotate(calc(var(--oo-ptr-anteil) * 270deg));
}

/* Über der Schwelle: Loslassen löst aus */
.oo-ptr[data-oo-ptr="bereit"] > .oo-ptr__anzeige,
.oo-ptr[data-oo-ptr="laedt"] > .oo-ptr__anzeige {
    color: var(--oo-primary);
}

.oo-ptr[data-oo-ptr="laedt"] .oo-ptr__symbol {
    animation: oo-ptr-drehen 0.8s linear infinite;
}

@keyframes oo-ptr-drehen {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .oo-ptr[data-oo-ptr="laedt"] .oo-ptr__symbol {
        animation: none;
    }
}