@mixin ps-anchor {
    // fallback
    & {
        inset-inline-start: max(var(--client-x, 0px), 0px);
        inset-block-start: max(var(--client-y, 0px), 0px);
        inset-inline-end: auto;
        inset-block-end: auto;

        direction: ltr;
        writing-mode: horizontal-tb;
        translate: 0% 0% 0%;
        transform: none;
    };

    //
    & {
        --translate-x: round(nearest, min(0px, calc(100cqi - (100% + var(--client-x, 0px)))), calc(1px / var(--pixel-ratio, 1))) !important;
        --translate-y: round(nearest, min(0px, calc(100cqb - (100% + var(--client-y, 0px)))), calc(1px / var(--pixel-ratio, 1))) !important;
    };

    // from bottom side (without gap), by default
    @supports(position-anchor: --example) {
        position-anchor: var(--anchor-group);
        inset-inline-start: anchor(var(--anchor-group) start);
        inset-block-start: anchor(var(--anchor-group) end);
        inline-size: anchor-size(var(--anchor-group) self-inline);
    };
};