_helper.scss

// Fylgja (getfylgja.com)
// Licensed under MIT Open Source

@use "@fylgja/mq" as *;
@use "sass:list";
@use "sass:map";
@use "sass:math";

$enable-flex-gap: true !default;
$enable-flex-fill: false !default;
$enable-flex-offset: false !default;
$enable-flex-chunks: true !default;

$flex-grid-breakpoints: (
    xxs: 0,
    xs: $xs,
    sm: $sm,
    md: $md,
    lg: $lg,
    xl: $xl,
) !default;

$gap-size: 1rem !default;
$flex-grid-gaps: () !default;
$flex-grid-cells: (
    xxs: 2,
    xs: 3,
    sm: 3,
    md: 4,
    lg: 4,
    xl: 5,
) !default;

/// @param {String} $mq - breakpoint
/// @param {Map} $map - map to check breakpoints from
/// @return {*} - styles wrapped in a media query
@mixin flex-grid-mq($mq, $map: $flex-grid-breakpoints) {
    $mq-value: map.get($map, $mq);
    @if ($mq-value != 0) {
        @media ($mq-value) {
            @content;
        }
    } @else {
        @content;
    }
}

/// Creates grid gaps via the margin/padding trick
/// @param {Number} $size - the gap size
/// @param {String} $class - class to use
/// @return {*} - gap styles
@mixin flex-grid-gap($size, $class: "cell") {
    $x: if(list.length($size) == 2, list.nth($size, 2), list.nth($size, 1));
    $y: list.nth($size, 1);
    margin-right: math.div($x, -2);
    margin-left: math.div($x, -2);

    > .#{$class} {
        margin-bottom: $y;
        padding-right: math.div($x, 2);
        padding-left: math.div($x, 2);
    }
}

/// Creates grid cells
/// @param {Number} $i - How much iterations
/// @param {String} $mq - the cell media query
/// @param {Boolean} $chunks - If to render chunked sizes
/// @return {*} - cell styles
@mixin flex-grid-cells($mq, $size, $chunks: true) {
    @for $i from 1 through $size {
        > .cell.#{$mq}-#{$i} {
            flex: 0 0 auto;
            width: if($i == 1, 100%, calc(100% / #{$i}));
        }

        @if $chunks and ($i > 2) {
            @for $fi from 2 through ($i - 1) {
                > .cell.#{$mq}-#{$i}-#{$fi} {
                    flex: 0 0 auto;
                    width: calc((100% / #{$i}) * #{$fi});
                }
            }
        }
    }
}

/// Creates grid cells offsets
/// @param {Number} $i - How much iterations
/// @param {String} $mq - the cell media query
/// @param {Boolean} $chunks - If to render chunked sizes
/// @return {*} - cell offset styles
@mixin flex-grid-offsets($mq, $size, $chunks: true) {
    @for $i from 1 through $size {
        $name: if($i == 1, "none", $i);
        > .offset-#{$mq}-#{$name} {
            margin-left: if($i == 1, 0, calc(100% / #{$i}));
        }

        @if $chunks and ($i > 2) {
            @for $fi from 2 through ($i - 1) {
                > .offset-#{$mq}-#{$i}-#{$fi} {
                    margin-left: calc((100% / #{$i}) * #{$fi});
                }
            }
        }
    }
}