// RIVER Design-System: Helpers - Widths //
@use "sass:math";

// A set of width helpers used for columns and other use cases.
// Be default we use percent widths such as .width--50%,
// as well as counted (column) widths, such as .width--6/12.
// Variations for .width: % width (eg, .width--100%), #/12 columns (eg, .width--6/12), as defined in settings.width

// We also create responsive width helpers such as .md:width--25%,
// and offset classes (margin-left) such as .offset--50%.

// Example usage with flex-cols:
// <div class="flex-cols"><div class="flex-col width--12/12 md:width--6/12">...</div></div>

@if(design-setting('helpers') and design-setting('helpers.widths', false)) {
    /* RIVER Design-System: Helpers - Widths */

    // Responsive
    @include design-breakpoints-query-up() using ($variation, $breakpoint) {
        $variation: design-transform-class-name($variation);

        // Width Helpers
        @if(design-setting('widths.width-helpers')) {
            .#{$variation}width--full {
                width: 100%;
            }
        }

        // Percent Widths
        // eg, .width--100%, md:width--50%, etc
        @if(length(design-setting('widths.percents')) > 0) {
            @each $width in design-setting('widths.percents') {
                $widthLabel: '' + $width;
                $widthLabel: str-replace($widthLabel, '%', '\\%');
                $widthLabel: str-replace($widthLabel, '.', '\\.');

                // Generic Width
                @if(design-setting('widths.width-helpers')) {
                    .#{$variation}width--#{$widthLabel} {
                        width: #{$width};
                    }
                }

                // Offset Width
                @if(design-setting('widths.offset-helpers')) {
                    .#{$variation}offset--#{$widthLabel} {
                        margin-left: #{$width};
                    }
                }
            }
        }

        // Count Widths
        // eg, .width--12/12, .md:width--6/12, etc
        @if(design-setting('widths.count')) {
            $widthsCount: design-setting('widths.count');
            @for $i from 1 through $widthsCount {
                $width: math.div($i, $widthsCount) * 100; // eg, 1/12 => 8.333 ...
                $widthLabel: $i + '\\/' + $widthsCount; // eg, 8\/12

                // Generic Width
                @if(design-setting('widths.width-helpers')) {
                    .#{$variation}width--#{$widthLabel} {
                        width: #{$width + '%'};
                    }
                }

                // Offset Width
                @if(design-setting('widths.offset-helpers')) {
                    .#{$variation}offset--#{$widthLabel} {
                        margin-left: #{$width + '%'};
                    }
                }
            }
        }

    }

}