@forward '../../shared/markdown-container';

$colmax: 6;

body {
    --grid-callout-default-columns: 3;
}

.callout[data-callout="grid"] {
    background: none;
    border: none;
    padding: 0;

    --n-col: var(--grid-callout-default-columns);

    > .callout-title {
        display: none;
    }

    > .callout-content {
        border: none;
        display: grid;
        align-items: flex-start;
        gap: 10px;
        padding: 0;
        grid-template-columns: repeat(var(--n-col), 1fr);
    }

    > .callout-content.callout-content > * {
        margin: 0;
    }

    @for $i from 2 through $colmax {
        &[data-callout-metadata~="col-#{$i}"] > .callout-content {
            --n-col: #{$i};
        }
    }

    @for $i from 2 through $colmax {
        > .callout-content > [data-callout-metadata~="span-#{$i}"] {
            grid-column: span #{$i};
        }
    }
}

@for $i from 2 through $colmax {
    $start: 250 + ($i - 3) * 150;
    $stop: 250 + ($i - 2) * 150;
    @if $i == 2 {
        $start: 0;
    }
    @container markdown-view (#{$start}px < width < #{$stop}px) {
        @for $j from $i through $colmax {
            .callout[data-callout="grid"][data-callout-metadata~="col-#{$j}"] > .callout-content {
                grid-template-columns: repeat(#{$i - 1}, 1fr);
            }
        }
    }

    @media print {
        @media (#{$start}px < width < #{$stop}px) {
            @for $j from $i through $colmax {
                .callout[data-callout="grid"][data-callout-metadata~="col-#{$j}"] > .callout-content {
                    grid-template-columns: repeat(#{$i - 1}, 1fr);
                }
            }
        }
    }
}

@media print {
    .print .markdown-preview-view [data-callout="grid"] > .callout-content {
        display: grid !important;
    }
}