@keyframes bright-flash {
    0% {
        filter: brightness(1.0);
    }
    25% {
        filter: brightness(3.0);
    }
    75% {
        filter: brightness(0.8);
    }
    100% {
        filter: brightness(1.0);
    }
}

.bright-flash {
    animation-name: bright-flash;
    animation-delay: 0s;
    animation-duration: 0.6s;
    animation-iteration-count: 1;
}

body.offline {
    filter: saturate(0);

    & .offline-disabled {
        pointer-events: none;
    }
}

.sign-in-wrapper {
    width: 100%;
    max-width: 330px;
}

.photo-wrapper {
    position: absolute;
    z-index: -1;
    display: flex;
    width: 100vw;
    height: 100vh;
    overflow: hidden;

    & .photo-stream-wrapper {
        position: relative;
        overflow: hidden;

        & #photo-stream-back, #photo-captured {
            object-fit: cover;
            width: 100%;
            height: 100%;
        }

        & #photo-stream-front {
            object-fit: cover;
            position: absolute;
            top: 3%;
            left: 3%;
            border-radius: 25px;
            box-sizing: border-box;
            width: 25%;
            height: 25%;
            transform: scaleX(-1);
        }

        @media (orientation: portrait) {
            --width: 100vw;
            --height: calc(var(--width) * 4 / 3);
            width: var(--width);
            height: var(--height);
            box-sizing: border-box;
        }

        @media (orientation: landscape) {
            --height: 100vh;
            --width: calc(var(--height) * 4 / 3);
            width: var(--width);
            height: var(--height);
        }
    }
}

#take-photo-button {
    position: fixed;
    display: block;
    bottom: 20px;
    transform: translateX(-50%);
    left: 50%;
}

.all-reactions-button {

}

em-emoji-picker {
    width: 80dvw;
    height: 40dvh;
    position: fixed;
    top: 30dvh;
    left: 10dvw;
}