/* ==========================================
   Листик
   camera.css
========================================== */

.camera-screen {

    position: fixed;

    inset: 0;

    width: 100vw;
    height: 100vh;

    background: #000;

    overflow: hidden;

    z-index: 9999;

}


.camera-video {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    background: #000;

}


.camera-grid {

    position: absolute;

    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            to right,
            rgba(255,255,255,.22) 1px,
            transparent 1px
        ),
        linear-gradient(
            to bottom,
            rgba(255,255,255,.22) 1px,
            transparent 1px
        );

    background-size:
        33.333% 100%,
        100% 33.333%;

}


.camera-button {

    position: absolute;

    width: 58px;
    height: 58px;

    border: none;
    border-radius: 50%;

    background: rgba(0,0,0,.48);

    color: #fff;

    display: flex;
    align-items: center;
    justify-content: center;

    font-family: Arial, sans-serif;

    cursor: pointer;

    z-index: 2;

}


.camera-close {

    top: 24px;
    left: 24px;

    font-size: 40px;

}


.camera-switch {

    right: 24px;
    top: 24px;

    font-size: 34px;

}


.camera-shutter {

    position: absolute;

    bottom: 20px; /* расстояние от нижнего края */
    left: 50%;   /* по центру по горизонтали */
    transform: translateX(-50%);


    transform: translateX(-50%);

    width: 82px;
    height: 82px;

    padding: 6px;

    border: 5px solid #fff;

    border-radius: 50%;

    background: transparent;

    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 2;

}


.camera-shutter span {

    display: block;

    width: 62px;
    height: 62px;

    border-radius: 50%;

    background: #fff;

}


.camera-shutter:active span {

    transform: scale(.88);

}


@media (max-width: 480px) {

    .camera-close {

        top: 20px;
        left: 20px;

    }


    .camera-switch {

        top: 20px;
        right: 20px;

    }


    .camera-shutter {

        bottom: 88px;

    }

}