.lienzo-video {
    overflow: hidden;

    & .video{
        position: relative;
        padding-top: 56.25%;

        & .cover-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 2;
            transition: opacity 0.5s ease-in-out;
        }
        
        & .hidden-img {
            opacity: 0;
            pointer-events: none;
        }

        & .click-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 4;
            cursor: pointer;
            background: rgba(255, 255, 255, 0);
            pointer-events: auto;
        }

        & iframe, & object, & embed { 
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0;
        }

        & .play-center-btn{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 2;
            background: transparent;
            border: none;
            cursor: pointer;
            pointer-events: auto;

            & svg {
                border-radius: 50%;
                width: 60px;
                height: 60px;
                display: block;
                background: var(--wp--preset--color--primary);
                padding: 10px;
                border: 1px solid var(--wp--preset--color--secondary);
                

                & path {
                    stroke: var(--wp--preset--color--secondary);
                    fill: var(--wp--preset--color--secondary);
                }
            }

            &.hidden {
                display: none;
            }
        }
    }

    & .controls{
        display: grid;
        grid-template-columns: auto 1fr auto auto;
        align-items: center;
        padding: 5px 10px 5px 0;
        background: var(--wp--preset--color--primary);

        & button{
            background: transparent;
            border: none;
            cursor: pointer;

            & svg {
                width: 25px;
                height: 25px;
                display: block;

                & path {
                    stroke: var(--wp--preset--color--secondary);
                    fill: var(--wp--preset--color--secondary);
                }
            }

            &.mute-btn{
                
                & svg{
                    width: 16px;
                    height: 16px;
                }
            }
            
            .hidden {
                display: none;
            }
        }

        .play-pause-btn{

            & svg{
                margin-top: -5px;
            }
        }

        & .time{
            padding: 0 2px 0 5px;
        }

        & input[type="range"]{
            appearance: none;
            height: 1px;
            background: var(--wp--preset--color--secondary);
            border-radius: 5px;
            outline: none;
            transition: background 0.3s ease;

            &::-webkit-slider-thumb {
                appearance: none;
                width: 16px;
                height: 16px;
                background: var(--wp--preset--color--secondary);
                border-radius: 50%;
                cursor: pointer;
            }
        }

        & .control-vol{
            position: relative;
            margin-top: 2px;

            & input{
                position: absolute;
                top: -64px;
                left: -53px;
                transform: rotate(-90deg);
                display: none;
                z-index: 5;

                & :hover{
                    display: block;
                }
            }

            &:hover > input{
                display: block;
            }
        }
    }

    & .hidden{
        display: none;
    }
}

.normal-video{
    border-radius: 15px;

    & .video{
        mask: none !important;
    }
}

.cutout-video{

    & .video{
        mask-repeat: no-repeat;
        mask-size: cover;
        mask-position: center;
        pointer-events: none;

        &::after {
            content: '';
            position: absolute;
            background: rgb(3, 9, 21);
            left: 0;
            right: 0;
            bottom: 0;
            height: 100%;
            background: linear-gradient(0deg, var(--wp--preset--color--primary) 0%, rgba(255, 255, 255, 0) 100%);
            pointer-events: none;
            z-index: 3;
        }
    }

    & .controls{
        margin-top: -30px;
        background: transparent;
    }
}

@media screen and (max-width: 600px){
    .lienzo-video {
        
        & .video{

            padding-bottom: 8.25%;
            height: 0;
            overflow: hidden; 
            max-width: 100%; 

            & iframe, & object, & embed { 
                position: absolute; 
                top: 0; left: 0; 
                width: 100%; 
                height: 100%; 
            }
        }
    }
}