/* web cam style */

.webcam-layout {
    height: 350px !important;
    // width: 260px !important;
    overflow: hidden;

    & .preview {
        position: relative;
        border-radius: 10px !important;
        overflow: hidden;
        
        & .preview--stream {
            position: relative;
            height: 350px !important;
            border-radius: 10px !important;

            & .stream-canvas,
            & #canvas-preview,
            & #image-preview {
                display: inline-block;
                border-radius: 10px !important;
                width: 100%;
                height: 100%;
                height: 360px !important;
                object-fit: cover;
                background: $color_blue_normal_2;
            }

            & #canvas-preview,
            &:not(.stream-run){
                display: none;
            }

            &.stream-run {
                position: relative;

                &::before {
                    position: absolute;
                    content: "";
                    left: 0;
                    bottom: 0;
                    width: 10%;
                    height: 20%;
                    border-style: solid;
                    border-color: transparent transparent yellow yellow;
                    border-width: 3px;
                    margin: 0 0 20px 10%;
                    border-radius: 8px;
                    animation: cadre 1s linear infinite;
                }

                &::after {
                    position: absolute;
                    content: "";
                    right: 0;
                    top: 0;
                    width: 10%;
                    height: 20%;
                    border-style: solid;
                    border-color: yellow yellow transparent transparent;
                    border-width: 3px;
                    margin: 20px 10% 0 0;
                    border-radius: 8px;
                    animation: cadre 1s linear infinite;
                }
            }


        }





        

        &.show {

            &::before {
                position: absolute;
                content: "";
                left: 0;
                top: 0;
                width: 10%;
                height: 20%;
                border-style: solid;
                border-color: yellow transparent transparent yellow;
                border-width: 3px;
                margin: 20px 0 0 10%;
                border-radius: 8px;
                z-index: 1;
                animation: cadre 1s linear infinite;
            }

            &::after {
                position: absolute;
                content: "";
                right: 0;
                bottom: 0;
                width: 10%;
                height: 20%;
                border-style: solid;
                border-color: transparent yellow yellow transparent;
                border-width: 3px;
                margin: 0 10% 20px 0;
                border-radius: 8px;
                animation: cadre 1s linear infinite;
            }
        }




    }



    & .webcam-btn {
        position: relative;
        width: 100%;
        text-align: center;
        margin: -15px auto 0;
        display: flex !important;
        flex-direction: row  !important;
        justify-content: center  !important;
        align-items: center  !important;

        & .fa {
            display: flex ;
            flex-direction: column  ;
            justify-content: center  ;
            align-items: center  ;
            font-size: 20px;
            background: $color_blue_normal;
            position: relative;
            width: 50px;
            height: 50px;
            border-radius: 50px;
            color: #fff;
            margin: -50px auto 0;
           
           
            &#click-photo{
                background: $color_red_normal;
                &.hide{
                    display: none;
                }
            }

            &#check-camera,
            &#start-camera{
                &.hide{
                    display: none;
                }
            }

            &#check-camera{
                background:  $color_green_normal;
            }
           
        }

        
    }



}


.counter {
    position: absolute;
    left: 0;
    top: 0;
    color: #fff;
    font-size: 5rem;
    width: 100%;
    height: 100%;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1;

    &.show {
        display: flex;
    }

    &::before {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        content: attr(data-label);
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    &::after{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        content: "";
        left: 50%;
        top:  50%;
        transform: translate(-50%, -50%);
        border-style: solid;
        border-color: yellow #ccc #ccc #ccc;
        border-width: .3rem;
        animation: circle 1s infinite;
        border-radius: 8rem;
        width: 8rem;
        height: 8rem;
    }
}



@keyframes cadre {

    0%,
    10%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }
}

@keyframes circle {
    0% {
        transform:translate(-50%, -50%) rotate(0deg) ;
    }

    100% {
        transform:translate(-50%, -50%) rotate(360deg);
    }
}