@general-spacing: 0.25rem, 0.5rem, 0.75rem, 1rem, 1.5rem, 2rem, 2.5rem, 3rem;
@layout-spacing: 1rem, 1.5rem, 2rem, 2.5rem, 3rem, 4rem, 6rem, 10rem;

// General Spacing 常规间距
// 用于较小，更精确的间距需求，特别是在组件的上下文内，如标签和文本输入之间的空间。
each(@general-spacing, {
    .g-layout-margin-top-@{index} {
        margin-top: @value;
    }

    .g-layout-margin-bottom-@{index} {
        margin-bottom: @value;
    }

    .g-layout-margin-left-@{index} {
        margin-left: @value;
    }

    .g-layout-margin-right-@{index} {
        margin-right: @value;
    }

    .g-layout-padding-top-@{index} {
        padding-top: @value;
    }

    .g-layout-padding-bottom-@{index} {
        padding-bottom: @value;
    }

    .g-layout-padding-left-@{index} {
        padding-left: @value;
    }

    .g-layout-padding-right-@{index} {
        padding-right: @value;
    }
});

// Layout Spacing 布局间距
// 通常用于在页面层级的间距，如卡片与卡片之间的间距，文本段落与选择器之间的间距。
each(@layout-spacing, {
    .s-layout-margin-top-@{index} {
        margin-top: @value;
    }

    .s-layout-margin-bottom-@{index} {
        margin-bottom: @value;
    }

    .s-layout-margin-right-@{index} {
        margin-right: @value;
    }

    .s-layout-margin-left-@{index} {
        margin-left: @value;
    }

    .s-layout-padding-top-@{index} {
        padding-top: @value;
    }

    .s-layout-padding-bottom-@{index} {
        padding-bottom: @value;
    }

    .s-layout-padding-left-@{index} {
        padding-left: @value;
    }

    .s-layout-padding-right-@{index} {
        padding-right: @value;
    }
});