@use "sass:list";

$wall-columns: 12 !default;
$wall-spacing: 0, 1, 2, 3, 4, 5, 8, 10, 12, 15, 16, 20, 24, 25, 30, 32, 40, 50, 60, 70, 80, 90, 100 !default;
$wall-ratio: ((1, 1), (2, 1), (1, 2), (3, 1), (1, 3), (3, 2), (2, 3), (4, 3), (3, 4), (16, 9)) !default;
$wall-rounded: 0, 2, 3, 4, 5, 6, 8, 10, 12, 15, 20, 24, 30 !default;
$wall-breakpoints: (
    xs: 0,
    sm: 576px,
    md: 768px,
    lg: 992px,
    xl: 1200px,
    xxl: 1400px
) !default;

@mixin _wall-columns($breakpoint-prefix:"") {
    @for $i from 1 through $wall-columns {
        &.wall--#{$breakpoint-prefix}cols-#{$i} {
            --columns: #{$i};
        }
    }
}

@mixin _wall-spacing($breakpoint-prefix:"") {
    @each $i in $wall-spacing {
        &.wall--#{$breakpoint-prefix}spacing-#{$i} {
            --spacing: #{$i}px;
        }
        &.wall--#{$breakpoint-prefix}spacing-x-#{$i} {
            --spacing-x: #{$i}px;
        }
        &.wall--#{$breakpoint-prefix}spacing-y-#{$i} {
            --spacing-y: #{$i}px;
        }
    }
}

@mixin _wall-ratio($breakpoint-prefix:"") {
    @each $i in $wall-ratio {
        &.wall--#{$breakpoint-prefix}ratio-#{list.nth($i, 1)}-#{list.nth($i, 2)} {
            --ratio: #{list.nth($i, 1)} / #{list.nth($i, 2)};
        }
    }
}

@mixin _wall-rounded($breakpoint-prefix:"") {
    @each $i in $wall-rounded {
        &.wall--#{$breakpoint-prefix}rounded-#{$i} {
            --rounded: #{$i}px;
        }
    }
    &.wall--#{$breakpoint-prefix}rounded {
        --rounded: 100%;
    }
}

.wall {
    --columns: 12;
    --spacing: 0px;
    --spacing-x: unset;
    --spacing-y: unset;
    --rounded: 0px;
    --ratio: unset;

    display: grid;
    grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
    column-gap: var(--spacing-x, var(--spacing));
    row-gap: var(--spacing-y, var(--spacing));
    width: 100%;
    height: auto;
    list-style: none;
    margin: 0;
    padding: 0;
    border: none;
    box-sizing: border-box;
    outline: none;

    & > .wall-col {
        width: 100%;
        max-width: 100%;
        height: auto;
        border-radius: var(--rounded);
        aspect-ratio: var(--ratio);
        margin: 0;
        padding: 0;
        border: none;
        box-sizing: border-box;
        outline: none;
    }

    &.wall--rounded > .wall-col,
    &[class*="wall--rounded-"] > .wall-col,
    &[class*="wall--ratio-"] > .wall-col {
        overflow: hidden;
    }

    @include _wall-columns();
    @include _wall-spacing();
    @include _wall-ratio();
    @include _wall-rounded();

    @each $breakpoint, $breakpoint-min-width in $wall-breakpoints {
        @media screen and (min-width: $breakpoint-min-width) {
            $breakpoint-prefix: #{$breakpoint}-;
            @include _wall-columns($breakpoint-prefix);
            @include _wall-spacing($breakpoint-prefix);
            @include _wall-ratio($breakpoint-prefix);
            @include _wall-rounded($breakpoint-prefix);
        }
    }
}