@mixin psm-initials($width: 48rem, $height: 32rem) {
    & {
        --initial-inline-size: #{$width};
        --initial-block-size : #{$height};

        /* title bar */
        --title-bar-height   : 2rem;
        --height-adjust      : 0px;

        /* safe area */
        --safe-area-left : 0px;
        --safe-area-right: 0px;

        /* maximum available size */
        --bound-inline-size: 100cqi;
        --bound-block-size : calc(100cqb - var(--height-adjust, 0px));
    };
}

//
@mixin psm-size-when-resizing {
    & {
        /* resizing relation */
        --diff-inline: calc(var(--bound-inline-size, 100cqi) - var(--initial-inline-size, 0px));
        --diff-block:  calc(var(--bound-block-size , 100cqb) - var(--initial-block-size , 0px));

        /* resize clamping */
        --shell-x: clamp(0px, calc(var(--resize-x, 0) * 1px), max(0px, calc(var(--diff-inline, 0px) - var(--shift-x, 0) * 1px)));
        --shell-y: clamp(0px, calc(var(--resize-y, 0) * 1px), max(0px, calc(var(--diff-block , 0px) - var(--shift-y, 0) * 1px)));

        /* resized window size */
        --self-size-x: calc(var(--initial-inline-size, 0px) + max(0px, var(--shell-x, 0px)));
        --self-size-y: calc(var(--initial-block-size , 0px) + max(0px, var(--shell-y, 0px)));

        /* window size */
        --inline-size: clamp(var(--initial-inline-size, 0px), var(--self-size-x, 0px), var(--bound-inline-size, 100cqi));
        --block-size : clamp(var(--initial-block-size , 0px), var(--self-size-y, 0px), var(--bound-block-size , 100cqb));
    };
};

/* */
@mixin ps-mechanic {
    & {
        @include psm-initials;
        @include psm-size-when-resizing;
    };
}

/* */
@mixin ps-resizable {
    & {
        --resize-x: 0;
        --resize-y: 0;

        inline-size : clamp(var(--initial-inline-size, 0px), var(--inline-size, 100%), calc(var(--bound-inline-size, 100cqi))) !important;
        block-size  : clamp(var(--initial-block-size , 0px), var(--block-size , 100%), calc(var(--bound-block-size , 100cqb))) !important;
        direction   : ltr;
        touch-action: none;
        writing-mode: horizontal-tb;
    };
};