[data-live-photo] {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    cursor: pointer;
}

[data-live-photo] > img[data-live-poster],
[data-live-photo] > .live-photo-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

[data-live-photo] > img[data-live-poster] {
    position: relative;
    z-index: 0;
}

[data-live-photo] > .live-photo-video {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}

[data-live-photo].live-photo-playing > .live-photo-video {
    opacity: 1;
}

.live-photo-toggle {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px;
    border: 1px solid rgba(255, 255, 255, .33);
    border-radius: 999px;
    background: rgba(24, 28, 36, .38);
    color: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .12);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    font: 600 12px/1 system-ui, sans-serif;
    letter-spacing: .04em;
    opacity: 0;
    pointer-events: none;
    transition: opacity .16s ease, color .16s ease;
}

.live-photo-toggle svg {
    width: 20px;
    height: 20px;
}

[data-live-photo].live-photo-revealed .live-photo-toggle,
[data-live-photo].live-photo-keyboard-focus .live-photo-toggle {
    opacity: 1;
    pointer-events: auto;
}

[data-live-photo].live-photo-on .live-photo-toggle {
    color: var(--live-accent, #0ea5e9);
}

[data-live-photo].live-photo-global-off .live-photo-toggle {
    color: #fff;
}

.live-photo-toggle:disabled {
    cursor: not-allowed;
}

.live-photo-toggle[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
    [data-live-photo] > .live-photo-video,
    .live-photo-toggle {
        transition: none;
    }
}