#ingame_HUD_Watermark {
    position: absolute;

    @include S(border-radius, $globalBorderRadius);
    @include S(top, 70px);
    pointer-events: all;
    cursor: pointer;
    left: 50%;
    text-align: center;

    background: rgba(207, 65, 65, 0.8);
    color: #fff;
    transform: translateX(-50%);
    @include PlainText;
    @include S(padding, 10px);

    &:hover {
        transform: translateX(-50%) scale(1.02) !important;
    }

    > strong {
        @include PlainText;
        text-transform: uppercase;
    }
    > p {
        @include SuperSmallText;
        opacity: 0.7;
    }

    opacity: 0;

    &.visible {
        @include InlineAnimation(0.5s ease-in-out) {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
        opacity: 1;
    }

    &:not(.visible) {
        @include InlineAnimation(0.5s ease-in-out) {
            0% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }
    }
}

#ingame_HUD_WatermarkClicker {
    @include S(top, 55px);
    position: absolute;
    left: 50%;
    transform: translateX(-50%) !important;
    @include SuperSmallText;
    color: $colorBlueBright;
    text-transform: uppercase;
    pointer-events: all;
    cursor: pointer;
    display: flex;
    align-items: center;

    &:hover {
        opacity: 0.9;
    }

    &::after {
        @include S(margin-left, 4px);
        content: "";
        @include S(width, 10px);
        @include S(height, 10px);
        display: inline-flex;
        background: center center / contain no-repeat;
        & {
            /* @load-async */
            background-image: uiResource("res/ui/icons/demo_steam_link_indicator.png");
        }
    }

    &.withDiscount {
        color: #4c6b22;
    }

    > .discount {
        // position: absolute;
        @include S(margin, 0, 5px);

        background: rgba(#4c6b22, 1);
        color: #c5ea3f;
        @include S(border-radius, $globalBorderRadius);
        @include S(padding, 0px, 2px, 0px, 3px);
        @include SuperSmallText;
        text-transform: uppercase;
        transform: rotate(0deg);
        @include InlineAnimation(1.3s ease-in-out infinite) {
            50% {
                transform: rotate(0.5deg) scale(1.05);
            }
        }
    }
}