/**
 * @file _spacing.scss
 * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team
 * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team
 * @date 05.09.2025
 * @modified 26.11.2025
 * @@VERSION@@
 * @brief Styles für die Spacing-Komponente.
 */

// Import grid breakpoints and spacing config
@use '../utilities/maps';

// Basis Margin Auto (Mobile First)
.kern-m-auto {
    margin: auto;
}

.kern-mt-auto {
    margin-top: auto;
}

.kern-mr-auto {
    margin-right: auto;
}

.kern-mb-auto {
    margin-bottom: auto;
}

.kern-ml-auto {
    margin-left: auto;
}

.kern-mx-auto {
    margin-left: auto;
    margin-right: auto;
}

// Die häufigste Anwendung
.kern-my-auto {
    margin-top: auto;
    margin-bottom: auto;
}

// Margin Utilities
@each $key, $value in maps.$spaces {
    .kern-m-#{$key} {
        margin: #{$value};
    }

    .kern-mt-#{$key} {
        margin-top: #{$value};
    }

    .kern-mr-#{$key} {
        margin-right: #{$value};
    }

    .kern-mb-#{$key} {
        margin-bottom: #{$value};
    }

    .kern-ml-#{$key} {
        margin-left: #{$value};
    }

    .kern-mx-#{$key} {
        margin-left: #{$value};
        margin-right: #{$value};
    }

    .kern-my-#{$key} {
        margin-top: #{$value};
        margin-bottom: #{$value};
    }
}

// Padding Utilities
@each $key, $value in maps.$spaces {
    .kern-p-#{$key} {
        padding: #{$value};
    }

    .kern-pt-#{$key} {
        padding-top: #{$value};
    }

    .kern-pr-#{$key} {
        padding-right: #{$value};
    }

    .kern-pb-#{$key} {
        padding-bottom: #{$value};
    }

    .kern-pl-#{$key} {
        padding-left: #{$value};
    }

    .kern-px-#{$key} {
        padding-left: #{$value};
        padding-right: #{$value};
    }

    .kern-py-#{$key} {
        padding-top: #{$value};
        padding-bottom: #{$value};
    }
}

// Responsive Spacing Utilities (mit Breakpoints)
@each $breakpoint, $min-width in maps.$grid-breakpoints {
    @if $min-width >0 {
        @media (min-width: #{$min-width}) {

            // Responsive Margin Auto (innerhalb Media Query)
            .kern-m-auto-#{$breakpoint} {
                margin: auto;
            }

            .kern-mt-auto-#{$breakpoint} {
                margin-top: auto;
            }

            .kern-mr-auto-#{$breakpoint} {
                margin-right: auto;
            }

            .kern-mb-auto-#{$breakpoint} {
                margin-bottom: auto;
            }

            .kern-ml-auto-#{$breakpoint} {
                margin-left: auto;
            }

            .kern-mx-auto-#{$breakpoint} {
                margin-left: auto;
                margin-right: auto;
            }

            .kern-my-auto-#{$breakpoint} {
                margin-top: auto;
                margin-bottom: auto;
            }

            @each $key, $value in maps.$spaces {

                // Responsive Margin Utilities
                .kern-m-#{$key}-#{$breakpoint} {
                    margin: #{$value};
                }

                .kern-mt-#{$key}-#{$breakpoint} {
                    margin-top: #{$value};
                }

                .kern-mr-#{$key}-#{$breakpoint} {
                    margin-right: #{$value};
                }

                .kern-mb-#{$key}-#{$breakpoint} {
                    margin-bottom: #{$value};
                }

                .kern-ml-#{$key}-#{$breakpoint} {
                    margin-left: #{$value};
                }

                .kern-mx-#{$key}-#{$breakpoint} {
                    margin-left: #{$value};
                    margin-right: #{$value};
                }

                .kern-my-#{$key}-#{$breakpoint} {
                    margin-top: #{$value};
                    margin-bottom: #{$value};
                }

                // Responsive Padding Utilities
                .kern-p-#{$key}-#{$breakpoint} {
                    padding: #{$value};
                }

                .kern-pt-#{$key}-#{$breakpoint} {
                    padding-top: #{$value};
                }

                .kern-pr-#{$key}-#{$breakpoint} {
                    padding-right: #{$value};
                }

                .kern-pb-#{$key}-#{$breakpoint} {
                    padding-bottom: #{$value};
                }

                .kern-pl-#{$key}-#{$breakpoint} {
                    padding-left: #{$value};
                }

                .kern-px-#{$key}-#{$breakpoint} {
                    padding-left: #{$value};
                    padding-right: #{$value};
                }

                .kern-py-#{$key}-#{$breakpoint} {
                    padding-top: #{$value};
                    padding-bottom: #{$value};
                }
            }
        }
    }

    @else {
        // Für xs (0px) Breakpoint - ohne Media Query

        // Responsive Margin Auto (für xs Breakpoint)
        .kern-m-auto-#{$breakpoint} {
            margin: auto;
        }

        .kern-mt-auto-#{$breakpoint} {
            margin-top: auto;
        }

        .kern-mr-auto-#{$breakpoint} {
            margin-right: auto;
        }

        .kern-mb-auto-#{$breakpoint} {
            margin-bottom: auto;
        }

        .kern-ml-auto-#{$breakpoint} {
            margin-left: auto;
        }

        .kern-mx-auto-#{$breakpoint} {
            margin-left: auto;
            margin-right: auto;
        }

        .kern-my-auto-#{$breakpoint} {
            margin-top: auto;
            margin-bottom: auto;
        }

        @each $key, $value in maps.$spaces {

            // Responsive Margin Utilities
            .kern-m-#{$key}-#{$breakpoint} {
                margin: #{$value};
            }

            .kern-mt-#{$key}-#{$breakpoint} {
                margin-top: #{$value};
            }

            .kern-mr-#{$key}-#{$breakpoint} {
                margin-right: #{$value};
            }

            .kern-mb-#{$key}-#{$breakpoint} {
                margin-bottom: #{$value};
            }

            .kern-ml-#{$key}-#{$breakpoint} {
                margin-left: #{$value};
            }

            .kern-mx-#{$key}-#{$breakpoint} {
                margin-left: #{$value};
                margin-right: #{$value};
            }

            .kern-my-#{$key}-#{$breakpoint} {
                margin-top: #{$value};
                margin-bottom: #{$value};
            }

            // Responsive Padding Utilities
            .kern-p-#{$key}-#{$breakpoint} {
                padding: #{$value};
            }

            .kern-pt-#{$key}-#{$breakpoint} {
                padding-top: #{$value};
            }

            .kern-pr-#{$key}-#{$breakpoint} {
                padding-right: #{$value};
            }

            .kern-pb-#{$key}-#{$breakpoint} {
                padding-bottom: #{$value};
            }

            .kern-pl-#{$key}-#{$breakpoint} {
                padding-left: #{$value};
            }

            .kern-px-#{$key}-#{$breakpoint} {
                padding-left: #{$value};
                padding-right: #{$value};
            }

            .kern-py-#{$key}-#{$breakpoint} {
                padding-top: #{$value};
                padding-bottom: #{$value};
            }
        }
    }
}