@use 'sass:list';
@use 'functions' as *;

// css variables exposed globally:
// --layout-column-count: columns count in the layout
// --layout-column-gap: gap size between columns
// --layout-margin: layout margin size (left or right)
// --layout-width: 100vw minus 2 * --layout-margin
// --layout-column-width: size of a single column

// css classes exposed globally:
// .layout-block: element takes the whole layout width
// .layout-block-inner: same as .layout-block but using padding instead of margin
// .layout-grid: extends .layout-block with grid behaviour using layout settings
// .layout-grid-inner: same as .layout-grid but using padding instead of margin

@use 'sass:map';

// config to fill
// 'variable': (mobile, desktop)
$layout: (
    'columns-count': (
        5,
        18,
    ),
    'columns-gap': (
        20px,
        20px,
    ),
    'margin': (
        30px,
        60px,
    ),
);

//internal process, do not touch
:root {
    --layout-column-count: #{list.nth(map.get($layout, 'columns-count'), 1)};
    --layout-column-gap: #{mobile-vw(
            list.nth(map.get($layout, 'columns-gap'), 1)
        )};
    --layout-margin: #{mobile-vw(list.nth(map.get($layout, 'margin'), 1))};
    --layout-width: calc(100vw - (2 * var(--layout-margin)));
    --layout-column-width: calc(
        (
                var(--layout-width) -
                    (
                        (var(--layout-column-count) - 1) *
                            var(--layout-column-gap)
                    )
            ) /
            var(--layout-column-count)
    );

    @include desktop {
        --layout-column-count: #{list.nth(map.get($layout, 'columns-count'), 2)};
        --layout-column-gap: #{desktop-vw(
                list.nth(map.get($layout, 'columns-gap'), 2)
            )};
        --layout-margin: #{desktop-vw(list.nth(map.get($layout, 'margin'), 2))};
    }
}

.layout-block {
    max-width: var(--layout-width);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.layout-block-inner {
    padding-left: var(--layout-margin);
    padding-right: var(--layout-margin);
    width: 100%;
}

.layout-grid {
    @extend .layout-block;

    display: grid;
    grid-template-columns: repeat(var(--layout-column-count), minmax(0, 1fr));
    grid-gap: var(--layout-column-gap);
}

.layout-grid-inner {
    @extend .layout-block-inner;

    display: grid;
    grid-template-columns: repeat(var(--layout-column-count), minmax(0, 1fr));
    grid-gap: var(--layout-column-gap);
}