.vt-ui-watermark-host {
    position: relative;
    isolation: isolate;
}

.vt-ui-watermark {
    position: absolute;
    z-index: 1;

    opacity: var(--vt-watermark-opacity, .10);

    pointer-events: none;
    user-select: none;
}

.vt-ui-watermark img {
    display: block;
    width: 100%;
    height: auto;
}

.vt-ui-watermark--size-smaller {
    width: var(
        --vt-watermark-size-smaller,
        64px
    );
}

.vt-ui-watermark--size-small {
    width: var(
        --vt-watermark-size-small,
        96px
    );
}

.vt-ui-watermark--size-big {
    width: var(
        --vt-watermark-size-big,
        clamp(280px, 36vw, 520px)
    );
}

.vt-ui-watermark--position-top-right {
    top: var(--vt-watermark-top, 32px);
    right: var(--vt-watermark-right, 32px);
    bottom: auto;
    left: auto;
}

.vt-ui-watermark--position-center {
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;

    transform: translate(-50%, -50%);
}

.vt-ui-watermark-content,
.vt-ui-watermark-host > :not(.vt-ui-watermark) {
    position: relative;
    z-index: 2;
}

@media (max-width: 800px) {
    .vt-ui-watermark--size-smaller {
        width: var(
            --vt-watermark-size-smaller-mobile,
            56px
        );
    }

    .vt-ui-watermark--size-small {
        width: var(
            --vt-watermark-size-small-mobile,
            80px
        );
    }

    .vt-ui-watermark--size-big {
        width: var(
            --vt-watermark-size-big-mobile,
            clamp(220px, 65vw, 360px)
        );
    }

    .vt-ui-watermark--position-top-right {
        top: var(--vt-watermark-top-mobile, 24px);
        right: var(--vt-watermark-right-mobile, 24px);
    }
}

.vt-ui-watermark--visionthinks-square.vt-ui-watermark--size-smaller {
    --vt-watermark-size-smaller: 84px;
}

.vt-ui-watermark--visionthinks-wordmark.vt-ui-watermark--size-small {
    --vt-watermark-size-small: 180px;
}

.vt-ui-watermark--visionthinks-square.vt-ui-watermark--size-big {
    --vt-watermark-size-big: 360px;
}

.vt-ui-watermark--visionthinks-wordmark.vt-ui-watermark--size-big {
    --vt-watermark-size-big: 520px;
}
