@import '../../helpers/_size';
@import '../../helpers/_functions';

@each $size in $spacing-system {
    /* Margin */
    .m-#{$size} {
        margin: calc(var(--space-size) * #{$size}) !important;
    }

    .mt-#{$size},
    .my-#{$size} {
        margin-top: calc(var(--space-size) * #{$size}) !important;
    }
    .mb-#{$size},
    .my-#{$size} {
        margin-bottom: calc(var(--space-size) * #{$size}) !important;
    }

    .ml-#{$size},
    .mx-#{$size} {
        margin-left: calc(var(--space-size) * #{$size}) !important;
    }
    .mr-#{$size},
    .mx-#{$size} {
        margin-right: calc(var(--space-size) * #{$size}) !important;
    }

    /* Spacing */
    .p-#{$size} {
        padding: calc(var(--space-size) * #{$size}) !important;
    }

    .pt-#{$size},
    .py-#{$size} {
        padding-top: calc(var(--space-size) * #{$size}) !important;
    }
    .pb-#{$size},
    .py-#{$size} {
        padding-bottom: calc(var(--space-size) * #{$size}) !important;
    }

    .pl-#{$size},
    .px-#{$size} {
        padding-left: calc(var(--space-size) * #{$size}) !important;
    }
    .pr-#{$size},
    .px-#{$size} {
        padding-right: calc(var(--space-size) * #{$size}) !important;
    }
}

.ml-auto,
.mx-auto {
    margin-left: auto !important;
}

.mr-auto,
.mx-auto {
    margin-right: auto !important;
}

.mt-auto,
.my-auto {
    margin-top: auto !important;
}

.mb-auto,
.my-auto {
    margin-bottom: auto !important;
}

@if get-viewport-flag('MARGIN_PADDING') == true {
    // TODO: Maybe in future versions of Sass, we can pass mixins as a parameter to another mixin. For now, we just have to write what we want it to generate
    @each $suffix, $limit in $breakpoint-pairs {
        @each $size in $spacing-system {
            @include screen-above($limit) {
                /* Margin */
                .m-#{$size}-#{$suffix} {
                    margin: calc(var(--space-size) * #{$size}) !important;
                }

                .mt-#{$size}-#{$suffix},
                .my-#{$size}-#{$suffix} {
                    margin-top: calc(var(--space-size) * #{$size}) !important;
                }
                .mb-#{$size}-#{$suffix},
                .my-#{$size}-#{$suffix} {
                    margin-bottom: calc(var(--space-size) * #{$size}) !important;
                }

                .ml-#{$size}-#{$suffix},
                .mx-#{$size}-#{$suffix} {
                    margin-left: calc(var(--space-size) * #{$size}) !important;
                }
                .mr-#{$size}-#{$suffix},
                .mx-#{$size}-#{$suffix} {
                    margin-right: calc(var(--space-size) * #{$size}) !important;
                }

                /* Spacing */
                .p-#{$size}-#{$suffix} {
                    padding: calc(var(--space-size) * #{$size}) !important;
                }

                .pt-#{$size}-#{$suffix},
                .py-#{$size}-#{$suffix} {
                    padding-top: calc(var(--space-size) * #{$size}) !important;
                }
                .pb-#{$size}-#{$suffix},
                .py-#{$size}-#{$suffix} {
                    padding-bottom: calc(var(--space-size) * #{$size}) !important;
                }

                .pl-#{$size}-#{$suffix},
                .px-#{$size}-#{$suffix} {
                    padding-left: calc(var(--space-size) * #{$size}) !important;
                }
                .pr-#{$size}-#{$suffix},
                .px-#{$size}-#{$suffix} {
                    padding-right: calc(var(--space-size) * #{$size}) !important;
                }
            }

            .ml-auto-#{$suffix},
            .mx-auto-#{$suffix} {
                margin-left: auto !important;
            }

            .mr-auto-#{$suffix},
            .mx-auto-#{$suffix} {
                margin-right: auto !important;
            }

            .mt-auto-#{$suffix},
            .my-auto-#{$suffix} {
                margin-top: auto !important;
            }

            .mb-auto-#{$suffix},
            .my-auto-#{$suffix} {
                margin-bottom: auto !important;
            }
        }
    }
}