/**
 * VideoHub thumbnail and video watermark.
 */

.videohub-watermark-host {
    position: relative;
}

.videohub-watermark {
    position: absolute;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    user-select: none;
}

.videohub-watermark img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
    transform: none !important;
    transition: none !important;
}

.videohub-watermark--thumbnail {
    width: clamp(42px, 18%, 104px);
    height: 34%;
}

.videohub-watermark--video {
    width: clamp(72px, 12%, 180px);
    height: 22%;
}

.videohub-watermark--top-right {
    top: 10px;
    right: 10px;
}

.videohub-watermark--top-left {
    top: 10px;
    left: 10px;
}

.videohub-watermark--bottom-right {
    right: 10px;
    bottom: 10px;
}

.videohub-watermark--bottom-left {
    bottom: 10px;
    left: 10px;
}

.videohub-watermark--video.videohub-watermark--top-right {
    top: 18px;
    right: 18px;
}

.videohub-watermark--video.videohub-watermark--top-left {
    top: 18px;
    left: 18px;
}

.videohub-watermark--video.videohub-watermark--bottom-right {
    right: 18px;
    bottom: 52px;
}

.videohub-watermark--video.videohub-watermark--bottom-left {
    bottom: 52px;
    left: 18px;
}

.videohub-watermark-thumbnails-bottom-right .video-duration,
.videohub-watermark-thumbnails-bottom-right .video-thumbnail .duration {
    right: auto;
    left: 8px;
}

@media (max-width: 600px) {
    .videohub-watermark--thumbnail {
        width: clamp(36px, 20%, 82px);
    }

    .videohub-watermark--video {
        width: clamp(54px, 15%, 110px);
    }

    .videohub-watermark--video.videohub-watermark--top-right {
        top: 10px;
        right: 10px;
    }

    .videohub-watermark--video.videohub-watermark--top-left {
        top: 10px;
        left: 10px;
    }

    .videohub-watermark--video.videohub-watermark--bottom-right {
        right: 10px;
        bottom: 44px;
    }

    .videohub-watermark--video.videohub-watermark--bottom-left {
        bottom: 44px;
        left: 10px;
    }
}