@import "mixin/property.pcss";


@for $i from 0 to 7 {
    .monster-margin-$(i) {
        margin: var(--monster-space-$(i));
    }

    .monster-margin-top-$(i) {
        margin-top: var(--monster-space-$(i));
    }

    .monster-margin-end-$(i) {
        margin-right: var(--monster-space-$(i));
    }

    .monster-margin-bottom-$(i) {
        margin-bottom: var(--monster-space-$(i));
    }

    .monster-margin-start-$(i) {
        margin-left: var(--monster-space-$(i));
    }

    .monster-padding-$(i) {
        padding: var(--monster-space-$(i));
    }

    .monster-padding-top-$(i) {
        padding-top: var(--monster-space-$(i));
    }

    .monster-padding-end-$(i) {
        padding-right: var(--monster-space-$(i));
    }

    .monster-padding-bottom-$(i) {
        padding-bottom: var(--monster-space-$(i));
    }

    .monster-padding-start-$(i) {
        padding-left: var(--monster-space-$(i));
    }

}