import { r as registerInstance, j as jsx, H as Host } from './index-C7YNCRgy.js';

const spacerCss = () => `@layer base {   :host .dds-spacer {     display: var(--dds-spacer-display, block);     block-size: var(--dds-spacer-size-y);     inline-size: var(--dds-spacer-size-x);   } }  @layer reset, base; `;

const Spacer = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
    }
    // MARK: Props
    x = 0;
    y = 0;
    // MARK: Render
    render() {
        const { x, y } = this;
        function getDisplayValue() {
            if ((x ?? 0) > 0) {
                return "inline-block";
            }
            else if ((y ?? 0) > 0) {
                return "block";
            }
            return null;
        }
        function handleSpacerStyles() {
            const spacerStyles = {};
            const setSpacerProperty = (value, property, suffix = "") => {
                const sizeValue = `var(--dds-size-${value})`;
                const tokenValue = property === "size" ? sizeValue : value;
                if (value) {
                    spacerStyles[`--dds-spacer-${property}${suffix}`] = tokenValue;
                }
            };
            setSpacerProperty(x, "size", "-x");
            setSpacerProperty(y, "size", "-y");
            setSpacerProperty(getDisplayValue(), "display");
            return spacerStyles;
        }
        return (jsx(Host, { part: "root", children: jsx("span", { class: "dds-spacer", "aria-hidden": "true", style: handleSpacerStyles() }) }));
    }
};
Spacer.style = spacerCss();

export { Spacer as dds_spacer };
